{"id":20,"date":"2025-12-06T16:23:33","date_gmt":"2025-12-06T16:23:33","guid":{"rendered":"https:\/\/vajrademo.atheedhbabum.com\/?page_id=20"},"modified":"2025-12-07T13:39:33","modified_gmt":"2025-12-07T13:39:33","slug":"customization","status":"publish","type":"page","link":"https:\/\/vajrademo.atheedhbabum.com\/?page_id=20","title":{"rendered":"CUSTOMIZATION"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20\" class=\"elementor elementor-20\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9cd3a77 e-flex e-con-boxed e-con e-parent\" data-id=\"9cd3a77\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99144b0 elementor-widget elementor-widget-html\" data-id=\"99144b0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- VAJRA \u2013 CUSTOMIZABLE EPOXY PRODUCT PAGE -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');\r\n\r\n  .vj-epoxy-page {\r\n    max-width: 1120px;\r\n    margin: 0 auto;\r\n    padding: 28px 18px 40px;\r\n    font-family: \"Playfair Display\", serif;\r\n    color: #111;\r\n  }\r\n\r\n  \/* HERO *\/\r\n  .vj-epoxy-hero {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);\r\n    gap: 24px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .vj-epoxy-hero-title {\r\n    font-size: 2.1rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .vj-epoxy-hero-sub {\r\n    font-size: 0.95rem;\r\n    color: #555;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .vj-epoxy-tags {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n    margin-bottom: 18px;\r\n  }\r\n\r\n  .vj-tag {\r\n    padding: 5px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid #b2b0ab;\r\n    font-size: 0.78rem;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    color: #333;\r\n  }\r\n\r\n  .vj-epoxy-meta {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 10px;\r\n    font-size: 0.8rem;\r\n    color: #444;\r\n  }\r\n\r\n  .vj-epoxy-meta strong {\r\n    display: block;\r\n    font-size: 0.9rem;\r\n  }\r\n\r\n  .vj-epoxy-hero-visual {\r\n    border-radius: 18px;\r\n    background: linear-gradient(135deg, #ffffff, #d9d9d9);\r\n    border: 1px solid #d3d3d3;\r\n    padding: 12px;\r\n    box-shadow: 0 18px 40px rgba(0,0,0,0.12);\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .vj-epoxy-hero-visual-inner {\r\n    height: 210px;\r\n    border-radius: 14px;\r\n    overflow: hidden;\r\n    background: radial-gradient(circle at top left, #f7f7f7, #b2b0ab);\r\n    position: relative;\r\n  }\r\n\r\n  .vj-epoxy-hero-floor {\r\n    position: absolute;\r\n    inset: 42% -10% -15%;\r\n    background-image:\r\n      linear-gradient(135deg, rgba(255,255,255,0.8), rgba(0,0,0,0.4)),\r\n      repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.2) 1px, transparent 1px, transparent 26px);\r\n    background-blend-mode: overlay;\r\n    transform: skewX(-10deg);\r\n  }\r\n\r\n  .vj-epoxy-hero-label {\r\n    position: absolute;\r\n    top: 12px;\r\n    left: 14px;\r\n    padding: 5px 9px;\r\n    border-radius: 999px;\r\n    font-size: 0.75rem;\r\n    background: rgba(0,0,0,0.8);\r\n    color: #fff;\r\n  }\r\n\r\n  .vj-epoxy-hero-note {\r\n    font-size: 0.78rem;\r\n    color: #666;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  \/* OPTIONS + PREVIEW + FORM WRAP *\/\r\n  .vj-epoxy-layout {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr);\r\n    gap: 24px;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .vj-epoxy-panel,\r\n  .vj-epoxy-form-panel {\r\n    border-radius: 18px;\r\n    background: #ffffff;\r\n    border: 1px solid #dcdcdc;\r\n    box-shadow: 0 10px 26px rgba(0,0,0,0.08);\r\n    padding: 16px 16px 14px;\r\n  }\r\n\r\n  .vj-section-kicker {\r\n    font-size: 0.78rem;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.12em;\r\n    color: #777;\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .vj-section-title {\r\n    font-size: 1.1rem;\r\n    font-weight: 700;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .vj-section-sub {\r\n    font-size: 0.85rem;\r\n    color: #666;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  \/* Preview box *\/\r\n  .vj-preview-box {\r\n    border-radius: 14px;\r\n    border: 1px solid #cfcfcf;\r\n    min-height: 210px;\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n    position: relative;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .vj-preview-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    mix-blend-mode: overlay;\r\n    opacity: 0.6;\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n  }\r\n\r\n  .vj-preview-label {\r\n    position: absolute;\r\n    left: 10px;\r\n    top: 10px;\r\n    padding: 4px 8px;\r\n    border-radius: 999px;\r\n    background: rgba(0,0,0,0.78);\r\n    color: #fff;\r\n    font-size: 0.75rem;\r\n  }\r\n\r\n  .vj-option-group {\r\n    display: grid;\r\n    gap: 8px;\r\n    font-size: 0.83rem;\r\n  }\r\n\r\n  .vj-field {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n  }\r\n\r\n  .vj-field label {\r\n    font-size: 0.8rem;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .vj-field small {\r\n    font-size: 0.75rem;\r\n    color: #777;\r\n  }\r\n\r\n  .vj-field select,\r\n  .vj-field input[type=\"text\"],\r\n  .vj-field input[type=\"number\"],\r\n  .vj-field input[type=\"email\"],\r\n  .vj-field input[type=\"tel\"],\r\n  .vj-field textarea {\r\n    padding: 7px 9px;\r\n    border-radius: 7px;\r\n    border: 1px solid #cccccc;\r\n    font-size: 0.82rem;\r\n    outline: none;\r\n  }\r\n\r\n  .vj-field select:focus,\r\n  .vj-field input:focus,\r\n  .vj-field textarea:focus {\r\n    border-color: #000;\r\n  }\r\n\r\n  .vj-field input[type=\"color\"] {\r\n    width: 52px;\r\n    height: 32px;\r\n    padding: 0;\r\n    border-radius: 7px;\r\n    border: 1px solid #cccccc;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .vj-inline-2 {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);\r\n    gap: 10px;\r\n    align-items: center;\r\n  }\r\n\r\n  .vj-grid-2 {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 8px;\r\n  }\r\n\r\n  \/* Form panel *\/\r\n  .vj-epoxy-form-panel form {\r\n    display: grid;\r\n    gap: 9px;\r\n  }\r\n\r\n  .vj-submit-btn {\r\n    margin-top: 6px;\r\n    padding: 9px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid #000;\r\n    background: #000;\r\n    color: #fff;\r\n    font-size: 0.9rem;\r\n    letter-spacing: 0.11em;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    transition: 0.18s ease;\r\n  }\r\n\r\n  .vj-submit-btn:hover {\r\n    background: #fff;\r\n    color: #000;\r\n    box-shadow: 0 10px 24px rgba(0,0,0,0.25);\r\n  }\r\n\r\n  .vj-form-note {\r\n    font-size: 0.78rem;\r\n    color: #777;\r\n  }\r\n\r\n  \/* FAQ \/ notes *\/\r\n  .vj-epoxy-faq {\r\n    border-radius: 16px;\r\n    background: #f2f2f2;\r\n    border: 1px solid #d6d6d6;\r\n    padding: 14px 14px 12px;\r\n    font-size: 0.82rem;\r\n    color: #444;\r\n  }\r\n\r\n  .vj-epoxy-faq h3 {\r\n    font-size: 0.95rem;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .vj-epoxy-faq ul {\r\n    padding-left: 18px;\r\n    margin: 0;\r\n  }\r\n\r\n  .vj-epoxy-faq li {\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 900px) {\r\n    .vj-epoxy-hero {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .vj-epoxy-layout {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .vj-inline-2,\r\n    .vj-grid-2 {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"vj-epoxy-page\">\r\n\r\n  <!-- HERO SECTION -->\r\n  <section class=\"vj-epoxy-hero\">\r\n    <div>\r\n      <h1 class=\"vj-epoxy-hero-title\">Customizable epoxy flooring<\/h1>\r\n      <p class=\"vj-epoxy-hero-sub\">\r\n        Metallic, glass, 3D and industrial epoxy systems in a monochrome palette of silver, black and white \u2013 tailored to your floor, not pulled from a catalogue.\r\n      <\/p>\r\n      <div class=\"vj-epoxy-tags\">\r\n        <span class=\"vj-tag\">Metallic epoxy<\/span>\r\n        <span class=\"vj-tag\">Glass epoxy<\/span>\r\n        <span class=\"vj-tag\">3D epoxy<\/span>\r\n        <span class=\"vj-tag\">Industrial \/ UV protected<\/span>\r\n      <\/div>\r\n      <div class=\"vj-epoxy-meta\">\r\n        <div>\r\n          <strong>Recommended thickness<\/strong>\r\n          3\u201310 mm depending on traffic and substrate.\r\n        <\/div>\r\n        <div>\r\n          <strong>Ideal spaces<\/strong>\r\n          Living rooms, showrooms, galleries, retail, corridors.\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"vj-epoxy-hero-visual\">\r\n      <div class=\"vj-epoxy-hero-visual-inner\">\r\n        <div class=\"vj-epoxy-hero-floor\"><\/div>\r\n        <div class=\"vj-epoxy-hero-label\">Silver \/ black metallic concept<\/div>\r\n      <\/div>\r\n      <p class=\"vj-epoxy-hero-note\">\r\n        The preview below lets you explore tones & movement. Final shades are confirmed via on-site sampling.\r\n      <\/p>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- OPTIONS + FORM -->\r\n  <section class=\"vj-epoxy-layout\">\r\n    <!-- OPTIONS + PREVIEW -->\r\n    <div class=\"vj-epoxy-panel\">\r\n      <div class=\"vj-section-kicker\">Step 1<\/div>\r\n      <div class=\"vj-section-title\">Configure your epoxy system<\/div>\r\n      <p class=\"vj-section-sub\">\r\n        Choose the system, colour, pattern and approximate area. The live preview is an artistic guide, not a final render.\r\n      <\/p>\r\n\r\n      <!-- LIVE PREVIEW BOX -->\r\n      <div id=\"vjPreviewBox\" class=\"vj-preview-box\" style=\"background-color:#cfcfcf;\">\r\n        <div id=\"vjPreviewOverlay\" class=\"vj-preview-overlay\"><\/div>\r\n        <div id=\"vjPreviewLabel\" class=\"vj-preview-label\">Select type &amp; colour<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"vj-option-group\">\r\n        <!-- Epoxy type -->\r\n        <div class=\"vj-field\">\r\n          <label for=\"vjTypeSelect\">Epoxy type<\/label>\r\n          <select id=\"vjTypeSelect\" onchange=\"vjUpdatePreview()\">\r\n            <option value=\"\">Choose epoxy system<\/option>\r\n            <!-- Linked epoxy textures -->\r\n            <option value=\"metallic\" data-texture=\"https:\/\/vajrademo.atheedhbabum.com\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-7-2025-12_44_49-PM.png\">Metallic epoxy<\/option>\r\n            <option value=\"glass\" data-texture=\"https:\/\/vajrademo.atheedhbabum.com\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-7-2025-05_07_10-PM.png\">Glass epoxy<\/option>\r\n            <option value=\"3d\" data-texture=\"\">3D epoxy<\/option>\r\n            <option value=\"industrial\" data-texture=\"\">Industrial epoxy<\/option>\r\n            <option value=\"uv\" data-texture=\"\">UV protected epoxy<\/option>\r\n          <\/select>\r\n          <small>We\u2019ll refine the exact system after we inspect your surface.<\/small>\r\n        <\/div>\r\n\r\n        <!-- Colour & movement -->\r\n        <div class=\"vj-field vj-inline-2\">\r\n          <div>\r\n            <label for=\"vjColorInput\">Base colour<\/label>\r\n            <input type=\"color\" id=\"vjColorInput\" value=\"#b2b0ab\" onchange=\"vjUpdatePreview()\">\r\n          <\/div>\r\n          <div>\r\n            <label for=\"vjShadeNotes\">Shade notes<\/label>\r\n            <input type=\"text\" id=\"vjShadeNotes\" placeholder=\"Eg. deep black base, cold silver veins\">\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"vj-field\">\r\n          <label for=\"vjPatternSelect\">Pattern \/ movement<\/label>\r\n          <select id=\"vjPatternSelect\" onchange=\"vjUpdatePreview()\">\r\n            <option value=\"\">No overlay<\/option>\r\n            <option value=\"https:\/\/vajrademo.atheedhbabum.com\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-7-2025-05_29_22-PM.png\">Soft marble movement<\/option>\r\n            <option value=\"https:\/\/vajrademo.atheedhbabum.com\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-7-2025-05_47_14-PM.png\">Bold metallic waves<\/option>\r\n            <option value=\"https:\/\/vajrademo.atheedhbabum.com\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-7-2025-05_45_08-PM.png\">Stone \/ concrete look<\/option>\r\n          <\/select>\r\n          <small>We use these notes to design swirls, veins and motion in the metallic coat.<\/small>\r\n        <\/div>\r\n\r\n        <!-- Thickness + area -->\r\n        <div class=\"vj-field vj-inline-2\">\r\n          <div>\r\n            <label for=\"vjThickness\">Thickness (mm)<\/label>\r\n            <select id=\"vjThickness\" onchange=\"vjUpdatePreview()\">\r\n              <option value=\"\">3\u201310 mm<\/option>\r\n              <option value=\"3\">3 mm<\/option>\r\n              <option value=\"4\">4 mm<\/option>\r\n              <option value=\"5\">5 mm<\/option>\r\n              <option value=\"6\">6 mm<\/option>\r\n              <option value=\"8\">8 mm<\/option>\r\n              <option value=\"10\">10 mm<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div>\r\n            <label for=\"vjAreaPreview\">Approx. area (sq. ft.)<\/label>\r\n            <input type=\"number\" id=\"vjAreaPreview\" min=\"10\" step=\"1\" placeholder=\"Eg. 240\" oninput=\"vjSyncAreaToForm()\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ENQUIRY FORM -->\r\n    <div class=\"vj-epoxy-form-panel\">\r\n      <div class=\"vj-section-kicker\">Step 2<\/div>\r\n      <div class=\"vj-section-title\">Send this configuration to Vajra<\/div>\r\n      <p class=\"vj-section-sub\">\r\n        Share your details and we\u2019ll respond with a tailored quote, timelines and surface preparation plan.\r\n      <\/p>\r\n\r\n      <!-- Replace this form with a form plugin later if you want -->\r\n      <form onsubmit=\"return vjSubmitForm(event)\">\r\n        <div class=\"vj-field\">\r\n          <label for=\"vjFormType\">Epoxy type<\/label>\r\n          <input type=\"text\" id=\"vjFormType\" name=\"epoxy_type\" placeholder=\"Will auto-fill from selection\" readonly>\r\n        <\/div>\r\n\r\n        <div class=\"vj-grid-2\">\r\n          <div class=\"vj-field\">\r\n            <label for=\"vjFormThickness\">Thickness (mm)<\/label>\r\n            <input type=\"text\" id=\"vjFormThickness\" name=\"epoxy_thickness\" placeholder=\"Eg. 3 mm\" readonly>\r\n          <\/div>\r\n          <div class=\"vj-field\">\r\n            <label for=\"vjFormArea\">Required area (sq. ft.)<\/label>\r\n            <input type=\"number\" id=\"vjFormArea\" name=\"epoxy_area\" min=\"10\" step=\"1\" placeholder=\"Eg. 240\" required>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"vj-field\">\r\n          <label for=\"vjFormNotes\">Colour, pattern & remarks<\/label>\r\n          <textarea id=\"vjFormNotes\" name=\"epoxy_notes\" rows=\"3\" placeholder=\"Mention preferred movement, gloss level, existing floor (tiles \/ concrete), and any deadlines.\"><\/textarea>\r\n        <\/div>\r\n\r\n        <div class=\"vj-field\">\r\n          <label>Contact details<\/label>\r\n          <div class=\"vj-grid-2\">\r\n            <input type=\"text\" name=\"customer_name\" placeholder=\"Full name\" required>\r\n            <input type=\"tel\" name=\"customer_phone\" placeholder=\"Phone number\" required>\r\n            <input type=\"email\" name=\"customer_email\" placeholder=\"Email (optional)\">\r\n            <input type=\"text\" name=\"customer_city\" placeholder=\"City \/ location\" required>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <button type=\"submit\" class=\"vj-submit-btn\">Send configuration<\/button>\r\n        <p class=\"vj-form-note\">\r\n          This doesn\u2019t place an order. It shares your configuration with Vajra so the team can plan a site visit and a detailed proposal.\r\n        <\/p>\r\n      <\/form>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FAQ \/ EXTRA INFO -->\r\n  <section class=\"vj-epoxy-faq\">\r\n    <h3>What happens after I send this?<\/h3>\r\n    <ul>\r\n      <li>We review your configuration and contact you to understand the space and surface condition.<\/li>\r\n      <li>If required, we schedule a site visit and prepare sample shades for approval.<\/li>\r\n      <li>Once the system, colour and thickness are locked, we share a detailed quote and project timeline.<\/li>\r\n    <\/ul>\r\n  <\/section>\r\n<\/div>\r\n\r\n<script>\r\n  function vjUpdatePreview() {\r\n    const box     = document.getElementById('vjPreviewBox');\r\n    const overlay = document.getElementById('vjPreviewOverlay');\r\n    const label   = document.getElementById('vjPreviewLabel');\r\n\r\n    const typeSelect = document.getElementById('vjTypeSelect');\r\n    const option     = typeSelect.options[typeSelect.selectedIndex];\r\n    const typeText   = option ? option.text : '';\r\n    const textureUrl = option ? (option.getAttribute('data-texture') || '') : '';\r\n\r\n    const thickness  = document.getElementById('vjThickness').value;\r\n    const color      = document.getElementById('vjColorInput').value || '#cfcfcf';\r\n\r\n    const patternSelect = document.getElementById('vjPatternSelect');\r\n    const patternUrl    = patternSelect ? (patternSelect.value || '') : '';\r\n\r\n    \/\/ BASE COLOR + EPOXY TEXTURE (TINTED)\r\n    if (textureUrl) {\r\n      box.style.backgroundImage      = \"linear-gradient(\" + color + \",\" + color + \"), url('\" + textureUrl + \"')\";\r\n      box.style.backgroundBlendMode  = \"multiply\";\r\n      box.style.backgroundSize       = \"cover\";\r\n      box.style.backgroundPosition   = \"center\";\r\n      box.style.backgroundRepeat     = \"no-repeat\";\r\n      box.style.backgroundColor      = \"transparent\";\r\n    } else {\r\n      box.style.backgroundImage      = \"none\";\r\n      box.style.backgroundBlendMode  = \"normal\";\r\n      box.style.backgroundColor      = color;\r\n    }\r\n\r\n    \/\/ PATTERN \/ OVERLAY IMAGE\r\n    if (patternUrl) {\r\n      overlay.style.backgroundImage  = \"url('\" + patternUrl + \"')\";\r\n      overlay.style.opacity          = 0.6;\r\n    } else {\r\n      overlay.style.backgroundImage  = \"none\";\r\n      overlay.style.opacity          = 0;\r\n    }\r\n\r\n    \/\/ LABEL TEXT\r\n    let labelText = 'Custom epoxy preview';\r\n    if (typeText && thickness) {\r\n      labelText = typeText + ' \u2022 ' + thickness + ' mm';\r\n    } else if (typeText) {\r\n      labelText = typeText;\r\n    }\r\n    label.textContent = labelText;\r\n\r\n    \/\/ SYNC TO FORM\r\n    document.getElementById('vjFormType').value      = typeText || '';\r\n    document.getElementById('vjFormThickness').value = thickness ? thickness + ' mm' : '';\r\n  }\r\n\r\n  function vjSyncAreaToForm() {\r\n    const area = document.getElementById('vjAreaPreview').value;\r\n    if (!isNaN(area) && area) {\r\n      document.getElementById('vjFormArea').value = area;\r\n    }\r\n  }\r\n\r\n  function vjSubmitForm(e) {\r\n    e.preventDefault();\r\n\r\n    \/\/ Values from form\r\n    const epoxyType   = document.getElementById('vjFormType').value || 'Not selected';\r\n    const thickness   = document.getElementById('vjFormThickness').value || 'Not specified';\r\n    const area        = document.getElementById('vjFormArea').value || 'Not specified';\r\n    const notes       = document.getElementById('vjFormNotes').value || 'No additional notes';\r\n\r\n    \/\/ From controls\r\n    const baseColor = document.getElementById('vjColorInput').value || 'Not selected';\r\n\r\n    const patternSelect = document.getElementById('vjPatternSelect');\r\n    const patternText =\r\n      patternSelect && patternSelect.selectedIndex > -1\r\n        ? patternSelect.options[patternSelect.selectedIndex].text\r\n        : 'No overlay';\r\n\r\n    const typeSelect = document.getElementById('vjTypeSelect');\r\n    const typeText =\r\n      typeSelect && typeSelect.selectedIndex > -1\r\n        ? typeSelect.options[typeSelect.selectedIndex].text\r\n        : epoxyType || 'Not selected';\r\n\r\n    \/\/ Customer details\r\n    const nameField   = document.querySelector('input[name=\"customer_name\"]');\r\n    const phoneField  = document.querySelector('input[name=\"customer_phone\"]');\r\n    const emailField  = document.querySelector('input[name=\"customer_email\"]');\r\n    const cityField   = document.querySelector('input[name=\"customer_city\"]');\r\n\r\n    const customerName  = nameField ? nameField.value : '';\r\n    const customerPhone = phoneField ? phoneField.value : '';\r\n    const customerEmail = emailField ? emailField.value : '';\r\n    const customerCity  = cityField ? cityField.value : '';\r\n\r\n    const message =\r\n`Epoxy floor enquiry from website:\r\n\r\nEpoxy type (system): ${typeText}\r\nBase colour (hex): ${baseColor}\r\nPattern \/ movement: ${patternText}\r\nThickness: ${thickness}\r\nArea: ${area} sq. ft.\r\nColour & pattern notes: ${notes}\r\n\r\nCustomer details:\r\nName: ${customerName}\r\nPhone: ${customerPhone}\r\nEmail: ${customerEmail}\r\nCity: ${customerCity}\r\n\r\nPlease share pricing and next steps.`;\r\n\r\n    console.log(\"WhatsApp message being sent:\\n\" + message); \/\/ for debugging in browser console\r\n\r\n    const whatsappNumber = \"919061478763\"; \/\/ +91 9061478763\r\n    const whatsappURL = \"https:\/\/wa.me\/\" + whatsappNumber + \"?text=\" + encodeURIComponent(message);\r\n\r\n    window.open(whatsappURL, \"_blank\");\r\n    return false;\r\n  }\r\n\r\n  document.addEventListener('DOMContentLoaded', vjUpdatePreview);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Customizable epoxy flooring Metallic, glass, 3D and industrial epoxy systems in a monochrome palette of silver, black and white \u2013 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":16,"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/vajrademo.atheedhbabum.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}