Oil Finder Tool | AXCL Lubes<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --graphite-900:#034EA2;\n --graphite-800:#023D82;\n --graphite-700:#0A5FC4;\n --steel-500:#787D85;\n --steel-300:#C3C8D1;\n --paper-050:#EDEEEB;\n --paper-000:#F7F7F5;\n --ink-900:#17181A;\n --red-600:#D6291E;\n --red-700:#B01F16;\n --amber-500:#EDA22B;\n --line-dark:rgba(255,255,255,0.12);\n --line-light:rgba(23,24,26,0.12);\n --radius:2px;\n }\n *{box-sizing:border-box;}\n html{scroll-behavior:smooth;}\n body{\n margin:0;\n background:var(--paper-050);\n color:var(--ink-900);\n font-family:'Inter',system-ui,sans-serif;\n line-height:1.5;\n -webkit-font-smoothing:antialiased;\n }\n h1,h2,h3,.display{\n font-family:'Oswald',sans-serif;\n text-transform:uppercase;\n letter-spacing:0.01em;\n margin:0;\n }\n .mono{font-family:'IBM Plex Mono',monospace;}\n a{color:inherit;}\n button{font-family:inherit;}\n :focus-visible{outline:3px solid var(--red-600);outline-offset:2px;}\n .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}\n\n \/* ===== Optional embed header \u2014 remove this block if the WordPress theme already renders AXCL's global header ===== *\/\n .embed-header{\n background:var(--graphite-900);\n color:var(--paper-000);\n padding:14px clamp(16px,4vw,48px);\n display:flex;align-items:center;justify-content:space-between;\n border-bottom:3px solid var(--red-600);\n }\n .embed-header .brand-logo{height:44px;width:auto;display:block;}\n .embed-header .crumb{font-size:0.874rem;color:var(--steel-300);}\n .embed-header .crumb a{text-decoration:none;color:var(--steel-300);}\n .embed-header .crumb span{color:var(--paper-000);}\n \/* ===================================================================================================== *\/\n\n \/* ---------- Hero ---------- *\/\n .hero{\n position:relative;\n background:var(--graphite-900);\n color:var(--paper-000);\n padding:clamp(40px,7vw,84px) clamp(16px,4vw,48px) 0;\n overflow:hidden;\n }\n .hero-grid-lines{\n position:absolute;inset:0;\n background-image:\n repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(255,255,255,0.035) 38px, rgba(255,255,255,0.035) 39px),\n repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255,255,255,0.035) 38px, rgba(255,255,255,0.035) 39px);\n pointer-events:none;\n }\n .hero-inner{position:relative;max-width:1180px;margin:0 auto;}\n .hero-eyebrow-row{display:flex;align-items:center;gap:10px;color:var(--steel-300);font-size:0.918rem;margin-bottom:18px;}\n .hero-eyebrow-row .dot{width:6px;height:6px;background:var(--red-600);border-radius:50%;flex:none;}\n .hero h1{font-size:clamp(2.352rem,5vw,4.032rem);line-height:1.03;max-width:14ch;font-weight:700;}\n .hero p{max-width:52ch;color:var(--steel-300);font-size:1.176rem;margin-top:18px;}\n .gauge-deco{\n position:absolute;right:clamp(-60px,-2vw,10px);top:8px;\n width:min(360px,38vw);height:min(360px,38vw);\n opacity:0.5;\n }\n\n \/* ---------- Finder card ---------- *\/\n .finder-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 64px;position:relative;}\n .finder-card{\n background:var(--paper-000);\n border:1px solid var(--line-light);\n margin-top:clamp(28px,4vw,-40px);\n position:relative;\n box-shadow:0 30px 60px -30px rgba(0,0,0,0.35);\n }\n .finder-card::before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red-600),var(--amber-500));}\n\n \/* progress gauge *\/\n .progress{display:flex;align-items:center;gap:0;padding:22px clamp(16px,4vw,36px) 0;}\n .progress .seg{flex:1;height:5px;background:var(--line-light);position:relative;margin-right:4px;}\n .progress .seg:last-child{margin-right:0;}\n .progress .seg.done{background:var(--red-600);}\n .progress .seg.current{background:var(--line-light);}\n .progress .seg.current::after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:35%;background:var(--red-600);}\n .progress-label{padding:8px clamp(16px,4vw,36px) 0;font-size:0.806rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel-500);}\n .progress-label .step-of{font-family:'IBM Plex Mono',monospace;color:var(--ink-900);font-weight:600;}\n\n .step{padding:20px clamp(16px,4vw,36px) clamp(28px,4vw,40px);display:none;}\n .step.active{display:block;animation:reveal 0.32s ease;}\n @keyframes reveal{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}\n .step h2{font-size:clamp(1.4rem,2.4vw,1.792rem);margin-bottom:6px;}\n .step .step-hint{color:var(--steel-500);font-size:1.03rem;margin-bottom:22px;max-width:60ch;}\n\n \/* card-style radio grid (category) *\/\n .option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}\n .opt-card{position:relative;}\n .opt-card input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}\n .opt-card label{\n display:flex;flex-direction:column;align-items:flex-start;gap:14px;\n border:1px solid var(--line-light);padding:16px 14px;height:100%;\n background:var(--paper-000);\n transition:border-color 0.15s, transform 0.15s, background 0.15s;\n cursor:pointer;\n }\n .opt-card label svg{width:30px;height:30px;stroke:var(--ink-900);flex:none;}\n .opt-card label .opt-name{font-size:0.963rem;font-weight:600;line-height:1.25;}\n .opt-card input:hover + label{border-color:var(--steel-500);transform:translateY(-2px);}\n .opt-card input:checked + label{border-color:var(--red-600);background:#FFF7F6;}\n .opt-card input:checked + label svg{stroke:var(--red-600);}\n .opt-card input:focus-visible + label{outline:3px solid var(--red-600);outline-offset:2px;}\n\n \/* pill-style radio row (fuel \/ age \/ emission) *\/\n .pill-row{display:flex;flex-wrap:wrap;gap:10px;}\n .opt-pill{position:relative;}\n .opt-pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}\n .opt-pill label{\n display:flex;flex-direction:column;gap:2px;\n border:1px solid var(--line-light);padding:12px 18px;\n background:var(--paper-000);font-size:1.008rem;font-weight:600;\n cursor:pointer;transition:border-color 0.15s, background 0.15s;\n min-width:150px;\n }\n .opt-pill label .sub{font-weight:400;font-size:0.851rem;color:var(--steel-500);}\n .opt-pill input:hover + label{border-color:var(--steel-500);}\n .opt-pill input:checked + label{border-color:var(--red-600);background:#FFF7F6;}\n .opt-pill input:focus-visible + label{outline:3px solid var(--red-600);outline-offset:2px;}\n\n .step-nav{display:flex;justify-content:space-between;margin-top:26px;}\n .btn{\n border:none;padding:12px 22px;font-size:0.963rem;font-weight:600;letter-spacing:0.03em;\n cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;\n }\n .btn-primary{background:var(--red-600);color:#fff;}\n .btn-primary:hover{background:var(--red-700);}\n .btn-ghost{background:transparent;color:var(--steel-500);border:1px solid var(--line-light);}\n .btn-ghost:hover{border-color:var(--steel-500);color:var(--ink-900);}\n .btn:disabled{opacity:0.35;cursor:not-allowed;}\n\n \/* ---------- Result (spec-plate) ---------- *\/\n .result{padding:26px clamp(16px,4vw,36px) 36px;}\n .plate{\n position:relative;\n background:var(--graphite-900);color:var(--paper-000);\n padding:clamp(22px,4vw,34px);\n display:grid;grid-template-columns:auto 1fr;gap:28px;\n align-items:center;\n }\n .plate::before,.plate::after,.plate .bolt-tl,.plate .bolt-tr{\n content:\"\";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--steel-500);\n }\n .plate::before{top:10px;left:10px;}\n .plate::after{bottom:10px;right:10px;}\n .plate .bolt-tr{top:10px;right:10px;}\n .plate .bolt-bl{position:absolute;bottom:10px;left:10px;width:7px;height:7px;border-radius:50%;background:var(--steel-500);}\n .plate-grade{text-align:center;border-right:1px solid var(--line-dark);padding-right:28px;}\n .plate-grade .g{font-family:'IBM Plex Mono',monospace;font-size:clamp(2.352rem,5vw,3.584rem);font-weight:600;line-height:1;}\n .plate-grade .tier{margin-top:10px;display:inline-block;font-size:0.762rem;letter-spacing:0.08em;text-transform:uppercase;background:var(--red-600);padding:5px 10px;}\n .plate-info .line{font-size:1.053rem;color:var(--steel-300);margin-bottom:4px;}\n .plate-info .product{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.512rem;margin:4px 0 10px;}\n .plate-info .spec-note{font-size:0.918rem;color:var(--steel-300);max-width:60ch;}\n\n .result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}\n\n .disclaimer{\n margin-top:18px;font-size:0.874rem;color:var(--steel-500);\n border-left:2px solid var(--amber-500);padding:8px 14px;background:var(--paper-050);\n }\n\n \/* ---------- Enquiry ---------- *\/\n .enquiry{border-top:1px solid var(--line-light);padding-top:26px;margin-top:30px;}\n .enquiry h3{font-size:1.176rem;margin-bottom:4px;}\n .enquiry .step-hint{margin-bottom:18px;}\n .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}\n .field{display:flex;flex-direction:column;gap:6px;grid-column:span 1;}\n .field.full{grid-column:1 \/ -1;}\n .field label{font-size:0.874rem;font-weight:600;letter-spacing:0.02em;}\n .field input,.field textarea{\n border:1px solid var(--line-light);padding:11px 12px;font-family:inherit;font-size:1.03rem;\n background:var(--paper-000);\n }\n .field input:focus,.field textarea:focus{outline:none;border-color:var(--red-600);}\n\n \/* brand \/ model selects (step: brandmodel) *\/\n .select-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;}\n .select-row .field select{\n border:1px solid var(--line-light);padding:11px 12px;font-family:inherit;font-size:1.03rem;\n background:var(--paper-000);color:var(--ink-900);appearance:none;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 20' fill='none' stroke='%23787D85' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'\/%3E%3C\/svg%3E\");\n background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;\n }\n .select-row .field select:focus{outline:none;border-color:var(--red-600);}\n .select-row .field select:disabled{color:var(--steel-500);cursor:not-allowed;}\n @media (max-width:560px){.select-row{grid-template-columns:1fr;}}\n .enquiry-success{display:none;background:#F2FBF3;border:1px solid #BFE6C3;padding:16px;font-size:1.008rem;}\n .enquiry-success.show{display:block;}\n @media (max-width:560px){\n .field-grid{grid-template-columns:1fr;}\n .plate{grid-template-columns:1fr;}\n .plate-grade{border-right:none;border-bottom:1px solid var(--line-dark);padding-right:0;padding-bottom:18px;}\n }\n\n \/* quick-links strip below tool *\/\n .quicklinks{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 60px;}\n .quicklinks h3{font-size:1.064rem;color:var(--steel-500);margin-bottom:14px;font-weight:600;text-transform:none;font-family:'Inter',sans-serif;letter-spacing:0;}\n .ql-row{display:flex;flex-wrap:wrap;gap:10px;}\n .ql-row a{\n border:1px solid var(--line-light);padding:9px 16px;font-size:0.952rem;text-decoration:none;color:var(--ink-900);\n transition:border-color 0.15s;\n }\n .ql-row a:hover{border-color:var(--red-600);color:var(--red-600);}\n\n \/* ===== Optional embed footer \u2014 remove if the WordPress theme already renders AXCL's global footer ===== *\/\n .embed-footer{\n background:var(--graphite-900);color:var(--steel-300);\n padding:26px clamp(16px,4vw,48px);font-size:0.918rem;\n display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;\n }\n .embed-footer .footer-brand{display:flex;align-items:center;gap:14px;}\n .embed-footer .footer-logo{height:38px;width:auto;display:block;border-radius:5px;}\n .embed-footer a{color:var(--steel-300);text-decoration:none;}\n .embed-footer a:hover{color:#fff;}\n \/* ======================================================================================================= *\/\n<\/style>\n<\/head>\n<body>\n\n<div class=\"finder-wrap\">\n <form class=\"finder-card\" id=\"finderForm\" novalidate>\n\n <div class=\"progress\" id=\"progressBar\" aria-hidden=\"true\"><\/div>\n <div class=\"progress-label\"><span class=\"step-of\" id=\"stepOfLabel\">STEP 1 \/ 3<\/span> \u00b7 <span id=\"stepTitleLabel\">Select equipment type<\/span><\/div>\n\n \n <div class=\"step active\" data-step=\"category\">\n <h2>What are we lubricating?<\/h2>\n <p class=\"step-hint\">Choose the closest match. This sets the fluid family and the questions that follow.<\/p>\n <div class=\"option-grid\" id=\"categoryGrid\"><\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"brandmodel\">\n <h2>Vehicle brand & model<\/h2>\n <p class=\"step-hint\">This is used to fill in your profile and enquiry accurately \u2014 the recommendation itself is based on the engine details in the next steps. Pick \"Other \/ not listed\" if your brand isn't shown.<\/p>\n <div class=\"select-row\">\n <div class=\"field\">\n <label for=\"brandSelect\">Brand<\/label>\n <select id=\"brandSelect\"><option value=\"\">Select brand<\/option><\/select>\n <\/div>\n <div class=\"field\">\n <label for=\"modelSelect\">Model<\/label>\n <select id=\"modelSelect\" disabled><option value=\"\">Select brand first<\/option><\/select>\n <\/div>\n <\/div>\n <div class=\"step-nav\">\n <button type=\"button\" class=\"btn btn-ghost\" data-back>\u2190 Back<\/button>\n <button type=\"button\" class=\"btn btn-primary\" data-next disabled>Continue \u2192<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"engine\">\n <h2 id=\"step2Title\">Engine type<\/h2>\n <p class=\"step-hint\" id=\"step2Hint\">Select the fuel or engine configuration.<\/p>\n <div class=\"pill-row\" id=\"engineGrid\"><\/div>\n <div class=\"step-nav\">\n <button type=\"button\" class=\"btn btn-ghost\" data-back>\u2190 Back<\/button>\n <button type=\"button\" class=\"btn btn-primary\" data-next disabled>Continue \u2192<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"age\">\n <h2 id=\"step3Title\">Model year<\/h2>\n <p class=\"step-hint\" id=\"step3Hint\">This affects the viscosity and additive package we recommend.<\/p>\n <div class=\"pill-row\" id=\"ageGrid\"><\/div>\n <div class=\"step-nav\">\n <button type=\"button\" class=\"btn btn-ghost\" data-back>\u2190 Back<\/button>\n <button type=\"button\" class=\"btn btn-primary\" data-next disabled>See recommendation \u2192<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"result\">\n <div class=\"result\">\n <h2 style=\"margin-bottom:18px;\">Your recommendation<\/h2>\n <div class=\"plate\">\n <span class=\"bolt-tr\" aria-hidden=\"true\"><\/span><span class=\"bolt-bl\" aria-hidden=\"true\"><\/span>\n <div class=\"plate-grade\">\n <div class=\"g mono\" id=\"resGrade\">5W-30<\/div>\n <span class=\"tier\" id=\"resTier\">Full Synthetic<\/span>\n <\/div>\n <div class=\"plate-info\">\n <div class=\"line\" id=\"resProfile\">Passenger Car \u00b7 Petrol \u00b7 2016 & Newer<\/div>\n <div class=\"product\" id=\"resProduct\">AXCL Automotive Engine Oil<\/div>\n <div class=\"spec-note\" id=\"resSpec\">Typically formulated to meet API SN\/SP performance levels.<\/div>\n <\/div>\n <\/div>\n\n <p class=\"disclaimer\">This is a general fluid-family recommendation, not a verified fitment lookup for your exact make and model. Always confirm the grade and quantity against your owner's handbook or OEM specification before topping up or servicing \u2014 or ask our technical team below to confirm it for you.<\/p>\n\n <div class=\"result-actions\">\n <a href=\"#\" target=\"_blank\" class=\"btn btn-primary\" id=\"resCatLink\">View product range \u2192<\/a>\n <button type=\"button\" class=\"btn btn-ghost\" id=\"resEmailBtn\">Email me this result<\/button>\n <button type=\"button\" class=\"btn btn-ghost\" data-restart>Start over<\/button>\n <\/div>\n\n <div class=\"enquiry\">\n <h3>Want a technical team member to confirm it?<\/h3>\n <p class=\"step-hint\">Leave your details and your selected profile \u2014 we'll reply with a confirmed grade and stock availability.<\/p>\n\n <div id=\"enquirySuccess\" class=\"enquiry-success\">Thanks \u2014 your enquiry and vehicle profile have been noted. Our technical sales team will contact you shortly.<\/div>\n\n <div id=\"enquiryFormWrap\">\n <div class=\"field-grid\">\n <div class=\"field\"><label for=\"fName\">Name<\/label><input id=\"fName\" name=\"name\" type=\"text\" required><\/div>\n <div class=\"field\"><label for=\"fCompany\">Company<\/label><input id=\"fCompany\" name=\"company\" type=\"text\"><\/div>\n <div class=\"field\"><label for=\"fMobile\">Mobile<\/label><input id=\"fMobile\" name=\"mobile\" type=\"tel\" required><\/div>\n <div class=\"field\"><label for=\"fEmail\">Email<\/label><input id=\"fEmail\" name=\"email\" type=\"email\" required><\/div>\n <div class=\"field full\"><label for=\"fMessage\">Message<\/label><textarea id=\"fMessage\" name=\"message\" rows=\"3\"><\/textarea><\/div>\n <\/div>\n <div class=\"step-nav\" style=\"justify-content:flex-end;\">\n <button type=\"button\" class=\"btn btn-primary\" id=\"enquirySubmit\">Send enquiry<\/button>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/form>\n<\/div>\n\n<div class=\"quicklinks\">\n <h3>Looking for gear oil, coolant, grease or transmission fluid instead?<\/h3>\n <div class=\"ql-row\">\n <a href=\"https:\/\/axcllubes.com\/category\/gear-oils\/\">Gear Oils<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/transmission-fluids\/\">Transmission Fluids<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/antifreeze-coolants\/\">Antifreeze & Coolants<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/automotive-industrial-greases\/\">Greases<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/brake-fluids\/\">Brake Fluids<\/a>\n <a href=\"https:\/\/axcllubes.com\/products\/\">Full product catalogue \u2192<\/a>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n\n \/\/ ---- Icon set (schematic line icons, currentColor via stroke) ----\n const ICONS = {\n car: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 30l3-11a4 4 0 0 1 4-3h22a4 4 0 0 1 4 3l3 11\"\/><rect x=\"4\" y=\"30\" width=\"40\" height=\"9\" rx=\"2\"\/><circle cx=\"13\" cy=\"39\" r=\"3.4\"\/><circle cx=\"35\" cy=\"39\" r=\"3.4\"\/><path d=\"M11 22h26\"\/><\/svg>',\n suv: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 29l2-12a4 4 0 0 1 4-3h9l6-6h9a4 4 0 0 1 4 4v6l4 3v8\"\/><rect x=\"4\" y=\"29\" width=\"39\" height=\"9\" rx=\"2\"\/><circle cx=\"13\" cy=\"38\" r=\"3.4\"\/><circle cx=\"34\" cy=\"38\" r=\"3.4\"\/><\/svg>',\n pickup: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 30v-8h13l6-8h6a4 4 0 0 1 4 4v3h4a4 4 0 0 1 4 4v5\"\/><rect x=\"4\" y=\"30\" width=\"40\" height=\"8\" rx=\"1.5\"\/><circle cx=\"13\" cy=\"38\" r=\"3.4\"\/><circle cx=\"35\" cy=\"38\" r=\"3.4\"\/><path d=\"M17 22v8\"\/><\/svg>',\n truck: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"16\" width=\"20\" height=\"16\" rx=\"1.5\"\/><path d=\"M23 21h9l7 6v5h-16\"\/><circle cx=\"11\" cy=\"35\" r=\"3.4\"\/><circle cx=\"34\" cy=\"35\" r=\"3.4\"\/><path d=\"M27 21v11\"\/><\/svg>',\n moto: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"34\" r=\"6\"\/><circle cx=\"37\" cy=\"34\" r=\"6\"\/><path d=\"M11 34l8-13h9l5 8h4\"\/><path d=\"M19 21l-4-6h-4\"\/><path d=\"M28 21l4 13\"\/><\/svg>',\n agri: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"14\" cy=\"35\" r=\"8\"\/><circle cx=\"38\" cy=\"38\" r=\"4.5\"\/><path d=\"M14 27v-9h9l9 9h6v10\"\/><path d=\"M23 18v-5h6\"\/><\/svg>',\n marine: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 30h36l-4 9H10z\"\/><path d=\"M24 30V8\"\/><path d=\"M24 10l11 8h-11z\"\/><path d=\"M14 39c3 3 6 3 9 0s6-3 9 0\"\/><\/svg>',\n industrial: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M27 6l2 5 5-1 1 5 5 1-2 5 4 3-4 3 2 5-5 1-1 5-5-1-2 5-4-3-4 3-2-5-5 1-1-5-5-1 2-5-4-3 4-3-2-5 5-1 1-5 5 1 2-5z\"\/><circle cx=\"23\" cy=\"24\" r=\"6.5\"\/><\/svg>'\n };\n\n \/\/ ---- Recommendation data ----\n \/\/ grade \/ tier \/ spec values below are general fluid-family guidance (typical viscosity + performance\n \/\/ category for the segment), not a verified per-model fitment database. Replace\/extend with confirmed\n \/\/ data from your technical team before treating results as an exact OEM match.\n const AGE_BANDS_STD = [\n {key:'old', label:'Before 2005'},\n {key:'mid', label:'2005 \u2013 2015'},\n {key:'new', label:'2016 & Newer'}\n ];\n const AGE_BANDS_MOTO = [\n {key:'old', label:'Under 150cc'},\n {key:'mid', label:'150cc \u2013 500cc'},\n {key:'new', label:'Over 500cc'}\n ];\n\n const CATEGORY_URL_AUTO = 'https:\/\/axcllubes.com\/category\/automotive-engine-oils\/';\n const CATEGORY_URL_DIESEL = 'https:\/\/axcllubes.com\/category\/diesel-engine-oils\/';\n const CATEGORY_URL_MOTO = 'https:\/\/axcllubes.com\/category\/motorcycle\/';\n const CATEGORY_URL_AGRI = 'https:\/\/axcllubes.com\/category\/agriculture\/';\n const CATEGORY_URL_MARINE = 'https:\/\/axcllubes.com\/category\/marine-engine-oils\/';\n const CATEGORY_URL_INDUSTRIAL = 'https:\/\/axcllubes.com\/category\/industrial-oils\/';\n\n \/\/ ---- Vehicle brand & model lists ----\n \/\/ A working set of the brands\/models most commonly seen in the Middle East & East Africa\n \/\/ market. It's a starting point, not exhaustive \u2014 extend it any time by adding a key\n \/\/ (brand name) with an array of model names to the relevant MAKES object below.\n const CAR_MAKES = {\n 'Toyota': ['Corolla','Camry','Yaris','Avalon','Prius','Corolla Cross'],\n 'Nissan': ['Sunny','Altima','Maxima','Sentra'],\n 'Honda': ['Civic','Accord','City'],\n 'Hyundai': ['Elantra','Accent','Sonata','i10','i20'],\n 'Kia': ['Cerato','Optima \/ K5','Rio','Pegas'],\n 'Mitsubishi': ['Lancer','Attrage','Mirage'],\n 'Mazda': ['Mazda3','Mazda6'],\n 'Chevrolet': ['Malibu','Cruze','Optra'],\n 'Ford': ['Focus','Fusion','Taurus'],\n 'Mercedes-Benz': ['C-Class','E-Class','S-Class'],\n 'BMW': ['3 Series','5 Series','7 Series'],\n 'Lexus': ['ES','IS','LS'],\n 'MG': ['MG5','MG6'],\n 'Suzuki': ['Ciaz','Swift','Dzire'],\n 'Renault': ['Symbol','Fluence','Megane'],\n 'Peugeot': ['301','508'],\n 'Other \/ not listed': ['Other']\n };\n const SUV_MAKES = {\n 'Toyota': ['Land Cruiser','Prado','Fortuner','RAV4','FJ Cruiser'],\n 'Nissan': ['Patrol','X-Trail','Pathfinder','Kicks'],\n 'Mitsubishi': ['Pajero','Pajero Sport','Outlander','ASX'],\n 'Hyundai': ['Tucson','Santa Fe','Palisade','Creta'],\n 'Kia': ['Sportage','Sorento','Seltos'],\n 'Ford': ['Explorer','Expedition','EcoSport'],\n 'Chevrolet': ['Tahoe','Suburban','Trailblazer'],\n 'GMC': ['Yukon','Acadia'],\n 'Jeep': ['Wrangler','Grand Cherokee','Cherokee'],\n 'Land Rover': ['Range Rover','Range Rover Sport','Discovery','Defender'],\n 'Mercedes-Benz': ['GLE','GLC','G-Class'],\n 'BMW': ['X3','X5','X7'],\n 'Lexus': ['LX','RX','GX'],\n 'Honda': ['CR-V','HR-V'],\n 'Mazda': ['CX-5','CX-9'],\n 'MG': ['MG ZS','MG HS'],\n 'Other \/ not listed': ['Other']\n };\n const PICKUP_MAKES = {\n 'Toyota': ['Hilux','Land Cruiser Pickup'],\n 'Nissan': ['Navara','Patrol Pickup'],\n 'Mitsubishi': ['L200'],\n 'Ford': ['Ranger','F-150'],\n 'Chevrolet': ['Silverado','Colorado'],\n 'GMC': ['Sierra'],\n 'Isuzu': ['D-Max'],\n 'Mazda': ['BT-50'],\n 'Other \/ not listed': ['Other']\n };\n const TRUCK_MAKES = {\n 'Mercedes-Benz': ['Actros','Axor','Atego'],\n 'MAN': ['TGS','TGX'],\n 'Volvo': ['FH','FM','FMX'],\n 'Scania': ['R-Series','P-Series'],\n 'Iveco': ['Trakker','Eurocargo'],\n 'DAF': ['XF'],\n 'Isuzu': ['FVR','NPR'],\n 'Hino': ['500 Series','700 Series'],\n 'Other \/ not listed': ['Other']\n };\n const MOTO_MAKES = {\n 'Honda': ['CBR500R','CB150','CG125'],\n 'Yamaha': ['YBR125','R15','FZ'],\n 'Suzuki': ['GN125','GSX Series'],\n 'Bajaj': ['Boxer','Pulsar'],\n 'Kawasaki': ['Ninja','KLX'],\n 'Other \/ not listed': ['Other']\n };\n\n const DATA = {\n car: {\n label:'Passenger Car', icon:ICONS.car, makes:CAR_MAKES,\n step2Title:'Fuel type', step2Hint:'Select how the car is powered.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Older engines generally need a heavier, more mineral-based oil; newer engines are built for thinner, full-synthetic grades.',\n engines:{\n petrol:{label:'Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF \/ SG', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API SL \/ SM', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30', tier:'Full Synthetic', spec:'API SN \/ SP, ACEA A5\/B5', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n diesel:{label:'Diesel', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30 \/ 5W-40', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA C3', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n hybrid:{label:'Hybrid', sub:'Petrol-electric', bands:{\n old:{grade:'5W-30', tier:'Full Synthetic', spec:'API SN', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'0W-20', tier:'Full Synthetic', spec:'API SN, ILSAC GF-5', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'0W-16 \/ 0W-20', tier:'Full Synthetic', spec:'API SP, ILSAC GF-6', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }}\n }\n },\n suv: {\n label:'SUV & 4x4', icon:ICONS.suv, makes:SUV_MAKES,\n step2Title:'Fuel type', step2Hint:'Select how the vehicle is powered.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Older engines generally need a heavier, more mineral-based oil; newer engines are built for thinner, full-synthetic grades.',\n engines:{\n petrol:{label:'Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF \/ SG', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API SL \/ SM', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30 \/ 5W-40', tier:'Full Synthetic', spec:'API SN \/ SP, ACEA A3\/B4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n diesel:{label:'Diesel', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-40', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA C3', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }}\n }\n },\n pickup: {\n label:'Pickup & Light Commercial', icon:ICONS.pickup, makes:PICKUP_MAKES,\n step2Title:'Fuel type', step2Hint:'Select how the vehicle is powered.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Older engines generally need a heavier, more mineral-based oil; newer engines are built for thinner, full-synthetic grades.',\n engines:{\n petrol:{label:'Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF \/ SG', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API SL \/ SM', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30', tier:'Full Synthetic', spec:'API SN \/ SP', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n diesel:{label:'Diesel', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-40', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA C3', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }}\n }\n },\n truck: {\n label:'Heavy Truck & Bus', icon:ICONS.truck, makes:TRUCK_MAKES,\n step2Title:'Emission standard', step2Hint:'Select the engine\\u2019s emission tier \u2014 this also sets the age range and fuel type (diesel).',\n ageBands: null,\n engines:{\n euro3:{label:'Euro 3 & below', sub:'Older fleet diesel', direct:{grade:'20W-50', tier:'Mineral \/ Semi-Synthetic', spec:'API CF-4 \/ CH-4', product:'AXCL Diesel Engine Oil', url:CATEGORY_URL_DIESEL}},\n euro45:{label:'Euro 4 \u2013 Euro 5', sub:'Common-rail diesel', direct:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4, ACEA E7', product:'AXCL Diesel Engine Oil', url:CATEGORY_URL_DIESEL}},\n euro6:{label:'Euro 6', sub:'DPF \/ SCR equipped', direct:{grade:'10W-30 \/ 5W-30', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA E9', product:'AXCL Diesel Engine Oil', url:CATEGORY_URL_DIESEL}}\n }\n },\n moto: {\n label:'Motorcycle', icon:ICONS.moto, makes:MOTO_MAKES,\n step2Title:'Engine type', step2Hint:'Select the engine configuration.',\n ageBands: AGE_BANDS_MOTO, ageStepTitle:'Engine size', ageStepHint:'Displacement affects the recommended viscosity and synthetic content.',\n engines:{\n four:{label:'4-Stroke Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF, JASO MA', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO},\n mid:{grade:'15W-40 \/ 10W-40', tier:'Semi-Synthetic', spec:'API SG, JASO MA2', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO},\n new:{grade:'10W-30 \/ 10W-40', tier:'Full Synthetic', spec:'API SN, JASO MA2', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO}\n }},\n two:{label:'2-Stroke Petrol', sub:'Oil-injected \/ pre-mix', direct:{grade:'2T Universal', tier:'Semi-Synthetic', spec:'API TC, JASO FC', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO}}\n }\n },\n agri: {\n label:'Agriculture & Off-Highway', icon:ICONS.agri,\n step2Title:'Engine type', step2Hint:'Select the fuel system on the tractor or equipment.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Naturally-aspirated field engines run for decades on heavier mineral oils; common-rail turbo diesels need modern low-ash grades.',\n engines:{\n na:{label:'Diesel', sub:'Naturally aspirated', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n new:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CJ-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI}\n }},\n turbo:{label:'Diesel', sub:'Turbo \/ common-rail', bands:{\n old:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CJ-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n new:{grade:'10W-30', tier:'Full Synthetic, Low-Ash', spec:'API CK-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI}\n }}\n }\n },\n marine: {\n label:'Marine', icon:ICONS.marine,\n step2Title:'Engine type', step2Hint:'Select the propulsion type.',\n ageBands:null,\n engines:{\n diesel:{label:'Inboard Diesel', direct:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CF, Marine Diesel', product:'AXCL Marine Engine Oil', url:CATEGORY_URL_MARINE}},\n two:{label:'Outboard', sub:'2-Stroke', direct:{grade:'TC-W3', tier:'Semi-Synthetic', spec:'NMMA TC-W3', product:'AXCL Marine Engine Oil', url:CATEGORY_URL_MARINE}},\n four:{label:'Outboard', sub:'4-Stroke', direct:{grade:'10W-30 \/ 10W-40', tier:'Semi-Synthetic', spec:'API FC-W', product:'AXCL Marine Engine Oil', url:CATEGORY_URL_MARINE}}\n }\n },\n industrial: {\n label:'Industrial & Stationary', icon:ICONS.industrial,\n step2Title:'Engine \/ equipment type', step2Hint:'Select the power source.',\n ageBands:null,\n engines:{\n diesel:{label:'Diesel Stationary', sub:'Generators, pumps', direct:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4', product:'AXCL Industrial Oil', url:CATEGORY_URL_INDUSTRIAL}},\n gas:{label:'Gas Engine', sub:'Natural gas \/ LPG', direct:{grade:'SAE 40', tier:'Low-Ash Mineral', spec:'Gas engine oil, low-ash', product:'AXCL Industrial Oil', url:CATEGORY_URL_INDUSTRIAL}}\n }\n }\n };\n\n \/\/ ---- State ----\n \/\/ sequence: the ordered list of step ids for the category currently selected, e.g.\n \/\/ ['category','brandmodel','engine','age'] \u2014 'age' is dropped for categories\/engines that don't need it.\n let state = { category:null, brand:null, model:null, engine:null, age:null };\n let sequence = ['category'];\n let history = ['category'];\n\n const form = document.getElementById('finderForm');\n const categoryGrid = document.getElementById('categoryGrid');\n const brandSelect = document.getElementById('brandSelect');\n const modelSelect = document.getElementById('modelSelect');\n const engineGrid = document.getElementById('engineGrid');\n const ageGrid = document.getElementById('ageGrid');\n const progressBar = document.getElementById('progressBar');\n const stepOfLabel = document.getElementById('stepOfLabel');\n const stepTitleLabel = document.getElementById('stepTitleLabel');\n\n const STEP_TITLES = {\n category:'Select equipment type',\n brandmodel:'Vehicle brand & model'\n };\n\n \/\/ Build step: category cards\n Object.keys(DATA).forEach(key=>{\n const cat = DATA[key];\n const wrap = document.createElement('div');\n wrap.className = 'opt-card';\n wrap.innerHTML = `\n <input type=\"radio\" name=\"category\" id=\"cat_${key}\" value=\"${key}\">\n <label for=\"cat_${key}\">${cat.icon}<span class=\"opt-name\">${cat.label}<\/span><\/label>`;\n categoryGrid.appendChild(wrap);\n });\n\n categoryGrid.addEventListener('change', e=>{\n if(e.target.name==='category'){\n state.category = e.target.value;\n state.brand = null; state.model = null; state.engine = null; state.age = null;\n const cat = DATA[state.category];\n\n \/\/ Build the known sequence for this category (age is a best guess until the engine is chosen)\n sequence = ['category'];\n if(cat.makes) sequence.push('brandmodel');\n sequence.push('engine');\n if(cat.ageBands) sequence.push('age');\n\n if(cat.makes){ buildBrandStep(); }\n buildEngineStep();\n\n history = ['category'];\n goForward(cat.makes ? 'brandmodel' : 'engine');\n }\n });\n\n \/\/ ---- Brand \/ model step ----\n function buildBrandStep(){\n const cat = DATA[state.category];\n brandSelect.innerHTML = '<option value=\"\">Select brand<\/option>' +\n Object.keys(cat.makes).map(b=>`<option value=\"${b}\">${b}<\/option>`).join('');\n modelSelect.innerHTML = '<option value=\"\">Select brand first<\/option>';\n modelSelect.disabled = true;\n brandModelNextBtn().disabled = true;\n }\n\n brandSelect.addEventListener('change', ()=>{\n const cat = DATA[state.category];\n state.brand = brandSelect.value || null;\n state.model = null;\n brandModelNextBtn().disabled = true;\n if(!state.brand){\n modelSelect.innerHTML = '<option value=\"\">Select brand first<\/option>';\n modelSelect.disabled = true;\n return;\n }\n const models = cat.makes[state.brand];\n modelSelect.innerHTML = '<option value=\"\">Select model<\/option>' +\n models.map(m=>`<option value=\"${m}\">${m}<\/option>`).join('');\n modelSelect.disabled = false;\n });\n\n modelSelect.addEventListener('change', ()=>{\n state.model = modelSelect.value || null;\n brandModelNextBtn().disabled = !state.model;\n });\n\n function brandModelNextBtn(){ return document.querySelector('[data-step=\"brandmodel\"] [data-next]'); }\n function engineNextBtn(){ return document.querySelector('[data-step=\"engine\"] [data-next]'); }\n function ageNextBtn(){ return document.querySelector('[data-step=\"age\"] [data-next]'); }\n\n \/\/ ---- Engine \/ fuel step ----\n function buildEngineStep(){\n const cat = DATA[state.category];\n document.getElementById('step2Title').textContent = cat.step2Title;\n document.getElementById('step2Hint').textContent = cat.step2Hint;\n engineGrid.innerHTML = '';\n Object.keys(cat.engines).forEach(ekey=>{\n const eng = cat.engines[ekey];\n const wrap = document.createElement('div');\n wrap.className = 'opt-pill';\n wrap.innerHTML = `\n <input type=\"radio\" name=\"engine\" id=\"eng_${ekey}\" value=\"${ekey}\">\n <label for=\"eng_${ekey}\">${eng.label}${eng.sub ? `<span class=\"sub\">${eng.sub}<\/span>`:''}<\/label>`;\n engineGrid.appendChild(wrap);\n });\n engineNextBtn().disabled = true;\n }\n\n engineGrid.addEventListener('change', e=>{\n if(e.target.name==='engine'){\n state.engine = e.target.value;\n engineNextBtn().disabled = false;\n }\n });\n\n \/\/ ---- Age \/ size band step ----\n function buildAgeStep(){\n const cat = DATA[state.category];\n document.getElementById('step3Title').textContent = cat.ageStepTitle;\n document.getElementById('step3Hint').textContent = cat.ageStepHint;\n ageGrid.innerHTML = '';\n cat.ageBands.forEach(b=>{\n const wrap = document.createElement('div');\n wrap.className = 'opt-pill';\n wrap.innerHTML = `\n <input type=\"radio\" name=\"age\" id=\"age_${b.key}\" value=\"${b.key}\">\n <label for=\"age_${b.key}\">${b.label}<\/label>`;\n ageGrid.appendChild(wrap);\n });\n ageNextBtn().disabled = true;\n }\n\n ageGrid.addEventListener('change', e=>{\n if(e.target.name==='age'){\n state.age = e.target.value;\n ageNextBtn().disabled = false;\n }\n });\n\n \/\/ ---- Back \/ Next \/ Restart wiring ----\n form.addEventListener('click', e=>{\n const back = e.target.closest('[data-back]');\n const next = e.target.closest('[data-next]');\n const restart = e.target.closest('[data-restart]');\n const current = history[history.length-1];\n\n if(back){\n e.preventDefault();\n if(history.length>1){ history.pop(); showStepId(history[history.length-1]); }\n }\n\n if(next){\n e.preventDefault();\n if(current==='brandmodel'){\n goForward('engine');\n } else if(current==='engine'){\n const cat = DATA[state.category];\n const eng = cat.engines[state.engine];\n \/\/ Some engines skip the age question even if the category generally asks it\n \/\/ (e.g. 2-stroke motorcycle oil is a single universal grade).\n const idxAge = sequence.indexOf('age');\n if(eng.direct && idxAge!==-1) sequence.splice(idxAge,1);\n if(!eng.direct && idxAge===-1 && cat.ageBands) sequence.push('age');\n\n if(!eng.direct && sequence.includes('age')){\n buildAgeStep();\n goForward('age');\n } else {\n computeAndShowResult();\n }\n } else if(current==='age'){\n computeAndShowResult();\n }\n }\n\n if(restart){\n e.preventDefault();\n state = { category:null, brand:null, model:null, engine:null, age:null };\n sequence = ['category']; history = ['category'];\n document.querySelectorAll('#finderForm input[type=radio]').forEach(r=>r.checked=false);\n brandSelect.value=''; modelSelect.innerHTML = '<option value=\"\">Select brand first<\/option>'; modelSelect.disabled = true;\n showStepId('category');\n }\n });\n\n function goForward(id){\n history.push(id);\n showStepId(id);\n }\n\n function showStepId(id){\n document.querySelectorAll('.step').forEach(s=>s.classList.remove('active'));\n document.querySelector(`.step[data-step=\"${id}\"]`).classList.add('active');\n renderProgress(id);\n document.querySelector('.finder-card').scrollIntoView({behavior:'smooth', block:'start'});\n }\n\n function renderProgress(currentId){\n if(currentId==='category'){\n progressBar.innerHTML = '<div class=\"seg current\"><\/div>';\n stepOfLabel.textContent = 'GETTING STARTED';\n stepTitleLabel.textContent = STEP_TITLES.category;\n return;\n }\n if(currentId==='result'){\n progressBar.innerHTML = '';\n sequence.forEach(()=>{\n const seg = document.createElement('div');\n seg.className = 'seg done';\n progressBar.appendChild(seg);\n });\n stepOfLabel.textContent = 'RESULT';\n stepTitleLabel.textContent = 'Recommended fluid';\n return;\n }\n const cat = DATA[state.category];\n const total = sequence.length;\n const shown = sequence.indexOf(currentId) + 1;\n progressBar.innerHTML = '';\n for(let i=1;i<=total;i++){\n const seg = document.createElement('div');\n seg.className = 'seg' + (i<shown?' done':'') + (i===shown?' current':'');\n progressBar.appendChild(seg);\n }\n const title = STEP_TITLES[currentId] || (currentId==='engine' ? cat.step2Title : cat.ageStepTitle);\n stepOfLabel.textContent = `STEP ${shown} \/ ${total}`;\n stepTitleLabel.textContent = title;\n }\n\n function computeAndShowResult(){\n const cat = DATA[state.category];\n const eng = cat.engines[state.engine];\n const res = eng.direct ? eng.direct : eng.bands[state.age];\n\n document.getElementById('resGrade').textContent = res.grade;\n document.getElementById('resTier').textContent = res.tier;\n document.getElementById('resProduct').textContent = res.product;\n document.getElementById('resSpec').textContent = `Typically formulated to meet ${res.spec} performance levels.`;\n\n const ageLabel = (!eng.direct && cat.ageBands) ? (cat.ageBands.find(b=>b.key===state.age)||{}).label : null;\n const profileParts = [];\n if(state.brand && state.model) profileParts.push(`${state.brand} ${state.model}`);\n profileParts.push(cat.label);\n profileParts.push(eng.label + (eng.sub?` (${eng.sub})`:''));\n if(ageLabel) profileParts.push(ageLabel);\n document.getElementById('resProfile').textContent = profileParts.join(' \u00b7 ');\n document.getElementById('resCatLink').href = res.url;\n\n window.oilFinderProfile = {\n category:state.category, brand:state.brand, model:state.model,\n engine:state.engine, age:state.age, result:res\n };\n\n document.getElementById('enquirySuccess').classList.remove('show');\n document.getElementById('enquiryFormWrap').style.display = '';\n\n goForward('result');\n }\n\n \/\/ Email-this-result\n document.getElementById('resEmailBtn').addEventListener('click', ()=>{\n const p = window.oilFinderProfile;\n if(!p) return;\n const subject = encodeURIComponent(`AXCL Oil Finder result \u2014 ${p.result.grade}`);\n const body = encodeURIComponent(\n `My AXCL Oil Finder result:\\n\\nVehicle\/Equipment: ${document.getElementById('resProfile').textContent}\\nRecommended grade: ${p.result.grade}\\nOil tier: ${p.result.tier}\\nProduct line: ${p.result.product}\\n\\n(Sent from the AXCL Oil Finder tool)`\n );\n window.location.href = `mailto:info@axcllubes.com?subject=${subject}&body=${body}`;\n });\n\n \/\/ Enquiry submit \u2014 front-end confirmation only; wire to a real backend before launch (see DEV NOTE above)\n document.getElementById('enquirySubmit').addEventListener('click', ()=>{\n const name = document.getElementById('fName').value.trim();\n const mobile = document.getElementById('fMobile').value.trim();\n const email = document.getElementById('fEmail').value.trim();\n if(!name || !mobile || !email){\n alert('Please fill in your name, mobile and email so our team can reach you.');\n return;\n }\n document.getElementById('enquiryFormWrap').style.display = 'none';\n document.getElementById('enquirySuccess').classList.add('show');\n });\n\n renderProgress('category');\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> \u0627\u0644\u062e\u0637\u0648\u0629 1 \/ 3 \u00b7 \u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u0645\u0639\u062f\u0627\u062a \u0645\u0627 \u0627\u0644\u0630\u064a \u0646\u0642\u0648\u0645 \u0628\u062a\u0634\u0633\u064a\u062d\u0647\u061f \u0627\u062e\u062a\u0631 \u0627\u0644\u0623\u0642\u0631\u0628 \u0645\u0637\u0627\u0628\u0642\u0629. \u064a\u062d\u062f\u062f \u0647\u0630\u0627 \u0639\u0627\u0626\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644 \u0648\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u062a\u064a \u062a\u062a\u0628\u0639\u0647\u0627. \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u0627\u0644\u0637\u0631\u0627\u0632 \u0644\u0644\u0645\u0631\u0643\u0628\u0629 \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0644\u0645\u0644\u0621 \u0645\u0644\u0641\u0643 \u0627\u0644\u0634\u062e\u0635\u064a \u0648\u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0643 \u0628\u062f\u0642\u0629 - \u0627\u0644\u062a\u0648\u0635\u064a\u0629 \u0646\u0641\u0633\u0647\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0631\u0643...<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15850","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages\/15850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/comments?post=15850"}],"version-history":[{"count":16,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages\/15850\/revisions"}],"predecessor-version":[{"id":15882,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages\/15850\/revisions\/15882"}],"wp:attachment":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/media?parent=15850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nOil Finder Tool | AXCL Lubes<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --graphite-900:#034EA2;\n --graphite-800:#023D82;\n --graphite-700:#0A5FC4;\n --steel-500:#787D85;\n --steel-300:#C3C8D1;\n --paper-050:#EDEEEB;\n --paper-000:#F7F7F5;\n --ink-900:#17181A;\n --red-600:#D6291E;\n --red-700:#B01F16;\n --amber-500:#EDA22B;\n --line-dark:rgba(255,255,255,0.12);\n --line-light:rgba(23,24,26,0.12);\n --radius:2px;\n }\n *{box-sizing:border-box;}\n html{scroll-behavior:smooth;}\n body{\n margin:0;\n background:var(--paper-050);\n color:var(--ink-900);\n font-family:'Inter',system-ui,sans-serif;\n line-height:1.5;\n -webkit-font-smoothing:antialiased;\n }\n h1,h2,h3,.display{\n font-family:'Oswald',sans-serif;\n text-transform:uppercase;\n letter-spacing:0.01em;\n margin:0;\n }\n .mono{font-family:'IBM Plex Mono',monospace;}\n a{color:inherit;}\n button{font-family:inherit;}\n :focus-visible{outline:3px solid var(--red-600);outline-offset:2px;}\n .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}\n\n \/* ===== Optional embed header \u2014 remove this block if the WordPress theme already renders AXCL's global header ===== *\/\n .embed-header{\n background:var(--graphite-900);\n color:var(--paper-000);\n padding:14px clamp(16px,4vw,48px);\n display:flex;align-items:center;justify-content:space-between;\n border-bottom:3px solid var(--red-600);\n }\n .embed-header .brand-logo{height:44px;width:auto;display:block;}\n .embed-header .crumb{font-size:0.874rem;color:var(--steel-300);}\n .embed-header .crumb a{text-decoration:none;color:var(--steel-300);}\n .embed-header .crumb span{color:var(--paper-000);}\n \/* ===================================================================================================== *\/\n\n \/* ---------- Hero ---------- *\/\n .hero{\n position:relative;\n background:var(--graphite-900);\n color:var(--paper-000);\n padding:clamp(40px,7vw,84px) clamp(16px,4vw,48px) 0;\n overflow:hidden;\n }\n .hero-grid-lines{\n position:absolute;inset:0;\n background-image:\n repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(255,255,255,0.035) 38px, rgba(255,255,255,0.035) 39px),\n repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255,255,255,0.035) 38px, rgba(255,255,255,0.035) 39px);\n pointer-events:none;\n }\n .hero-inner{position:relative;max-width:1180px;margin:0 auto;}\n .hero-eyebrow-row{display:flex;align-items:center;gap:10px;color:var(--steel-300);font-size:0.918rem;margin-bottom:18px;}\n .hero-eyebrow-row .dot{width:6px;height:6px;background:var(--red-600);border-radius:50%;flex:none;}\n .hero h1{font-size:clamp(2.352rem,5vw,4.032rem);line-height:1.03;max-width:14ch;font-weight:700;}\n .hero p{max-width:52ch;color:var(--steel-300);font-size:1.176rem;margin-top:18px;}\n .gauge-deco{\n position:absolute;right:clamp(-60px,-2vw,10px);top:8px;\n width:min(360px,38vw);height:min(360px,38vw);\n opacity:0.5;\n }\n\n \/* ---------- Finder card ---------- *\/\n .finder-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 64px;position:relative;}\n .finder-card{\n background:var(--paper-000);\n border:1px solid var(--line-light);\n margin-top:clamp(28px,4vw,-40px);\n position:relative;\n box-shadow:0 30px 60px -30px rgba(0,0,0,0.35);\n }\n .finder-card::before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red-600),var(--amber-500));}\n\n \/* progress gauge *\/\n .progress{display:flex;align-items:center;gap:0;padding:22px clamp(16px,4vw,36px) 0;}\n .progress .seg{flex:1;height:5px;background:var(--line-light);position:relative;margin-right:4px;}\n .progress .seg:last-child{margin-right:0;}\n .progress .seg.done{background:var(--red-600);}\n .progress .seg.current{background:var(--line-light);}\n .progress .seg.current::after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:35%;background:var(--red-600);}\n .progress-label{padding:8px clamp(16px,4vw,36px) 0;font-size:0.806rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel-500);}\n .progress-label .step-of{font-family:'IBM Plex Mono',monospace;color:var(--ink-900);font-weight:600;}\n\n .step{padding:20px clamp(16px,4vw,36px) clamp(28px,4vw,40px);display:none;}\n .step.active{display:block;animation:reveal 0.32s ease;}\n @keyframes reveal{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}\n .step h2{font-size:clamp(1.4rem,2.4vw,1.792rem);margin-bottom:6px;}\n .step .step-hint{color:var(--steel-500);font-size:1.03rem;margin-bottom:22px;max-width:60ch;}\n\n \/* card-style radio grid (category) *\/\n .option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}\n .opt-card{position:relative;}\n .opt-card input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}\n .opt-card label{\n display:flex;flex-direction:column;align-items:flex-start;gap:14px;\n border:1px solid var(--line-light);padding:16px 14px;height:100%;\n background:var(--paper-000);\n transition:border-color 0.15s, transform 0.15s, background 0.15s;\n cursor:pointer;\n }\n .opt-card label svg{width:30px;height:30px;stroke:var(--ink-900);flex:none;}\n .opt-card label .opt-name{font-size:0.963rem;font-weight:600;line-height:1.25;}\n .opt-card input:hover + label{border-color:var(--steel-500);transform:translateY(-2px);}\n .opt-card input:checked + label{border-color:var(--red-600);background:#FFF7F6;}\n .opt-card input:checked + label svg{stroke:var(--red-600);}\n .opt-card input:focus-visible + label{outline:3px solid var(--red-600);outline-offset:2px;}\n\n \/* pill-style radio row (fuel \/ age \/ emission) *\/\n .pill-row{display:flex;flex-wrap:wrap;gap:10px;}\n .opt-pill{position:relative;}\n .opt-pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}\n .opt-pill label{\n display:flex;flex-direction:column;gap:2px;\n border:1px solid var(--line-light);padding:12px 18px;\n background:var(--paper-000);font-size:1.008rem;font-weight:600;\n cursor:pointer;transition:border-color 0.15s, background 0.15s;\n min-width:150px;\n }\n .opt-pill label .sub{font-weight:400;font-size:0.851rem;color:var(--steel-500);}\n .opt-pill input:hover + label{border-color:var(--steel-500);}\n .opt-pill input:checked + label{border-color:var(--red-600);background:#FFF7F6;}\n .opt-pill input:focus-visible + label{outline:3px solid var(--red-600);outline-offset:2px;}\n\n .step-nav{display:flex;justify-content:space-between;margin-top:26px;}\n .btn{\n border:none;padding:12px 22px;font-size:0.963rem;font-weight:600;letter-spacing:0.03em;\n cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;\n }\n .btn-primary{background:var(--red-600);color:#fff;}\n .btn-primary:hover{background:var(--red-700);}\n .btn-ghost{background:transparent;color:var(--steel-500);border:1px solid var(--line-light);}\n .btn-ghost:hover{border-color:var(--steel-500);color:var(--ink-900);}\n .btn:disabled{opacity:0.35;cursor:not-allowed;}\n\n \/* ---------- Result (spec-plate) ---------- *\/\n .result{padding:26px clamp(16px,4vw,36px) 36px;}\n .plate{\n position:relative;\n background:var(--graphite-900);color:var(--paper-000);\n padding:clamp(22px,4vw,34px);\n display:grid;grid-template-columns:auto 1fr;gap:28px;\n align-items:center;\n }\n .plate::before,.plate::after,.plate .bolt-tl,.plate .bolt-tr{\n content:\"\";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--steel-500);\n }\n .plate::before{top:10px;left:10px;}\n .plate::after{bottom:10px;right:10px;}\n .plate .bolt-tr{top:10px;right:10px;}\n .plate .bolt-bl{position:absolute;bottom:10px;left:10px;width:7px;height:7px;border-radius:50%;background:var(--steel-500);}\n .plate-grade{text-align:center;border-right:1px solid var(--line-dark);padding-right:28px;}\n .plate-grade .g{font-family:'IBM Plex Mono',monospace;font-size:clamp(2.352rem,5vw,3.584rem);font-weight:600;line-height:1;}\n .plate-grade .tier{margin-top:10px;display:inline-block;font-size:0.762rem;letter-spacing:0.08em;text-transform:uppercase;background:var(--red-600);padding:5px 10px;}\n .plate-info .line{font-size:1.053rem;color:var(--steel-300);margin-bottom:4px;}\n .plate-info .product{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.512rem;margin:4px 0 10px;}\n .plate-info .spec-note{font-size:0.918rem;color:var(--steel-300);max-width:60ch;}\n\n .result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}\n\n .disclaimer{\n margin-top:18px;font-size:0.874rem;color:var(--steel-500);\n border-left:2px solid var(--amber-500);padding:8px 14px;background:var(--paper-050);\n }\n\n \/* ---------- Enquiry ---------- *\/\n .enquiry{border-top:1px solid var(--line-light);padding-top:26px;margin-top:30px;}\n .enquiry h3{font-size:1.176rem;margin-bottom:4px;}\n .enquiry .step-hint{margin-bottom:18px;}\n .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}\n .field{display:flex;flex-direction:column;gap:6px;grid-column:span 1;}\n .field.full{grid-column:1 \/ -1;}\n .field label{font-size:0.874rem;font-weight:600;letter-spacing:0.02em;}\n .field input,.field textarea{\n border:1px solid var(--line-light);padding:11px 12px;font-family:inherit;font-size:1.03rem;\n background:var(--paper-000);\n }\n .field input:focus,.field textarea:focus{outline:none;border-color:var(--red-600);}\n\n \/* brand \/ model selects (step: brandmodel) *\/\n .select-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;}\n .select-row .field select{\n border:1px solid var(--line-light);padding:11px 12px;font-family:inherit;font-size:1.03rem;\n background:var(--paper-000);color:var(--ink-900);appearance:none;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 20' fill='none' stroke='%23787D85' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'\/%3E%3C\/svg%3E\");\n background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;\n }\n .select-row .field select:focus{outline:none;border-color:var(--red-600);}\n .select-row .field select:disabled{color:var(--steel-500);cursor:not-allowed;}\n @media (max-width:560px){.select-row{grid-template-columns:1fr;}}\n .enquiry-success{display:none;background:#F2FBF3;border:1px solid #BFE6C3;padding:16px;font-size:1.008rem;}\n .enquiry-success.show{display:block;}\n @media (max-width:560px){\n .field-grid{grid-template-columns:1fr;}\n .plate{grid-template-columns:1fr;}\n .plate-grade{border-right:none;border-bottom:1px solid var(--line-dark);padding-right:0;padding-bottom:18px;}\n }\n\n \/* quick-links strip below tool *\/\n .quicklinks{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 60px;}\n .quicklinks h3{font-size:1.064rem;color:var(--steel-500);margin-bottom:14px;font-weight:600;text-transform:none;font-family:'Inter',sans-serif;letter-spacing:0;}\n .ql-row{display:flex;flex-wrap:wrap;gap:10px;}\n .ql-row a{\n border:1px solid var(--line-light);padding:9px 16px;font-size:0.952rem;text-decoration:none;color:var(--ink-900);\n transition:border-color 0.15s;\n }\n .ql-row a:hover{border-color:var(--red-600);color:var(--red-600);}\n\n \/* ===== Optional embed footer \u2014 remove if the WordPress theme already renders AXCL's global footer ===== *\/\n .embed-footer{\n background:var(--graphite-900);color:var(--steel-300);\n padding:26px clamp(16px,4vw,48px);font-size:0.918rem;\n display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;\n }\n .embed-footer .footer-brand{display:flex;align-items:center;gap:14px;}\n .embed-footer .footer-logo{height:38px;width:auto;display:block;border-radius:5px;}\n .embed-footer a{color:var(--steel-300);text-decoration:none;}\n .embed-footer a:hover{color:#fff;}\n \/* ======================================================================================================= *\/\n<\/style>\n<\/head>\n<body>\n\n<div class=\"finder-wrap\">\n <form class=\"finder-card\" id=\"finderForm\" novalidate>\n\n <div class=\"progress\" id=\"progressBar\" aria-hidden=\"true\"><\/div>\n <div class=\"progress-label\"><span class=\"step-of\" id=\"stepOfLabel\">STEP 1 \/ 3<\/span> \u00b7 <span id=\"stepTitleLabel\">Select equipment type<\/span><\/div>\n\n \n <div class=\"step active\" data-step=\"category\">\n <h2>What are we lubricating?<\/h2>\n <p class=\"step-hint\">Choose the closest match. This sets the fluid family and the questions that follow.<\/p>\n <div class=\"option-grid\" id=\"categoryGrid\"><\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"brandmodel\">\n <h2>Vehicle brand & model<\/h2>\n <p class=\"step-hint\">This is used to fill in your profile and enquiry accurately \u2014 the recommendation itself is based on the engine details in the next steps. Pick \"Other \/ not listed\" if your brand isn't shown.<\/p>\n <div class=\"select-row\">\n <div class=\"field\">\n <label for=\"brandSelect\">Brand<\/label>\n <select id=\"brandSelect\"><option value=\"\">Select brand<\/option><\/select>\n <\/div>\n <div class=\"field\">\n <label for=\"modelSelect\">Model<\/label>\n <select id=\"modelSelect\" disabled><option value=\"\">Select brand first<\/option><\/select>\n <\/div>\n <\/div>\n <div class=\"step-nav\">\n <button type=\"button\" class=\"btn btn-ghost\" data-back>\u2190 Back<\/button>\n <button type=\"button\" class=\"btn btn-primary\" data-next disabled>Continue \u2192<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"engine\">\n <h2 id=\"step2Title\">Engine type<\/h2>\n <p class=\"step-hint\" id=\"step2Hint\">Select the fuel or engine configuration.<\/p>\n <div class=\"pill-row\" id=\"engineGrid\"><\/div>\n <div class=\"step-nav\">\n <button type=\"button\" class=\"btn btn-ghost\" data-back>\u2190 Back<\/button>\n <button type=\"button\" class=\"btn btn-primary\" data-next disabled>Continue \u2192<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"age\">\n <h2 id=\"step3Title\">Model year<\/h2>\n <p class=\"step-hint\" id=\"step3Hint\">This affects the viscosity and additive package we recommend.<\/p>\n <div class=\"pill-row\" id=\"ageGrid\"><\/div>\n <div class=\"step-nav\">\n <button type=\"button\" class=\"btn btn-ghost\" data-back>\u2190 Back<\/button>\n <button type=\"button\" class=\"btn btn-primary\" data-next disabled>See recommendation \u2192<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" data-step=\"result\">\n <div class=\"result\">\n <h2 style=\"margin-bottom:18px;\">Your recommendation<\/h2>\n <div class=\"plate\">\n <span class=\"bolt-tr\" aria-hidden=\"true\"><\/span><span class=\"bolt-bl\" aria-hidden=\"true\"><\/span>\n <div class=\"plate-grade\">\n <div class=\"g mono\" id=\"resGrade\">5W-30<\/div>\n <span class=\"tier\" id=\"resTier\">Full Synthetic<\/span>\n <\/div>\n <div class=\"plate-info\">\n <div class=\"line\" id=\"resProfile\">Passenger Car \u00b7 Petrol \u00b7 2016 & Newer<\/div>\n <div class=\"product\" id=\"resProduct\">AXCL Automotive Engine Oil<\/div>\n <div class=\"spec-note\" id=\"resSpec\">Typically formulated to meet API SN\/SP performance levels.<\/div>\n <\/div>\n <\/div>\n\n <p class=\"disclaimer\">This is a general fluid-family recommendation, not a verified fitment lookup for your exact make and model. Always confirm the grade and quantity against your owner's handbook or OEM specification before topping up or servicing \u2014 or ask our technical team below to confirm it for you.<\/p>\n\n <div class=\"result-actions\">\n <a href=\"#\" target=\"_blank\" class=\"btn btn-primary\" id=\"resCatLink\">View product range \u2192<\/a>\n <button type=\"button\" class=\"btn btn-ghost\" id=\"resEmailBtn\">Email me this result<\/button>\n <button type=\"button\" class=\"btn btn-ghost\" data-restart>Start over<\/button>\n <\/div>\n\n <div class=\"enquiry\">\n <h3>Want a technical team member to confirm it?<\/h3>\n <p class=\"step-hint\">Leave your details and your selected profile \u2014 we'll reply with a confirmed grade and stock availability.<\/p>\n\n <div id=\"enquirySuccess\" class=\"enquiry-success\">Thanks \u2014 your enquiry and vehicle profile have been noted. Our technical sales team will contact you shortly.<\/div>\n\n <div id=\"enquiryFormWrap\">\n <div class=\"field-grid\">\n <div class=\"field\"><label for=\"fName\">Name<\/label><input id=\"fName\" name=\"name\" type=\"text\" required><\/div>\n <div class=\"field\"><label for=\"fCompany\">Company<\/label><input id=\"fCompany\" name=\"company\" type=\"text\"><\/div>\n <div class=\"field\"><label for=\"fMobile\">Mobile<\/label><input id=\"fMobile\" name=\"mobile\" type=\"tel\" required><\/div>\n <div class=\"field\"><label for=\"fEmail\">Email<\/label><input id=\"fEmail\" name=\"email\" type=\"email\" required><\/div>\n <div class=\"field full\"><label for=\"fMessage\">Message<\/label><textarea id=\"fMessage\" name=\"message\" rows=\"3\"><\/textarea><\/div>\n <\/div>\n <div class=\"step-nav\" style=\"justify-content:flex-end;\">\n <button type=\"button\" class=\"btn btn-primary\" id=\"enquirySubmit\">Send enquiry<\/button>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/form>\n<\/div>\n\n<div class=\"quicklinks\">\n <h3>Looking for gear oil, coolant, grease or transmission fluid instead?<\/h3>\n <div class=\"ql-row\">\n <a href=\"https:\/\/axcllubes.com\/category\/gear-oils\/\">Gear Oils<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/transmission-fluids\/\">Transmission Fluids<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/antifreeze-coolants\/\">Antifreeze & Coolants<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/automotive-industrial-greases\/\">Greases<\/a>\n <a href=\"https:\/\/axcllubes.com\/category\/brake-fluids\/\">Brake Fluids<\/a>\n <a href=\"https:\/\/axcllubes.com\/products\/\">Full product catalogue \u2192<\/a>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n\n \/\/ ---- Icon set (schematic line icons, currentColor via stroke) ----\n const ICONS = {\n car: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 30l3-11a4 4 0 0 1 4-3h22a4 4 0 0 1 4 3l3 11\"\/><rect x=\"4\" y=\"30\" width=\"40\" height=\"9\" rx=\"2\"\/><circle cx=\"13\" cy=\"39\" r=\"3.4\"\/><circle cx=\"35\" cy=\"39\" r=\"3.4\"\/><path d=\"M11 22h26\"\/><\/svg>',\n suv: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 29l2-12a4 4 0 0 1 4-3h9l6-6h9a4 4 0 0 1 4 4v6l4 3v8\"\/><rect x=\"4\" y=\"29\" width=\"39\" height=\"9\" rx=\"2\"\/><circle cx=\"13\" cy=\"38\" r=\"3.4\"\/><circle cx=\"34\" cy=\"38\" r=\"3.4\"\/><\/svg>',\n pickup: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 30v-8h13l6-8h6a4 4 0 0 1 4 4v3h4a4 4 0 0 1 4 4v5\"\/><rect x=\"4\" y=\"30\" width=\"40\" height=\"8\" rx=\"1.5\"\/><circle cx=\"13\" cy=\"38\" r=\"3.4\"\/><circle cx=\"35\" cy=\"38\" r=\"3.4\"\/><path d=\"M17 22v8\"\/><\/svg>',\n truck: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"16\" width=\"20\" height=\"16\" rx=\"1.5\"\/><path d=\"M23 21h9l7 6v5h-16\"\/><circle cx=\"11\" cy=\"35\" r=\"3.4\"\/><circle cx=\"34\" cy=\"35\" r=\"3.4\"\/><path d=\"M27 21v11\"\/><\/svg>',\n moto: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"34\" r=\"6\"\/><circle cx=\"37\" cy=\"34\" r=\"6\"\/><path d=\"M11 34l8-13h9l5 8h4\"\/><path d=\"M19 21l-4-6h-4\"\/><path d=\"M28 21l4 13\"\/><\/svg>',\n agri: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"14\" cy=\"35\" r=\"8\"\/><circle cx=\"38\" cy=\"38\" r=\"4.5\"\/><path d=\"M14 27v-9h9l9 9h6v10\"\/><path d=\"M23 18v-5h6\"\/><\/svg>',\n marine: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 30h36l-4 9H10z\"\/><path d=\"M24 30V8\"\/><path d=\"M24 10l11 8h-11z\"\/><path d=\"M14 39c3 3 6 3 9 0s6-3 9 0\"\/><\/svg>',\n industrial: '<svg viewBox=\"0 0 48 48\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M27 6l2 5 5-1 1 5 5 1-2 5 4 3-4 3 2 5-5 1-1 5-5-1-2 5-4-3-4 3-2-5-5 1-1-5-5-1 2-5-4-3 4-3-2-5 5-1 1-5 5 1 2-5z\"\/><circle cx=\"23\" cy=\"24\" r=\"6.5\"\/><\/svg>'\n };\n\n \/\/ ---- Recommendation data ----\n \/\/ grade \/ tier \/ spec values below are general fluid-family guidance (typical viscosity + performance\n \/\/ category for the segment), not a verified per-model fitment database. Replace\/extend with confirmed\n \/\/ data from your technical team before treating results as an exact OEM match.\n const AGE_BANDS_STD = [\n {key:'old', label:'Before 2005'},\n {key:'mid', label:'2005 \u2013 2015'},\n {key:'new', label:'2016 & Newer'}\n ];\n const AGE_BANDS_MOTO = [\n {key:'old', label:'Under 150cc'},\n {key:'mid', label:'150cc \u2013 500cc'},\n {key:'new', label:'Over 500cc'}\n ];\n\n const CATEGORY_URL_AUTO = 'https:\/\/axcllubes.com\/category\/automotive-engine-oils\/';\n const CATEGORY_URL_DIESEL = 'https:\/\/axcllubes.com\/category\/diesel-engine-oils\/';\n const CATEGORY_URL_MOTO = 'https:\/\/axcllubes.com\/category\/motorcycle\/';\n const CATEGORY_URL_AGRI = 'https:\/\/axcllubes.com\/category\/agriculture\/';\n const CATEGORY_URL_MARINE = 'https:\/\/axcllubes.com\/category\/marine-engine-oils\/';\n const CATEGORY_URL_INDUSTRIAL = 'https:\/\/axcllubes.com\/category\/industrial-oils\/';\n\n \/\/ ---- Vehicle brand & model lists ----\n \/\/ A working set of the brands\/models most commonly seen in the Middle East & East Africa\n \/\/ market. It's a starting point, not exhaustive \u2014 extend it any time by adding a key\n \/\/ (brand name) with an array of model names to the relevant MAKES object below.\n const CAR_MAKES = {\n 'Toyota': ['Corolla','Camry','Yaris','Avalon','Prius','Corolla Cross'],\n 'Nissan': ['Sunny','Altima','Maxima','Sentra'],\n 'Honda': ['Civic','Accord','City'],\n 'Hyundai': ['Elantra','Accent','Sonata','i10','i20'],\n 'Kia': ['Cerato','Optima \/ K5','Rio','Pegas'],\n 'Mitsubishi': ['Lancer','Attrage','Mirage'],\n 'Mazda': ['Mazda3','Mazda6'],\n 'Chevrolet': ['Malibu','Cruze','Optra'],\n 'Ford': ['Focus','Fusion','Taurus'],\n 'Mercedes-Benz': ['C-Class','E-Class','S-Class'],\n 'BMW': ['3 Series','5 Series','7 Series'],\n 'Lexus': ['ES','IS','LS'],\n 'MG': ['MG5','MG6'],\n 'Suzuki': ['Ciaz','Swift','Dzire'],\n 'Renault': ['Symbol','Fluence','Megane'],\n 'Peugeot': ['301','508'],\n 'Other \/ not listed': ['Other']\n };\n const SUV_MAKES = {\n 'Toyota': ['Land Cruiser','Prado','Fortuner','RAV4','FJ Cruiser'],\n 'Nissan': ['Patrol','X-Trail','Pathfinder','Kicks'],\n 'Mitsubishi': ['Pajero','Pajero Sport','Outlander','ASX'],\n 'Hyundai': ['Tucson','Santa Fe','Palisade','Creta'],\n 'Kia': ['Sportage','Sorento','Seltos'],\n 'Ford': ['Explorer','Expedition','EcoSport'],\n 'Chevrolet': ['Tahoe','Suburban','Trailblazer'],\n 'GMC': ['Yukon','Acadia'],\n 'Jeep': ['Wrangler','Grand Cherokee','Cherokee'],\n 'Land Rover': ['Range Rover','Range Rover Sport','Discovery','Defender'],\n 'Mercedes-Benz': ['GLE','GLC','G-Class'],\n 'BMW': ['X3','X5','X7'],\n 'Lexus': ['LX','RX','GX'],\n 'Honda': ['CR-V','HR-V'],\n 'Mazda': ['CX-5','CX-9'],\n 'MG': ['MG ZS','MG HS'],\n 'Other \/ not listed': ['Other']\n };\n const PICKUP_MAKES = {\n 'Toyota': ['Hilux','Land Cruiser Pickup'],\n 'Nissan': ['Navara','Patrol Pickup'],\n 'Mitsubishi': ['L200'],\n 'Ford': ['Ranger','F-150'],\n 'Chevrolet': ['Silverado','Colorado'],\n 'GMC': ['Sierra'],\n 'Isuzu': ['D-Max'],\n 'Mazda': ['BT-50'],\n 'Other \/ not listed': ['Other']\n };\n const TRUCK_MAKES = {\n 'Mercedes-Benz': ['Actros','Axor','Atego'],\n 'MAN': ['TGS','TGX'],\n 'Volvo': ['FH','FM','FMX'],\n 'Scania': ['R-Series','P-Series'],\n 'Iveco': ['Trakker','Eurocargo'],\n 'DAF': ['XF'],\n 'Isuzu': ['FVR','NPR'],\n 'Hino': ['500 Series','700 Series'],\n 'Other \/ not listed': ['Other']\n };\n const MOTO_MAKES = {\n 'Honda': ['CBR500R','CB150','CG125'],\n 'Yamaha': ['YBR125','R15','FZ'],\n 'Suzuki': ['GN125','GSX Series'],\n 'Bajaj': ['Boxer','Pulsar'],\n 'Kawasaki': ['Ninja','KLX'],\n 'Other \/ not listed': ['Other']\n };\n\n const DATA = {\n car: {\n label:'Passenger Car', icon:ICONS.car, makes:CAR_MAKES,\n step2Title:'Fuel type', step2Hint:'Select how the car is powered.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Older engines generally need a heavier, more mineral-based oil; newer engines are built for thinner, full-synthetic grades.',\n engines:{\n petrol:{label:'Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF \/ SG', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API SL \/ SM', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30', tier:'Full Synthetic', spec:'API SN \/ SP, ACEA A5\/B5', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n diesel:{label:'Diesel', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30 \/ 5W-40', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA C3', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n hybrid:{label:'Hybrid', sub:'Petrol-electric', bands:{\n old:{grade:'5W-30', tier:'Full Synthetic', spec:'API SN', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'0W-20', tier:'Full Synthetic', spec:'API SN, ILSAC GF-5', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'0W-16 \/ 0W-20', tier:'Full Synthetic', spec:'API SP, ILSAC GF-6', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }}\n }\n },\n suv: {\n label:'SUV & 4x4', icon:ICONS.suv, makes:SUV_MAKES,\n step2Title:'Fuel type', step2Hint:'Select how the vehicle is powered.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Older engines generally need a heavier, more mineral-based oil; newer engines are built for thinner, full-synthetic grades.',\n engines:{\n petrol:{label:'Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF \/ SG', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API SL \/ SM', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30 \/ 5W-40', tier:'Full Synthetic', spec:'API SN \/ SP, ACEA A3\/B4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n diesel:{label:'Diesel', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-40', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA C3', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }}\n }\n },\n pickup: {\n label:'Pickup & Light Commercial', icon:ICONS.pickup, makes:PICKUP_MAKES,\n step2Title:'Fuel type', step2Hint:'Select how the vehicle is powered.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Older engines generally need a heavier, more mineral-based oil; newer engines are built for thinner, full-synthetic grades.',\n engines:{\n petrol:{label:'Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF \/ SG', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API SL \/ SM', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-30', tier:'Full Synthetic', spec:'API SN \/ SP', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }},\n diesel:{label:'Diesel', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO},\n new:{grade:'5W-40', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA C3', product:'AXCL Automotive Engine Oil', url:CATEGORY_URL_AUTO}\n }}\n }\n },\n truck: {\n label:'Heavy Truck & Bus', icon:ICONS.truck, makes:TRUCK_MAKES,\n step2Title:'Emission standard', step2Hint:'Select the engine\\u2019s emission tier \u2014 this also sets the age range and fuel type (diesel).',\n ageBands: null,\n engines:{\n euro3:{label:'Euro 3 & below', sub:'Older fleet diesel', direct:{grade:'20W-50', tier:'Mineral \/ Semi-Synthetic', spec:'API CF-4 \/ CH-4', product:'AXCL Diesel Engine Oil', url:CATEGORY_URL_DIESEL}},\n euro45:{label:'Euro 4 \u2013 Euro 5', sub:'Common-rail diesel', direct:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4, ACEA E7', product:'AXCL Diesel Engine Oil', url:CATEGORY_URL_DIESEL}},\n euro6:{label:'Euro 6', sub:'DPF \/ SCR equipped', direct:{grade:'10W-30 \/ 5W-30', tier:'Full Synthetic, Low-SAPS', spec:'API CK-4, ACEA E9', product:'AXCL Diesel Engine Oil', url:CATEGORY_URL_DIESEL}}\n }\n },\n moto: {\n label:'Motorcycle', icon:ICONS.moto, makes:MOTO_MAKES,\n step2Title:'Engine type', step2Hint:'Select the engine configuration.',\n ageBands: AGE_BANDS_MOTO, ageStepTitle:'Engine size', ageStepHint:'Displacement affects the recommended viscosity and synthetic content.',\n engines:{\n four:{label:'4-Stroke Petrol', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API SF, JASO MA', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO},\n mid:{grade:'15W-40 \/ 10W-40', tier:'Semi-Synthetic', spec:'API SG, JASO MA2', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO},\n new:{grade:'10W-30 \/ 10W-40', tier:'Full Synthetic', spec:'API SN, JASO MA2', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO}\n }},\n two:{label:'2-Stroke Petrol', sub:'Oil-injected \/ pre-mix', direct:{grade:'2T Universal', tier:'Semi-Synthetic', spec:'API TC, JASO FC', product:'AXCL Motorcycle Oil', url:CATEGORY_URL_MOTO}}\n }\n },\n agri: {\n label:'Agriculture & Off-Highway', icon:ICONS.agri,\n step2Title:'Engine type', step2Hint:'Select the fuel system on the tractor or equipment.',\n ageBands: AGE_BANDS_STD, ageStepTitle:'Model year', ageStepHint:'Naturally-aspirated field engines run for decades on heavier mineral oils; common-rail turbo diesels need modern low-ash grades.',\n engines:{\n na:{label:'Diesel', sub:'Naturally aspirated', bands:{\n old:{grade:'20W-50', tier:'Mineral', spec:'API CF \/ CF-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4 \/ CH-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n new:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CJ-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI}\n }},\n turbo:{label:'Diesel', sub:'Turbo \/ common-rail', bands:{\n old:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n mid:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CJ-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI},\n new:{grade:'10W-30', tier:'Full Synthetic, Low-Ash', spec:'API CK-4', product:'AXCL Agriculture Oil', url:CATEGORY_URL_AGRI}\n }}\n }\n },\n marine: {\n label:'Marine', icon:ICONS.marine,\n step2Title:'Engine type', step2Hint:'Select the propulsion type.',\n ageBands:null,\n engines:{\n diesel:{label:'Inboard Diesel', direct:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CF, Marine Diesel', product:'AXCL Marine Engine Oil', url:CATEGORY_URL_MARINE}},\n two:{label:'Outboard', sub:'2-Stroke', direct:{grade:'TC-W3', tier:'Semi-Synthetic', spec:'NMMA TC-W3', product:'AXCL Marine Engine Oil', url:CATEGORY_URL_MARINE}},\n four:{label:'Outboard', sub:'4-Stroke', direct:{grade:'10W-30 \/ 10W-40', tier:'Semi-Synthetic', spec:'API FC-W', product:'AXCL Marine Engine Oil', url:CATEGORY_URL_MARINE}}\n }\n },\n industrial: {\n label:'Industrial & Stationary', icon:ICONS.industrial,\n step2Title:'Engine \/ equipment type', step2Hint:'Select the power source.',\n ageBands:null,\n engines:{\n diesel:{label:'Diesel Stationary', sub:'Generators, pumps', direct:{grade:'15W-40', tier:'Semi-Synthetic', spec:'API CI-4', product:'AXCL Industrial Oil', url:CATEGORY_URL_INDUSTRIAL}},\n gas:{label:'Gas Engine', sub:'Natural gas \/ LPG', direct:{grade:'SAE 40', tier:'Low-Ash Mineral', spec:'Gas engine oil, low-ash', product:'AXCL Industrial Oil', url:CATEGORY_URL_INDUSTRIAL}}\n }\n }\n };\n\n \/\/ ---- State ----\n \/\/ sequence: the ordered list of step ids for the category currently selected, e.g.\n \/\/ ['category','brandmodel','engine','age'] \u2014 'age' is dropped for categories\/engines that don't need it.\n let state = { category:null, brand:null, model:null, engine:null, age:null };\n let sequence = ['category'];\n let history = ['category'];\n\n const form = document.getElementById('finderForm');\n const categoryGrid = document.getElementById('categoryGrid');\n const brandSelect = document.getElementById('brandSelect');\n const modelSelect = document.getElementById('modelSelect');\n const engineGrid = document.getElementById('engineGrid');\n const ageGrid = document.getElementById('ageGrid');\n const progressBar = document.getElementById('progressBar');\n const stepOfLabel = document.getElementById('stepOfLabel');\n const stepTitleLabel = document.getElementById('stepTitleLabel');\n\n const STEP_TITLES = {\n category:'Select equipment type',\n brandmodel:'Vehicle brand & model'\n };\n\n \/\/ Build step: category cards\n Object.keys(DATA).forEach(key=>{\n const cat = DATA[key];\n const wrap = document.createElement('div');\n wrap.className = 'opt-card';\n wrap.innerHTML = `\n <input type=\"radio\" name=\"category\" id=\"cat_${key}\" value=\"${key}\">\n <label for=\"cat_${key}\">${cat.icon}<span class=\"opt-name\">${cat.label}<\/span><\/label>`;\n categoryGrid.appendChild(wrap);\n });\n\n categoryGrid.addEventListener('change', e=>{\n if(e.target.name==='category'){\n state.category = e.target.value;\n state.brand = null; state.model = null; state.engine = null; state.age = null;\n const cat = DATA[state.category];\n\n \/\/ Build the known sequence for this category (age is a best guess until the engine is chosen)\n sequence = ['category'];\n if(cat.makes) sequence.push('brandmodel');\n sequence.push('engine');\n if(cat.ageBands) sequence.push('age');\n\n if(cat.makes){ buildBrandStep(); }\n buildEngineStep();\n\n history = ['category'];\n goForward(cat.makes ? 'brandmodel' : 'engine');\n }\n });\n\n \/\/ ---- Brand \/ model step ----\n function buildBrandStep(){\n const cat = DATA[state.category];\n brandSelect.innerHTML = '<option value=\"\">Select brand<\/option>' +\n Object.keys(cat.makes).map(b=>`<option value=\"${b}\">${b}<\/option>`).join('');\n modelSelect.innerHTML = '<option value=\"\">Select brand first<\/option>';\n modelSelect.disabled = true;\n brandModelNextBtn().disabled = true;\n }\n\n brandSelect.addEventListener('change', ()=>{\n const cat = DATA[state.category];\n state.brand = brandSelect.value || null;\n state.model = null;\n brandModelNextBtn().disabled = true;\n if(!state.brand){\n modelSelect.innerHTML = '<option value=\"\">Select brand first<\/option>';\n modelSelect.disabled = true;\n return;\n }\n const models = cat.makes[state.brand];\n modelSelect.innerHTML = '<option value=\"\">Select model<\/option>' +\n models.map(m=>`<option value=\"${m}\">${m}<\/option>`).join('');\n modelSelect.disabled = false;\n });\n\n modelSelect.addEventListener('change', ()=>{\n state.model = modelSelect.value || null;\n brandModelNextBtn().disabled = !state.model;\n });\n\n function brandModelNextBtn(){ return document.querySelector('[data-step=\"brandmodel\"] [data-next]'); }\n function engineNextBtn(){ return document.querySelector('[data-step=\"engine\"] [data-next]'); }\n function ageNextBtn(){ return document.querySelector('[data-step=\"age\"] [data-next]'); }\n\n \/\/ ---- Engine \/ fuel step ----\n function buildEngineStep(){\n const cat = DATA[state.category];\n document.getElementById('step2Title').textContent = cat.step2Title;\n document.getElementById('step2Hint').textContent = cat.step2Hint;\n engineGrid.innerHTML = '';\n Object.keys(cat.engines).forEach(ekey=>{\n const eng = cat.engines[ekey];\n const wrap = document.createElement('div');\n wrap.className = 'opt-pill';\n wrap.innerHTML = `\n <input type=\"radio\" name=\"engine\" id=\"eng_${ekey}\" value=\"${ekey}\">\n <label for=\"eng_${ekey}\">${eng.label}${eng.sub ? `<span class=\"sub\">${eng.sub}<\/span>`:''}<\/label>`;\n engineGrid.appendChild(wrap);\n });\n engineNextBtn().disabled = true;\n }\n\n engineGrid.addEventListener('change', e=>{\n if(e.target.name==='engine'){\n state.engine = e.target.value;\n engineNextBtn().disabled = false;\n }\n });\n\n \/\/ ---- Age \/ size band step ----\n function buildAgeStep(){\n const cat = DATA[state.category];\n document.getElementById('step3Title').textContent = cat.ageStepTitle;\n document.getElementById('step3Hint').textContent = cat.ageStepHint;\n ageGrid.innerHTML = '';\n cat.ageBands.forEach(b=>{\n const wrap = document.createElement('div');\n wrap.className = 'opt-pill';\n wrap.innerHTML = `\n <input type=\"radio\" name=\"age\" id=\"age_${b.key}\" value=\"${b.key}\">\n <label for=\"age_${b.key}\">${b.label}<\/label>`;\n ageGrid.appendChild(wrap);\n });\n ageNextBtn().disabled = true;\n }\n\n ageGrid.addEventListener('change', e=>{\n if(e.target.name==='age'){\n state.age = e.target.value;\n ageNextBtn().disabled = false;\n }\n });\n\n \/\/ ---- Back \/ Next \/ Restart wiring ----\n form.addEventListener('click', e=>{\n const back = e.target.closest('[data-back]');\n const next = e.target.closest('[data-next]');\n const restart = e.target.closest('[data-restart]');\n const current = history[history.length-1];\n\n if(back){\n e.preventDefault();\n if(history.length>1){ history.pop(); showStepId(history[history.length-1]); }\n }\n\n if(next){\n e.preventDefault();\n if(current==='brandmodel'){\n goForward('engine');\n } else if(current==='engine'){\n const cat = DATA[state.category];\n const eng = cat.engines[state.engine];\n \/\/ Some engines skip the age question even if the category generally asks it\n \/\/ (e.g. 2-stroke motorcycle oil is a single universal grade).\n const idxAge = sequence.indexOf('age');\n if(eng.direct && idxAge!==-1) sequence.splice(idxAge,1);\n if(!eng.direct && idxAge===-1 && cat.ageBands) sequence.push('age');\n\n if(!eng.direct && sequence.includes('age')){\n buildAgeStep();\n goForward('age');\n } else {\n computeAndShowResult();\n }\n } else if(current==='age'){\n computeAndShowResult();\n }\n }\n\n if(restart){\n e.preventDefault();\n state = { category:null, brand:null, model:null, engine:null, age:null };\n sequence = ['category']; history = ['category'];\n document.querySelectorAll('#finderForm input[type=radio]').forEach(r=>r.checked=false);\n brandSelect.value=''; modelSelect.innerHTML = '<option value=\"\">Select brand first<\/option>'; modelSelect.disabled = true;\n showStepId('category');\n }\n });\n\n function goForward(id){\n history.push(id);\n showStepId(id);\n }\n\n function showStepId(id){\n document.querySelectorAll('.step').forEach(s=>s.classList.remove('active'));\n document.querySelector(`.step[data-step=\"${id}\"]`).classList.add('active');\n renderProgress(id);\n document.querySelector('.finder-card').scrollIntoView({behavior:'smooth', block:'start'});\n }\n\n function renderProgress(currentId){\n if(currentId==='category'){\n progressBar.innerHTML = '<div class=\"seg current\"><\/div>';\n stepOfLabel.textContent = 'GETTING STARTED';\n stepTitleLabel.textContent = STEP_TITLES.category;\n return;\n }\n if(currentId==='result'){\n progressBar.innerHTML = '';\n sequence.forEach(()=>{\n const seg = document.createElement('div');\n seg.className = 'seg done';\n progressBar.appendChild(seg);\n });\n stepOfLabel.textContent = 'RESULT';\n stepTitleLabel.textContent = 'Recommended fluid';\n return;\n }\n const cat = DATA[state.category];\n const total = sequence.length;\n const shown = sequence.indexOf(currentId) + 1;\n progressBar.innerHTML = '';\n for(let i=1;i<=total;i++){\n const seg = document.createElement('div');\n seg.className = 'seg' + (i<shown?' done':'') + (i===shown?' current':'');\n progressBar.appendChild(seg);\n }\n const title = STEP_TITLES[currentId] || (currentId==='engine' ? cat.step2Title : cat.ageStepTitle);\n stepOfLabel.textContent = `STEP ${shown} \/ ${total}`;\n stepTitleLabel.textContent = title;\n }\n\n function computeAndShowResult(){\n const cat = DATA[state.category];\n const eng = cat.engines[state.engine];\n const res = eng.direct ? eng.direct : eng.bands[state.age];\n\n document.getElementById('resGrade').textContent = res.grade;\n document.getElementById('resTier').textContent = res.tier;\n document.getElementById('resProduct').textContent = res.product;\n document.getElementById('resSpec').textContent = `Typically formulated to meet ${res.spec} performance levels.`;\n\n const ageLabel = (!eng.direct && cat.ageBands) ? (cat.ageBands.find(b=>b.key===state.age)||{}).label : null;\n const profileParts = [];\n if(state.brand && state.model) profileParts.push(`${state.brand} ${state.model}`);\n profileParts.push(cat.label);\n profileParts.push(eng.label + (eng.sub?` (${eng.sub})`:''));\n if(ageLabel) profileParts.push(ageLabel);\n document.getElementById('resProfile').textContent = profileParts.join(' \u00b7 ');\n document.getElementById('resCatLink').href = res.url;\n\n window.oilFinderProfile = {\n category:state.category, brand:state.brand, model:state.model,\n engine:state.engine, age:state.age, result:res\n };\n\n document.getElementById('enquirySuccess').classList.remove('show');\n document.getElementById('enquiryFormWrap').style.display = '';\n\n goForward('result');\n }\n\n \/\/ Email-this-result\n document.getElementById('resEmailBtn').addEventListener('click', ()=>{\n const p = window.oilFinderProfile;\n if(!p) return;\n const subject = encodeURIComponent(`AXCL Oil Finder result \u2014 ${p.result.grade}`);\n const body = encodeURIComponent(\n `My AXCL Oil Finder result:\\n\\nVehicle\/Equipment: ${document.getElementById('resProfile').textContent}\\nRecommended grade: ${p.result.grade}\\nOil tier: ${p.result.tier}\\nProduct line: ${p.result.product}\\n\\n(Sent from the AXCL Oil Finder tool)`\n );\n window.location.href = `mailto:info@axcllubes.com?subject=${subject}&body=${body}`;\n });\n\n \/\/ Enquiry submit \u2014 front-end confirmation only; wire to a real backend before launch (see DEV NOTE above)\n document.getElementById('enquirySubmit').addEventListener('click', ()=>{\n const name = document.getElementById('fName').value.trim();\n const mobile = document.getElementById('fMobile').value.trim();\n const email = document.getElementById('fEmail').value.trim();\n if(!name || !mobile || !email){\n alert('Please fill in your name, mobile and email so our team can reach you.');\n return;\n }\n document.getElementById('enquiryFormWrap').style.display = 'none';\n document.getElementById('enquirySuccess').classList.add('show');\n });\n\n renderProgress('category');\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> \u0627\u0644\u062e\u0637\u0648\u0629 1 \/ 3 \u00b7 \u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u0645\u0639\u062f\u0627\u062a \u0645\u0627 \u0627\u0644\u0630\u064a \u0646\u0642\u0648\u0645 \u0628\u062a\u0634\u0633\u064a\u062d\u0647\u061f \u0627\u062e\u062a\u0631 \u0627\u0644\u0623\u0642\u0631\u0628 \u0645\u0637\u0627\u0628\u0642\u0629. \u064a\u062d\u062f\u062f \u0647\u0630\u0627 \u0639\u0627\u0626\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644 \u0648\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u062a\u064a \u062a\u062a\u0628\u0639\u0647\u0627. \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u0627\u0644\u0637\u0631\u0627\u0632 \u0644\u0644\u0645\u0631\u0643\u0628\u0629 \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0644\u0645\u0644\u0621 \u0645\u0644\u0641\u0643 \u0627\u0644\u0634\u062e\u0635\u064a \u0648\u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0643 \u0628\u062f\u0642\u0629 - \u0627\u0644\u062a\u0648\u0635\u064a\u0629 \u0646\u0641\u0633\u0647\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0631\u0643...<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15850","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages\/15850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/comments?post=15850"}],"version-history":[{"count":16,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages\/15850\/revisions"}],"predecessor-version":[{"id":15882,"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/pages\/15850\/revisions\/15882"}],"wp:attachment":[{"href":"https:\/\/axcllubes.com\/ar\/wp-json\/wp\/v2\/media?parent=15850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}