{"id":52,"date":"2026-02-03T06:10:05","date_gmt":"2026-02-03T06:10:05","guid":{"rendered":"https:\/\/denoxlubs.jnjdesignstudio.com\/?page_id=52"},"modified":"2026-03-30T16:02:06","modified_gmt":"2026-03-30T16:02:06","slug":"product","status":"publish","type":"page","link":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/product\/","title":{"rendered":"Product"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"52\" class=\"elementor elementor-52\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e827a5b e-flex e-con-boxed e-con e-parent\" data-id=\"e827a5b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1da3499 e-con-full e-flex e-con e-parent\" data-id=\"1da3499\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:2019,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DenoxOurProductPage_TimelineDesign5-1.jpg&quot;},{&quot;id&quot;:2018,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DenoxOurProductPage_TimelineDesign4-1.jpg&quot;},{&quot;id&quot;:2017,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DenoxOurProductPage_TimelineDesign3-1.jpg&quot;},{&quot;id&quot;:2016,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DenoxOurProductPage_TimelineDesign2-1.jpg&quot;},{&quot;id&quot;:2015,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DenoxOurProductPage_TimelineDesign1-1.jpg&quot;}],&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb79c9a e-con-full e-flex e-con e-parent\" data-id=\"cb79c9a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7174f36 elementor-widget-mobile__width-inherit elementor-widget elementor-widget-html\" data-id=\"7174f36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Hanken+Grotesk:wght@800;900&family=Inter:wght@400;600;800;900&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<style>\n    :root {\n        --d-bg: transparent;      \n        --d-card-bg: #0A0A0A;     \n        --d-black: #000000;\n        --d-gold: #DAAA00;\n        --d-gold-grad: linear-gradient(135deg, #F9D423 0%, #DAAA00 50%, #997300 100%);\n        --d-white: #FFFFFF;\n        --d-grey: #888888;        \n        --d-border: rgba(255, 255, 255, 0.08); \n        --transition: all 0.3s ease;\n    }\n\n    \/* \ud83d\uded1 FORCE ALL ELEMENTS TO OBEY OUR RULES *\/\n    .dnx-saas-wrapper * { box-sizing: border-box !important; margin: 0; padding: 0; font-family: 'Inter', sans-serif; letter-spacing: normal; }\n    \n    \/* \ud83d\udd25 FIX 1: Used overflow-x: clip to stop horizontal scroll WITHOUT breaking Sticky! *\/\n    .dnx-saas-wrapper { background: var(--d-bg); color: var(--d-white); width: 100% !important; max-width: 100vw !important; overflow-x: clip !important; overflow-y: visible !important; display: block;}\n\n    \/* =========================================\n       1. MAIN LAYOUT (DESKTOP)\n       ========================================= *\/\n    .dnx-catalog-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 40px 2%; max-width: 1400px; margin: 0 auto; width: 100%; overflow: visible !important;}\n    \n    .dnx-sidebar { position: sticky; top: 120px; height: fit-content; border-right: 1px solid var(--d-border); padding-right: 10px; z-index: 10;}\n    .cat-menu-wrap { width: 100%; overflow: hidden; }\n    .cat-menu { display: flex; flex-direction: column; gap: 4px; }\n    \n    .cat-btn { \n        background: transparent !important; border: none !important; text-align: left !important; \n        padding: 16px 20px !important; border-radius: 0 8px 8px 0 !important; \n        font-weight: 600 !important; font-size: 15px !important; color: var(--d-grey) !important; \n        cursor: pointer !important; transition: var(--transition) !important; \n        border-left: 2px solid transparent !important; box-shadow: none !important;\n    }\n    .cat-btn:hover { color: var(--d-white) !important; transform: translateX(6px) !important; background: rgba(255,255,255,0.02) !important; }\n    .cat-btn.active { color: var(--d-gold) !important; border-left: 3px solid var(--d-gold) !important; font-weight: 900 !important; background: linear-gradient(90deg, rgba(218,170,0,0.1) 0%, transparent 100%) !important; }\n\n    .grid-header { margin-bottom: 25px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--d-border); padding-bottom: 15px;}\n    .grid-header h2 { font-family: 'Hanken Grotesk'; font-size: 2.2rem; font-weight: 900; text-transform: uppercase; color: var(--d-white); line-height: 1; margin: 0;}\n    .grid-header span { font-weight: 800; color: var(--d-gold); font-size: 13px; }\n\n    \/* Desktop Grid: Strictly 3 columns *\/\n    @media (min-width: 993px) { .product-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; width: 100%; padding-top: 10px; } }\n    @media (min-width: 1400px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }\n\n    \/* =========================================\n       2. PRODUCT CARD (SYNERGY HOVER)\n       ========================================= *\/\n    .prod-card { background: var(--d-card-bg); border-radius: 10px; padding: 20px; border: 1px solid var(--d-border); transition: var(--transition); display: flex; flex-direction: column; height: 100%; position: relative; width: 100%; }\n    .prod-card:hover { border-color: var(--d-gold); transform: translateY(-4px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(218, 170, 0, 0.15); z-index: 2; }\n\n    .cap-tags-wrapper { width: 100%; margin-bottom: 15px; padding-bottom: 2px;}\n    .cap-tags { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; align-items: flex-start; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 5px; scroll-behavior: smooth;}\n    .cap-tags::-webkit-scrollbar { display: none; }\n    .cap-tag { flex-shrink: 0; background: #151515; color: #AAA; font-size: 10px; font-weight: 800; padding: 4px 6px; border-radius: 4px; border: 1px solid #333;}\n    .cap-tag.highlight { border-color: var(--d-gold); color: #000; background: var(--d-gold-grad); } \n    \n    .prod-img { position: relative; width: 100%; height: 160px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, #1f1f1f 0%, #050505 100%); border-radius: 8px; padding: 15px; border: 1px solid rgba(255,255,255,0.02);}\n    .prod-img img { max-height: 100%; max-width: 100%; object-fit: contain; }\n\n    .btn-compare-float { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); border: 1px solid #333; color: #AAA; border-radius: 6px; padding: 5px 8px; font-size: 10px; font-weight: 800; cursor: pointer; z-index: 10; display: flex; align-items: center; gap: 4px; transition: 0.3s; backdrop-filter: blur(4px); letter-spacing: 0.5px;}\n    .btn-compare-float:hover { background: var(--d-gold); color: #000; border-color: var(--d-gold); }\n    .btn-compare-float.active-vs { background: var(--d-gold-grad); color: #000; border-color: transparent; box-shadow: 0 0 10px rgba(218,170,0,0.4);}\n\n    .prod-name { font-size: 13px !important; font-weight: 900; text-transform: uppercase; line-height: 1.4; margin-bottom: 15px; color: var(--d-white); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 36px; width: 100%;}\n\n    .prod-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; width: 100%;} \n    .btn-spec { background: var(--d-white) !important; color: #000 !important; flex: 1 !important; padding: 10px !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; transition: 0.3s !important; text-align: center !important; box-shadow: none !important;}\n    .prod-card:hover .btn-spec { background: var(--d-gold-grad) !important; box-shadow: 0 4px 15px rgba(218, 170, 0, 0.3) !important; }\n    \n    .btn-wa-icon { background: transparent !important; border: none !important; color: #25D366 !important; font-size: 22px !important; text-decoration: none !important; transition: 0.3s !important; padding: 0 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; border-radius: 0 !important; box-shadow: none !important;}\n    .prod-card:hover .btn-wa-icon { filter: drop-shadow(0 0 6px rgba(37,211,102,0.6)) !important; transform: scale(1.05) !important; }\n\n    \/* =========================================\n       3. VIEW SPEC MODAL\n       ========================================= *\/\n    .dnx-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; height: -webkit-fill-available; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); z-index: 99999; display: flex; justify-content: flex-end; opacity: 0; visibility: hidden; transition: var(--transition); }\n    .dnx-modal-overlay.active { opacity: 1; visibility: visible; }\n    .dnx-modal-content { background: #0A0A0A; width: 100%; max-width: 550px; height: 100%; transform: translateX(100%); transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; position: relative; border-left: 1px solid rgba(255,255,255,0.05); }\n    .dnx-modal-overlay.active .dnx-modal-content { transform: translateX(0); }\n    .modal-close { position: absolute; top: 20px; right: 25px; font-size: 20px; color: var(--d-white); cursor: pointer; z-index: 50; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 50%; transition: 0.3s;}\n    .modal-close:hover { background: var(--d-gold-grad); color: #000; transform: rotate(90deg);}\n\n    .modal-body { flex: 1; overflow-y: auto; padding: 40px 35px; width: 100%; overflow-x: hidden; }\n    .modal-img-wrap { width: 100%; height: 260px; background: radial-gradient(circle at 50% 50%, #1f1f1f 0%, #050505 100%); border-radius: 12px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; padding: 20px; border: 1px solid rgba(255,255,255,0.02); position: relative;}\n    .modal-img-wrap img { max-height: 100%; max-width: 100%; object-fit: contain; }\n    \n    .btn-in-modal-compare { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.8); border: 1px solid #333; color: #FFF; font-size: 10px; padding: 6px 10px; border-radius: 6px; font-weight: 800; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 5px;}\n    .btn-in-modal-compare:hover { background: var(--d-gold); color: #000; border-color: var(--d-gold);}\n\n    .modal-title { font-family: 'Hanken Grotesk'; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; line-height: 1.2; margin-bottom: 12px; color: var(--d-white); padding-right: 40px;}\n    .modal-desc { font-family: 'Noto Serif'; font-size: 15px; color: #AAA; line-height: 1.7; margin-bottom: 30px; }\n    .modal-subtitle { font-family: 'Inter'; font-weight: 900; font-size: 11px; text-transform: uppercase; color: var(--d-gold); margin-bottom: 12px; letter-spacing: 1px; }\n\n    .tech-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05);}\n    .tech-table th, .tech-table td { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 13px; text-align: left; }\n    .tech-table th { background: #111; color: var(--d-white); font-weight: 800; width: 45%; }\n    .tech-table td { font-weight: 600; color: var(--d-grey); background: #080808; }\n\n    .wa-form-container { background: #050505; border: 1px solid #222; border-radius: 8px; padding: 15px; margin-bottom: 20px;}\n    .wa-form-label { font-size: 10px; color: #888; text-transform: uppercase; font-weight: 800; margin-bottom: 5px; display: block;}\n    .wa-select { width: 100%; background: #111; border: 1px solid #333; color: #FFF; padding: 10px; border-radius: 6px; font-size: 12px; margin-bottom: 10px; outline: none; cursor: pointer;}\n    .wa-select:focus { border-color: var(--d-gold); }\n    .wa-textarea { width: 100%; background: #111; border: 1px solid #333; color: #FFF; padding: 10px; border-radius: 6px; font-size: 12px; resize: none; outline: none;}\n    .wa-textarea:focus { border-color: var(--d-gold); }\n\n    .modal-footer { flex-shrink: 0; background: var(--d-card-bg); padding: 20px 35px 30px 35px; border-top: 1px solid rgba(255,255,255,0.05); width: 100%;}\n    .btn-modal-wa { background: var(--d-gold-grad) !important; color: #000 !important; width: 100% !important; padding: 18px !important; border-radius: 8px !important; border: none !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; font-size: 14px !important; text-transform: uppercase !important; cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; text-decoration: none !important; transition: 0.3s !important;}\n\n    #toastMsg { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background: var(--d-gold-grad); color: #000; padding: 12px 25px; border-radius: 30px; font-weight: 800; font-size: 13px; z-index: 999999; box-shadow: 0 10px 20px rgba(218,170,0,0.3); transition: 0.4s ease; text-align: center; width: max-content;}\n    #toastMsg.show { top: 30px; }\n    .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; width: 100%;}\n    .comp-col { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%;}\n    .comp-img { height: 120px; width: 100%; background: radial-gradient(circle, #222 0%, #000 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 15px; border: 1px solid #333;}\n    .comp-img img { max-height: 100%; max-width: 100%; object-fit: contain; }\n    .comp-title { font-size: 13px; font-weight: 900; color: var(--d-white); text-transform: uppercase; line-height: 1.3; width: 100%;}\n\n    \/* =========================================\n       4. MOBILE & TABLET 100% PROTECTED + STICKY\n       ========================================= *\/\n    @media (max-width: 992px) {\n        \n        \/* \ud83d\udd25 THE MAGIC FIX: allow layout to be visible so sticky works! *\/\n        .dnx-catalog-layout { \n            display: flex !important; flex-direction: column !important; \n            padding: 0 3% 60px 3% !important; margin-top: 0 !important;\n            gap: 15px !important; width: 100% !important; box-sizing: border-box !important; \n            overflow: visible !important; \/* REQUIRED FOR STICKY *\/\n        }\n        \n        \/* \ud83d\udd25 UPGRADED STICKY SIDEBAR ON MOBILE *\/\n        .dnx-sidebar { \n            position: sticky !important; \n            top: 60px !important; \/* Perfect height to clear WordPress headers *\/\n            width: 100% !important; max-width: 100% !important; \n            border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; \n            padding: 0 !important; margin: 0 !important;\n            background: rgba(0,0,0,0.95) !important; backdrop-filter: blur(10px) !important; \n            z-index: 99 !important; \/* Extremely high so it stays above cards *\/\n            box-shadow: 0 10px 25px rgba(0,0,0,0.7) !important; \/* Lux shadow when scrolling *\/\n        } \n        \n        .cat-menu-wrap {\n            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);\n            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);\n            padding-bottom: 5px !important; \/* Room for shadow *\/\n        }\n        \n        .cat-menu { \n            flex-direction: row !important; overflow-x: auto !important; white-space: nowrap !important; \n            gap: 15px !important; padding: 12px 30px 15px 30px !important; \n            -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; width: 100% !important;\n        }\n        .cat-menu::-webkit-scrollbar { display: none; } \n        \n        .cat-btn { padding: 12px 22px !important; font-size: 13px !important; font-weight: 800 !important; border: 1px solid #222 !important; border-radius: 30px !important; background: #111 !important; color: #AAA !important; text-align: center !important; flex-shrink: 0; box-shadow: none !important;}\n        .cat-btn.active { background: var(--d-gold-grad) !important; color: #000 !important; border-color: transparent !important; } \n\n        .grid-header { padding-bottom: 5px !important; margin-bottom: 5px !important; border-bottom: none !important; width: 100% !important;}\n        .grid-header h2 { font-size: 1.5rem !important; }\n        \n        .product-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; } \n        .prod-card { padding: 12px !important; border-radius: 8px !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important;}\n        \n        .cap-tags-wrapper { margin-bottom: 8px !important;}\n        .cap-tags { padding-bottom: 4px !important; }\n        .cap-tag { font-size: 9px !important; padding: 4px 6px !important; border-radius: 3px !important;}\n        \n        .prod-img { height: 110px !important; padding: 10px !important; margin-bottom: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;} \n        .prod-name { font-size: 11px !important; margin-bottom: 12px !important; line-height: 1.3 !important; height: 28px !important; width: 100% !important; word-wrap: break-word !important;}\n        \n        .prod-actions { gap: 6px !important; width: 100% !important;}\n        .btn-spec { padding: 10px 0 !important; font-size: 10px !important; border-radius: 4px !important;}\n        .btn-wa-icon { font-size: 24px !important; padding: 0 !important; margin-left: 5px;}\n\n        .dnx-modal-content { max-width: 100vw !important; width: 100vw !important; border-left: none !important; }\n        .modal-body { padding: 25px 20px 30px 20px !important; overflow-x: hidden !important;}\n        .modal-img-wrap { height: 180px !important; padding: 10px !important; margin-bottom: 20px !important;}\n        .btn-in-modal-compare { font-size: 9px !important; padding: 5px 8px !important; }\n        .modal-title { font-size: 1.3rem !important; margin-bottom: 8px !important;}\n        .modal-footer { padding: 15px 20px 35px 20px !important; width: 100% !important;}\n        \n        .comp-img { height: 80px !important;}\n        .tech-table th, .tech-table td { padding: 8px !important; font-size: 11px !important;}\n    }\n<\/style>\n\n<div class=\"dnx-saas-wrapper\">\n    <div id=\"toastMsg\"><\/div>\n    \n    <div class=\"dnx-catalog-layout\">\n        \n        <aside class=\"dnx-sidebar\">\n            <div class=\"cat-menu-wrap\">\n                <div class=\"cat-menu\" id=\"categoryMenu\"><\/div>\n            <\/div>\n        <\/aside>\n\n        <main id=\"catalogMainArea\">\n            <div class=\"grid-header\">\n                <h2 id=\"currentCategoryTitle\">Engine Oil<\/h2>\n                <span id=\"productCount\">0 Products<\/span>\n            <\/div>\n            <div class=\"product-grid\" id=\"productGrid\"><\/div>\n        <\/main>\n    <\/div>\n<\/div>\n\n<div class=\"dnx-modal-overlay\" id=\"specModal\">\n    <div class=\"dnx-modal-content\">\n        <div class=\"modal-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div>\n        \n        <div class=\"modal-body\" id=\"modalBodyScroll\">\n            <div id=\"singleView\">\n                <div class=\"modal-img-wrap\">\n                    <button class=\"btn-in-modal-compare\" id=\"btnModalCompare\" onclick=\"triggerCompare()\"><i class=\"fas fa-exchange-alt\"><\/i> Compare<\/button>\n                    <img decoding=\"async\" id=\"mImg\" src=\"\" alt=\"\">\n                <\/div>\n                <h2 class=\"modal-title\" id=\"mTitle\"><\/h2>\n                <p class=\"modal-desc\" id=\"mDesc\"><\/p>\n                <div class=\"modal-subtitle\">Available Packaging<\/div>\n                <div class=\"cap-tags\" id=\"mSizes\" style=\"margin-bottom: 20px; display:flex; flex-wrap:wrap; height:auto; overflow:visible;\"><\/div>\n            <\/div>\n\n            <div id=\"compareView\" style=\"display: none;\">\n                <div class=\"comp-grid\">\n                    <div class=\"comp-col\">\n                        <div class=\"comp-img\"><img decoding=\"async\" id=\"compImg1\" src=\"\" alt=\"\"><\/div>\n                        <div class=\"comp-title\" id=\"compTitle1\"><\/div>\n                    <\/div>\n                    <div class=\"comp-col\">\n                        <div class=\"comp-img\"><img decoding=\"async\" id=\"compImg2\" src=\"\" alt=\"\"><\/div>\n                        <div class=\"comp-title\" id=\"compTitle2\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"modal-subtitle\" id=\"tableSubtitle\">Technical Data<\/div>\n            <table class=\"tech-table\"><tbody id=\"mTable\"><\/tbody><\/table>\n\n            <div class=\"wa-form-container\" id=\"waFormSection\">\n                <div class=\"modal-subtitle\" style=\"margin-bottom: 10px;\">Send Inquiry via WhatsApp<\/div>\n                <label class=\"wa-form-label\">Inquiry Type<\/label>\n                <select class=\"wa-select\" id=\"waType\" onchange=\"generateWaText()\">\n                    <option value=\"quote\">Request Quotation & Pricing<\/option>\n                    <option value=\"tech\">Request Technical Data Sheet (TDS)<\/option>\n                    <option value=\"general\">General Product Question<\/option>\n                <\/select>\n                <label class=\"wa-form-label\">Message Template (You can edit)<\/label>\n                <textarea class=\"wa-textarea\" id=\"waMessage\" rows=\"4\" oninput=\"updateWaLink()\"><\/textarea>\n            <\/div>\n        <\/div>\n\n        <div class=\"modal-footer\" id=\"modalFooterArea\">\n            <a href=\"#\" id=\"mWaBtn\" target=\"_blank\" class=\"btn-modal-wa\">\n                SEND TO WHATSAPP <i class=\"fab fa-whatsapp\" style=\"margin-left:8px; font-size: 18px;\"><\/i>\n            <\/a>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/* ========================================================\n       DENOX DATA ENGINE (47 ITEMS)\n       ======================================================== *\/\n    const categories = [\n        { id: 'engine', name: 'Engine Oil' },\n        { id: 'gear', name: 'Gear Oil' },\n        { id: 'hydraulic', name: 'Hydraulic' },\n        { id: 'slideway', name: 'Slideway' },\n        { id: 'others', name: 'Others' }\n    ];\n\n    const placeholderImg = \"https:\/\/images.unsplash.com\/photo-1620052581617-69532585f624?auto=format&fit=crop&w=500&q=80\"; \n\n    const products = [\n        \/\/ --- 1. ENGINE OIL ---\n        { cat: 'engine', name: 'DENOX Engine Oil 10W\/30 SL\/CF', sizes: ['4L'], desc: 'Premium multi-grade engine oil providing excellent wear protection and cleansing performance.', specs: { 'API Grade': 'SL\/CF', 'Viscosity @ 40\u00b0C': '70.5 cSt', 'Viscosity @ 100\u00b0C': '10.5 cSt' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/10W-30-SL-CF.png' },\n        { cat: 'engine', name: 'DENOX Engine Oil 15W\/40 CF4', sizes: ['5L', '18L', '200L', '1000L'], desc: 'Heavy-duty engine oil formulated for commercial vehicles and construction machinery.', specs: { 'API Grade': 'CF-4', 'Viscosity @ 100\u00b0C': '14.5 cSt', 'TBN': '9.0 mg KOH\/g' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/15W-30-SL-CF.png' },\n        { cat: 'engine', name: 'DENOX Engine Oil 15W\/40 CI4', sizes: ['7L', '18L', '200L', '1000L'], desc: 'Top-tier heavy-duty diesel engine oil designed for modern low-emission engines with EGR.', specs: { 'API Grade': 'CI-4', 'Viscosity @ 100\u00b0C': '15.2 cSt', 'TBN': '10.5 mg KOH\/g' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil 15W\/40 SL\/CF', sizes: ['1L', '4L', '18L', '200L', '1000L'], desc: 'High-performance versatile engine oil providing excellent high-temperature shear protection.', specs: { 'API Grade': 'SL\/CF', 'Viscosity @ 100\u00b0C': '14.2 cSt', 'Viscosity Index': '132' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/15W-30-SL-CF.png' },\n        { cat: 'engine', name: 'DENOX Engine Oil 20W\/40 SL\/CF', sizes: ['1L', '18L', '200L', '1000L'], desc: 'Formulated for tropical climates, maintaining strong oil film to reduce oil consumption in older engines.', specs: { 'API Grade': 'SL\/CF', 'Viscosity @ 100\u00b0C': '14.8 cSt', 'Viscosity Index': '120' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil 20W\/50 SL\/CF', sizes: ['1L', '4L', '18L', '200L', '1000L'], desc: 'High viscosity protection formula for extreme temperatures, preventing mechanical wear.', specs: { 'API Grade': 'SL\/CF', 'Viscosity @ 100\u00b0C': '18.5 cSt', 'Viscosity Index': '125' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/20W-30-SL-CF.png' },\n        { cat: 'engine', name: 'DENOX Engine Oil 20W\/50 SL\/CF4', sizes: ['5L', '18L', '200L', '1000L'], desc: 'Reinforced heavy-duty formula suitable for high-load commercial fleets and older diesel engines.', specs: { 'API Grade': 'SL\/CF4', 'Viscosity @ 100\u00b0C': '18.8 cSt', 'TBN': '8.5 mg KOH\/g' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil Fully Synthetic 0W-20', sizes: ['4L'], desc: 'Ultimate fuel economy fully synthetic oil for modern hybrid and ECO-start-stop engines.', specs: { 'Type': 'Fully Synthetic', 'Viscosity @ 100\u00b0C': '8.5 cSt', 'Viscosity Index': '168' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil Fully Synthetic 0W-30', sizes: ['4L'], desc: 'Premium fully synthetic formula providing exceptional cold-start protection and high-temp power.', specs: { 'Type': 'Fully Synthetic', 'Viscosity @ 100\u00b0C': '10.5 cSt', 'Viscosity Index': '170' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil Fully Synthetic 0W-40', sizes: ['4L'], desc: 'Track-ready fully synthetic oil, defying extreme temperatures for high-performance turbocharged engines.', specs: { 'Type': 'Fully Synthetic', 'Viscosity @ 100\u00b0C': '13.5 cSt', 'Viscosity Index': '185' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil Fully Synthetic 5W-40 SN', sizes: ['4L'], desc: 'Advanced synthetic technology designed for modern CRDI and Turbo engines ensuring ultimate cleanliness.', specs: { 'API Grade': 'SN', 'Viscosity @ 100\u00b0C': '13.5 cSt', 'Viscosity Index': '160' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil Semi Synthetic 10W-40', sizes: ['1L', '4L'], desc: 'Synthetic technology oil offering superior oxidation resistance and wear protection over mineral oils.', specs: { 'Type': 'Semi Synthetic', 'Viscosity @ 100\u00b0C': '14.5 cSt', 'Viscosity Index': '155' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/10W-30-SN-Fully-Synthetic.png' },\n        { cat: 'engine', name: 'DENOX Engine Oil Semi Synthetic 10W-40 CJ4', sizes: ['7L'], desc: 'Low SAPS technology to protect DPF systems, specially designed for modern diesel pickup trucks.', specs: { 'API Grade': 'CJ-4', 'Viscosity @ 100\u00b0C': '14.8 cSt', 'TBN': '9.5 mg KOH\/g' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/5W-30-SN-Fully-Synthetic.png' },\n        { cat: 'engine', name: 'DENOX Engine Oil Semi Synthetic 5W-30 SN', sizes: ['4L'], desc: 'Reduces internal engine friction to improve fuel economy, ideal for stop-and-go city driving.', specs: { 'API Grade': 'SN', 'Viscosity @ 100\u00b0C': '11.0 cSt', 'Viscosity Index': '152' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/5W-30-SN-Fully-Synthetic.png' },\n        { cat: 'engine', name: 'DENOX Engine Oil HD40', sizes: ['1L', '4L', '18L', '200L', '1000L'], desc: 'Heavy-duty single-grade oil suitable for moderately loaded commercial vehicles and generators.', specs: { 'Viscosity Grade': 'SAE 40', 'Viscosity @ 100\u00b0C': '14.5 cSt', 'TBN': '7.0 mg KOH\/g' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil SAE 10W', sizes: ['18L', '200L', '1000L'], desc: 'High-quality single-grade oil commonly used in specific hydraulic systems or industrial transmissions.', specs: { 'Viscosity Grade': 'SAE 10W', 'Viscosity @ 40\u00b0C': '40.0 cSt', 'Flash Point': '210\u00b0C' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil SAE 30', sizes: ['18L', '200L', '1000L'], desc: 'Industry standard single-grade oil for stationary diesel generators and older machinery.', specs: { 'Viscosity Grade': 'SAE 30', 'Viscosity @ 40\u00b0C': '95.0 cSt', 'Flash Point': '225\u00b0C' }, img: '' },\n        { cat: 'engine', name: 'DENOX Engine Oil SAE 40', sizes: ['4L', '18L', '200L', '1000L'], desc: 'Heavy-duty single-grade oil maintaining stable oil film at high temperatures for reliable protection.', specs: { 'Viscosity Grade': 'SAE 40', 'Viscosity @ 40\u00b0C': '145.0 cSt', 'Flash Point': '235\u00b0C' }, img: 'https:\/\/denoxlubs.jnjdesignstudio.com\/wp-content\/uploads\/2026\/03\/SAE-40.png' },\n\n        \/\/ --- 2. GEAR OIL ---\n        { cat: 'gear', name: 'DENOX Gear Oil 90', sizes: ['1L', '4L', '18L', '200L', '1000L'], desc: 'High-performance gear oil with EP additives designed for manual transmissions and differentials.', specs: { 'API Grade': 'GL-4 \/ GL-5', 'Viscosity @ 40\u00b0C': '180 cSt' }, img: '' },\n        { cat: 'gear', name: 'DENOX Gear Oil 140', sizes: ['4L', '18L', '200L', '1000L'], desc: 'Heavy-duty high viscosity gear oil providing strong shock-resistant oil film.', specs: { 'API Grade': 'GL-4 \/ GL-5', 'Viscosity @ 40\u00b0C': '380 cSt' }, img: '' },\n        { cat: 'gear', name: 'DENOX Gear Oil ISO 220', sizes: ['18L', '200L', '1000L'], desc: 'Premium industrial enclosed gear oil with excellent micropitting protection and water separation.', specs: { 'ISO Grade': '220', 'Viscosity @ 40\u00b0C': '220 cSt' }, img: '' },\n        { cat: 'gear', name: 'DENOX Gear Oil ISO 320', sizes: ['18L', '200L', '1000L'], desc: 'High viscosity industrial gear oil designed for reducers handling heavy and shock loads.', specs: { 'ISO Grade': '320', 'Viscosity @ 40\u00b0C': '320 cSt' }, img: '' },\n        { cat: 'gear', name: 'DENOX Gear Oil ISO 460', sizes: ['18L', '200L', '1000L'], desc: 'Ultra-high load industrial gear oil suitable for low-speed, extremely heavy-duty gearboxes.', specs: { 'ISO Grade': '460', 'Viscosity @ 40\u00b0C': '460 cSt' }, img: '' },\n        { cat: 'gear', name: 'DENOX Gear Oil 80W-90', sizes: ['4L', '18L', '200L', '1000L'], desc: 'Multi-grade automotive gear oil balancing cold-start fluidity and high-temp extreme pressure protection.', specs: { 'API Grade': 'GL-5', 'Viscosity @ 40\u00b0C': '145 cSt' }, img: '' },\n        { cat: 'gear', name: 'DENOX Gear Oil ATF 2', sizes: ['18L', '200L', '1000L'], desc: 'Industrial and commercial automatic transmission fluid providing stable friction characteristics.', specs: { 'Type': 'ATF Type 2', 'Color': 'Red' }, img: '' },\n        { cat: 'gear', name: 'DENOX Gear Oil ATF 3', sizes: ['1L', '4L', '18L', '200L', '1000L'], desc: 'Premium automatic transmission fluid ensuring smooth shifting and preventing internal overheating.', specs: { 'Type': 'Dexron III Equivalent', 'Color': 'Red' }, img: '' },\n\n        \/\/ --- 3. HYDRAULIC ---\n        { cat: 'hydraulic', name: 'DENOX Hydraulic 10W', sizes: ['18L', '200L', '1000L'], desc: 'Dual-action hydraulic and transmission fluid with anti-wear additives for heavy equipment.', specs: { 'Viscosity @ 40\u00b0C': '41.5 cSt', 'Viscosity Index': '105' }, img: '' },\n        { cat: 'hydraulic', name: 'DENOX Hydraulic ISO 46', sizes: ['18L', '200L', '1000L'], desc: 'Standard anti-wear hydraulic oil suitable for medium to high-pressure industrial systems.', specs: { 'ISO Grade': '46', 'Viscosity @ 40\u00b0C': '46.0 cSt' }, img: '' },\n        { cat: 'hydraulic', name: 'DENOX Hydraulic ISO 68', sizes: ['18L', '200L', '1000L'], desc: 'High viscosity standard anti-wear hydraulic oil for machinery operating at higher temperatures.', specs: { 'ISO Grade': '68', 'Viscosity @ 40\u00b0C': '68.0 cSt' }, img: '' },\n        { cat: 'hydraulic', name: 'DENOX Hydraulic Oil 10W', sizes: ['18L', '200L', '1000L'], desc: 'Industrial grade universal 10W hydraulic transmission oil ensuring efficient power transfer.', specs: { 'Viscosity @ 40\u00b0C': '41.0 cSt', 'Flash Point': '215\u00b0C' }, img: '' },\n        { cat: 'hydraulic', name: 'DENOX Hydraulic Oil AWS 100', sizes: ['18L', '200L', '1000L'], desc: 'Premium anti-wear hydraulic oil (AWS) built for heavy extruders and high-temp systems.', specs: { 'ISO Grade': '100', 'Viscosity @ 40\u00b0C': '100.0 cSt' }, img: '' },\n        { cat: 'hydraulic', name: 'DENOX Hydraulic Oil AWS 32', sizes: ['18L', '200L', '1000L'], desc: 'Premium anti-wear hydraulic oil (AWS) ideal for precision CNC machines and cold starts.', specs: { 'ISO Grade': '32', 'Viscosity @ 40\u00b0C': '32.0 cSt' }, img: '' },\n        { cat: 'hydraulic', name: 'DENOX Hydraulic Oil AWS 46', sizes: ['18L', '200L', '1000L'], desc: 'Best-selling premium anti-wear hydraulic oil (AWS) with exceptional water separation.', specs: { 'ISO Grade': '46', 'Viscosity @ 40\u00b0C': '46.0 cSt' }, img: '' },\n        { cat: 'hydraulic', name: 'DENOX Hydraulic Oil AWS 68', sizes: ['18L', '200L', '1000L'], desc: 'Top-tier AWS anti-wear hydraulic fluid developed for excavators and heavy industrial equipment.', specs: { 'ISO Grade': '68', 'Viscosity @ 40\u00b0C': '68.0 cSt' }, img: '' },\n\n        \/\/ --- 4. SLIDEWAY ---\n        { cat: 'slideway', name: 'DENOX Slideway Oil 150', sizes: ['18L', '200L'], desc: 'High viscosity precision slideway oil with excellent adhesion to prevent stick-slip in heavy machine tools.', specs: { 'ISO Grade': '150', 'Stick-Slip Ratio': '< 0.8' }, img: '' },\n        { cat: 'slideway', name: 'DENOX Slideway Oil 220', sizes: ['18L', '200L'], desc: 'Extreme heavy-duty vertical slideway oil providing powerful EP protection.', specs: { 'ISO Grade': '220', 'Stick-Slip Ratio': '< 0.8' }, img: '' },\n        { cat: 'slideway', name: 'DENOX Slideway Oil 32', sizes: ['18L', '200L'], desc: 'Low viscosity slideway oil functioning as both hydraulic and slideway fluid for shared-tank CNCs.', specs: { 'ISO Grade': '32', 'Stick-Slip Ratio': '< 0.8' }, img: '' },\n        { cat: 'slideway', name: 'DENOX Slideway Oil 68', sizes: ['18L', '200L'], desc: 'Industry standard slideway oil offering outstanding resistance to aqueous coolant wash-off.', specs: { 'ISO Grade': '68', 'Stick-Slip Ratio': '< 0.8' }, img: '' },\n        { cat: 'slideway', name: 'DENOX Slideway Oil ISO 100', sizes: ['18L', '200L'], desc: 'Medium-high viscosity slideway oil ensuring smooth table movement and superior surface finish.', specs: { 'ISO Grade': '100', 'Stick-Slip Ratio': '< 0.8' }, img: '' },\n\n        \/\/ --- 5. OTHERS ---\n        { cat: 'others', name: 'DENOX 2T', sizes: ['1L', '5L', '18L', '200L', '1000L'], desc: 'High-quality 2-stroke engine oil with a clean-burn formula reducing exhaust port deposits.', specs: { 'Type': '2-Stroke', 'Ash Content': 'Low Ash' }, img: '' },\n        { cat: 'others', name: 'Lithium Complex Grease EP2 (DENOX)', sizes: ['2KG', '15KG'], desc: 'High-temp, water-resistant extreme pressure lithium complex grease for automotive and industrial bearings.', specs: { 'NLGI Grade': '2', 'Dropping Point': '> 260\u00b0C' }, img: '' },\n        { cat: 'others', name: 'DENOX Radiator Coolant Blue', sizes: ['1L', '18L', '200L', '1000L'], desc: 'Premium anti-freeze\/anti-rust coolant protecting the radiator system from corrosion and scaling.', specs: { 'Type': 'Ethylene Glycol', 'Color': 'Blue' }, img: '' },\n        { cat: 'others', name: 'DENOX Radiator Coolant Green', sizes: ['1L', '18L', '200L', '1000L'], desc: 'Heavy-duty long-life coolant providing all-weather boil-over and freeze protection.', specs: { 'Type': 'Ethylene Glycol', 'Color': 'Green' }, img: '' },\n        { cat: 'others', name: 'DENOX HD Grease', sizes: ['15KG', '180KG'], desc: 'Heavy Duty industrial grease designed for extreme wear protection in mining and construction chassis pins.', specs: { 'NLGI Grade': '3', 'Application': 'Heavy Duty' }, img: '' },\n        { cat: 'others', name: 'DENOX Brake Oil DOT 3', sizes: ['500ML'], desc: 'High-performance synthetic brake fluid with high boiling point to prevent vapor lock.', specs: { 'Standard': 'DOT 3', 'Dry Boiling Point': '> 230\u00b0C' }, img: '' },\n        { cat: 'others', name: 'DENOX Brake Oil DOT 4', sizes: ['500ML'], desc: 'Top-tier synthetic brake fluid providing ultimate braking protection for vehicles with ABS and disc brakes.', specs: { 'Standard': 'DOT 4', 'Dry Boiling Point': '> 260\u00b0C' }, img: '' },\n        { cat: 'others', name: 'DENOX AdBlue', sizes: ['10L'], desc: 'High-purity Diesel Exhaust Fluid (DEF) designed for SCR systems to efficiently purify exhaust emissions.', specs: { 'Urea Concentration': '32.5%', 'Standard': 'ISO 22241' }, img: '' }\n    ];\n\n    const catMenu = document.getElementById('categoryMenu');\n    const productGrid = document.getElementById('productGrid');\n    const titleEl = document.getElementById('currentCategoryTitle');\n    const countEl = document.getElementById('productCount');\n    let sliderTouched = false;\n    \n    let compareProdA = null; \n    let currentModalProd = null;\n    let isCompareMode = false;\n\n    function initMenu() {\n        categories.forEach((cat, index) => {\n            const btn = document.createElement('button');\n            btn.id = 'btn-cat-' + cat.id;\n            btn.className = `cat-btn ${index === 0 ? 'active' : ''}`;\n            btn.innerText = cat.name;\n            btn.onclick = () => activateCategory(cat.id, cat.name);\n            catMenu.appendChild(btn);\n        });\n        \n        if(window.innerWidth <= 992) {\n            catMenu.addEventListener('touchstart', () => sliderTouched = true, {passive: true});\n            catMenu.addEventListener('mousedown', () => sliderTouched = true);\n            setInterval(() => {\n                if(!sliderTouched) {\n                    catMenu.scrollTo({ left: 30, behavior: 'smooth' });\n                    setTimeout(() => { if(!sliderTouched) catMenu.scrollTo({ left: 0, behavior: 'smooth' }); }, 400);\n                }\n            }, 3000); \n        }\n\n        activateCategory(categories[0].id, categories[0].name, false);\n    }\n\n    function activateCategory(categoryId, categoryName, autoScroll = true) {\n        document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));\n        const btn = document.getElementById('btn-cat-' + categoryId);\n        if(btn) {\n            btn.classList.add('active');\n            if(window.innerWidth <= 992) btn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n        }\n        renderProducts(categoryId, categoryName);\n    }\n\n    function renderProducts(categoryId, categoryName) {\n        titleEl.innerText = categoryName;\n        productGrid.innerHTML = ''; \n        const filtered = products.filter(p => p.cat === categoryId);\n        countEl.innerText = `${filtered.length} Products`;\n\n        filtered.forEach((prod, index) => {\n            let tagsHtml = '';\n            prod.sizes.forEach(size => {\n                let cssClass = 'cap-tag';\n                if(size === '7L') cssClass += ' highlight';\n                tagsHtml += `<span class=\"${cssClass}\">${size}<\/span>`;\n            });\n\n            const card = document.createElement('div');\n            card.className = 'prod-card';\n            card.style.opacity = '0';\n            card.style.transform = 'translateY(15px)';\n            \n            card.innerHTML = `\n                <div class=\"cap-tags-wrapper\">\n                    <div class=\"cap-tags\" id=\"tags-scroll-${index}\">${tagsHtml}<\/div>\n                <\/div>\n                <div class=\"prod-img\">\n                    <img decoding=\"async\" src=\"${prod.img || placeholderImg}\" alt=\"${prod.name}\">\n                <\/div>\n                <h4 class=\"prod-name\">${prod.name}<\/h4>\n                <div class=\"prod-actions\">\n                    <button class=\"btn-spec\" onclick='openModal(${JSON.stringify(prod).replace(\/'\/g, \"&#39;\")})'>View Spec<\/button>\n                    <a href=\"https:\/\/wa.me\/60331231710?text=Hi%20Denox,%20I%20am%20looking%20for%20[ ${encodeURIComponent(prod.name)} ].\" target=\"_blank\" class=\"btn-wa-icon\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n                <\/div>\n            `;\n            productGrid.appendChild(card);\n\n            setTimeout(() => { \n                card.style.opacity = '1'; \n                card.style.transform = 'translateY(0)'; \n                \n                const tagsEl = document.getElementById(`tags-scroll-${index}`);\n                if(tagsEl && tagsEl.scrollWidth > tagsEl.clientWidth) {\n                    setTimeout(() => {\n                        tagsEl.scrollTo({ left: 30, behavior: 'smooth' });\n                        setTimeout(() => tagsEl.scrollTo({ left: 0, behavior: 'smooth' }), 500);\n                    }, 500);\n                }\n            }, index * 40); \n        });\n    }\n\n    const modal = document.getElementById('specModal');\n    const modalBody = document.getElementById('modalBodyScroll');\n    const toast = document.getElementById('toastMsg');\n    const waTextarea = document.getElementById('waMessage');\n    const waSelect = document.getElementById('waType');\n    const btnWaSubmit = document.getElementById('mWaBtn');\n\n    function showToast(msg) {\n        toast.innerText = msg;\n        toast.classList.add('show');\n        setTimeout(() => toast.classList.remove('show'), 3000);\n    }\n\n    function openModal(prod) {\n        if(compareProdA) {\n            openCompareModal(compareProdA, prod);\n            compareProdA = null; \n            return;\n        }\n\n        isCompareMode = false;\n        currentModalProd = prod;\n        document.getElementById('singleView').style.display = 'block';\n        document.getElementById('compareView').style.display = 'none';\n        document.getElementById('tableSubtitle').innerText = 'Technical Data';\n\n        document.getElementById('mTitle').innerText = prod.name;\n        document.getElementById('mDesc').innerText = prod.desc;\n        document.getElementById('mImg').src = prod.img || placeholderImg;\n        \n        let tagsHtml = '';\n        prod.sizes.forEach(size => { tagsHtml += `<span class=\"cap-tag ${size === '7L' ? 'highlight' : ''}\" style=\"font-size: 13px; padding: 6px 14px;\">${size}<\/span>`; });\n        document.getElementById('mSizes').innerHTML = tagsHtml;\n\n        let tableHtml = '';\n        for (const [key, value] of Object.entries(prod.specs)) { tableHtml += `<tr><th>${key}<\/th><td>${value}<\/td><\/tr>`; }\n        document.getElementById('mTable').innerHTML = tableHtml;\n\n        waSelect.value = \"quote\";\n        generateWaText();\n\n        showModal();\n    }\n\n    function triggerCompare() {\n        compareProdA = currentModalProd;\n        closeModal();\n        showToast(`Selected [${compareProdA.name}]. Click another product to compare.`);\n    }\n\n    function openCompareModal(prod1, prod2) {\n        isCompareMode = true;\n        document.getElementById('singleView').style.display = 'none';\n        document.getElementById('compareView').style.display = 'block';\n        document.getElementById('tableSubtitle').innerText = 'Data Comparison';\n\n        document.getElementById('compImg1').src = prod1.img || placeholderImg;\n        document.getElementById('compTitle1').innerText = prod1.name;\n        document.getElementById('compImg2').src = prod2.img || placeholderImg;\n        document.getElementById('compTitle2').innerText = prod2.name;\n\n        const allSpecs = new Set([...Object.keys(prod1.specs), ...Object.keys(prod2.specs)]);\n        let tableHtml = `<tr><th style=\"background:#111;\">Parameter<\/th><th style=\"color:#FFF;\">Product A<\/th><th style=\"color:#FFF;\">Product B<\/th><\/tr>`;\n        allSpecs.forEach(key => {\n            const val1 = prod1.specs[key] || '-';\n            const val2 = prod2.specs[key] || '-';\n            const bgStr = val1 !== val2 ? 'background: rgba(218,170,0,0.05);' : '';\n            tableHtml += `<tr style=\"${bgStr}\"><th>${key}<\/th><td>${val1}<\/td><td>${val2}<\/td><\/tr>`;\n        });\n        document.getElementById('mTable').innerHTML = tableHtml;\n\n        waSelect.value = \"general\"; \n        waTextarea.value = `Hi Denox Sales,\\n\\nI am comparing [ ${prod1.name} ] and [ ${prod2.name} ]. Could you advise which is better for my usage?`;\n        updateWaLink();\n\n        showModal();\n    }\n\n    function generateWaText() {\n        if(isCompareMode) return; \n        \n        const type = waSelect.value;\n        const pName = currentModalProd ? currentModalProd.name : '';\n        \n        let template = \"\";\n        if(type === 'quote') {\n            template = `Hi Denox Sales,\\n\\nI would like to request the official quotation and pricing for [ ${pName} ]. Please advise on minimum order quantity (MOQ).`;\n        } else if (type === 'tech') {\n            template = `Hi Denox Tech Support,\\n\\nCould you please provide the full Technical Data Sheet (TDS) and Material Safety Data Sheet (MSDS) for [ ${pName} ]?`;\n        } else {\n            template = `Hi Denox,\\n\\nI have a general inquiry regarding the product [ ${pName} ]. `;\n        }\n        \n        waTextarea.value = template;\n        updateWaLink();\n    }\n\n    function updateWaLink() {\n        const text = encodeURIComponent(waTextarea.value);\n        const waBtn = document.getElementById('mWaBtn');\n        waBtn.href = `https:\/\/wa.me\/60331231710?text=${text}`;\n    }\n\n    function showModal() {\n        modalBody.scrollTop = 0; \n        modal.classList.add('active');\n        document.body.style.overflow = 'hidden'; \n    }\n\n    function closeModal() {\n        modal.classList.remove('active');\n        document.body.style.overflow = 'auto';\n    }\n\n    modal.addEventListener('click', function(e) { if(e.target === modal) closeModal(); });\n\n    initMenu();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ede5ab8 e-con-full e-flex e-con e-parent\" data-id=\"ede5ab8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:2014,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cutting-coolant.jpg&quot;},{&quot;id&quot;:2020,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/engine-oil.jpg&quot;},{&quot;id&quot;:2021,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/gear-oil.jpg&quot;},{&quot;id&quot;:2022,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/grease.jpg&quot;},{&quot;id&quot;:2023,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/hydraulic-oil.jpg&quot;},{&quot;id&quot;:2024,&quot;url&quot;:&quot;https:\\\/\\\/denoxlubs.jnjdesignstudio.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/white-oil.jpg&quot;}],&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Engine Oil 0 Products Compare Available Packaging Technical Data Send Inquiry via WhatsApp Inquiry Type Request Quotation &#038; PricingRequest Technical Data Sheet (TDS)General Product Question Message Template (You can edit) SEND TO WHATSAPP<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":355,"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":2414,"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/pages\/52\/revisions\/2414"}],"wp:attachment":[{"href":"https:\/\/denoxlubs.jnjdesignstudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}