{"id":8,"date":"2025-10-03T10:45:39","date_gmt":"2025-10-03T10:45:39","guid":{"rendered":"https:\/\/demosites.royal-elementor-addons.com\/real-estate-consultant-v1\/?page_id=8"},"modified":"2026-09-16T12:34:08","modified_gmt":"2026-09-16T12:34:08","slug":"home-real-estate-consultant-v1","status":"publish","type":"page","link":"https:\/\/builders24.net\/za\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8\" class=\"elementor elementor-8\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5371ebf e-con e-atomic-element e-flexbox-base e-default-div e-5371ebf-4b5e5b1 \" data-id=\"5371ebf\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5371ebf\">\n    \t\t<div class=\"elementor-element elementor-element-938ba13 elementor-widget elementor-widget-html\" data-id=\"938ba13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  Builders24 \u2014 WordPress hero + search (rewired from app.builders24.net\/index.html)\r\n  =====================================================================\r\n  This is NOT a redesign. Every CSS class and JS function below is\r\n  copied straight out of the app's own index.html (bc-hero, bc-tabbar,\r\n  filter-card, tab-results, product-card, bl-card, sectors-section \u2014\r\n  same names, same markup). The only changes from the original:\r\n\r\n  1. Nav \/ product \/ vehicle \/ quote links are made ABSOLUTE to\r\n     https:\/\/app.builders24.net (the original file used relative\r\n     paths, which only work when hosted ON app.builders24.net itself).\r\n  2. Login, Cart, Saved, and the location\/currency dropdown now just\r\n     link out to the app instead of running the app's own\r\n     auth\/cart\/currency subsystems \u2014 WordPress isn't running those.\r\n  3. \"Add to Cart\" sends the shopper to the real product page on the\r\n     app instead of a local cart (checkout always stays on the app).\r\n  4. Splash screen, PWA\/service-worker, and slide-in cart drawer are\r\n     dropped \u2014 app-shell-only concerns, not part of the hero\/search\r\n     the request was about.\r\n\r\n  All 3 tabs are back: Shop Now, Browse Vehicles, Building Services\r\n  (the third tab shows the real Sectors grid, exactly like the app).\r\n\r\n  HOW TO USE: paste this whole file into a WordPress Custom HTML\r\n  block \/ Elementor HTML widget on the shop homepage, above your\r\n  normal WooCommerce content.\r\n-->\r\n\r\n<style>\r\n  :root{\r\n    --navy:#0D1B3E; --navy-2:#132352; --navy-3:#091430;\r\n    --orange:#F0A500; --orange-2:#CC8C00;\r\n    --grey-bg:#EEF0F3; --grey-text:#6B7280; --grey-light:#9CA3AF;\r\n    --border:#E7E9EC; --white:#FFFFFF; --text:#0D1220; --pad:16px;\r\n  }\r\n  #b24Root{ font-family:'Archivo Narrow', sans-serif; color:var(--text); }\r\n  #b24Root *{ box-sizing:border-box; }\r\n  #b24Root a{ text-decoration:none; color:inherit; }\r\n  #b24Root button{ font-family:inherit; border:none; cursor:pointer; }\r\n\r\n  \/* ===== HERO (exact copy of .bc-hero from app.builders24.net) ===== *\/\r\n  #b24Root .bc-hero{ position:relative; background:var(--navy); overflow:hidden; margin:0; font-family:'Archivo Narrow',sans-serif; }\r\n  #b24Root .bc-hero-bg{ position:absolute; inset:0; z-index:0; }\r\n  #b24Root .bc-hero-bg img{ width:100%; height:100%; object-fit:cover; }\r\n  #b24Root .bc-hero-gradient{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(13,27,62,0.96) 0%, rgba(13,27,62,0.78) 38%, rgba(13,27,62,0.15) 68%); }\r\n\r\n  #b24Root .bc-hero-inner{ position:relative; z-index:1; padding:32px var(--pad) 0; }\r\n  #b24Root .bc-hero-title{ margin:0; font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; line-height:1.2; color:#fff; }\r\n  #b24Root .bc-hero-title .accent{ color:#F0A500; }\r\n  #b24Root .bc-hero-sub{ margin:14px 0 0; font-size:13.5px; color:#D7DEEC; max-width:420px; }\r\n  #b24Root .bc-trust-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; }\r\n  #b24Root .bc-trust-item{ display:flex; align-items:center; gap:8px; }\r\n  #b24Root .bc-trust-item .diamond{ width:24px; height:24px; border:1.5px solid #ffffff; border-radius:6px; transform:rotate(45deg); display:flex; align-items:center; justify-content:center; flex:none; }\r\n  #b24Root .bc-trust-item .diamond svg{ transform:rotate(-45deg); width:11px; height:11px; }\r\n  #b24Root .bc-trust-item span{ font-size:11.5px; color:#D7DEEC; line-height:1.3; }\r\n\r\n  #b24Root .bc-tabbar{ position:relative; z-index:1; margin-top:26px; padding:0 var(--pad); display:flex; gap:2px; overflow-x:auto; }\r\n  #b24Root .bc-tab{ background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.85); font-size:12.5px; font-weight:600; padding:12px 18px; border-radius:9px 9px 0 0; cursor:pointer; white-space:nowrap; }\r\n  #b24Root .bc-tab.active{ background:var(--navy); color:#fff; }\r\n\r\n  \/* ===== FILTER CARD (exact copy) ===== *\/\r\n  #b24Root .filter-card{ background:#ffffff; border-radius:12px; padding:18px var(--pad); margin:0 var(--pad) 20px; box-shadow:0 8px 24px rgba(13,27,62,0.15); position:relative; z-index:2; }\r\n  #b24Root .filter-fields{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px; }\r\n  #b24Root .filter-fields label{ display:block; font-size:11.5px; color:var(--grey-text); margin-bottom:5px; }\r\n  #b24Root .filter-fields select, #b24Root .filter-fields input{ width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:9px; padding:11px 12px; font-size:13px; font-family:'Archivo Narrow',sans-serif; color:var(--text); background:var(--grey-bg); }\r\n  #b24Root .filter-submit-btn{ width:100%; background:#F0A500; color:var(--navy); border:none; border-radius:9px; padding:13px; font-size:13.5px; font-weight:700; font-family:'Archivo',sans-serif; }\r\n\r\n  \/* ===== TAB RESULTS (exact copy) ===== *\/\r\n  #b24Root .tab-results{ padding:6px var(--pad) 28px; }\r\n  #b24Root .tab-results-head h2{ font-size:16px; font-weight:800; color:var(--navy); margin-bottom:14px; }\r\n  #b24Root .tab-results-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }\r\n  #b24Root .tr-empty{ grid-column:1\/-1; text-align:center; padding:30px 10px; color:var(--grey-text); font-size:13px; }\r\n  #b24Root .tr-group-label{ font-size:13px; font-weight:800; color:var(--navy); margin:18px 0 10px; }\r\n  #b24Root .tr-group-label:first-child{ margin-top:0; }\r\n\r\n  \/* ===== PRODUCT CARD (exact copy of .product-card) ===== *\/\r\n  #b24Root .product-card{ border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; flex-direction:column; position:relative; transition:box-shadow .25s ease, transform .25s ease; background:#fff; }\r\n  #b24Root .product-card:hover{ box-shadow:0 10px 22px rgba(13,27,61,0.1); transform:translateY(-2px); }\r\n  #b24Root .card-top-row{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; }\r\n  #b24Root .wish-btn{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; opacity:0.55; }\r\n  #b24Root .featured-badge{ position:absolute; top:8px; left:8px; z-index:2; background:var(--navy); color:#ffffff; font-size:9px; font-weight:800; padding:3px 7px; border-radius:8px; }\r\n  #b24Root .discount-badge{ position:absolute; top:8px; left:8px; z-index:2; background:var(--orange); color:#ffffff; font-size:9px; font-weight:800; padding:3px 7px; border-radius:8px; }\r\n  #b24Root .card-image{ width:100%; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--grey-bg); margin-bottom:9px; }\r\n  #b24Root .card-image svg{ width:100%; height:100%; }\r\n  #b24Root .card-seller{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--text); margin-bottom:4px; }\r\n  #b24Root .card-name{ font-size:12.5px; font-weight:700; line-height:1.32; height:33px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:6px; }\r\n  #b24Root .card-rating{ display:flex; align-items:center; gap:5px; margin-bottom:6px; }\r\n  #b24Root .card-rating .stars{ display:inline-flex; gap:1px; }\r\n  #b24Root .card-rating-count{ font-size:10.5px; color:#8A96B0; }\r\n  #b24Root .card-price-row{ display:flex; align-items:baseline; gap:5px; margin-bottom:2px; flex-wrap:wrap; }\r\n  #b24Root .card-price{ font-size:15px; font-weight:800; }\r\n  #b24Root .card-price-strike{ font-size:9px; color:var(--grey-light); text-decoration:line-through; }\r\n  #b24Root .card-stock{ font-size:10.5px; font-weight:600; margin-bottom:9px; }\r\n  #b24Root .card-stock.in{ color:#1F9D55; }\r\n  #b24Root .card-stock.out{ color:#D64545; }\r\n  #b24Root .card-bottom-row{ display:flex; gap:6px; margin-top:auto; }\r\n  #b24Root .card-cart-btn{ background:var(--orange); color:var(--white); font-size:10.5px; font-weight:700; padding:9px 6px; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:5px; flex:1; }\r\n\r\n  \/* ===== VEHICLE CARD (exact copy of .bl-card) ===== *\/\r\n  #b24Root .bl-card{ background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; }\r\n  #b24Root .bl-card-img{ position:relative; width:100%; aspect-ratio:4\/3; background:var(--grey-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }\r\n  #b24Root .bl-card-img img{ width:100%; height:100%; object-fit:cover; }\r\n  #b24Root .bl-card-badge{ position:absolute; top:10px; left:10px; z-index:2; background:#2B5FBF; color:#fff; font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; font-family:'Archivo',sans-serif; }\r\n  #b24Root .bl-card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; }\r\n  #b24Root .bl-card-title{ font-size:12.5px; color:var(--navy); }\r\n  #b24Root .bl-card-price{ font-size:14.5px; font-weight:700; font-family:'Archivo',sans-serif; color:var(--navy); }\r\n  #b24Root .bl-card-meta{ display:flex; align-items:center; gap:10px; font-size:11px; color:var(--grey-text); margin-top:2px; }\r\n  #b24Root .bl-card-flag{ display:flex; align-items:center; gap:4px; margin-left:auto; }\r\n  #b24Root .bl-flag-emoji{ font-size:12px; line-height:1; }\r\n\r\n  \/* ===== SECTORS \/ BUILDING SERVICES (exact copy of .sectors-*) ===== *\/\r\n  #b24Root .sectors-section{ padding:56px var(--pad); position:relative; overflow:hidden; background:#f4f6fa; font-family:'Space Grotesk',sans-serif; }\r\n  #b24Root .sectors-bg{ position:absolute; inset:0; background-image:linear-gradient(rgba(13,27,62,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(13,27,62,0.04) 1px,transparent 1px); background-size:52px 52px; pointer-events:none; }\r\n  #b24Root .sectors-orb{ position:absolute; top:-120px; right:-80px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(240,165,0,0.07) 0%,transparent 70%); pointer-events:none; }\r\n  #b24Root .sectors-orb2{ position:absolute; bottom:-100px; left:-80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(13,27,62,0.05) 0%,transparent 70%); pointer-events:none; }\r\n  #b24Root .sectors-inner{ max-width:1200px; margin:0 auto; position:relative; z-index:2; }\r\n  #b24Root .sectors-label{ font-size:9px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:#F0A500; display:flex; align-items:center; gap:8px; margin-bottom:10px; }\r\n  #b24Root .sectors-label:before{ content:''; display:block; width:20px; height:2px; background:#F0A500; }\r\n  #b24Root .sectors-heading{ font-size:clamp(20px,4vw,30px); font-weight:600; color:#0D1B3E; line-height:1.15; margin-bottom:12px; }\r\n  #b24Root .sectors-heading span{ color:#F0A500; }\r\n  #b24Root .sectors-sub{ font-size:13px; color:#0D1B3E; line-height:1.7; max-width:680px; margin-bottom:32px; }\r\n  #b24Root .sectors-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }\r\n  #b24Root .sectors-card{ position:relative; border-radius:14px; overflow:hidden; height:220px; border:2px solid transparent; text-decoration:none; display:block; transition:border-color .3s,box-shadow .3s,transform .2s; }\r\n  #b24Root .sectors-card:hover{ border-color:#F0A500; box-shadow:0 20px 40px rgba(13,27,62,0.2); transform:translateY(-3px); }\r\n  #b24Root .sectors-card-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease; }\r\n  #b24Root .sectors-card:hover .sectors-card-img{ transform:scale(1.08); }\r\n  #b24Root .sectors-card-overlay{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(13,27,62,0.95) 0%,rgba(13,27,62,0.5) 50%,rgba(13,27,62,0.1) 100%); }\r\n  #b24Root .sectors-card-topbar{ position:absolute; top:0; left:0; right:0; height:3px; background:#F0A500; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; z-index:5; }\r\n  #b24Root .sectors-card:hover .sectors-card-topbar{ transform:scaleX(1); }\r\n  #b24Root .sectors-card-body{ position:absolute; bottom:0; left:0; right:0; padding:16px 14px 18px; z-index:4; }\r\n  #b24Root .sectors-card-icon-wrap{ width:36px; height:36px; background:#F0A500; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; box-shadow:0 4px 12px rgba(240,165,0,0.4); }\r\n  #b24Root .sectors-card-icon-wrap i{ font-size:17px; color:#0D1B3E; }\r\n  #b24Root .sectors-card-sector{ font-size:9px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#F0A500; margin-bottom:4px; opacity:.9; }\r\n  #b24Root .sectors-card-title{ font-size:12px; font-weight:600; color:#ffffff; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:5px; line-height:1.25; }\r\n  #b24Root .sectors-card-desc{ font-size:10px; font-weight:400; color:#ffffff; line-height:1.5; margin-bottom:10px; opacity:.85; }\r\n  #b24Root .sectors-card-cta{ display:inline-flex; align-items:center; gap:5px; background:#F0A500; color:#0D1B3E; font-size:9px; font-weight:600; padding:5px 10px; border-radius:5px; letter-spacing:0.06em; text-transform:uppercase; }\r\n  #b24Root .sectors-card-cta i{ font-size:10px; }\r\n  #b24Root .sectors-depth-badge{ position:absolute; top:12px; right:12px; background:rgba(13,27,62,0.7); border:1px solid rgba(240,165,0,0.4); border-radius:20px; padding:3px 9px; font-size:8.5px; font-weight:600; color:#F0A500; letter-spacing:0.06em; text-transform:uppercase; z-index:4; backdrop-filter:blur(4px); }\r\n  #b24Root .sectors-bottom-row{ margin-top:32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }\r\n  #b24Root .sectors-seo-text{ font-size:11px; color:#0D1B3E; line-height:1.7; max-width:700px; opacity:.7; }\r\n  #b24Root .sectors-btn-all{ display:inline-flex; align-items:center; gap:8px; background:#0D1B3E; color:#ffffff; font-size:11px; font-weight:600; padding:13px 24px; text-decoration:none; letter-spacing:0.06em; text-transform:uppercase; border-radius:8px; white-space:nowrap; }\r\n  #b24Root .sectors-btn-all:hover{ background:#F0A500; color:#0D1B3E; }\r\n\r\n  @media(max-width:900px){ #b24Root .sectors-grid{ grid-template-columns:repeat(2,1fr); } }\r\n  @media(max-width:600px){\r\n    #b24Root .sectors-section{ padding:36px var(--pad); }\r\n    #b24Root .sectors-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }\r\n    #b24Root .sectors-card{ height:130px; border-radius:11px; }\r\n    #b24Root .sectors-card-body{ padding:10px 10px 12px; }\r\n    #b24Root .sectors-card-icon-wrap{ width:26px; height:26px; border-radius:7px; margin-bottom:6px; }\r\n    #b24Root .sectors-card-icon-wrap i{ font-size:12px; }\r\n    #b24Root .sectors-card-title{ font-size:10px; }\r\n    #b24Root .sectors-card-desc, #b24Root .sectors-card-cta{ display:none; }\r\n    #b24Root .sectors-depth-badge{ display:none; }\r\n    #b24Root .sectors-bottom-row{ flex-direction:column; align-items:flex-start; }\r\n  }\r\n\r\n  @media(min-width:900px){\r\n    #b24Root .bc-nav{ display:flex; }\r\n    #b24Root .bc-saved{ display:flex; }\r\n    #b24Root .bc-topbar{ padding:18px 40px; }\r\n    #b24Root .bc-hero-inner{ padding:56px 40px 0; max-width:640px; }\r\n    #b24Root .bc-hero-title{ font-size:40px; }\r\n    #b24Root .bc-hero-sub{ font-size:16px; max-width:460px; }\r\n    #b24Root .bc-tabbar{ padding:0 40px; margin-top:48px; }\r\n    #b24Root .bc-tab{ font-size:14px; padding:14px 26px; }\r\n    #b24Root .filter-card{ position:relative; margin:0 40px -40px; width:auto; max-width:none; border-radius:0 12px 12px 12px; z-index:3; display:flex; align-items:flex-end; gap:16px; padding:24px 32px; }\r\n    #b24Root .filter-fields{ flex:1; grid-template-columns:repeat(4,1fr); margin-bottom:0; }\r\n    #b24Root .filter-submit-btn{ width:auto; white-space:nowrap; padding:12px 28px; flex:none; }\r\n    #b24Root .tab-results{ padding:6px 40px 40px; }\r\n    #b24Root .tab-results-grid{ grid-template-columns:repeat(4,1fr); gap:20px; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"b24Root\">\r\n\r\n  <!-- ================= HERO ================= -->\r\n  <section class=\"bc-hero\">\r\n    <div class=\"bc-hero-bg\">\r\n      <img decoding=\"async\" src=\"https:\/\/app.builders24.net\/assets\/builders24_home.png\" alt=\"\">\r\n      <div class=\"bc-hero-gradient\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bc-hero-inner\">\r\n      <h1 class=\"bc-hero-title\">EVERYTHING YOU NEED TO BUILD, RENOVATE<br>AND <span class=\"accent\">MOVE GOODS ACROSS SOUTH AFRICA.<\/span><\/h1>\r\n      <p class=\"bc-hero-sub\">Your one-stop shop for building materials, tools, and expert services.<\/p>\r\n      <div class=\"bc-trust-row\">\r\n        <div class=\"bc-trust-item\"><span class=\"diamond\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F0A500\" stroke-width=\"2.5\"><path d=\"M12 2l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V5z\"\/><\/svg><\/span><span>Quality<br>Guaranteed<\/span><\/div>\r\n        <div class=\"bc-trust-item\"><span class=\"diamond\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F0A500\" stroke-width=\"2.5\"><path d=\"M12 2l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V5z\"\/><\/svg><\/span><span>Nationwide<br>Delivery<\/span><\/div>\r\n        <div class=\"bc-trust-item\"><span class=\"diamond\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F0A500\" stroke-width=\"2.5\"><path d=\"M12 2l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V5z\"\/><\/svg><\/span><span>Trusted by<br>Pros<\/span><\/div>\r\n        <div class=\"bc-trust-item\"><span class=\"diamond\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F0A500\" stroke-width=\"2.5\"><path d=\"M12 2l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V5z\"\/><\/svg><\/span><span>Secure<br>Payments<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bc-tabbar\" id=\"b24Tabs\">\r\n      <div class=\"bc-tab active\" data-tab=\"shop\">Shop Now<\/div>\r\n      <div class=\"bc-tab\" data-tab=\"vehicles\">Browse Vehicles<\/div>\r\n      <div class=\"bc-tab\" data-tab=\"building\">Building Services<\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"filter-card\" id=\"b24FilterCard\">\r\n    <div id=\"b24FilterFields\" class=\"filter-fields\"><\/div>\r\n    <button type=\"button\" class=\"filter-submit-btn\" id=\"b24FilterSubmitBtn\"><\/button>\r\n  <\/div>\r\n\r\n  <!-- ================= TAB RESULTS (Shop \/ Vehicles) ================= -->\r\n  <section class=\"tab-results\" id=\"b24TabResults\">\r\n    <div class=\"tab-results-head\">\r\n      <h2 id=\"b24TabResultsTitle\">Featured Products<\/h2>\r\n    <\/div>\r\n    <div class=\"tab-results-grid\" id=\"b24TabResultsGrid\"><\/div>\r\n  <\/section>\r\n\r\n  <!-- ================= BUILDING SERVICES \u2014 Sectors ================= -->\r\n  <section class=\"sectors-section\" id=\"b24SectorsSection\" style=\"display:none;\">\r\n    <div class=\"sectors-bg\"><\/div>\r\n    <div class=\"sectors-orb\"><\/div>\r\n    <div class=\"sectors-orb2\"><\/div>\r\n    <div class=\"sectors-inner\">\r\n      <span class=\"sectors-label\">Our Sectors<\/span>\r\n      <h2 class=\"sectors-heading\">Built For Every Sector,<br><span>Across Every African Market<\/span><\/h2>\r\n      <p class=\"sectors-sub\">Builders24 operates across 8 sectors and 17 African markets \u2014 delivering construction, industrial, commercial, residential, agricultural, import, export and supply services to businesses, developers, governments and communities across South Africa, Nigeria, Kenya, Zimbabwe, Zambia, Tanzania, Angola, Mozambique, Botswana, Namibia, Uganda, DRC, Ghana and beyond.<\/p>\r\n\r\n      <div class=\"sectors-grid\">\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Residential%20Construction\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Residential<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-home-2\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 01<\/div>\r\n            <div class=\"sectors-card-title\">Residential Construction<\/div>\r\n            <div class=\"sectors-card-desc\">New homes, renovations, extensions, roofing, plumbing, electrical and home improvements.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Commercial%20Construction\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Commercial<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-building-skyscraper\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 02<\/div>\r\n            <div class=\"sectors-card-title\">Commercial Construction<\/div>\r\n            <div class=\"sectors-card-desc\">Offices, retail parks, hotels, restaurants, fit-outs and commercial developments.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Industrial%20Construction\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1581094794329-c8112a89af12?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Industrial<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-building-factory-2\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 03<\/div>\r\n            <div class=\"sectors-card-title\">Industrial Construction<\/div>\r\n            <div class=\"sectors-card-desc\">Warehouses, factories, logistics hubs, steel structures and industrial facilities.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Infrastructure%20%26%20Civil\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1477959858617-67f85cf4f1df?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Infrastructure<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-road\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 04<\/div>\r\n            <div class=\"sectors-card-title\">Infrastructure &amp; Civil<\/div>\r\n            <div class=\"sectors-card-desc\">Roads, water systems, civil engineering, drainage and public infrastructure.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Agriculture%20%26%20Agritech\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1416879595882-3373a0480b5b?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Agriculture<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-tractor\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 05<\/div>\r\n            <div class=\"sectors-card-title\">Agriculture &amp; Agritech<\/div>\r\n            <div class=\"sectors-card-desc\">Drone spraying, precision agritech, chemical supplies, harvesting and irrigation.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Import%20%26%20Sourcing\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1494412574643-ff11b0a5c1c3?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Import<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-ship\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 06<\/div>\r\n            <div class=\"sectors-card-title\">Import &amp; Sourcing<\/div>\r\n            <div class=\"sectors-card-desc\">Factory-direct procurement, freight, customs clearance and last-mile delivery across Africa.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Export%20%26%20Trade\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1568992687947-868a62a9f521?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Export<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-world\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 07<\/div>\r\n            <div class=\"sectors-card-title\">Export &amp; Trade<\/div>\r\n            <div class=\"sectors-card-desc\">African produce, commodities and product export to international buyers worldwide.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html?subcategory=Supplies%20%26%20Equipment\" class=\"sectors-card\">\r\n          <div class=\"sectors-card-img\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1504307651254-35680f356dfd?w=700&q=80')\"><\/div>\r\n          <div class=\"sectors-card-overlay\"><\/div><div class=\"sectors-card-topbar\"><\/div>\r\n          <div class=\"sectors-depth-badge\">Supplies<\/div>\r\n          <div class=\"sectors-card-body\">\r\n            <div class=\"sectors-card-icon-wrap\"><i class=\"ti ti-package\"><\/i><\/div>\r\n            <div class=\"sectors-card-sector\">Sector 08<\/div>\r\n            <div class=\"sectors-card-title\">Supplies &amp; Equipment<\/div>\r\n            <div class=\"sectors-card-desc\">Machinery, tools, hardware, building materials and home goods \u2014 factory-direct B2B supply.<\/div>\r\n            <span class=\"sectors-card-cta\"><i class=\"ti ti-arrow-right\"><\/i>Explore<\/span>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"sectors-bottom-row\">\r\n        <p class=\"sectors-seo-text\">Builders24 delivers construction, agritech, trade and supply services across <strong>South Africa, Zambia, Angola, Zimbabwe, Mozambique, Botswana, DRC, Eswatini, Lesotho, Madagascar, Malawi, Mauritius, Namibia, Tanzania, Uganda, Nigeria and Kenya<\/strong> \u2014 serving residential homeowners, commercial developers, industrial operators, agricultural businesses, importers, exporters and B2B buyers across Africa.<\/p>\r\n        <a href=\"https:\/\/app.builders24.net\/build\/request-quote.html\" class=\"sectors-btn-all\">Get a Quote <i class=\"ti ti-arrow-right\"><\/i><\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/tabler-icons.min.css\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@supabase\/supabase-js@2\"><\/script>\r\n<script>\r\n(function(){\r\n  var SUPABASE_URL = 'https:\/\/wvqgkmmthmwyywsgzbjb.supabase.co';\r\n  var SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Ind2cWdrbW10aG13eXl3c2d6YmpiIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk1MzAyNTYsImV4cCI6MjA5NTEwNjI1Nn0.024iot-MS_kCwMXvoS2ZsEf63NcbryHa3Mobn-ZbN5E';\r\n  var APP_BASE = 'https:\/\/app.builders24.net';\r\n  var sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);\r\n\r\n  \/\/ ---- helpers, copied from the app's index.html ----\r\n  function esc(s){ return (s||'').toString().replace(\/[&<>\"']\/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]; }); }\r\n\r\n  function fmtNative(amount, currency){\r\n    var sym = ({ USD:'$', ZAR:'R' })[currency] || (currency ? currency + ' ' : '$');\r\n    return sym + Number(amount || 0).toLocaleString('en', { minimumFractionDigits:2, maximumFractionDigits:2 });\r\n  }\r\n\r\n  function productUrl(p){ return APP_BASE + '\/retail\/product\/' + p.slug; }\r\n  function vehicleUrl(l){ return APP_BASE + '\/auto\/vehicle\/' + l.slug; }\r\n\r\n  \/\/ Inline style strings for the parts of the layout that are injected by\r\n  \/\/ JS after page load. Some WP performance plugins (WP Rocket \"Remove\r\n  \/\/ Unused CSS\", Elementor \"Improve CSS Loading\", Autoptimize, etc.) scan\r\n  \/\/ only the page's INITIAL html to decide which CSS to keep, and strip\r\n  \/\/ rules that don't match anything at that point. Since cards\/grids are\r\n  \/\/ added after load, their classes can get purged even though they're\r\n  \/\/ defined in our <style> block \u2014 so the layout-critical rules are\r\n  \/\/ duplicated here as inline styles that can't be stripped.\r\n  var GRID_STYLE_MOBILE = 'display:grid;grid-template-columns:repeat(2,1fr);gap:12px;';\r\n  var GRID_STYLE_DESKTOP = 'display:grid;grid-template-columns:repeat(4,1fr);gap:20px;';\r\n  function gridStyle(){ return window.innerWidth >= 900 ? GRID_STYLE_DESKTOP : GRID_STYLE_MOBILE; }\r\n  var VEHICLE_IMG_WRAP_STYLE = 'position:relative;width:100%;aspect-ratio:4\/3;background:#EEF0F3;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px 12px 0 0;';\r\n  var VEHICLE_IMG_STYLE = 'width:100%;height:100%;object-fit:cover;display:block;';\r\n  var PRODUCT_IMG_WRAP_STYLE = 'width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#EEF0F3;margin-bottom:9px;';\r\n\r\n  function starsHtml(avg){\r\n    var rating = Number(avg) || 0, out = '';\r\n    for (var i=1;i<=5;i++){\r\n      if (rating >= i) out += '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"#F0A500\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>';\r\n      else if (rating >= i - 0.5) out += '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\"><defs><linearGradient id=\"b24half'+i+'\"><stop offset=\"50%\" stop-color=\"#F0A500\"\/><stop offset=\"50%\" stop-color=\"#E3E8F0\"\/><\/linearGradient><\/defs><path fill=\"url(#b24half'+i+')\" d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>';\r\n      else out += '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"#E3E8F0\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>';\r\n    }\r\n    return '<span class=\"stars\">'+out+'<\/span>';\r\n  }\r\n  function ratingRowHtml(p){\r\n    if (p.review_count > 0) return '<div class=\"card-rating\">'+starsHtml(p.avg_rating)+'<span class=\"card-rating-count\">('+p.review_count+')<\/span><\/div>';\r\n    if (p.source_rating != null && p.source_rating_scale) {\r\n      var normalized = (Number(p.source_rating) \/ Number(p.source_rating_scale)) * 5;\r\n      var countLabel = p.source_review_count > 0 ? '('+p.source_review_count+')' : '';\r\n      return '<div class=\"card-rating\">'+starsHtml(normalized)+'<span class=\"card-rating-count\">'+countLabel+'<\/span><\/div>';\r\n    }\r\n    return '<div class=\"card-rating\">'+starsHtml(0)+'<span class=\"card-rating-count\">No reviews yet<\/span><\/div>';\r\n  }\r\n\r\n  \/\/ Product card \u2014 same markup\/classes as the app's productCardHtml.\r\n  \/\/ \"Add to Cart\" sends the shopper to the real product on the app\r\n  \/\/ (no local cart here \u2014 checkout always happens on app.builders24.net).\r\n  function productCardHtml(p){\r\n    var img = (Array.isArray(p.images) && p.images.length) ? p.images[0] : (p.image_url || null);\r\n    var hasSale = p.sale_price && p.price && p.sale_price < p.price;\r\n    var discountPct = hasSale ? Math.round((1 - p.sale_price \/ p.price) * 100) : 0;\r\n    var displayPrice = hasSale ? p.sale_price : p.price;\r\n    var outOfStock = p.track_inventory && (p.stock_quantity || 0) <= 0;\r\n    var url = productUrl(p);\r\n    return '' +\r\n      '<div class=\"product-card\" style=\"border:1px solid #E7E9EC;border-radius:14px;padding:12px;display:flex;flex-direction:column;position:relative;background:#fff;\">' +\r\n        (hasSale ? '<span class=\"discount-badge\">-'+discountPct+'%<\/span>' : (p.is_featured ? '<span class=\"featured-badge\">Featured<\/span>' : '')) +\r\n        '<div class=\"card-top-row\" style=\"justify-content:flex-end;\"><span class=\"wish-btn\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0D1220\" stroke-width=\"1.8\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z\"\/><\/svg><\/span><\/div>' +\r\n        '<a href=\"'+url+'\" target=\"_blank\" rel=\"noopener\" style=\"display:block;\">' +\r\n          '<div class=\"card-image\" style=\"'+PRODUCT_IMG_WRAP_STYLE+'\">' + (img ? '<img decoding=\"async\" src=\"'+esc(img)+'\" alt=\"'+esc(p.name)+'\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\">' : '<svg viewBox=\"0 0 150 150\"><rect width=\"150\" height=\"150\" fill=\"#EEF0F3\"\/><\/svg>') + '<\/div>' +\r\n          '<p class=\"card-name\">'+esc(p.name)+'<\/p>' +\r\n          ratingRowHtml(p) +\r\n        '<\/a>' +\r\n        '<div class=\"card-price-row\">' +\r\n          '<span class=\"card-price\">'+fmtNative(displayPrice, p.currency)+'<\/span>' +\r\n          (hasSale ? '<span class=\"card-price-strike\">'+fmtNative(p.price, p.currency)+'<\/span>' : '') +\r\n        '<\/div>' +\r\n        '<div class=\"card-stock '+(outOfStock?'out':'in')+'\">'+(outOfStock?'Out of Stock':'In Stock')+'<\/div>' +\r\n        '<div class=\"card-bottom-row\">' +\r\n          '<a class=\"card-cart-btn\" href=\"'+url+'\" target=\"_blank\" rel=\"noopener\">' +\r\n            '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6\"\/><\/svg>' +\r\n            'View & Buy' +\r\n          '<\/a>' +\r\n        '<\/div>' +\r\n      '<\/div>';\r\n  }\r\n\r\n  \/\/ Vehicle card \u2014 same markup\/classes as the app's vehicleCardHtml.\r\n  var COUNTRY_ABBREV = { 'south africa':'SA', nigeria:'NG', kenya:'KE', ghana:'GH', zimbabwe:'ZW', zambia:'ZM', tanzania:'TZ', uganda:'UG', mozambique:'MZ', angola:'AO', botswana:'BW', namibia:'NA', drc:'DRC', 'democratic republic of congo':'DRC' };\r\n  var COUNTRY_TO_ISO2 = Object.assign({}, COUNTRY_ABBREV, { drc:'CD', 'democratic republic of congo':'CD' });\r\n  function countryFlagEmoji(name){ var iso2 = COUNTRY_TO_ISO2[(name||'').trim().toLowerCase()]; if(!iso2) return '\ud83c\udf0d'; return String.fromCodePoint.apply(null, [].concat.apply([], [...iso2].map(function(c){ return [127397+c.charCodeAt(0)]; }))); }\r\n  function countryAbbrev(name){ return COUNTRY_ABBREV[(name||'').trim().toLowerCase()] || (name||''); }\r\n\r\n  function vehicleCardHtml(l){\r\n    var img = Array.isArray(l.images) && l.images.length ? l.images[0] : null;\r\n    var makeName = (l.vehicle_models && l.vehicle_models.vehicle_makes && l.vehicle_models.vehicle_makes.name) || l.raw_make || '';\r\n    var modelName = (l.vehicle_models && l.vehicle_models.name) || l.raw_model || '';\r\n    var title = (makeName + ' ' + modelName).trim() || 'Vehicle';\r\n    var isNew = (l.condition || '').toLowerCase() === 'new';\r\n    var priceLabel = l.price ? fmtNative(l.price, l.currency) : 'Ask For Price';\r\n    var km = l.mileage_km != null ? Number(l.mileage_km).toLocaleString() + ' km' : '0 km';\r\n    return '' +\r\n      '<a class=\"bl-card\" href=\"'+vehicleUrl(l)+'\" target=\"_blank\" rel=\"noopener\" style=\"background:#fff;border:1px solid #E7E9EC;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;\">' +\r\n        '<div class=\"bl-card-img\" style=\"'+VEHICLE_IMG_WRAP_STYLE+'\">' +\r\n          (isNew ? '<div class=\"bl-card-badge\">Brand New<\/div>' : '') +\r\n          (img ? '<img decoding=\"async\" src=\"'+esc(img)+'\" alt=\"\" loading=\"lazy\" onerror=\"this.remove()\" style=\"'+VEHICLE_IMG_STYLE+'\">' : '<i class=\"ti ti-photo\"><\/i>') +\r\n        '<\/div>' +\r\n        '<div class=\"bl-card-body\" style=\"padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;\">' +\r\n          '<div class=\"bl-card-title\">'+esc(title)+'<\/div>' +\r\n          '<div class=\"bl-card-price\">'+esc(priceLabel)+'<\/div>' +\r\n          '<div class=\"bl-card-meta\">' +\r\n            '<span>'+(l.year||'')+'<\/span><span>'+km+'<\/span>' +\r\n            '<span class=\"bl-card-flag\"><span class=\"bl-flag-emoji\">'+countryFlagEmoji(l.location_country)+'<\/span>'+esc(countryAbbrev(l.location_country))+'<\/span>' +\r\n          '<\/div>' +\r\n        '<\/div>' +\r\n      '<\/a>';\r\n  }\r\n\r\n  \/\/ ---- filter field builders (same shape as the app's fieldHtml) ----\r\n  var _productCategories = null;\r\n\r\n  function fieldHtml(f){\r\n    return new Promise(function(resolve){\r\n      if (f.type === 'text') {\r\n        resolve('<div><label>'+f.label+'<\/label><input type=\"text\" id=\"'+f.id+'\" placeholder=\"'+(f.placeholder||'')+'\"><\/div>');\r\n      } else if (f.type === 'select') {\r\n        var opts = f.options.map(function(o){ return '<option value=\"'+o[0]+'\">'+o[1]+'<\/option>'; }).join('');\r\n        resolve('<div><label>'+f.label+'<\/label><select id=\"'+f.id+'\">'+opts+'<\/select><\/div>');\r\n      } else if (f.type === 'select-parent-categories') {\r\n        (async function(){\r\n          if (!_productCategories) {\r\n            var res = await sb.from('categories').select('id,name,parent_id').eq('is_active', true).order('sort_order');\r\n            _productCategories = res.data || [];\r\n          }\r\n          var parents = _productCategories.filter(function(c){ return !c.parent_id; });\r\n          var popts = parents.map(function(c){ return '<option value=\"'+c.id+'\">'+esc(c.name)+'<\/option>'; }).join('');\r\n          resolve('<div><label>'+f.label+'<\/label><select id=\"'+f.id+'\"><option value=\"\">All Categories<\/option>'+popts+'<\/select><\/div>');\r\n        })();\r\n      } else if (f.type === 'select-sub-categories') {\r\n        resolve('<div><label>'+f.label+'<\/label><select id=\"'+f.id+'\">'+subcategoryOptionsHtml('')+'<\/select><\/div>');\r\n      } else if (f.type === 'select-vehicle-condition') {\r\n        resolve('<div><label>'+f.label+'<\/label><select id=\"'+f.id+'\"><option value=\"\">Any<\/option><option value=\"new\">New<\/option><option value=\"used\">Used<\/option><\/select><\/div>');\r\n      } else {\r\n        resolve('');\r\n      }\r\n    });\r\n  }\r\n\r\n  function subcategoryOptionsHtml(parentId){\r\n    var subs = parentId\r\n      ? (_productCategories||[]).filter(function(c){ return c.parent_id === parentId; })\r\n      : (_productCategories||[]).filter(function(c){ return c.parent_id; });\r\n    return '<option value=\"\">All Subcategories<\/option>' + subs.map(function(c){ return '<option value=\"'+c.id+'\">'+esc(c.name)+'<\/option>'; }).join('');\r\n  }\r\n\r\n  function wireDependentFields(cfg){\r\n    cfg.fields.forEach(function(f){\r\n      if (!f.dependsOn) return;\r\n      var parentEl = document.getElementById(f.dependsOn);\r\n      var childEl = document.getElementById(f.id);\r\n      if (!parentEl || !childEl) return;\r\n      parentEl.addEventListener('change', function(){\r\n        childEl.innerHTML = subcategoryOptionsHtml(parentEl.value);\r\n      });\r\n    });\r\n  }\r\n\r\n  \/\/ ---- TABS config \u2014 same 3 tabs as the app: Shop, Vehicles, Building Services ----\r\n  var TABS = {\r\n    shop: {\r\n      resultsTitle: 'Featured Products',\r\n      fields: [\r\n        { id:'b24ShopCategory', label:'Category', type:'select-parent-categories' },\r\n        { id:'b24ShopSubcategory', label:'Subcategory', type:'select-sub-categories', dependsOn:'b24ShopCategory' },\r\n        { id:'b24ShopBrand', label:'Brand', type:'text', placeholder:'e.g. PPC, Bosch' },\r\n        { id:'b24ShopLocation', label:'Location', type:'text', placeholder:'City' }\r\n      ],\r\n      submitLabel: 'Search Products',\r\n      action: runProductSearch\r\n    },\r\n    vehicles: {\r\n      resultsTitle: 'Vehicles',\r\n      fields: [\r\n        { id:'b24VMake', label:'Make', type:'text', placeholder:'e.g. Toyota' },\r\n        { id:'b24VCondition', label:'Condition', type:'select-vehicle-condition' },\r\n        { id:'b24VLocation', label:'Location', type:'text', placeholder:'Country' }\r\n      ],\r\n      submitLabel: 'Search Vehicles',\r\n      action: runVehicleSearch\r\n    },\r\n    building: {\r\n      resultsTitle: '',\r\n      fields: [],\r\n      submitLabel: '',\r\n      action: function(){}\r\n    }\r\n  };\r\n\r\n  var _activeTab = 'shop';\r\n\r\n  async function runProductSearch(){\r\n    var grid = document.getElementById('b24TabResultsGrid');\r\n    grid.className = 'tab-results-grid';\r\n    grid.setAttribute('style', gridStyle());\r\n    grid.innerHTML = '<div class=\"tr-empty\">Searching...<\/div>';\r\n    var categoryId = (document.getElementById('b24ShopCategory')||{}).value || '';\r\n    var subcategoryId = (document.getElementById('b24ShopSubcategory')||{}).value || '';\r\n    var brand = ((document.getElementById('b24ShopBrand')||{}).value || '').trim();\r\n    var location = ((document.getElementById('b24ShopLocation')||{}).value || '').trim();\r\n\r\n    var q = sb.from('products')\r\n      .select('id,name,slug,price,sale_price,currency,images,image_url,brand,seller_location,is_featured,track_inventory,stock_quantity,avg_rating,review_count,source_rating,source_rating_scale,source_review_count')\r\n      .eq('is_published', true).eq('is_archived', false)\r\n      .order('is_featured', { ascending:false }).limit(30);\r\n    if (subcategoryId) q = q.eq('category_id', subcategoryId);\r\n    else if (categoryId) q = q.eq('category_id', categoryId);\r\n    if (brand) q = q.ilike('brand', '%'+brand+'%');\r\n    if (location) q = q.ilike('seller_location', '%'+location+'%');\r\n\r\n    var res = await q;\r\n    if (res.error || !res.data || !res.data.length) { grid.innerHTML = '<div class=\"tr-empty\">No products found for that search.<\/div>'; return; }\r\n    grid.innerHTML = res.data.map(productCardHtml).join('');\r\n  }\r\n\r\n  async function runVehicleSearch(){\r\n    var grid = document.getElementById('b24TabResultsGrid');\r\n    grid.className = 'tab-results-grid';\r\n    grid.setAttribute('style', gridStyle());\r\n    grid.innerHTML = '<div class=\"tr-empty\">Searching...<\/div>';\r\n    var make = ((document.getElementById('b24VMake')||{}).value || '').trim();\r\n    var condition = (document.getElementById('b24VCondition')||{}).value || '';\r\n    var location = ((document.getElementById('b24VLocation')||{}).value || '').trim();\r\n\r\n    var q = sb.from('vehicle_listings')\r\n      .select('id,slug,price,currency,year,mileage_km,location_country,condition,images,raw_make,raw_model,vehicle_models(name,vehicle_makes(name))')\r\n      .eq('is_published', true).eq('status', 'available').limit(30);\r\n    if (condition) q = q.eq('condition', condition);\r\n    if (location) q = q.ilike('location_country', '%'+location+'%');\r\n\r\n    var res = await q;\r\n    var results = res.data || [];\r\n    if (make) {\r\n      var m = make.toLowerCase();\r\n      results = results.filter(function(l){\r\n        var makeName = (l.vehicle_models && l.vehicle_models.vehicle_makes && l.vehicle_models.vehicle_makes.name) || l.raw_make || '';\r\n        return makeName.toLowerCase().indexOf(m) !== -1;\r\n      });\r\n    }\r\n    if (res.error || !results.length) { grid.innerHTML = '<div class=\"tr-empty\">No vehicles found for that search.<\/div>'; return; }\r\n    grid.innerHTML = results.map(vehicleCardHtml).join('');\r\n  }\r\n\r\n  \/\/ Default mixed grid for the Shop tab, same as the app's loadShopMixedGrid\r\n  \/\/ (grouped Products \/ Vehicles sections rather than interleaved).\r\n  async function loadShopMixedGrid(){\r\n    var grid = document.getElementById('b24TabResultsGrid');\r\n    grid.innerHTML = '<div class=\"tr-empty\">Loading...<\/div>';\r\n    var results = await Promise.all([\r\n      sb.from('products').select('id,name,slug,price,sale_price,currency,images,image_url,is_featured,track_inventory,stock_quantity,avg_rating,review_count,source_rating,source_rating_scale,source_review_count')\r\n        .eq('is_published', true).eq('is_archived', false).order('is_featured', { ascending:false }).limit(30),\r\n      sb.from('vehicle_listings').select('id,slug,price,currency,year,mileage_km,location_country,condition,images,raw_make,raw_model,vehicle_models(name,vehicle_makes(name))')\r\n        .eq('is_published', true).eq('status', 'available').order('created_at', { ascending:false }).limit(30)\r\n    ]);\r\n    var products = results[0].data || [];\r\n    var vehicles = results[1].data || [];\r\n    var productCards = products.map(productCardHtml);\r\n    var vehicleCards = vehicles.map(vehicleCardHtml);\r\n    if (!productCards.length && !vehicleCards.length) { grid.innerHTML = '<div class=\"tr-empty\">Nothing available right now.<\/div>'; return; }\r\n    \/\/ Update content in place \u2014 never outerHTML this element, since that\r\n    \/\/ swaps in a fresh node without the tab-results-grid class the CSS\r\n    \/\/ (and every later tab render) depends on.\r\n    var html = '';\r\n    if (productCards.length) html += '<div class=\"tr-group-label\">Products<\/div><div class=\"tab-results-grid\" style=\"'+gridStyle()+'\">'+productCards.join('')+'<\/div>';\r\n    if (vehicleCards.length) html += '<div class=\"tr-group-label\">Vehicles<\/div><div class=\"tab-results-grid\" style=\"'+gridStyle()+'\">'+vehicleCards.join('')+'<\/div>';\r\n    grid.className = '';\r\n    grid.setAttribute('style', 'display:block;');\r\n    grid.innerHTML = html;\r\n  }\r\n\r\n  async function renderTab(tab){\r\n    _activeTab = tab;\r\n    document.querySelectorAll('#b24Tabs .bc-tab').forEach(function(t){ t.classList.toggle('active', t.dataset.tab === tab); });\r\n    var cfg = TABS[tab];\r\n    var fieldsEl = document.getElementById('b24FilterFields');\r\n    var filterCard = document.getElementById('b24FilterCard');\r\n    var resultsSection = document.getElementById('b24TabResults');\r\n    var sectorsSection = document.getElementById('b24SectorsSection');\r\n\r\n    if (tab === 'building') {\r\n      filterCard.style.display = 'none';\r\n      resultsSection.style.display = 'none';\r\n      sectorsSection.style.display = '';\r\n      return;\r\n    }\r\n    filterCard.style.display = '';\r\n    resultsSection.style.display = '';\r\n    sectorsSection.style.display = 'none';\r\n\r\n    var rendered = [];\r\n    for (var i=0;i<cfg.fields.length;i++) rendered.push(await fieldHtml(cfg.fields[i]));\r\n    fieldsEl.innerHTML = rendered.join('');\r\n    wireDependentFields(cfg);\r\n    var btn = document.getElementById('b24FilterSubmitBtn');\r\n    btn.textContent = cfg.submitLabel;\r\n    btn.onclick = cfg.action;\r\n\r\n    document.getElementById('b24TabResultsTitle').textContent = cfg.resultsTitle;\r\n    if (tab === 'shop') { await loadShopMixedGrid(); } else { await cfg.action(); }\r\n  }\r\n\r\n  document.getElementById('b24Tabs').addEventListener('click', function(e){\r\n    var t = e.target.closest('.bc-tab');\r\n    if (t) renderTab(t.dataset.tab);\r\n  });\r\n\r\n  \/\/ Inline grid styles (added above to survive CSS-purging plugins) don't\r\n  \/\/ respond to viewport width on their own like a real media query would,\r\n  \/\/ so re-apply the right column count on resize.\r\n  var _resizeTimer;\r\n  window.addEventListener('resize', function(){\r\n    clearTimeout(_resizeTimer);\r\n    _resizeTimer = setTimeout(function(){\r\n      document.querySelectorAll('#b24Root .tab-results-grid').forEach(function(g){\r\n        g.style.gridTemplateColumns = window.innerWidth >= 900 ? 'repeat(4,1fr)' : 'repeat(2,1fr)';\r\n        g.style.gap = window.innerWidth >= 900 ? '20px' : '12px';\r\n      });\r\n    }, 150);\r\n  });\r\n\r\n  renderTab('shop');\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>EVERYTHING YOU NEED TO BUILD, RENOVATEAND MOVE GOODS ACROSS SOUTH AFRICA. Your one-stop shop for building materials, tools, and expert services. QualityGuaranteed NationwideDelivery Trusted byPros SecurePayments Shop Now Browse Vehicles Building Services Featured Products Our Sectors Built For Every Sector,Across Every African Market Builders24 operates across 8 sectors and 17 African markets \u2014 delivering construction, industrial, commercial, residential, agricultural, import, export and supply services to businesses, developers, governments and communities across South Africa, Nigeria, Kenya, Zimbabwe, Zambia, Tanzania, Angola, Mozambique, Botswana, Namibia, Uganda, DRC, Ghana and beyond. Residential Sector 01 Residential Construction New homes, renovations, extensions, roofing, plumbing, electrical and home improvements. Explore Commercial Sector 02 Commercial Construction Offices, retail parks, hotels, restaurants, fit-outs and commercial developments. Explore Industrial Sector 03 Industrial Construction Warehouses, factories, logistics hubs, steel structures and industrial facilities. Explore Infrastructure Sector 04 Infrastructure &amp; Civil Roads, water systems, civil engineering, drainage and public infrastructure. Explore Agriculture Sector 05 Agriculture &amp; Agritech Drone spraying, precision agritech, chemical supplies, harvesting and irrigation. Explore Import Sector 06 Import &amp; Sourcing Factory-direct procurement, freight, customs clearance and last-mile delivery across Africa. Explore Export Sector 07 Export &amp; Trade African produce, commodities and product export to international buyers worldwide. Explore Supplies Sector 08 Supplies &amp; Equipment Machinery, tools, hardware, building materials and home goods \u2014 factory-direct B2B supply. Explore Builders24 delivers construction, agritech, trade and supply services across South Africa, Zambia, Angola, Zimbabwe, Mozambique, Botswana, DRC, Eswatini, Lesotho, Madagascar, Malawi, Mauritius, Namibia, Tanzania, Uganda, Nigeria and Kenya \u2014 serving residential homeowners, commercial developers, industrial operators, agricultural businesses, importers, exporters and B2B buyers across Africa. Get a Quote<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":24,"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":14930,"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/pages\/8\/revisions\/14930"}],"wp:attachment":[{"href":"https:\/\/builders24.net\/za\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}