:root{
  --white:#ffffff; --paper:#f7f6f3; --gold:#b98a45; --gold-deep:#8a6326; --gold-tint:#f5ecdd;
  --ink:#15264a; --muted:#5b6475; --line:#e6e0d4; --card:#ffffff; --on-gold:#ffffff;
  --display:"Saira Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body:"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wm-filter:none; --mark-bg:transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --white:#0f1a30; --paper:#13213b; --gold:#d3a864; --gold-deep:#e2bd7f; --gold-tint:#2a2a2a;
    --ink:#f1ece2; --muted:#b3b9c6; --line:#2b3a57; --card:#16243f; --on-gold:#15264a;
    --wm-filter:brightness(0) invert(1); --mark-bg:#ffffff; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --white:#0f1a30; --paper:#13213b; --gold:#d3a864; --gold-deep:#e2bd7f; --gold-tint:#2a2a2a;
  --ink:#f1ece2; --muted:#b3b9c6; --line:#2b3a57; --card:#16243f; --on-gold:#15264a;
  --wm-filter:brightness(0) invert(1); --mark-bg:#ffffff; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
button{font:inherit;cursor:pointer}

/* top strip + header */
.strip{background:var(--gold);color:var(--on-gold);font-size:13.5px}
.strip .wrap{display:flex;justify-content:space-between;gap:16px;padding:7px 0;flex-wrap:wrap}
.strip b{font-weight:600}
header.site{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--white) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:46px;height:42px;object-fit:contain;background:var(--mark-bg);border-radius:8px;padding:2px}
.brand .wm{height:22px;width:auto;filter:var(--wm-filter)}
.brand .catch-h{display:block;font-style:normal;font-family:var(--display);font-weight:600;font-size:13px;line-height:1.25;letter-spacing:.02em;color:var(--gold-deep);margin-top:5px;white-space:nowrap}
.brand small{display:block;font-size:11.5px;line-height:1.3;color:var(--muted);margin-top:4px;letter-spacing:.02em}
nav.main{display:flex;gap:2px;align-items:center}
nav.main a{text-decoration:none;padding:9px 12px;border-radius:6px;font-weight:500;font-size:15px;color:var(--ink);white-space:nowrap}
nav.main a.nav-find{display:inline-flex;align-items:center;gap:7px;background:var(--gold-tint);color:var(--ink);font-weight:600}
nav.main a.nav-find svg{width:17px;height:17px;color:var(--gold-deep)}
nav.main a.nav-find:hover{background:var(--line)}
nav.main a:hover{background:var(--gold-tint)}
nav.main a[aria-current="page"]{color:var(--gold-deep);box-shadow:inset 0 -2px 0 var(--gold)}
nav.main a.cta{background:var(--ink);color:var(--white);margin-left:8px}
nav.main a.cta:hover{background:var(--gold-deep)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:8px 12px;color:var(--ink)}
@media (max-width:860px){
  .menu-btn{display:block}
  nav.main{position:absolute;top:74px;left:0;right:0;background:var(--white);flex-direction:column;align-items:stretch;padding:10px 20px 18px;border-bottom:1px solid var(--line);display:none}
  nav.main.open{display:flex}
  nav.main a.cta{margin:8px 0 0;text-align:center}
  .brand small{display:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:6px;font-weight:600;text-decoration:none;border:2px solid transparent;font-size:16px;transition:background .15s,color .15s}
.btn.gold{background:var(--gold);color:var(--on-gold)}
.btn.gold:hover{background:var(--gold-deep)}
.btn.line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn.line:hover{background:var(--ink);color:var(--white)}
.btn.ink{background:var(--ink);color:var(--white)}
.btn.ink:hover{background:var(--gold-deep)}

/* hero */
.hero{position:relative;overflow:hidden;background:#0b203d;color:#fff;border-bottom:6px solid #a97c42}
.hero .art{position:absolute;top:0;bottom:0;right:0;width:62%;background:url(/assets/hero-blueprint.webp) right center/contain no-repeat}
.hero .art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b203d 0%,rgba(11,32,61,.85) 14%,rgba(11,32,61,0) 38%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,560px);min-height:620px;align-items:center;padding:64px 0 68px}
.hero .copy{position:relative}
.hero .copy::before{content:"";display:block;width:64px;height:5px;background:#a97c42;margin-bottom:26px}
.hero .finder label{color:#fff}
.hero .finder .field{border-color:#fff}
.hero .finder .field:focus-within{border-color:#d3a864}
.hero .finder button{background:#a97c42;color:#0b203d}
.hero .btn.gold{background:#a97c42;color:#0b203d}
.hero .btn.gold:hover{background:#d3a864}
.hero .btn.line{border-color:#fff;color:#fff}
.hero .btn.line:hover{background:#fff;color:#0b203d}
.hero .proof{border-top-color:rgba(255,255,255,.18)}
.hero .proof li{border-right-color:rgba(255,255,255,.18)}
.hero .proof b{color:#d3a864}
.hero .proof span{color:#c3cad6}
.hero .suggest{color:var(--ink)}
@media (min-width:901px) and (max-width:1180px){.hero .art{opacity:.45}}
@media (max-width:900px){
  .hero .art{width:100%;top:auto;height:300px;background-position:center bottom;opacity:.95}
  .hero .art::before{background:linear-gradient(180deg,#0b203d 0%,rgba(11,32,61,0) 45%)}
  .hero .wrap{min-height:0;padding:44px 0 290px}
}
.hero h1{font-size:clamp(36px,5vw,68px);text-transform:uppercase;letter-spacing:-.005em}
/* slideshow */
.slider{position:relative}
.slides{display:grid}
.slide{grid-area:1/1;position:relative;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.slide.on{opacity:1;visibility:visible;transition:opacity .7s ease}
@media (prefers-reduced-motion:reduce){.slide,.slide.on{transition:none}}
.sl-ctl{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(11,32,61,.62);border-radius:999px;padding:5px 8px;z-index:3}
.sl-ctl button{background:none;border:0;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.sl-ctl .sl-arrow{width:30px;height:30px;border-radius:50%}
.sl-ctl .sl-arrow:hover{background:rgba(255,255,255,.15)}
.sl-ctl .sl-arrow svg{width:16px;height:16px}
.sl-dots{display:flex;gap:4px}
.sl-dots button{width:26px;height:26px}
.sl-dots button::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:width .2s,background .2s}
.sl-dots button[aria-current="true"]::before{width:22px;border-radius:5px;background:#d3a864}
.hero .s-range .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:48px}
.hero .s-range .eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:13px;color:#d3a864;margin-bottom:12px}
.hero .s-range h2{font-size:clamp(32px,3.8vw,52px);text-transform:uppercase;color:#fff;letter-spacing:-.005em}
.hero .s-range .pic{margin:0}
.hero .s-range .pic img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.rb-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.rb-links a{padding:9px 14px;border:1.5px solid rgba(255,255,255,.55);border-radius:6px;font-weight:600;font-size:15px;color:#fff;text-decoration:none}
.rb-links a:hover{background:#fff;color:#0b203d}
@media (max-width:900px){
  .hero .s-range .wrap{grid-template-columns:1fr;gap:28px;padding:44px 0 84px}
}
/* product page: brake pad compounds slideshow */
.pslider .slide{color:#fff}
.pslider .c-ceramic{background:#0b203d}
.pslider .c-semi{background:#0d3b85}
.pslider .c-low{background:#e8b437;color:#0b203d}
.pslider .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;min-height:440px;padding:48px 0 72px}
.pslider .eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:13px;color:#d3a864}
.pslider .c-low .eyebrow{color:#0b203d}
.pslider h2{font-size:clamp(34px,4.4vw,58px);text-transform:uppercase;margin-top:12px;color:inherit}
.pslider .tag{font-family:var(--display);font-weight:600;font-size:20px;margin-top:6px;color:#d3a864}
.pslider .c-low .tag{color:#0b203d}
.pslider p.best{margin-top:16px;font-size:17.5px;max-width:30em;opacity:.92}
.pslider .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pslider .btn.gold{background:#a97c42;color:#0b203d}
.pslider .btn.gold:hover{background:#d3a864}
.pslider .btn.line{border-color:#fff;color:#fff}
.pslider .btn.line:hover{background:#fff;color:#0b203d}
.pslider .c-low .btn.gold{background:#0b203d;color:#fff}
.pslider .c-low .btn.gold:hover{background:#15315c}
.pslider .c-low .btn.line{border-color:#0b203d;color:#0b203d}
.pslider .c-low .btn.line:hover{background:#0b203d;color:#fff}
.pslider .pic{display:grid;place-items:center}
.pslider .pic img{max-height:330px;width:auto;max-width:100%;filter:drop-shadow(0 26px 30px rgba(0,0,0,.35))}
.pslider .slide.photo{background:#06152b}
.pslider .photo .pic img{max-height:none;width:100%;filter:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 64% 52%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 64% 52%,#000 45%,transparent 100%)}
@media (max-width:820px){.pslider .wrap{grid-template-columns:1fr;gap:20px;min-height:0;padding:36px 0 76px}.pslider .pic{order:-1}.pslider .pic img{max-height:200px}}
/* footer: STRAVIK brand values */
.fvals{display:flex;flex-wrap:wrap;gap:10px 28px;padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.fvals span{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:.01em}
.fvals b{color:var(--gold-deep);font-weight:700;font-size:22px}
.hero h1 span{display:block}
.hero .lede{margin-top:22px;font-size:19px;color:#d6dce6;max-width:30em}
.finder{margin-top:30px;position:relative;max-width:520px}
.finder label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px}
.finder .field{display:flex;border:2px solid var(--ink);border-radius:8px;background:var(--card);overflow:hidden}
.finder input{flex:1;border:0;padding:14px 16px;font:inherit;background:transparent;color:var(--ink);min-width:0}
.finder input:focus{outline:none}
.finder .field:focus-within{border-color:var(--gold)}
.finder button{border:0;background:var(--ink);color:var(--white);padding:0 20px;font-weight:600}
.suggest{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 40px -18px rgba(21,38,74,.35);z-index:20;max-height:320px;overflow:auto;display:none}
.suggest.show{display:block}
.suggest a{display:flex;gap:12px;align-items:center;padding:10px 14px;text-decoration:none;border-bottom:1px solid var(--line)}
.suggest a:last-child{border-bottom:0}
.suggest a:hover,.suggest a.active{background:var(--gold-tint)}
.suggest a svg{width:30px;height:30px;color:var(--gold-deep);flex:none}
.suggest small{display:block;color:var(--muted);font-size:13px}
.suggest .empty{padding:14px;color:var(--muted);font-size:15px}
.hero .actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* sections */
section.block{padding:88px 0}
section.paper{background:var(--paper)}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.head h2{font-size:clamp(34px,4vw,52px)}
.head p{color:var(--muted);max-width:34em;margin-top:12px}
.ranges{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.range{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.range .pic{background:var(--gold-tint);padding:28px 30px 0;height:270px;display:flex;align-items:flex-end;justify-content:center;border-bottom:4px solid var(--gold)}
.range .pic img{max-height:250px;object-fit:contain}
.range .body{padding:28px 30px 30px;display:flex;flex-direction:column;gap:16px;flex:1}
.range h3{font-size:32px}
.range p{color:var(--muted)}
.range ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.range li a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
.range li a:hover{color:var(--gold-deep)}
.range li span{color:var(--muted);font-size:14.5px;font-variant-numeric:tabular-nums}
.range .btn{align-self:flex-start;margin-top:auto}
@media (max-width:820px){.ranges{grid-template-columns:1fr}}

/* product ranges: three per row, picture on top */
.pcats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pcat{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.pcat .pic{background:var(--gold-tint);display:grid;place-items:center;padding:20px;border-bottom:4px solid var(--gold);height:190px;box-sizing:border-box}
.pcat .pic img{max-height:150px;width:100%;object-fit:contain}
.pcat .pic.photo,.fam-pic.photo{position:relative;overflow:hidden;padding:0;background:#03111f}
.pcat .pic.photo img,.fam-pic.photo img,body.hm .fam-pic.photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center 50%;filter:none}
.pcat .pic-ic{width:110px;height:110px;color:var(--gold-deep)}
.pcat .pic-ic svg{width:100%;height:100%}
.pcat .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px}
.pcat h3{font-size:23px}
.pcat p{color:var(--muted);font-size:15px}
.pcat .meta{color:var(--gold-deep);font-weight:600;font-size:14px}
.pcat .plinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.pcat .plinks{flex-direction:column;gap:8px}
.pcat .plinks .btn{padding:10px 13px;font-size:14.5px;width:100%;justify-content:center;text-align:center;box-sizing:border-box}
@media (max-width:1200px){.pcats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.pcats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pcats{grid-template-columns:minmax(0,1fr)}.pcat .pic{height:180px}}
.compounds{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.compound{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 24px 26px;text-decoration:none;display:flex;flex-direction:column;gap:10px}
.compound:hover{border-color:var(--gold)}
.compound img{height:170px;object-fit:contain;margin:0 auto 6px}
.compound h3{font-size:27px}
.compound .tag{color:var(--gold-deep);font-weight:600;font-size:14.5px}
.compound p{color:var(--muted);font-size:15.5px}
@media (max-width:900px){.compounds{grid-template-columns:1fr}}

.proof{list-style:none;padding:20px 0 0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:16px 0;border-top:1px solid var(--line);max-width:600px}
.proof li{padding-right:22px;margin-right:22px;border-right:1px solid var(--line)}
.proof li:last-child{border-right:0;margin-right:0;padding-right:0}
.proof b{display:block;font-family:var(--display);font-weight:700;font-size:28px;line-height:1.1;color:var(--gold-deep)}
.proof span{font-size:14px;color:var(--muted)}
.exp-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:56px;align-items:center}
.exp-big{position:relative;overflow:hidden;background:#15264a;color:#fff;border-radius:12px;padding:44px 40px 40px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.exp-big::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:120px;background:linear-gradient(160deg,#c49450,#a3762f);clip-path:polygon(55% 0,100% 0,100% 100%,0 100%)}
.exp-big .num{font-family:var(--display);font-weight:700;font-size:clamp(120px,14vw,180px);line-height:.82;color:#e3bd84;letter-spacing:-.02em;position:relative;z-index:1}
.exp-big .unit{font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.06em;margin-top:14px;position:relative;z-index:1}
.exp-big.brandpanel{background:#0b203d;justify-content:center;align-items:flex-start;gap:6px;padding:48px 44px}
.exp-big.brandpanel img{position:relative;z-index:1;width:min(300px,64%);height:auto}
.exp-big.brandpanel .unit{color:#d3a864;text-transform:none;letter-spacing:.01em;font-size:28px;margin-top:22px}
.exp-txt .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.exp-txt h2{font-size:clamp(32px,3.8vw,48px)}
.exp-txt p{color:var(--muted);margin-top:14px;font-size:18px;max-width:34em}
.exp-txt .checks{margin-top:24px}
.exp-txt .checks li{font-weight:600}
@media (max-width:900px){.exp-grid{grid-template-columns:1fr;gap:32px}.exp-big{min-height:0}}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.why div{padding:24px 30px 0 0}
.why div + div{padding-left:30px;border-left:1px solid var(--line)}
.why h3{font-size:25px}
.why p{color:var(--muted)}
@media (max-width:820px){.why{grid-template-columns:1fr}.why div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

.band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-60px;top:0;bottom:0;width:38%;background:var(--gold);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.band .wrap{position:relative;z-index:1;padding:64px 0;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.band h2{font-size:clamp(30px,3.6vw,46px);max-width:15em;color:#fff}
.band p{color:#c8cedb;margin-top:10px;max-width:34em}
.band .btn.gold{color:#15264a;background:#fff}
.band .btn.gold:hover{background:#f5ecdd}
@media (max-width:820px){.band::after{display:none}}

/* page heads */
.pagehead{background:var(--paper);border-bottom:1px solid var(--line);padding:52px 0 44px;position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:0;top:0;bottom:0;width:120px;background:var(--gold);clip-path:polygon(60% 0,100% 0,100% 100%,0 100%)}
.pagehead h1{font-size:clamp(40px,5vw,64px);text-transform:uppercase}
.pagehead p{color:var(--muted);margin-top:12px;max-width:40em;font-size:18px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--gold-deep);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* products */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.tabs a{text-decoration:none;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:15px;background:var(--card)}
.tabs a[aria-current="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.catalog{display:grid;grid-template-columns:260px 1fr;gap:44px;padding:44px 0 90px}
.side{position:sticky;top:100px;align-self:start}
.side h4{font-size:15px;color:var(--muted);font-family:var(--body);font-weight:600;margin:0 0 10px}
.side a{display:block;text-decoration:none;padding:8px 12px;border-left:2px solid var(--line);font-size:15px}
.side a:hover{border-color:var(--gold);color:var(--gold-deep)}
.side .tools{margin-bottom:26px;display:flex;flex-direction:column;gap:12px}
.side input[type=search]{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:var(--card);color:var(--ink)}
.side input[type=search]:focus{border-color:var(--gold);outline:none}
.toggle{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.toggle input{accent-color:var(--gold);width:18px;height:18px}
.group{margin-bottom:54px;scroll-margin-top:100px}
.group h2{font-size:30px;padding-bottom:12px;border-bottom:2px solid var(--gold);margin-bottom:22px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.group h2 span{font-family:var(--body);font-size:14px;font-weight:500;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:border-color .15s}
.card:hover{border-color:var(--gold)}
.card .ic{width:62px;height:62px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);display:grid;place-items:center}
.card .ic svg{width:44px;height:44px}
.card h3{font-size:20px;line-height:1.15}
.card p{font-size:14.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.new{position:absolute;top:14px;right:14px;background:var(--gold);color:var(--on-gold);font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.noresults{padding:40px;border:1.5px dashed var(--line);border-radius:10px;text-align:center;color:var(--muted)}
@media (max-width:900px){.catalog{grid-template-columns:1fr;gap:20px}.side{position:static}.side nav{display:none}}

/* detail */
.detail{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;padding:48px 0 70px;align-items:start}
.visual{background:var(--gold-tint);border-radius:12px;min-height:420px;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:5px solid var(--gold)}
.visual .big{width:58%;color:var(--gold-deep)}
.visual .big svg{width:100%;height:auto}
.visual .corner{position:absolute;right:16px;bottom:16px;width:120px;opacity:.95}
.visual img.box{width:88%;filter:drop-shadow(0 20px 26px rgba(0,0,0,.2))}
.info h1{font-size:clamp(38px,4.4vw,56px)}
.info .type{color:var(--gold-deep);font-weight:600;margin-bottom:10px}
.info .desc{font-size:19px;margin-top:18px}
.replace{margin-top:24px;padding:16px 18px;border-left:4px solid var(--gold);background:var(--paper);border-radius:0 6px 6px 0}
.replace b{display:block;font-size:14.5px;margin-bottom:2px}
.replace span{color:var(--muted)}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.info .actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.chooser{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.chooser button{padding:10px 16px;border-radius:6px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:600}
.chooser button[aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:var(--on-gold)}
.compound-detail{margin-top:18px}
.compound-detail .best{color:var(--muted);margin-top:6px}
.related h2{font-size:30px;margin-bottom:20px}
@media (max-width:900px){.detail{grid-template-columns:1fr;gap:30px}.visual{min-height:300px}}

/* about */
.about-lead{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-lead .txt p + p{margin-top:16px}
.about-lead .txt p{color:var(--muted);font-size:18px}
.about-lead .txt p.first{color:var(--ink);font-size:22px;font-family:var(--display);font-weight:600;line-height:1.25}
.about-lead .pics{position:relative;height:420px}
.about-lead .pics img{position:absolute;filter:drop-shadow(0 20px 26px rgba(0,0,0,.2))}
.about-lead .pics .p1{width:72%;left:0;top:0}
.about-lead .pics .p2{width:66%;right:0;bottom:0}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.values div{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:8px;padding:24px}
.values h3{font-size:23px;margin-bottom:8px}
.values p{color:var(--muted);font-size:15.5px}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mv div{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:10px;padding:30px 32px}
.mv h2{font-size:clamp(28px,3vw,38px)}
.mv p{margin-top:12px;font-size:17px;line-height:1.65;color:var(--ink)}
.bv{background:#15264a;color:#fff;position:relative;overflow:hidden;border-bottom:6px solid #c49450}
.bv .wrap{position:relative;z-index:1;padding:80px 0}
.bv h2{font-size:clamp(32px,3.8vw,48px);color:#fff}
.bv .lede{color:#c8cedb;margin-top:10px;max-width:48em;font-size:17px}
.acro{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-top:1px solid rgba(255,255,255,.18)}
.acro li{padding:26px 18px 6px 0}
.acro li+li{padding-left:18px;border-left:1px solid rgba(255,255,255,.18)}
.acro .l{display:block;font-family:var(--display);font-weight:700;font-size:clamp(56px,6vw,84px);line-height:.9;color:#e3bd84}
.acro b{display:block;font-family:var(--display);font-weight:700;font-size:21px;margin-top:12px;color:#fff}
.acro span.d{display:block;color:#c8cedb;font-size:14.5px;line-height:1.45;margin-top:6px}
.promise{margin-top:52px;font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,54px);line-height:1.05;color:#fff;text-transform:uppercase;letter-spacing:.005em}
.promise span{display:inline-block;margin-right:.35em}
.promise span:last-child{color:#e3bd84}
@media (max-width:1100px){.acro{grid-template-columns:repeat(4,1fr)}.acro li:nth-child(5){border-left:0;padding-left:0}}
@media (max-width:700px){.mv{grid-template-columns:1fr}.acro{grid-template-columns:1fr}.acro li,.acro li+li{display:grid;grid-template-columns:64px 1fr;column-gap:16px;padding:18px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .acro .l{grid-row:span 2;font-size:58px}.acro b{margin-top:2px}}
.values.three{grid-template-columns:repeat(3,1fr)}
.values.three p{font-size:16px;line-height:1.6}
.values .links{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.values .links a{color:var(--gold-deep);font-weight:600;text-decoration:none}
.values .links a:hover{text-decoration:underline}
@media (max-width:900px){.values.three{grid-template-columns:1fr}}
.zp{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:36px}
.zp .badge{width:130px;height:130px;border-radius:50%;background:#fff;border:3px solid var(--gold);color:var(--on-gold);display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:700;font-size:44px;line-height:1}
.zp .badge small{display:block;font-size:13px;font-weight:600;margin-top:4px;letter-spacing:.04em}
.zp h3{font-size:30px;margin-bottom:10px}
.zp p{color:var(--muted)}
@media (max-width:900px){.about-lead{grid-template-columns:1fr}.about-lead .pics{height:340px}.values{grid-template-columns:1fr 1fr}.zp{grid-template-columns:1fr}}
@media (max-width:560px){.values{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;padding:50px 0 90px}
form.enq{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.enq .full{grid-column:1/-1}
form.enq label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
form.enq input,form.enq select,form.enq textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:var(--card);color:var(--ink)}
form.enq textarea{min-height:130px;resize:vertical}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{border-color:var(--gold);outline:none}
.err{color:#b3261e;font-size:14px;margin-top:4px;display:none}
.invalid + .err{display:block}
.invalid{border-color:#b3261e !important}
.note{font-size:14px;color:var(--muted)}
.ready{display:none;margin-top:6px;padding:16px 18px;border-radius:8px;background:var(--gold-tint);border:1px solid var(--gold)}
.ready.show{display:block}
.ready a{font-weight:600;color:var(--gold-deep)}
.details{background:var(--ink);color:#fff;border-radius:12px;padding:34px;align-self:start;position:relative;overflow:hidden}
.details::after{content:"";position:absolute;right:0;bottom:0;width:90px;height:90px;background:var(--gold);clip-path:polygon(100% 0,100% 100%,0 100%)}
.details h3{font-size:28px;margin-bottom:18px;color:#fff}
.details dl{margin:0;display:grid;gap:16px}
.details dt{font-size:13.5px;color:#c8cedb}
.details dd{margin:2px 0 0;font-weight:600}
.details dd a{color:#e7c58e}
@media (max-width:900px){.contact{grid-template-columns:1fr}form.enq{grid-template-columns:1fr}}

/* filters */
.fband{background:#15264a;color:#fff;position:relative;overflow:hidden}
.fband::after{content:"";position:absolute;right:-60px;top:0;bottom:0;width:34%;background:var(--gold);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.fband .wrap{position:relative;z-index:1;padding:60px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.fband .kicker{font-weight:600;color:#e7c58e;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase}
.fband h2{font-size:clamp(32px,3.8vw,48px);color:#fff;margin-top:8px}
.fband p{color:#c8cedb;margin-top:12px;max-width:32em}
.fband .types{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fband .types a{color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14.5px}
.fband .types a:hover{border-color:#e7c58e;color:#e7c58e}
.fband form{background:var(--card);color:var(--ink);border-radius:10px;padding:24px;box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.fband form label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px}
.fband form .field{display:flex;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--card)}
.fband form .field:focus-within{border-color:var(--gold)}
.fband form input{flex:1;border:0;padding:13px 14px;font:inherit;background:transparent;color:var(--ink);min-width:0}
.fband form input:focus{outline:none}
.fband form button{border:0;background:var(--gold);color:var(--on-gold);padding:0 20px;font-weight:600}
.fband form small{display:block;color:var(--muted);margin-top:10px;font-size:13.5px}
@media (max-width:900px){.fband .wrap{grid-template-columns:1fr}.fband::after{display:none}}
.side label.lbl{display:block;font-weight:600;font-size:14.5px;margin-bottom:-6px}
.side select{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:var(--card);color:var(--ink)}
.side select:focus{border-color:var(--gold);outline:none}
.fcount{color:var(--muted);font-size:14.5px}
.side .ftypes-nav a{display:flex;justify-content:space-between;gap:10px}
.side .ftypes-nav a span{color:var(--muted);font-size:13.5px}
.side .ftypes-nav a[aria-current="true"]{border-color:var(--gold);color:var(--gold-deep);font-weight:600}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 16px 18px;text-decoration:none;display:grid;grid-template-columns:50px minmax(0,1fr);gap:2px 14px;align-content:start;transition:border-color .15s}
.fcard:hover{border-color:var(--gold)}
.fcard .ic{grid-row:span 2;width:50px;height:50px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);display:grid;place-items:center}
.fcard .ic svg{width:38px;height:38px}
.fcard .pn{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.01em;line-height:1.2;font-variant-numeric:tabular-nums}
.fcard .ty{font-size:14px;color:var(--gold-deep);font-weight:600;line-height:1.35}
.fcard .veh,.fcard .nums{grid-column:1/-1;font-size:14px;color:var(--muted);line-height:1.45;margin-top:8px;overflow-wrap:anywhere}
.fcard .nums{margin-top:4px}
.fcard .nums b,.fcard .veh b{color:var(--ink);font-weight:600}
.fcard mark{background:var(--gold-tint);color:inherit;border-radius:3px;padding:0 2px}
.more{display:flex;justify-content:center;margin-top:28px}
.loading{color:var(--muted);padding:30px 0}
.fdetail .visual .big{width:46%}
@media (max-width:700px){.fhead::after{width:36px}.fhead .wrap{padding-right:28px}.fhead h1{font-size:clamp(30px,9vw,44px);overflow-wrap:anywhere}}
.fdetail .visual .tag{position:absolute;left:18px;top:18px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:600;font-size:13.5px;color:var(--gold-deep)}
.fdetail .info h1{font-variant-numeric:tabular-nums;letter-spacing:0}
.specs{margin:26px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 24px;border-top:1px solid var(--line);padding-top:20px}
.specs dt{color:var(--muted);font-size:15px}
.specs dd{margin:0;font-weight:500}
.nums-h{margin-top:26px;font-size:15px;color:var(--muted);font-family:var(--body);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips span{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 10px;font-size:14.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* products dropdown */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:9px 12px;border-radius:6px;font:inherit;font-weight:500;font-size:15px;color:var(--ink);cursor:pointer}
.dd-btn:hover,.dd.open .dd-btn{background:var(--gold-tint)}
.dd-btn[aria-current="page"]{color:var(--gold-deep);box-shadow:inset 0 -2px 0 var(--gold)}
.dd-btn svg{width:12px;height:12px;transition:transform .15s}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 8px);left:-10px;width:370px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 22px 44px -20px rgba(21,38,74,.4);padding:8px;display:none;z-index:50}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.dd-co .dd-menu{width:320px}
.dd.open .dd-menu{display:block}
nav.main .dd-menu a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;font-weight:600;font-size:15.5px;line-height:1.25}
nav.main .dd-menu a:hover{background:var(--gold-tint)}
nav.main .dd-menu a[aria-current="page"]{box-shadow:none;background:var(--gold-tint)}
.dd-menu .dd-ic{width:40px;height:40px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);display:grid;place-items:center;flex:none}
.dd-menu .dd-ic svg{width:30px;height:30px}
.dd-menu small{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:2px}
nav.main .dd-menu a.dd-sub{margin:0 0 4px 52px;padding:8px 12px;border-left:2px solid var(--gold);border-radius:0 8px 8px 0;color:var(--gold-deep)}
nav.main .dd-menu a.dd-all{border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:4px;padding-top:12px;font-weight:500;color:var(--muted)}
nav.main a.cart-link{display:inline-flex;align-items:center;gap:7px}
.cart-link svg{width:20px;height:20px}
[data-cart-count]{display:inline-block;background:var(--gold);color:var(--on-gold);border-radius:999px;min-width:22px;padding:1px 7px;font-size:12.5px;font-weight:700;text-align:center;line-height:1.5}
[data-cart-count][data-empty="true"]{background:var(--line);color:var(--muted)}
@media (max-width:860px){
  .dd-btn{width:100%;justify-content:space-between;padding:9px 14px}
  .dd-menu{position:static;width:auto;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 14px;padding:4px 0 4px 6px}
  .dd-menu::before{display:none}
  nav.main .dd-menu a.dd-sub{margin-left:58px}
}

/* filter catalogue: list / cards */
.fbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.fbar .fcount{margin:0}
.vtoggle{display:inline-flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.vtoggle button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:7px 13px;font:inherit;font-size:14px;font-weight:600;color:var(--muted)}
.vtoggle button+button{border-left:1.5px solid var(--line)}
.vtoggle button:hover{color:var(--ink)}
.vtoggle button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.vtoggle svg{width:16px;height:16px}
.ftable-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.ftable{width:100%;border-collapse:collapse;font-size:14.5px}
.ftable th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;padding:10px 12px;background:var(--paper);border-bottom:1px solid var(--line);white-space:nowrap}
.ftable td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:top;line-height:1.4}
.ftable tbody tr:first-child td{border-top:0}
.ftable tbody tr{cursor:pointer}
.ftable tbody tr:hover td{background:var(--gold-tint)}
.ftable td.fpn a{font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.ftable td.fpn a:hover{color:var(--gold-deep)}
.ftable td.fty b{display:block;font-weight:600;color:var(--gold-deep);white-space:nowrap}
.ftable td.fty span,.ftable td.fveh,.ftable td.fnum{color:var(--muted)}
.ftable td.fnum{overflow-wrap:anywhere;max-width:230px;font-variant-numeric:tabular-nums}
.ftable td.fact{text-align:right;white-space:nowrap;width:1%}
.ftable mark{background:var(--gold-tint);color:inherit;border-radius:3px;padding:0 2px}
.fadd.inline{position:static}
@media (max-width:700px){
  .ftable thead{display:none}
  .ftable,.ftable tbody,.ftable tr,.ftable td{display:block;width:100%}
  .ftable tbody tr{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:12px 14px;border-top:1px solid var(--line)}
  .ftable tbody tr:first-child{border-top:0}
  .ftable td{border:0!important;padding:0}
  .ftable td.fpn{grid-column:1;grid-row:1}
  .ftable td.fact{grid-column:2;grid-row:1}
  .ftable td.fty,.ftable td.fveh,.ftable td.fnum{grid-column:1/-1}
  .ftable td.fty b{display:inline}
  .ftable td.fveh:not(:empty)::before{content:"Fits ";font-weight:600;color:var(--ink)}
  .ftable td.fnum:not(:empty)::before{content:"OE / ref. ";font-weight:600;color:var(--ink)}
  .ftable td.fnum{max-width:none}
}

/* filter catalogue search bar */
.fsearch{position:sticky;top:74px;z-index:6;background:var(--white);padding:2px 0 14px;margin-top:-2px}
.fs-box{position:relative;display:block}
.fs-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}
.fs-box input{width:100%;height:54px;border:2px solid var(--ink);border-radius:10px;padding:0 48px 0 48px;font:inherit;font-size:16.5px;background:var(--card);color:var(--ink)}
.fs-box input::placeholder{color:var(--muted)}
.fs-box input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.fs-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.fs-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.fs-x:hover{background:var(--gold-tint);color:var(--ink)}
.fs-hint{display:block;font-size:13.5px;color:var(--muted);margin-top:8px}
.fbar-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fbar select{padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;font:inherit;font-size:15px;background:var(--card);color:var(--ink);max-width:220px}
.fbar select:focus{border-color:var(--gold);outline:none}
@media (max-width:900px){.fsearch{padding-top:10px}.fs-hint{display:none}.fside{display:none}}

/* steering & suspension catalogue */
.ftable .n{white-space:nowrap}
.fcard .n{white-space:nowrap}
.ftable.ss td.fctr{white-space:nowrap;font-variant-numeric:tabular-nums}
.ftable.ss td.fctr b{display:block;font-weight:600}
.ftable.ss td.fctr span{display:block;color:var(--muted);font-size:13px}
.ftable td.fveh b.fmk{display:block;color:var(--ink);font-weight:600}
.mkreg{font-size:18px;margin:20px 0 10px;color:var(--muted);font-family:var(--body);font-weight:600}
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.mk{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none;font-weight:600}
.mk:hover{border-color:var(--gold);color:var(--gold-deep)}
.mk span{color:var(--muted);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}
.sib{margin-top:12px;color:var(--muted);font-size:15px}
.sib a{color:var(--gold-deep);font-weight:600}
.apph{font-size:30px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.apph span{font-family:var(--body);font-size:14px;font-weight:500;color:var(--muted)}
.ctable.apps td{padding:10px 14px}
.ctable.apps td.mc{overflow-wrap:anywhere;color:var(--muted);font-variant-numeric:tabular-nums}
.ctable.apps td.yr{white-space:nowrap;font-variant-numeric:tabular-nums}
.ctable.apps .dim{color:var(--muted)}
.catcall{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:44px}
.catcall a{display:flex;gap:16px;align-items:center;padding:20px;border-radius:10px;background:#15264a;color:#fff;text-decoration:none}
.catcall a:hover{background:#1d3260}
.catcall .ic{width:56px;height:56px;border-radius:10px;background:rgba(255,255,255,.1);color:#e3bd84;display:grid;place-items:center;flex:none}
.catcall .ic svg{width:40px;height:40px}
.catcall b{display:block;font-family:var(--display);font-size:22px}
.catcall small{color:#c8cedb;font-size:14px}
@media (max-width:700px){
  .catcall{grid-template-columns:1fr}
  .ftable.ss td.fctr{grid-column:1/-1}
  .ftable.ss td.fctr b,.ftable.ss td.fctr span{display:inline;margin-right:6px}
  .ftable.ss td.fctr::before{content:"CTR ";font-weight:600;color:var(--ink)}
  .ftable td.fveh b.fmk{display:inline}
  .ctable.apps thead{display:table-header-group}
}

/* cart */
.fcell{position:relative;display:grid}
.fcell .fcard{padding-bottom:60px}
.fadd{position:absolute;left:16px;bottom:16px;border:1.5px solid var(--gold);background:var(--card);color:var(--gold-deep);border-radius:6px;padding:6px 12px;font-weight:600;font-size:14px;line-height:1.3}
.fadd:hover{background:var(--gold-tint)}
.fadd[data-on="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.buy{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:28px}
.buy label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.buy input{width:96px;padding:12px;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:var(--card);color:var(--ink);text-align:center}
.buy input:focus{border-color:var(--gold);outline:none}
.info .buy + .actions{margin-top:14px}
.fcart{position:fixed;right:16px;bottom:16px;z-index:60;display:none;align-items:center;gap:10px;background:#15264a;color:#fff;padding:12px 16px 12px 18px;border-radius:999px;text-decoration:none;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
.fcart.show{display:inline-flex}
.fcart:hover{background:#8a6326}
.fcart svg{width:20px;height:20px}
.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,16px);opacity:0;transition:opacity .2s,transform .2s;background:var(--gold);color:var(--on-gold);padding:12px 18px;border-radius:8px;font-weight:600;z-index:70;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
.cartwrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);gap:32px;padding:44px 0 90px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:10px;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:26px}
.panel-head .muted{color:var(--muted);font-family:var(--body);font-size:15px;font-weight:500}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:14.5px;color:var(--muted);text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:#b3261e}
.ctable{width:100%;border-collapse:collapse;font-size:15px}
.ctable th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:10px 14px;background:var(--paper)}
.ctable td{padding:14px;border-top:1px solid var(--line);vertical-align:top}
.ctable .catrow td{background:var(--paper);font-weight:600;font-size:13.5px;color:var(--gold-deep);padding:8px 14px}
.ctable td.no{font-family:var(--display);font-weight:700;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ctable td.no a{text-decoration:none}
.ctable td.no a:hover{color:var(--gold-deep)}
.ctable td.dsc{color:var(--muted)}
.ctable td.dsc .nlbl{display:block;color:var(--ink);font-weight:600;font-size:13.5px}
.ctable td.dsc input{margin-top:6px;width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:6px;font:inherit;font-size:14.5px;background:var(--card);color:var(--ink)}
.ctable td.qty input{width:82px;padding:8px;border:1.5px solid var(--line);border-radius:6px;font:inherit;text-align:center;background:var(--card);color:var(--ink)}
.ctable input:focus{border-color:var(--gold);outline:none}
.ctable td.rm{text-align:right}
.cempty{padding:34px 20px;text-align:center}
.cempty p{color:var(--muted);margin-bottom:18px}
.cempty .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cfoot{padding:14px 20px;border-top:1px solid var(--line);font-size:15px}
.cfoot a{color:var(--gold-deep)}
.panel form.enq{padding:20px}
.panel form.enq .note{grid-column:1/-1;margin:-4px 0 0}
.status{display:none;grid-column:1/-1;padding:14px 16px;border-radius:8px;background:#fdf3f2;border:1px solid #f2c7c3;color:#8c1d18;font-size:15px}
.status.show{display:block}
.status a{color:#8c1d18;font-weight:600}
.thanks{max-width:680px;margin:50px auto 90px;text-align:center;padding:42px 24px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:10px}
.thanks .tick{width:64px;height:64px;border-radius:50%;background:var(--gold);display:grid;place-items:center;margin:0 auto 18px}
.thanks h1{font-size:clamp(30px,4vw,42px)}
.thanks p{color:var(--muted);margin-top:10px}
.refbox{display:inline-flex;align-items:center;gap:12px;margin:20px 0 6px;padding:14px 18px;background:var(--gold-tint);border:1.5px dashed var(--gold);border-radius:8px;flex-wrap:wrap;justify-content:center}
.refbox span{font-size:13px;color:var(--muted);font-weight:600}
.refbox strong{font-family:var(--display);font-size:26px;letter-spacing:.03em}
.refbox button{font:inherit;font-size:14px;background:var(--card);border:1.5px solid var(--gold);color:var(--gold-deep);border-radius:6px;padding:5px 12px;cursor:pointer}
.thanks .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
@media (max-width:900px){.cartwrap{grid-template-columns:1fr}}
@media (max-width:640px){
  .ctable thead{display:none}
  .ctable,.ctable tbody,.ctable tr,.ctable td{display:block;width:100%}
  .ctable tr.item{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px;border-top:1px solid var(--line)}
  .ctable tr.item td{border:0;padding:0}
  .ctable tr.item td.qty{grid-column:2;grid-row:1/span 2}
  .ctable tr.item td.dsc{grid-column:1}
  .ctable tr.item td.rm{grid-column:2;text-align:right}
}

/* keep the catalogue on screen only */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,select{-webkit-user-select:text;user-select:text}
::selection{background:transparent;color:inherit}
input::selection,textarea::selection{background:var(--gold-tint);color:var(--ink)}
img,svg{-webkit-user-drag:none;user-drag:none}
@media print{
  body>*{display:none!important}
  body::before{content:"This page can't be printed. For a Stravik catalogue, email info@zenterparts.com.";display:block;padding:40px;font:16px/1.5 sans-serif;color:#000}
}

/* footer */
footer.site{border-top:4px solid var(--gold);background:var(--paper);padding:54px 0 30px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer h4{font-size:17px;margin-bottom:12px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
footer a{text-decoration:none;color:var(--muted)}
footer a:hover{color:var(--gold-deep)}
footer .wm{height:20px;filter:var(--wm-filter);margin-bottom:14px}
footer .about p.catch{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);margin-bottom:6px}
footer .about p{color:var(--muted);max-width:26em}
footer .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}footer .about{grid-column:1/-1}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== search-first home ===== */
.hero.hfind .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:48px;min-height:600px;padding:56px 0 64px}
.hero.hfind h1{font-size:clamp(34px,4.2vw,58px)}
.hero.hfind .eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:13px;color:#d3a864;margin-bottom:14px}
.hero.hfind .lede{font-size:18px;margin-top:16px}
.hvis{position:relative;align-self:stretch;min-height:440px}
.hvis .slides,.hvis .slide{height:100%}
.hvis .slide{min-height:440px}
.hero .hvis .art{position:absolute;inset:0;width:auto;height:auto;top:0;opacity:1;background:url(/assets/hero-blueprint.webp) center/contain no-repeat}
.hero .hvis .art::before{display:none}
.hvis .v-range{display:grid;place-items:center}
.hvis .v-range figure{margin:0;width:100%}
.hvis .v-range img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hvis .v-range figcaption{margin-top:12px;font-family:var(--display);font-weight:600;color:#d3a864;text-align:center;letter-spacing:.02em}
.hvis .sl-ctl{bottom:0}
@media (max-width:900px){
  .hero.hfind .wrap{grid-template-columns:1fr;gap:28px;padding:40px 0 48px;min-height:0}
  .hvis,.hvis .slide{min-height:260px}
  .hero .hvis .art{inset:0;height:auto;background-position:center}
}
/* search panel */
.spanel{margin-top:26px;background:#fff;border-radius:12px;padding:6px 18px 18px;box-shadow:0 24px 50px -28px rgba(0,0,0,.55);color:#0b203d;max-width:600px}
.findhead .spanel{box-shadow:none;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:760px}
.stabs{display:flex;gap:4px;border-bottom:1px solid #e6e0d4;margin-bottom:16px}
.stabs button{background:none;border:0;padding:12px 6px;margin-right:16px;font:inherit;font-weight:600;font-size:15px;color:#5b6475;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.stabs button[aria-selected="true"]{color:inherit;border-bottom-color:#a97c42}
.spanel .field{display:flex;border:2px solid #0b203d;border-radius:8px;overflow:hidden;background:#fff}
.findhead .spanel .field{border-color:var(--ink);background:var(--card)}
.spanel .field input{flex:1;min-width:0;border:0;padding:14px 16px;font:inherit;font-size:16.5px;background:transparent;color:inherit}
.spanel .field input:focus{outline:none}
.spanel .field:focus-within{border-color:#a97c42}
.spanel .field button{border:0;background:#a97c42;color:#0b203d;font-weight:700;padding:0 22px;font-size:16px;cursor:pointer}
.spanel .field button:hover{background:#d3a864}
.spanel small{display:block;margin-top:10px;color:#5b6475;font-size:13.5px}
.findhead .spanel small{color:var(--muted)}
.spanel small a{color:inherit}
.vgrid{display:grid;grid-template-columns:1.1fr 1.2fr .8fr auto;gap:12px;align-items:end}
.vgrid label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px}
.vgrid select,.vgrid input{width:100%;padding:12px;border:1.5px solid #c9c2b3;border-radius:8px;font:inherit;font-size:15.5px;background:#fff;color:#0b203d}
.findhead .vgrid select,.findhead .vgrid input{background:var(--card);color:var(--ink);border-color:var(--line)}
.vgrid .vgo .btn{padding:12px 18px;white-space:nowrap}
@media (max-width:640px){.vgrid{grid-template-columns:1fr 1fr}.vgrid .vgo{grid-column:1/-1}.vgrid .vgo .btn{width:100%;justify-content:center}}
/* product families */
.eyebrow-d{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:13px;color:var(--gold-deep);margin-bottom:10px}
.fams{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fam{background:var(--card);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;border-top:4px solid var(--gold)}
.fam:hover{border-color:var(--gold)}
.fam-top{display:flex;flex-direction:column;gap:10px;padding:22px 22px 14px;text-decoration:none;flex:1}
.fam .ic{width:54px;height:54px;border-radius:10px;background:var(--gold-tint);color:var(--gold-deep);display:grid;place-items:center}
.fam .ic svg{width:40px;height:40px}
.fam h3{font-size:24px}
.fam p{color:var(--muted);font-size:15px}
.fam small{color:var(--gold-deep);font-weight:600;font-size:13.5px;min-height:1.2em}
.fam-cat{display:block;padding:13px 22px;border-top:1px solid var(--line);font-weight:600;text-decoration:none;color:var(--ink)}
.fam-cat:hover{background:var(--gold-tint)}
@media (max-width:1000px){.fams{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fams{grid-template-columns:1fr}}
/* news */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news.all{grid-template-columns:repeat(2,1fr)}
.newsc a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none}
.newsc a:hover{border-color:var(--gold)}
.npic{height:170px;background:var(--gold-tint);display:grid;place-items:center;padding:16px}
.npic img{max-height:140px;width:auto;max-width:100%;object-fit:contain}
.npic .ic{width:90px;height:90px;color:var(--gold-deep)}.npic .ic svg{width:100%;height:100%}
.nbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.nwhen{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.nbody h3{font-size:22px}
.nbody p{color:var(--muted);font-size:15px}
.ncta{margin-top:auto;font-weight:600;padding-top:6px}
@media (max-width:900px){.news,.news.all{grid-template-columns:1fr}}
/* trade band */
.tradeband{background:#0b203d;color:#fff;border-top:6px solid #a97c42}
.tradeband .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;padding:60px 0;align-items:center}
.tradeband .eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:13px;color:#d3a864;margin-bottom:10px}
.tradeband h2{color:#fff;font-size:clamp(28px,3.2vw,42px)}
.tradeband p{color:#c3cad6;margin-top:12px;max-width:32em}
.tb-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tb-links a{display:flex;flex-direction:column;gap:4px;padding:18px 18px;border:1px solid rgba(255,255,255,.18);border-radius:10px;text-decoration:none;color:#fff;background:rgba(255,255,255,.03)}
.tb-links a:hover{border-color:#d3a864;background:rgba(255,255,255,.07)}
.tb-links b{font-family:var(--display);font-size:20px}
.tb-links span{color:#c3cad6;font-size:14.5px}
@media (max-width:900px){.tradeband .wrap{grid-template-columns:1fr}.tb-links{grid-template-columns:1fr}}
/* find a part results */
.findhead .spanel{margin-top:22px}
.results{padding:34px 0 70px}
.rsum{font-size:17px;margin-bottom:22px}
.rgroup{margin-bottom:38px}
.rgroup h2{font-size:28px;margin-bottom:14px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.rgroup h2 span{font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted)}
.rmore{margin-top:14px}
.fhelp{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.fhelp div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px}
.fhelp h3{font-size:21px;margin-bottom:8px}
.fhelp p{color:var(--muted);font-size:15px}
.fhelp a{color:var(--gold-deep)}
@media (max-width:900px){.fhelp{grid-template-columns:1fr}}
.cantfind{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--gold-tint);border-left:5px solid var(--gold);border-radius:8px;padding:22px 24px;margin-top:10px}
.cantfind h3{font-size:24px}
.cantfind p{color:var(--muted);margin-top:4px;max-width:44em}
/* where to buy */
.markets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.markets div{border-top:4px solid var(--gold);background:var(--card);border-radius:0 0 10px 10px;padding:22px;border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.markets h3{font-size:24px;margin-bottom:6px}
.markets p{color:var(--muted)}
@media (max-width:900px){.markets{grid-template-columns:1fr}}
form.enq .opt{font-weight:400;color:var(--muted);font-size:13px}
/* generated part pages */
.boxshot{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-top:22px}
.boxshot img{width:120px;height:auto}
.boxshot b{display:block;font-family:var(--display);font-size:18px}
.boxshot span{color:var(--muted);font-size:14.5px}
.related .fgrid{margin-top:16px}
.pp-note{color:var(--muted);font-size:14px;margin-top:10px}
.findhead .wrap{position:relative;z-index:1}
@media (max-width:900px){.findhead::after{display:none}}

/* ===== Products mega menu (cascade: family > group > part) ===== */
header.site .wrap{position:relative}
@media (min-width:861px){
  .dd{position:static}
  .dd-menu.mega{left:0;right:0;width:auto;top:100%;margin-top:0;border:0;border-radius:0 0 10px 10px;background:#0b203d;border-bottom:4px solid #a97c42;padding:22px 22px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .dd-menu.mega::before{top:-22px;height:22px}
  .mega-m{display:none}
}
.mega-cols{display:grid;grid-template-columns:repeat(3,minmax(0,280px));gap:14px;align-items:start}
.mcol{list-style:none;margin:0;padding:0}
.mcol li{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.14);transition:background .12s}
nav.main .mega .mcol a{flex:1;display:block;padding:11px 12px;border-radius:0;color:#fff;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.04em;line-height:1.25;background:none;white-space:normal;box-shadow:none}
nav.main .mega .mcol a:hover{background:none}
.mcol li:hover:not(.on){background:rgba(255,255,255,.07)}
.mcol .chev{width:36px;display:grid;place-items:center;color:#d3a864;border-left:1px solid rgba(255,255,255,.14);margin:8px 0}
.mcol .chev svg{width:12px;height:12px}
.mcol li.on{background:#a97c42}
nav.main .mega .mcol li.on a{color:#0b203d}
.mcol li.on .chev{color:#0b203d;border-left-color:rgba(11,32,61,.25)}
.mcol[data-lvl="0"] a{font-size:15px}
nav.main .mega a.mega-foot{display:inline-block;margin-top:14px;padding:6px 12px;color:#d3a864;font-weight:600;font-size:14.5px;background:none;border:0;border-radius:6px}
nav.main .mega a.mega-foot:hover{background:rgba(255,255,255,.07)}
@media (max-width:860px){
  .mega-cols,nav.main .mega a.mega-foot{display:none}
  .mega-m details{border-bottom:1px solid var(--line)}
  .mega-m summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding-right:10px}
  .mega-m summary::-webkit-details-marker{display:none}
  .mega-m summary::after{content:"+";font-weight:700;color:var(--gold-deep);font-size:18px}
  .mega-m details[open] summary::after{content:"–"}
  .mega-m summary a{font-weight:600}
  .mega-m ul{list-style:none;margin:0 0 8px;padding:0 0 0 14px;border-left:2px solid var(--gold)}
  nav.main .mega-m ul a{display:block;padding:7px 12px;font-size:14.5px;color:var(--muted)}
  nav.main .mega-m a.mega-all{display:block;color:var(--muted)}
}
@media (max-width:860px){nav.main.open{max-height:calc(100vh - 74px);overflow-y:auto}}

/* header: logo = home, Products, About Us, icon links (Contact Us, Find a part) */
nav.main{gap:6px}
nav.main a.nav-ic{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%}
nav.main a.nav-ic svg{width:22px;height:22px}
nav.main a.nav-ic[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold-deep)}
.nav-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
nav.main > a,nav.main .dd-btn{font-size:16px}
@media (max-width:860px){
  nav.main a.nav-ic{display:flex;width:auto;height:auto;padding:9px 12px;border-radius:6px;justify-content:flex-start;gap:10px}
  nav.main a.nav-ic svg{width:19px;height:19px}
  .nav-l{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
.hero .hchecks{margin-top:22px}
.hero .hchecks li{color:#e8ecf2;font-weight:500}
.hero .s-range h2{font-size:clamp(30px,3.4vw,46px)}

/* home hero video (slide 1) */
.hero .hvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero .vshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,32,61,.94) 0%,rgba(11,32,61,.82) 34%,rgba(11,32,61,.35) 66%,rgba(11,32,61,.12) 100%)}
.hero .s-car .wrap{z-index:1}
@media (max-width:900px){
  .hero .vshade{background:linear-gradient(180deg,rgba(11,32,61,.88) 0%,rgba(11,32,61,.72) 60%,rgba(11,32,61,.55) 100%)}
  .hero .s-car .wrap{padding:44px 0 84px}
}

/* home: video banner (single), range intro, 3 + 2 product families */
.hero.hvid .wrap{z-index:1}
/* split layout: text on a solid navy panel, video in an angled frame on the right with a gold edge */
.hero.hvid{--vl:max(40%,calc(50% - 110px));--cut:120px}
.hero.hvid .hvideo{left:var(--vl);right:auto;width:calc(100% - var(--vl));clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);object-position:50% 50%}
.hero.hvid .vshade{left:var(--vl);background:linear-gradient(90deg,rgba(11,32,61,.4) 0,rgba(11,32,61,0) 260px)}
.hero.hvid .vshade::before{content:"";position:absolute;top:0;bottom:0;left:-3px;width:calc(var(--cut) + 6px);background:linear-gradient(to bottom right,transparent calc(50% - 3px),#a97c42 calc(50% - 3px),#a97c42 calc(50% + 2px),transparent calc(50% + 2px))}
.hero.hvid .wrap{grid-template-columns:minmax(0,min(490px,calc(50vw - 150px)));min-height:580px}
.hero.hvid h1{font-size:clamp(36px,4.3vw,62px)}
.hero.hvid .lede{font-size:18px}
@media (min-width:901px) and (max-width:1180px){.hero.hvid .wrap{min-height:520px}}
@media (max-width:900px){
  .hero.hvid .hvideo{position:relative;display:block;left:0;width:100%;height:auto;aspect-ratio:16/10;clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
  .hero.hvid .vshade{display:none}
  .hero.hvid .wrap{grid-template-columns:1fr;padding:28px 0 52px;min-height:0}
}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:52px;align-items:center}
.intro-txt h2{font-size:clamp(32px,3.6vw,48px)}
.intro-txt p{color:var(--muted);font-size:18px;margin-top:16px;max-width:34em}
.intro-txt .checks li{font-weight:600}
.intro-pic{margin:0}
.intro-pic img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 30px 60px -34px rgba(11,32,61,.55)}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr;gap:28px}}
.intro-pic.otr{position:relative;container-type:inline-size}
.intro-pic.otr figcaption{position:absolute;left:5%;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:6cqw;line-height:.95;letter-spacing:.01em;color:#fff;pointer-events:none;z-index:2}
.intro-pic.otr figcaption::after{content:"";display:block;width:1.6em;height:4px;background:#d3a864;margin-top:.32em}
.fams5{grid-template-columns:repeat(6,minmax(0,1fr))}
.fams5 .fam:nth-child(-n+3){grid-column:span 2}
.fams5 .fam:nth-child(n+4){grid-column:span 2}
.fams5 .fam-top{padding:0;gap:0}
.fam-pic{position:relative;height:210px;background:var(--gold-tint);display:grid;place-items:center;padding:18px}
.fam-pic img{max-height:170px;max-width:88%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(11,32,61,.22))}
.fam-pic .ic{width:104px;height:104px;border-radius:18px;background:var(--card)}
.fam-pic .ic svg{width:72px;height:72px}
.fam-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 16px;flex:1}
.fam.soon{border-top-color:var(--line)}
.fam.soon .fam-pic{background:var(--paper)}
.fam-soon{position:absolute;top:14px;left:14px;background:#0b203d;color:#d3a864;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
@media (max-width:1000px){.fams5{grid-template-columns:1fr 1fr}.fams5 .fam:nth-child(n){grid-column:auto}}
@media (max-width:560px){.fams5{grid-template-columns:1fr}}
.pslider .c-ss{background:#0b203d}
@media (max-width:860px){nav.main .mega-m a.mega-solo{display:block;font-weight:600;border-bottom:1px solid var(--line)}}


/* shock absorber catalogue */
.ftable.sa th button.sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ftable.sa th button.sort:hover,.ftable.sa th button.sort:focus-visible{color:var(--ink)}
.ftable.sa th button.sort:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.ftable.sa th button.sort::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;opacity:.35;transform:translateY(2px)}
.ftable.sa th button.sort[data-dir="asc"]::after{opacity:1;border-top-color:transparent;border-bottom-color:var(--gold-deep);transform:translateY(-2px)}
.ftable.sa th button.sort[data-dir="desc"]::after{opacity:1;border-top-color:var(--gold-deep)}
.ftable.sa td.fext{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ftable.sa td.fpos{white-space:nowrap}
.ftable.sa td.fty span{display:block;font-size:13px}
.ftable.sa td.fveh{min-width:200px}
.ftable.sa td.fveh .fl,.fcard .sa-fits .fl{display:block}
.ftable.sa td.fveh .fl b,.fcard .sa-fits .fl b{color:var(--ink);font-weight:600}
.ftable.sa td.fveh .mc{color:var(--muted)}
.ftable.sa td.fveh .yr{font-weight:600;color:var(--ink);white-space:nowrap}
.ftable.sa td.fnum{max-width:200px}
.satag{display:block;width:max-content;margin-top:5px;font-size:12px;font-weight:600;color:var(--muted)}
.satag.new{color:var(--gold-deep)}
.sabar select:disabled{opacity:.55}
@media (max-width:700px){
  .ftable.sa td.fpn{grid-column:1;grid-row:1}
  .ftable.sa td.fext,.ftable.sa td.fpos{grid-column:1/-1}
  .ftable.sa td.fext::before{content:"External no. ";font-weight:600;color:var(--ink)}
  .ftable.sa td.fpos::before{content:"Position ";font-weight:600;color:var(--ink)}
  .ftable.sa td.fext,.ftable.sa td.fpos{color:var(--muted);font-weight:400}
  .ftable.sa td.fveh{min-width:0}
}
.catalog>div{min-width:0}
.ftable-wrap:has(.ftable.sa){overflow-x:auto}
.ftable.sa td.fnum .n{display:block}
.ftable.sa td.fnum .n.nmore,.ftable.sa td.fveh .n{color:var(--gold-deep);font-weight:600;font-size:13px}
.fcard .nums .n{margin-right:6px}
@media (max-width:700px){.ftable.sa td.fnum .n{display:inline;margin-right:6px}}
.ftable.sa td.fpn .fadd{display:block;margin-top:10px;font-size:13px;padding:5px 10px}
.ftable.sa td.fveh{max-width:250px;overflow-wrap:anywhere}
.fcard .nums .n{display:inline-block}
@media (max-width:700px){.ftable.sa td.fpn .fadd{position:absolute;left:auto;bottom:auto;right:14px;top:12px;margin:0}.ftable.sa tbody tr{position:relative}.ftable.sa td.fveh{max-width:none}}

/* ---------- battery catalogue ---------- */
.bbar select{max-width:180px}
.ftable.bat td.fty span,.ftable.bat td.fbx span,.ftable.bat td.fah span{display:block;font-size:13px;color:var(--muted);font-weight:400}
.ftable.bat td.fbx,.ftable.bat td.fah{white-space:nowrap}
.ftable.bat td.fbx b,.ftable.bat td.fah b{font-weight:600}
.ftable.bat td.fext .borg{display:block;font-size:13px;color:var(--muted);font-weight:400}
@media (max-width:700px){
  .ftable.bat td.fbx,.ftable.bat td.fah{grid-column:1/-1;color:var(--muted)}
  .ftable.bat td.fbx span,.ftable.bat td.fah span{display:inline;margin-left:6px}
  .ftable.bat td.fext::before{content:"SAB "}
}
.borig{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.borig .eu{width:26px;height:26px;flex:none}
.bcard{grid-template-columns:minmax(0,1fr)}
.bcard .bph{display:block;aspect-ratio:6/5;border-radius:6px;background:#f2f2f0;overflow:hidden;margin-bottom:10px}
.bcard .bph img{width:100%;height:100%;object-fit:contain}
.bcard .bph .ic{width:100%;height:100%;display:grid;place-items:center;background:var(--gold-tint);border-radius:6px}
.bcard .bph .ic svg{width:64px;height:64px}
.dwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.dwc{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none;color:var(--ink)}
.dwc:hover{border-color:var(--gold)}
.dwc img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;margin-bottom:6px}
.dwc b{font-family:var(--display);font-size:17px}
.dwc span{font-size:14px;color:var(--muted)}
.bguide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bguide figure{margin:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fff}
.bguide img{width:100%;height:auto;max-height:230px;object-fit:contain;margin-bottom:12px}
.bguide figcaption{font-size:15px;color:var(--muted);line-height:1.5}
.bguide figcaption b{display:block;color:var(--ink);font-family:var(--display);font-size:18px}
@media (max-width:760px){.bguide{grid-template-columns:1fr}}
.dwsel{display:flex;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--gold);border-radius:8px;background:var(--gold-tint);margin-bottom:14px;flex-wrap:wrap}
.dwsel img{width:96px;height:72px;object-fit:contain;background:#fff;border-radius:4px}
.dwsel div{flex:1;min-width:200px;display:grid;gap:2px}
.dwsel span{font-size:14px;color:var(--muted)}
.dwsel a{font-size:14px;font-weight:600;color:var(--gold-deep)}
/* battery part page */
.bphoto{width:100%;height:100%;object-fit:contain;background:#fff}
/* battery label artwork (battery overview) */
.blabels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.blab{margin:0;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px}
.blab .bmock{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:6px}
.blab figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.blab figcaption b{font-family:var(--display);font-size:20px}
.blab figcaption span,.blab small,.btop figcaption{color:var(--muted);font-size:14px}
.blab a img,.btop a img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.btops{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;align-items:flex-start}
.btop{margin:0;flex:1 1 220px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px}
.btop figcaption b{display:block;color:var(--ink);font-family:var(--display);font-size:18px;margin-bottom:2px}
@media (max-width:900px){.blabels{grid-template-columns:minmax(0,1fr)}}
/* standard catalogue part page: small product photo (bulbs) on a white card, not stretched */
.bphoto.stdph{width:auto;height:auto;max-width:70%;max-height:220px;min-height:150px;object-fit:contain;padding:24px 40px;border-radius:10px}
.dwfig{margin:18px 0 0;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.dwfig img{width:100%;height:auto}
.dwfig figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.segh{font-family:var(--display);font-size:20px;margin:22px 0 10px}
.segd{margin-top:10px;border-top:1px solid var(--line)}
.segd summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 0;margin:0}
.segd summary::-webkit-details-marker{display:none}
.segd summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg);transition:transform .15s}
.segd[open] summary::before{transform:rotate(45deg)}
.segd summary span{font-family:var(--body);font-size:14px;color:var(--muted);font-weight:500}
.segd .ftable-wrap{margin-bottom:14px}
.ftable.bat tr.altrow td{background:#fbfaf7}
.altfit{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.bcard .bph{position:relative}
.bfit{position:absolute;left:8px;top:8px;z-index:1;font-size:12px;font-weight:700;padding:3px 8px;border-radius:4px;background:var(--gold-deep);color:#fff}
.bfit.alt{background:#5b6475}
.vsel{border-color:var(--line);background:var(--paper)}

/* ---------- gas spring catalogue ---------- */
.gsart{display:block;background:linear-gradient(180deg,#fbfaf8,#f1eee8);border-radius:6px;padding:10px 8px;margin-bottom:10px}
.gsart svg{width:100%;height:46px;display:block}
.gsdim{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);margin:0 0 14px}
.gsdim-l{font-family:var(--display);font-weight:700;font-size:16px;align-self:center;margin-right:4px}
.gsdim label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.gsdim input,.gsdim select{width:130px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font:inherit;font-size:15px;background:var(--card);color:var(--ink)}
.gsdim input:focus,.gsdim select:focus{border-color:var(--gold);outline:none}
@media (max-width:600px){.gsdim input,.gsdim select{width:100%}.gsdim label{flex:1 1 40%}}
.gsband .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.gsband-r{display:grid;gap:14px}
.gshero{width:100%;max-width:520px;height:auto;justify-self:center;filter:drop-shadow(0 18px 22px rgba(0,0,0,.4))}
.gsguide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center}
.gsdraw{background:linear-gradient(180deg,#fbfaf8,#f1eee8);border-radius:10px;padding:16px}
.gsdraw svg{width:100%;height:auto;display:block}
@media (max-width:860px){.gsguide{grid-template-columns:1fr}}
.gsfig{background:linear-gradient(180deg,#fbfaf8,#f1eee8);border-radius:10px;padding:18px 12px;width:100%}
.gsfig svg{width:100%;height:auto;display:block}
@media (max-width:900px){.gsband .wrap{grid-template-columns:1fr}}

/* buyer accounts (dealer.js): sign in, registration, account, prices, order requests to the fulfilment centre */
.dprice{display:inline-block;margin-right:8px;padding:3px 8px;border-radius:5px;background:var(--gold-tint);color:var(--gold-deep);font-family:var(--display);font-weight:700;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:middle}
.dprice.big{font-size:20px;padding:6px 12px;margin:0 12px 0 0;align-self:flex-end}
.enq label .lhint{font-weight:400;color:var(--muted,#5b6677);font-size:.9em}
.dwrap{padding:36px 0 90px}
.dauth{max-width:520px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:10px;padding:22px}
.dwrap:has(.dside){display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px;align-items:start}
.dtabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.dtabs button{font:inherit;font-weight:600;background:none;border:0;padding:10px 14px;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.dtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.dside{padding:8px 0}
.dside h2{font-size:24px;margin-bottom:10px}
.dside ul{margin:0 0 14px;padding-left:20px}
.dside li{margin:6px 0}
.dhint{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.dnote{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:15px}
.dnote.bad{background:#fdf3f2;border-color:#f2c7c3;color:#8c1d18}
.status.ok{background:#eef7f1;border-color:#bfe0cb;color:#1d5c37}
.dreg{max-width:900px}
.dreg fieldset{border:1px solid var(--line);border-radius:10px;padding:18px 20px 22px;margin:0 0 20px;background:var(--card)}
.dreg legend{font-family:var(--display);font-weight:700;font-size:20px;padding:0 8px}
.dreg .enq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dreg .enq .full{grid-column:1/-1}
.dreg label,.dreg .lbl{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
.dreg input:not([type=checkbox]),.dreg select,.dreg textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:var(--card);color:var(--ink)}
.dreg input[readonly]{background:var(--paper);color:var(--muted)}
.dreg input:focus,.dreg select:focus,.dreg textarea:focus{border-color:var(--gold);outline:none}
.dreg .req{color:var(--gold-deep)}
.dchecks{display:flex;flex-wrap:wrap;gap:8px 18px}
.dchecks label{font-weight:500;display:inline-flex;gap:7px;align-items:center;margin:0}
.dcheck{display:flex !important;gap:10px;align-items:flex-start;font-weight:500 !important;margin:8px 0 !important}
.dcheck input{margin-top:5px;flex:none}
.ddocs{margin:0 0 14px;padding-left:20px;font-size:15px}
.dsubmit{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.dreg .status{margin-top:14px}
.dacc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.dstat{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:10px;padding:22px}
.dstat.bad{border-top-color:#b3261e}
.dstat.ok{border-top-color:#2f7d5b}
.dstat h2{font-size:24px;margin-bottom:8px}
.dstat p{margin:10px 0}
.dstat .btn{margin:4px 8px 0 0}
.dcard{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px}
.dcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 18px;font-size:15px}
.dcard dt{color:var(--muted)}
.dcard dd{margin:0;overflow-wrap:anywhere}
.dbadge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--gold-tint);color:var(--gold-deep)}
.dbadge.approved{background:#e3f2e9;color:#1d5c37}
.dbadge.rejected,.dbadge.suspended{background:#fdecea;color:#8c1d18}
.dorders{margin-top:28px}
.dorders h2{font-size:24px;margin-bottom:10px}
.dorder{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:var(--card)}
.dorder summary{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:12px 14px;cursor:pointer;font-size:15px}
.dorder summary b{font-family:var(--display);font-size:17px}
.dorder summary .s{margin-left:auto}
.dorder-b{padding:0 14px 14px;font-size:15px}
.dorder-b p{margin:4px 0}
.dorderp{grid-column:1/-1}
.dpad{padding:14px 20px;margin:0}
.ctable.dot td{padding:10px 14px}
.ctable.dot td .dsc{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--muted);white-space:normal}
.ctable.dot tfoot td{font-weight:700;border-top:2px solid var(--line)}
.ctable.dot tfoot td:last-child,.ctable.dot td:nth-child(n+3){text-align:right;white-space:nowrap}
@media (max-width:900px){.dwrap:has(.dside),.dacc,.dreg .enq{grid-template-columns:1fr}}
.dwho{max-width:900px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:15px}
.dwho .btn.small{padding:6px 14px;font-size:14px}
/* battery warranty registration (/warranty/battery/ and the block at the end of each battery page) */
.cantfind.wreg{margin-top:16px;scroll-margin-top:96px}
.wform{max-width:860px}
.wform .wsep h2{font-size:22px;margin:14px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.wbat{margin-top:8px;font-size:14.5px;color:var(--muted)}
.wbat b{color:var(--ink)}
.wbat.bad{color:#b3261e}
form.enq .wok label{display:flex;gap:10px;align-items:flex-start;font-weight:500}
form.enq .wok input{width:auto;margin-top:4px}
.wok.invalid .err{display:block}
/* ---------- batteries: landing page (/batteries/) ---------- */
.bhero{background:radial-gradient(120% 140% at 85% 60%,#1b3a66 0%,#0b203d 55%,#07162b 100%);color:#fff;overflow:hidden;border-bottom:5px solid var(--gold)}
.bhero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:center;padding:44px 0 50px}
.bhero .crumbs a,.bhero .crumbs span{color:#c9d1de}
.bhero .eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:14px;color:#d3a864;margin:22px 0 6px}
.bhero h1{font-size:clamp(40px,5.4vw,72px);text-transform:uppercase;line-height:.98;color:#fff}
.bhl{font-size:19px;color:#d5dbe6;max-width:34em;margin-top:16px}
.bhb{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn.bline{border-color:#fff;color:#fff;background:transparent}.btn.bline:hover{background:#fff;color:#0b203d}
.bapps{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px}
.bapp{padding:0 26px 0 0}.bapp+.bapp{padding:0 0 0 26px;border-left:1px solid rgba(255,255,255,.25)}
.bai{display:block;width:52px;height:52px;color:#fff;margin-bottom:10px}.bai svg{width:100%;height:100%}
.bapp h2{font-size:24px;text-transform:uppercase;color:#d3a864}
.bapp p{margin:6px 0 0;color:#e3e7ee;font-size:15.5px}.bapp .ban{color:#9fb0c8;font-size:14px;margin-bottom:14px}
.bhimg{position:relative;height:380px}
.bhimg img{position:absolute;width:56%;bottom:6%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.bhimg img:nth-child(1){left:44%;bottom:20%;width:46%;opacity:.95}.bhimg img:nth-child(2){left:22%;bottom:12%;width:50%}.bhimg img:nth-child(3){left:0;bottom:2%;width:56%}
.bhimg.bhphoto{height:auto;display:flex;align-items:center}
.bhimg.bhphoto img{position:static;width:100%!important;height:auto;filter:none;opacity:1;border-radius:14px;-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 62% at 50% 52%,#000 62%,transparent 100%)}
.bht .crumbs+h1{margin-top:22px}
.bfind{background:var(--paper);border-bottom:1px solid var(--line)}
.bfind-in{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;padding:26px 0}
.bfind label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
.bfind .field{display:flex;gap:8px}
.bfind input,.bfind select{flex:1;min-width:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:var(--card);color:var(--ink)}
.bfind input:focus,.bfind select:focus{border-color:var(--gold);outline:none}
.bsh{font-size:clamp(28px,3vw,38px);text-transform:uppercase;margin:0 0 18px}
.brange{padding:46px 0 30px}
.brh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:4px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.brh h2{font-size:clamp(26px,2.6vw,34px);text-transform:uppercase}.brh p{color:var(--muted);margin-top:4px;font-size:15px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.brgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.brc{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px 16px;text-decoration:none;color:var(--ink);box-shadow:0 2px 10px rgba(11,32,61,.05);transition:border-color .15s,box-shadow .15s}
.brc:hover{border-color:var(--gold);box-shadow:0 8px 22px rgba(11,32,61,.12)}
.brk{align-self:flex-start;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.brp{display:block;width:100%;aspect-ratio:5/4;margin:6px 0 10px}.brp img{width:100%;height:100%;object-fit:contain}
.brp .ic{display:grid;place-items:center;width:100%;height:100%;background:var(--gold-tint);border-radius:6px;color:var(--gold-deep)}.brp .ic svg{width:40%}
.brn{font-family:var(--display);font-size:24px;letter-spacing:.01em}
.brs{display:inline-block;margin-top:6px;background:var(--c);color:#fff;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:3px}
.brt,.brv{font-size:13.5px;color:var(--muted);margin-top:6px}.brv{margin-top:2px;color:var(--ink);font-weight:600}
.brb{margin-top:12px;width:100%;padding:9px 0;background:var(--paper);border:1px solid var(--line);border-radius:4px;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em}
.brc:hover .brb{background:var(--ink);color:var(--white);border-color:var(--ink)}
.brmore{margin-top:20px;text-align:center}
.btech{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.btc{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:8px;padding:18px;text-decoration:none;color:var(--ink)}
.btc.efb{border-top-color:#2c6db5}.btc.agm{border-top-color:#1d6b3a}.btc.hdb{border-top-color:#4a3d8a}
.btc span{display:inline-block;font-family:var(--display);font-weight:700;background:var(--gold-tint);color:var(--gold-deep);padding:4px 9px;border-radius:4px;font-size:14px}
.btc b{display:block;font-family:var(--display);font-size:20px;margin-top:10px}.btc p{color:var(--muted);font-size:14.5px;margin:6px 0 10px}.btc em{font-style:normal;font-weight:700;font-size:14.5px}
.btc:hover{border-color:var(--gold)}
@media (max-width:900px){.bhero-in{grid-template-columns:minmax(0,1fr)}.bhimg{height:240px;order:-1;margin-top:10px}.bhimg img{width:44%!important}.bhimg img:nth-child(1){left:52%}.bhimg img:nth-child(2){left:28%}
 .bfind-in{grid-template-columns:minmax(0,1fr)}.btech{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bapps{grid-template-columns:minmax(0,1fr);gap:24px}.bapp+.bapp{padding:24px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.25)}.bapp{padding:0}.btech{grid-template-columns:minmax(0,1fr)}.bfind .field{flex-wrap:wrap}.bfind .field .btn{flex:1;justify-content:center}}

/* ---------- ribbon tabs (battery pages and battery ranges) ---------- */
.ptabbar{background:var(--white);position:sticky;top:var(--hh,72px);z-index:20;padding-top:12px}
.ptabbar .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:3px solid var(--gold)}
.ptabbar .wrap::-webkit-scrollbar{display:none}
.ptabbar a{flex:1 0 auto;text-align:center;padding:15px 20px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,var(--white));white-space:nowrap}
.ptabbar a:hover{background:color-mix(in srgb,var(--ink) 12%,var(--white))}
.ptabbar a[aria-selected="true"]{background:var(--gold);color:var(--on-gold)}
.ppanel{padding:34px 0 10px;scroll-margin-top:calc(var(--hh,72px) + 60px)}
.ptabs.js .ppanel:not(.on){display:none}
.ppanel>h2{font-size:clamp(26px,2.6vw,34px);text-transform:uppercase;margin-bottom:12px}
.ptabs.js .ppanel>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ppanel h3{font-size:20px;margin:22px 0 6px;color:var(--gold-deep)}
.ppanel p{max-width:62em}
.ppanel .gsub{color:var(--muted);font-size:15px;margin-bottom:10px}
.bss{background:color-mix(in srgb,#2c6db5 12%,var(--card));border-left:4px solid #2c6db5;padding:10px 14px;border-radius:0 6px 6px 0;margin-top:14px}
.bfeat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;max-width:900px}
.bfeat div{display:grid;grid-template-columns:46px 1fr;column-gap:14px}
.bfeat .fi{grid-row:span 2;width:46px;height:46px;border-radius:10px;background:var(--gold-tint);color:var(--gold-deep);display:grid;place-items:center}.bfeat .fi svg{width:25px;height:25px}
.bfeat b{font-size:17px}.bfeat p{margin:2px 0 0;color:var(--muted);font-size:15px}
.bspec{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start}
.bspec .specs{margin-top:0;border-top:0;padding-top:0}
.bspec .dwfig{margin:0}
.bwar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:#0b203d;color:#fff;border-radius:10px;padding:26px 28px;border-bottom:5px solid var(--gold)}
.bwar h3{color:#fff;margin:0 0 8px;font-size:24px}.bwar p{color:#d5dbe6}
.bwar dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:16px 0 0;background:rgba(255,255,255,.07);padding:12px 14px;border-radius:6px;font-size:15px}
.bwar dt{color:#b9c3d4}.bwar dd{margin:0;font-weight:600}
.bchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bchip{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 13px;font-size:14px;font-weight:600}
.bchip.ser{background:var(--c);border-color:var(--c);color:#fff}
.blede{font-size:18px;margin:0 0 18px}
.bstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:22px}
.bstats div{background:var(--paper);padding:12px 8px;text-align:center}
.bstats b{display:block;font-family:var(--display);font-size:28px;line-height:1.05}
.bstats span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bdetail{padding-bottom:40px}
@media (max-width:800px){.bfeat,.bspec{grid-template-columns:minmax(0,1fr)}.ptabbar a{padding:13px 16px;font-size:13px}}
.brtop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}.brtop .bsh{margin:0}

/* footer: small staff login link to the back end */
footer .legal-r{display:inline-flex;align-items:center;gap:18px}
footer .staff{display:inline-flex;align-items:center;gap:5px;color:var(--muted);text-decoration:none;opacity:.75}
footer .staff:hover,footer .staff:focus-visible{opacity:1;color:var(--ink)}

/* photographic page hero (shock absorbers): photo fades into the navy on the left */
.phero{background:#03111f;border-bottom:0;padding:96px 0 88px;color:#fff}
.phero::after{display:none}
.phero-img{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff}
.phero p{color:rgba(255,255,255,.84);max-width:30em}
.phero .crumbs{color:rgba(255,255,255,.72)}
.phero .crumbs a{color:#d3a864}
.phero .tabs a{background:rgba(3,17,31,.55);border-color:rgba(255,255,255,.3);color:#fff}
.phero .tabs a:hover{background:rgba(255,255,255,.16)}
.phero .tabs a[aria-current="true"]{background:#fff;color:#0b203d;border-color:#fff}
@media (max-width:900px){.phero{padding:56px 0 48px}.phero-img{width:100%;object-fit:cover;object-position:78% center;opacity:.42;-webkit-mask-image:none;mask-image:none}}

/* new (N) / remanufactured (R) tags next to the Stravik number */
.sc-cond{display:inline-block;min-width:1.5em;margin-left:6px;padding:3px 5px 2px;border-radius:4px;font-family:var(--body);font-size:12px;font-weight:700;line-height:1;text-align:center;vertical-align:5px;letter-spacing:.02em}
.sc-cond+.sc-cond{margin-left:3px}
.sc-cond-N{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sc-cond-R{background:var(--gold);color:var(--on-gold)}
h1 .sc-cond{font-size:15px;vertical-align:12px;padding:5px 7px 4px}
form.enq .wnosn{margin-top:-6px}
form.enq .wnosn label{display:inline-flex;gap:8px;align-items:center;font-weight:500;font-size:14.5px;color:var(--muted);cursor:pointer}
form.enq .wnosn input{width:auto}
/* warranty: taxi question and the terms page */
form.enq .wtaxi{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
form.enq .wtaxi .wq{flex-basis:100%;font-weight:600;font-size:15px}
form.enq .wtaxi label{display:inline-flex;gap:8px;align-items:center;font-weight:500;cursor:pointer}
form.enq .wtaxi input{width:auto}
.wtaxi.invalid .err{display:block;flex-basis:100%}
form.enq .wok a{color:var(--gold-d,#8a6326);text-decoration:underline}
.wterms{max-width:900px}
.wterms h2{font-size:26px;margin:34px 0 10px}
.wterms h3{font-size:20px;margin:22px 0 8px}
.wterms p,.wterms li{font-size:16px;line-height:1.6}
.wterms ul{padding-left:22px;margin:8px 0 14px}
.wterms .wnote{background:var(--paper,#f6f4ef);border-left:4px solid var(--gold);border-radius:6px;padding:14px 18px;margin:14px 0}
.wterms .wnote p{margin:4px 0}
.wterms .wtbl{overflow-x:auto;margin:12px 0 16px}
.wterms table.wt{border-collapse:collapse;width:100%;font-size:15px}
.wterms table.wt td{border:1px solid var(--line);padding:8px 10px;vertical-align:top}
.wterms table.wt tr:first-child td{background:#0b203d;color:#fff}
.wterms table.wt tr:first-child td strong{color:#fff}
.wterms table.wt td p{margin:0;font-size:15px}
.wterms-cta{margin-top:30px}

form.enq .wsub{margin:4px 0 0;color:var(--muted);font-size:14.5px}
form.enq .wack .wwarn{background:#fff4e5;border-left:4px solid #e08a00;padding:10px 14px;margin-bottom:10px;font-size:14.5px;line-height:1.5}
form.enq .wack label{display:flex;gap:10px;align-items:flex-start;font-weight:500}
form.enq .wack input{width:auto;margin-top:4px}
.wack.invalid .err{display:block}