{"id":31077,"date":"2026-05-13T21:25:07","date_gmt":"2026-05-13T21:25:07","guid":{"rendered":"https:\/\/www.bwmo.com\/?page_id=31077"},"modified":"2026-05-13T21:25:23","modified_gmt":"2026-05-13T21:25:23","slug":"ced-bathroom-doors","status":"publish","type":"page","link":"https:\/\/www.bwmo.com\/index.php\/ced-bathroom-doors\/","title":{"rendered":"CED Bathroom Doors"},"content":{"rendered":"\n<div id=\"ced-bathroom-configurator\">\n\n  <section class=\"ced-bath-hero\">\n    <div class=\"ced-bath-copy\">\n      <span>CED Bathroom Door<\/span>\n      <h1>Clean design. Built for everyday living.<\/h1>\n      <p>Choose a bathroom door that feels simple, modern, and durable.<\/p>\n    <\/div>\n\n    <div class=\"ced-bath-hero-media\">\n      <img decoding=\"async\" id=\"ced-bath-hero-image\" src=\"https:\/\/via.placeholder.com\/1400x900\/f5f5f7\/1d1d1f?text=CED+Bathroom+Door\" alt=\"CED Bathroom Door\">\n    <\/div>\n  <\/section>\n\n  <section class=\"ced-bath-step\" id=\"ced-bath-step-design\">\n    <div class=\"ced-bath-step-head\">\n      <span>Step 1<\/span>\n      <h2>Choose your bathroom door design.<\/h2>\n      <p>Swipe through the collection and preview each style instantly.<\/p>\n    <\/div>\n\n    <div class=\"ced-bath-preview-card\">\n      <img decoding=\"async\" id=\"ced-bath-preview\" src=\"https:\/\/via.placeholder.com\/1400x900\/f5f5f7\/1d1d1f?text=CED+Bathroom+Door\" alt=\"Bathroom Door Preview\">\n    <\/div>\n\n    <div id=\"ced-bath-designs\" class=\"ced-bath-horizontal-scroll\"><\/div>\n  <\/section>\n\n  <section class=\"ced-bath-step\">\n    <div class=\"ced-bath-step-head\">\n      <span>Size<\/span>\n      <h2>One standard size.<\/h2>\n      <p>Designed for common bathroom entrances.<\/p>\n    <\/div>\n\n    <div class=\"ced-bath-size-card\">\n      <div>\n        <strong>2050 \u00d7 800 mm<\/strong>\n        <span>Standard bathroom door size<\/span>\n      <\/div>\n      <em>Included<\/em>\n    <\/div>\n  <\/section>\n\n  <section class=\"ced-bath-step ced-bath-summary\">\n    <div class=\"ced-bath-step-head\">\n      <span>Current Build<\/span>\n      <h2>Your CED bathroom door.<\/h2>\n      <p>Review the current bathroom door, then add it to your selection.<\/p>\n    <\/div>\n\n    <div class=\"ced-bath-delivery-note\">\n      <strong>Free delivery across Ghana.<\/strong>\n      <span>Delivery timelines and measurements will be confirmed before final payment.<\/span>\n    <\/div>\n\n    <div class=\"ced-bath-summary-card\">\n      <div><span>Design<\/span><strong id=\"bath-sum-design\">-<\/strong><\/div>\n      <div><span>Size<\/span><strong>2050 \u00d7 800 mm<\/strong><\/div>\n      <div>\n        <span>Quantity<\/span>\n        <strong class=\"ced-bath-qty-control\">\n          <button type=\"button\" id=\"ced-bath-current-qty-minus\">\u2212<\/button>\n          <b id=\"ced-bath-current-qty\">1<\/b>\n          <button type=\"button\" id=\"ced-bath-current-qty-plus\">+<\/button>\n        <\/strong>\n      <\/div>\n      <div><span>Unit Price<\/span><strong id=\"bath-sum-unit-total\">\u20b50<\/strong><\/div>\n      <div class=\"ced-bath-total\"><span>Current Subtotal<\/span><strong id=\"bath-sum-total\">\u20b50<\/strong><\/div>\n    <\/div>\n\n    <p class=\"ced-bath-summary-helper\">Use the bottom bar to add this door, continue choosing, or view your full selection.<\/p>\n  <\/section>\n\n  <div id=\"ced-bath-drawer-backdrop\" class=\"ced-bath-drawer-backdrop\"><\/div>\n\n  <aside id=\"ced-bath-selection-drawer\" class=\"ced-bath-selection-drawer\" aria-hidden=\"true\">\n    <div class=\"ced-bath-drawer-handle\"><\/div>\n\n    <div class=\"ced-bath-drawer-head\">\n      <div>\n        <span>Your Selection<\/span>\n        <h3>Selected bathroom doors<\/h3>\n        <em id=\"ced-bath-selection-count\">0 item<\/em>\n      <\/div>\n      <button id=\"ced-bath-close-selection\" type=\"button\" aria-label=\"Close selection\">\u00d7<\/button>\n    <\/div>\n\n    <div id=\"ced-bath-selection-items\" class=\"ced-bath-selection-items\">\n      <p class=\"ced-bath-empty-selection\">Your selection is empty. Add a bathroom door to begin.<\/p>\n    <\/div>\n\n    <div class=\"ced-bath-drawer-footer\">\n      <div class=\"ced-bath-selection-total\">\n        <span>Selection Total<\/span>\n        <strong id=\"ced-bath-selection-total\">\u20b50<\/strong>\n      <\/div>\n\n      <button id=\"ced-bath-request-quote\" class=\"ced-bath-main-btn ced-bath-request-btn\">Request Final Quote<\/button>\n      <button id=\"ced-bath-drawer-continue\" class=\"ced-bath-secondary-btn\" type=\"button\">Continue Choosing<\/button>\n    <\/div>\n  <\/aside>\n\n  <div id=\"ced-bath-sticky-bar\" class=\"ced-bath-bottom-bar\">\n    <div class=\"ced-bath-sticky-info\">\n      <span id=\"ced-bath-sticky-label\">Current Subtotal<\/span>\n      <strong id=\"ced-bath-bottom-total\">\u20b50<\/strong>\n      <em id=\"ced-bath-sticky-meta\">Ready to add this door<\/em>\n    <\/div>\n\n    <div class=\"ced-bath-sticky-actions\">\n      <button id=\"ced-bath-add-selection\" type=\"button\">Add This Door<\/button>\n      <button id=\"ced-bath-view-selection\" type=\"button\">View Selection<\/button>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<style>\n.entry-title,.page-title,.elementor-page-title,.main-page-wrapper > .container > .page-title{display:none!important;}\n\n#ced-bathroom-configurator{\n  --bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--muted:#6e6e73;--line:#d2d2d7;--blue:#0071e3;--orange:#ff6b00;\n  background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;min-height:100vh;padding-bottom:120px;\n}\n#ced-bathroom-configurator *{box-sizing:border-box;}\n#ced-bathroom-configurator button{font-family:inherit!important;appearance:none!important;-webkit-appearance:none!important;}\n#ced-bathroom-configurator .ced-bath-hero{padding:34px 14px 28px;text-align:center;}\n#ced-bathroom-configurator .ced-bath-copy span,#ced-bathroom-configurator .ced-bath-step-head span{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:8px;}\n#ced-bathroom-configurator .ced-bath-copy h1{margin:0 auto 10px;max-width:340px;font-size:34px;line-height:1.05;letter-spacing:-1.4px;font-weight:780;}\n#ced-bathroom-configurator .ced-bath-copy p,#ced-bathroom-configurator .ced-bath-step-head p{margin:0 auto;max-width:330px;color:var(--muted);font-size:15px;line-height:1.42;}\n#ced-bathroom-configurator .ced-bath-hero-media{margin-top:24px;width:100%;height:390px;border-radius:30px;overflow:hidden;background:#f5f5f7;border:1px solid rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;}\n#ced-bathroom-configurator .ced-bath-hero-media img{width:100%;height:100%;object-fit:contain;border-radius:30px;}\n#ced-bathroom-configurator .ced-bath-step{padding:34px 14px 38px;background:#fff;border-radius:32px;margin:14px 10px;box-shadow:0 10px 35px rgba(0,0,0,.045);}\n#ced-bathroom-configurator .ced-bath-step-head{margin-bottom:20px;}\n#ced-bathroom-configurator .ced-bath-step-head h2{margin:0 auto 10px;max-width:340px;font-size:28px;line-height:1.06;letter-spacing:-.9px;font-weight:780;}\n#ced-bathroom-configurator .ced-bath-preview-card{width:100%;height:360px;border-radius:28px;overflow:hidden;background:#f5f5f7;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}\n#ced-bathroom-configurator .ced-bath-preview-card img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:28px;transition:opacity .42s cubic-bezier(.25,.1,.25,1),transform .42s cubic-bezier(.25,.1,.25,1),filter .42s ease;}\n#ced-bathroom-configurator img.is-changing{opacity:0;transform:scale(.985);filter:blur(5px);}\n#ced-bathroom-configurator .ced-bath-horizontal-scroll{display:flex;gap:12px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;}\n#ced-bathroom-configurator .ced-bath-horizontal-scroll::-webkit-scrollbar{display:none;}\n#ced-bathroom-configurator .ced-bath-design-card{border:none!important;background:transparent!important;padding:0!important;margin:0!important;text-align:center!important;scroll-snap-align:start;cursor:pointer;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;flex:0 0 36%;min-width:112px;}\n#ced-bathroom-configurator .ced-bath-thumb-frame{width:100%;height:124px;border:1.5px solid var(--line);border-radius:24px;overflow:hidden;background:#f5f5f7;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,opacity .22s ease;}\n#ced-bathroom-configurator .ced-bath-design-card.active .ced-bath-thumb-frame{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}\n#ced-bathroom-configurator .ced-bath-design-card.active .ced-bath-thumb-frame::after{content:\"\u2713\";position:absolute;right:8px;bottom:8px;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}\n#ced-bathroom-configurator .ced-bath-design-card.is-unavailable{opacity:.45;cursor:not-allowed;}\n#ced-bathroom-configurator .ced-bath-thumb-frame img{width:100%;height:100%;object-fit:cover;display:block;border-radius:22px;}\n#ced-bathroom-configurator .ced-bath-thumb-label{display:block!important;width:100%!important;margin:0!important;padding:0!important;font-size:12px!important;font-weight:760!important;color:var(--text)!important;line-height:1.2!important;text-align:center!important;}\n#ced-bathroom-configurator .ced-bath-size-card{width:100%;min-height:76px;padding:16px;border-radius:22px;background:#f5f5f7;border:1px solid rgba(0,0,0,.06);display:flex;justify-content:space-between;align-items:center;gap:14px;}\n#ced-bathroom-configurator .ced-bath-size-card strong{display:block;font-size:17px;font-weight:780;}\n#ced-bathroom-configurator .ced-bath-size-card span{display:block;margin-top:5px;color:var(--muted);font-size:12px;}\n#ced-bathroom-configurator .ced-bath-size-card em{font-style:normal;font-size:13px;font-weight:720;}\n#ced-bathroom-configurator .ced-bath-delivery-note{background:#f5f5f7;border-radius:22px;padding:16px;margin-bottom:16px;text-align:left;}\n#ced-bathroom-configurator .ced-bath-delivery-note strong{display:block;font-size:15px;color:var(--text);margin-bottom:4px;}\n#ced-bathroom-configurator .ced-bath-delivery-note span{display:block;font-size:12px;color:var(--muted);line-height:1.35;}\n#ced-bathroom-configurator .ced-bath-summary-card{background:#f5f5f7;border-radius:26px;padding:18px;margin-bottom:18px;}\n#ced-bathroom-configurator .ced-bath-summary-card div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(0,0,0,.08);}\n#ced-bathroom-configurator .ced-bath-summary-card div:last-child{border-bottom:none;}\n#ced-bathroom-configurator .ced-bath-summary-card span{color:var(--muted);font-size:13px;}\n#ced-bathroom-configurator .ced-bath-summary-card strong{font-size:14px;text-align:right;}\n#ced-bathroom-configurator .ced-bath-total strong{font-size:22px;}\n#ced-bathroom-configurator .ced-bath-summary-helper{margin:12px auto 0;max-width:330px;color:var(--muted);font-size:13px;line-height:1.4;text-align:center;}\n#ced-bathroom-configurator .ced-bath-main-btn{width:100%;height:52px;border:none;border-radius:999px;background:var(--orange);color:#fff;font-size:16px;font-weight:760;cursor:pointer;}\n#ced-bathroom-configurator .ced-bath-qty-control{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;}\n#ced-bathroom-configurator .ced-bath-qty-control button{width:32px;height:32px;border:none;border-radius:50%;background:#fff;color:#1d1d1f;font-size:20px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;}\n#ced-bathroom-configurator .ced-bath-qty-control b{min-width:26px;text-align:center;font-size:16px;font-weight:800;color:#1d1d1f;}\n#ced-bathroom-configurator .ced-bath-bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:999999;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-top:1px solid rgba(0,0,0,.08);box-shadow:0 -12px 34px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;gap:12px;}\n#ced-bathroom-configurator .ced-bath-sticky-info{min-width:0;flex:1;text-align:left;}\n#ced-bathroom-configurator .ced-bath-bottom-bar span{display:block;font-size:11px;font-weight:750;color:var(--muted);line-height:1.1;margin-bottom:3px;}\n#ced-bathroom-configurator .ced-bath-bottom-bar strong{display:block;font-size:20px;line-height:1.05;letter-spacing:-.4px;font-weight:850;color:var(--text);white-space:nowrap;}\n#ced-bathroom-configurator .ced-bath-bottom-bar em{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.15;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#ced-bathroom-configurator .ced-bath-sticky-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto;}\n#ced-bathroom-configurator .ced-bath-bottom-bar button,#ced-bathroom-configurator .ced-bath-secondary-btn{height:44px;border-radius:999px;padding:0 16px;font-size:13px;font-weight:800;cursor:pointer;border:1px solid rgba(0,0,0,.12);white-space:nowrap;}\n#ced-bathroom-configurator #ced-bath-add-selection{border:none;color:#fff;background:var(--orange);box-shadow:0 10px 24px rgba(255,107,0,.23);}\n#ced-bathroom-configurator #ced-bath-view-selection,#ced-bathroom-configurator .ced-bath-secondary-btn{background:#fff;color:var(--text);}\n#ced-bathroom-configurator .ced-bath-bottom-bar.is-added #ced-bath-add-selection{background:#fff;color:var(--text);border:1px solid rgba(0,0,0,.14);box-shadow:none;}\n#ced-bathroom-configurator .ced-bath-bottom-bar.is-added #ced-bath-view-selection{background:var(--orange);color:#fff;border:none;box-shadow:0 10px 24px rgba(255,107,0,.23);}\n#ced-bathroom-configurator .ced-bath-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;z-index:1000000;transition:opacity .26s ease;}\n#ced-bathroom-configurator .ced-bath-drawer-backdrop.open{opacity:1;pointer-events:auto;}\n#ced-bathroom-configurator .ced-bath-selection-drawer{position:fixed;left:0;right:0;bottom:0;z-index:1000001;height:min(82svh,720px);background:#fff;border-radius:30px 30px 0 0;box-shadow:0 -24px 70px rgba(0,0,0,.22);transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.85,.25,1);padding:10px 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;}\n#ced-bathroom-configurator .ced-bath-selection-drawer.open{transform:translateY(0);}\n#ced-bathroom-configurator .ced-bath-drawer-handle{width:44px;height:5px;border-radius:99px;background:#d2d2d7;margin:4px auto 14px;flex:0 0 auto;}\n#ced-bathroom-configurator .ced-bath-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 4px 14px;border-bottom:1px solid rgba(0,0,0,.08);flex:0 0 auto;}\n#ced-bathroom-configurator .ced-bath-drawer-head span{display:block;color:var(--muted);font-size:12px;font-weight:750;margin-bottom:6px;}\n#ced-bathroom-configurator .ced-bath-drawer-head h3{margin:0;color:var(--text);font-size:24px;line-height:1.05;letter-spacing:-.7px;font-weight:850;}\n#ced-bathroom-configurator .ced-bath-drawer-head em{display:block;margin-top:8px;color:var(--muted);font-size:12px;font-weight:750;font-style:normal;}\n#ced-bathroom-configurator .ced-bath-drawer-head button{width:34px;height:34px;border-radius:50%;border:none;background:#f5f5f7;color:var(--text);font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}\n#ced-bathroom-configurator .ced-bath-selection-items{overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 0;flex:1 1 auto;}\n#ced-bathroom-configurator .ced-bath-empty-selection{margin:0;color:var(--muted);font-size:13px;line-height:1.35;background:#f5f5f7;padding:16px;border-radius:20px;}\n#ced-bathroom-configurator .ced-bath-selection-item{background:#f5f5f7;border-radius:22px;padding:15px;margin-bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,.025);}\n#ced-bathroom-configurator .ced-bath-selection-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;}\n#ced-bathroom-configurator .ced-bath-selection-item-title{margin:0;font-size:15px;line-height:1.2;font-weight:800;color:var(--text);}\n#ced-bathroom-configurator .ced-bath-selection-item-meta{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.35;}\n#ced-bathroom-configurator .ced-bath-selection-item-price{font-size:15px;font-weight:850;color:var(--text);white-space:nowrap;}\n#ced-bathroom-configurator .ced-bath-selection-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(0,0,0,.07);padding-top:12px;}\n#ced-bathroom-configurator .ced-bath-remove-item{border:none;background:transparent;color:#bf4800;font-size:13px;font-weight:700;cursor:pointer;padding:6px 0;}\n#ced-bathroom-configurator .ced-bath-drawer-footer{flex:0 0 auto;background:#fff;border-top:1px solid rgba(0,0,0,.08);padding-top:12px;}\n#ced-bathroom-configurator .ced-bath-selection-total{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;}\n#ced-bathroom-configurator .ced-bath-selection-total span{color:var(--muted);font-size:14px;font-weight:650;}\n#ced-bathroom-configurator .ced-bath-selection-total strong{color:var(--text);font-size:24px;font-weight:850;letter-spacing:-.5px;}\n#ced-bathroom-configurator .ced-bath-request-btn{background:#1d1d1f;box-shadow:none;}\n#ced-bathroom-configurator .ced-bath-drawer-footer .ced-bath-secondary-btn{width:100%;margin-top:10px;height:48px;}\n@media (max-width:380px){#ced-bathroom-configurator .ced-bath-bottom-bar{padding-left:10px;padding-right:10px;gap:8px;}#ced-bathroom-configurator .ced-bath-bottom-bar button{padding:0 12px;font-size:12px;}#ced-bathroom-configurator .ced-bath-bottom-bar strong{font-size:18px;}}\n<\/style>\n\n<script>\n(function(){\n  const designs = [{\"code\":\"B01\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/7CDF42ED-226C-4AD7-9774-CA26CBC58184.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/7CDF42ED-226C-4AD7-9774-CA26CBC58184.jpg\",\"price\":1200,\"available\":true},{\"code\":\"B02\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/FAD563C1-008D-45EF-9512-C182E9432836.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/FAD563C1-008D-45EF-9512-C182E9432836-1.jpg\",\"price\":1200,\"available\":true},{\"code\":\"B03\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/CAA78798-9C6C-45E0-BE35-24394CE76ABA.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/CAA78798-9C6C-45E0-BE35-24394CE76ABA-1.jpg\",\"price\":1200,\"available\":true},{\"code\":\"B05\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/66832340-4BBA-4769-9B8D-2076D73D966E.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/66832340-4BBA-4769-9B8D-2076D73D966E.jpg\",\"price\":1200,\"available\":true},{\"code\":\"B04\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/CA30B3F4-A291-4329-81B5-14412ED80786.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/CA30B3F4-A291-4329-81B5-14412ED80786.jpg\",\"price\":1200,\"available\":true},{\"code\":\"B06\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/DFC966FC-9F74-4C0E-8BE0-0DEFE0059BC5.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/DFC966FC-9F74-4C0E-8BE0-0DEFE0059BC5.jpg\",\"price\":1200,\"available\":true},{\"code\":\"B07\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/592B546C-9E8B-4BA0-ADE7-35BEA43AE399.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/592B546C-9E8B-4BA0-ADE7-35BEA43AE399-1.jpg\",\"price\":1200,\"available\":true},{\"code\":\"B08\",\"product\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/A939A2D2-A822-4213-8E4C-57EC1D84E2A1.jpg\",\"scene\":\"https:\\\/\\\/www.bwmo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/A939A2D2-A822-4213-8E4C-57EC1D84E2A1.jpg\",\"price\":1200,\"available\":true}];\n\n  const state = {design:\"\",price:0,selectedDesign:null,size:\"2050 \u00d7 800 mm\",quantity:1};\n  let selection = [];\n  let stickyMode = \"current\";\n\n  const heroImage = document.getElementById(\"ced-bath-hero-image\");\n  const previewImage = document.getElementById(\"ced-bath-preview\");\n  const designsWrap = document.getElementById(\"ced-bath-designs\");\n  const sumDesign = document.getElementById(\"bath-sum-design\");\n  const sumTotal = document.getElementById(\"bath-sum-total\");\n  const sumUnitTotal = document.getElementById(\"bath-sum-unit-total\");\n  const currentQty = document.getElementById(\"ced-bath-current-qty\");\n  const currentQtyMinus = document.getElementById(\"ced-bath-current-qty-minus\");\n  const currentQtyPlus = document.getElementById(\"ced-bath-current-qty-plus\");\n  const stickyBar = document.getElementById(\"ced-bath-sticky-bar\");\n  const stickyLabel = document.getElementById(\"ced-bath-sticky-label\");\n  const bottomTotal = document.getElementById(\"ced-bath-bottom-total\");\n  const stickyMeta = document.getElementById(\"ced-bath-sticky-meta\");\n  const addSelectionBtn = document.getElementById(\"ced-bath-add-selection\");\n  const viewSelectionBtn = document.getElementById(\"ced-bath-view-selection\");\n  const drawer = document.getElementById(\"ced-bath-selection-drawer\");\n  const drawerBackdrop = document.getElementById(\"ced-bath-drawer-backdrop\");\n  const closeSelectionBtn = document.getElementById(\"ced-bath-close-selection\");\n  const drawerContinueBtn = document.getElementById(\"ced-bath-drawer-continue\");\n  const selectionItemsWrap = document.getElementById(\"ced-bath-selection-items\");\n  const selectionTotalEl = document.getElementById(\"ced-bath-selection-total\");\n  const selectionCountEl = document.getElementById(\"ced-bath-selection-count\");\n  const requestQuoteBtn = document.getElementById(\"ced-bath-request-quote\");\n\n  function money(num){ return \"\u20b5\" + Number(num || 0).toLocaleString(); }\n  function unitTotal(){ return Number(state.price || 0); }\n  function total(){ return unitTotal() * Number(state.quantity || 1); }\n  function selectionTotal(){ return selection.reduce((sum,item)=>sum+(Number(item.unitPrice||0)*Number(item.quantity||1)),0); }\n  function selectionCount(){ return selection.reduce((sum,item)=>sum+Number(item.quantity||0),0); }\n\n  function preload(src){ if(!src) return; const img = new Image(); img.src = src; }\n\n  function scrollToEl(id, delay = 260){\n    setTimeout(()=>{ const el = document.getElementById(id); if(el) el.scrollIntoView({behavior:\"smooth\",block:\"start\"}); }, delay);\n  }\n\n  function fadeSwap(imgEl, src){\n    if(!imgEl || !src) return;\n    preload(src);\n    imgEl.classList.add(\"is-changing\");\n    setTimeout(()=>{\n      imgEl.src = src;\n      imgEl.onerror = function(){ imgEl.src = \"https:\/\/via.placeholder.com\/1400x900\/f5f5f7\/1d1d1f?text=CED+Bathroom+Door\"; };\n      requestAnimationFrame(()=>imgEl.classList.remove(\"is-changing\"));\n    },180);\n  }\n\n  function updateImages(){\n    if(!state.selectedDesign) return;\n    const src = state.selectedDesign.scene || state.selectedDesign.product;\n    fadeSwap(heroImage, src);\n    fadeSwap(previewImage, src);\n  }\n\n  function updateSummary(){\n    sumDesign.textContent = state.design || \"-\";\n    sumTotal.textContent = money(total());\n    if(sumUnitTotal) sumUnitTotal.textContent = money(unitTotal());\n    if(currentQty) currentQty.textContent = state.quantity;\n    updateStickyBar();\n  }\n\n  function updateStickyBar(){\n    if(!stickyLabel || !bottomTotal || !stickyMeta || !addSelectionBtn || !viewSelectionBtn) return;\n    if(stickyMode === \"added\") return;\n    const count = selectionCount();\n    if(count > 0){\n      if(stickyBar) stickyBar.classList.remove(\"is-added\");\n      stickyLabel.textContent = \"Selection Total\";\n      bottomTotal.textContent = money(selectionTotal());\n      stickyMeta.textContent = count + (count === 1 ? \" door selected\" : \" doors selected\");\n      addSelectionBtn.textContent = \"Add This Door\";\n      viewSelectionBtn.textContent = \"View Selection\";\n    }else{\n      if(stickyBar) stickyBar.classList.remove(\"is-added\");\n      stickyLabel.textContent = \"Current Subtotal\";\n      bottomTotal.textContent = money(total());\n      stickyMeta.textContent = \"Ready to add this door\";\n      addSelectionBtn.textContent = \"Add This Door\";\n      viewSelectionBtn.textContent = \"View Selection\";\n    }\n  }\n\n  function openSelectionDrawer(){\n    if(drawer) drawer.classList.add(\"open\");\n    if(drawerBackdrop) drawerBackdrop.classList.add(\"open\");\n    if(drawer) drawer.setAttribute(\"aria-hidden\", \"false\");\n  }\n\n  function closeSelectionDrawer(){\n    if(drawer) drawer.classList.remove(\"open\");\n    if(drawerBackdrop) drawerBackdrop.classList.remove(\"open\");\n    if(drawer) drawer.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  function continueChoosing(){\n    closeSelectionDrawer();\n    state.quantity = 1;\n    stickyMode = \"current\";\n    updateSummary();\n    scrollToEl(\"ced-bath-step-design\", 80);\n  }\n\n  function showAddedState(addedItem){\n    stickyMode = \"added\";\n    if(stickyBar) stickyBar.classList.add(\"is-added\");\n    if(stickyLabel) stickyLabel.textContent = \"Added to Selection\";\n    if(bottomTotal) bottomTotal.textContent = addedItem ? addedItem.design : \"Added\";\n    if(stickyMeta){\n      stickyMeta.textContent = addedItem ? (addedItem.size + \" \u00b7 Qty \" + addedItem.quantity + \" \u00b7 \" + money(Number(addedItem.unitPrice || 0) * Number(addedItem.quantity || 1))) : \"Continue choosing or view selection\";\n    }\n    if(addSelectionBtn) addSelectionBtn.textContent = \"Continue Choosing\";\n    if(viewSelectionBtn) viewSelectionBtn.textContent = \"View Selection\";\n  }\n\n  function changeDesign(item){\n    if(item.available === false) return;\n    stickyMode = \"current\";\n    state.design = item.code;\n    state.price = Number(item.price || 0);\n    state.selectedDesign = item;\n    updateImages();\n    updateSummary();\n  }\n\n  function currentSelectionKey(){ return [state.design,state.size].join(\"|\"); }\n\n  function addCurrentToSelection(){\n    if(!state.design){ alert(\"Please choose a bathroom door design first.\"); return; }\n    const key = currentSelectionKey();\n    const existing = selection.find(item => item.key === key);\n    let addedItem;\n    if(existing){\n      existing.quantity += Number(state.quantity || 1);\n      addedItem = existing;\n    }else{\n      addedItem = {key,design:state.design,size:state.size,quantity:Number(state.quantity || 1),unitPrice:unitTotal()};\n      selection.push(addedItem);\n    }\n    renderSelection();\n    showAddedState(addedItem);\n    state.quantity = 1;\n    if(currentQty) currentQty.textContent = state.quantity;\n  }\n\n  function changeSelectionQty(index, delta){\n    if(!selection[index]) return;\n    selection[index].quantity = Math.max(1, Number(selection[index].quantity || 1) + delta);\n    renderSelection();\n  }\n\n  function removeSelectionItem(index){\n    selection.splice(index, 1);\n    stickyMode = \"current\";\n    renderSelection();\n  }\n\n  function renderSelection(){\n    if(!selectionItemsWrap || !selectionTotalEl) return;\n    if(!selection.length){\n      selectionItemsWrap.innerHTML = '<p class=\"ced-bath-empty-selection\">Your selection is empty. Add a bathroom door to begin.<\/p>';\n    }else{\n      selectionItemsWrap.innerHTML = selection.map((item,index)=>{\n        const subtotal = Number(item.unitPrice || 0) * Number(item.quantity || 1);\n        return `\n          <div class=\"ced-bath-selection-item\">\n            <div class=\"ced-bath-selection-item-top\">\n              <div>\n                <p class=\"ced-bath-selection-item-title\">${item.design}<\/p>\n                <span class=\"ced-bath-selection-item-meta\">${item.size}<\/span>\n                <span class=\"ced-bath-selection-item-meta\">Unit Price: ${money(item.unitPrice)}<\/span>\n              <\/div>\n              <strong class=\"ced-bath-selection-item-price\">${money(subtotal)}<\/strong>\n            <\/div>\n            <div class=\"ced-bath-selection-actions\">\n              <strong class=\"ced-bath-qty-control\">\n                <button type=\"button\" class=\"ced-bath-selection-minus\" data-index=\"${index}\">\u2212<\/button>\n                <b>${item.quantity}<\/b>\n                <button type=\"button\" class=\"ced-bath-selection-plus\" data-index=\"${index}\">+<\/button>\n              <\/strong>\n              <button type=\"button\" class=\"ced-bath-remove-item\" data-index=\"${index}\">Remove<\/button>\n            <\/div>\n          <\/div>`;\n      }).join(\"\");\n    }\n    const count = selectionCount();\n    if(selectionCountEl) selectionCountEl.textContent = count + (count === 1 ? \" item\" : \" items\");\n    selectionTotalEl.textContent = money(selectionTotal());\n    document.querySelectorAll(\"#ced-bathroom-configurator .ced-bath-selection-minus\").forEach(btn=>btn.addEventListener(\"click\",()=>changeSelectionQty(Number(btn.dataset.index),-1)));\n    document.querySelectorAll(\"#ced-bathroom-configurator .ced-bath-selection-plus\").forEach(btn=>btn.addEventListener(\"click\",()=>changeSelectionQty(Number(btn.dataset.index),1)));\n    document.querySelectorAll(\"#ced-bathroom-configurator .ced-bath-remove-item\").forEach(btn=>btn.addEventListener(\"click\",()=>removeSelectionItem(Number(btn.dataset.index))));\n    if(stickyMode !== \"added\") updateStickyBar();\n  }\n\n  function renderDesigns(){\n    designsWrap.innerHTML = \"\";\n    if(!designs.length){\n      designsWrap.innerHTML = \"<p style='color:#6e6e73;font-size:13px;'>No bathroom door designs available.<\/p>\";\n      return;\n    }\n    designs.forEach((item,index)=>{\n      preload(item.product); preload(item.scene);\n      const card = document.createElement(\"button\");\n      card.type = \"button\";\n      card.className = \"ced-bath-design-card\" + (index === 0 ? \" active\" : \"\") + (item.available === false ? \" is-unavailable\" : \"\");\n      card.innerHTML = `<div class=\"ced-bath-thumb-frame\"><img decoding=\"async\" src=\"${item.product}\" alt=\"${item.code}\"><\/div><span class=\"ced-bath-thumb-label\">${String(item.code || '').toUpperCase()}<\/span>`;\n      card.addEventListener(\"click\",()=>{\n        if(item.available === false) return;\n        document.querySelectorAll(\"#ced-bathroom-configurator .ced-bath-design-card\").forEach(el=>el.classList.remove(\"active\"));\n        card.classList.add(\"active\");\n        changeDesign(item);\n      });\n      designsWrap.appendChild(card);\n    });\n    const firstAvailable = designs.find(item => item.available !== false) || designs[0];\n    changeDesign(firstAvailable);\n  }\n\n  if(currentQtyMinus){\n    currentQtyMinus.addEventListener(\"click\",()=>{stickyMode=\"current\";state.quantity=Math.max(1,Number(state.quantity||1)-1);updateSummary();});\n  }\n  if(currentQtyPlus){\n    currentQtyPlus.addEventListener(\"click\",()=>{stickyMode=\"current\";state.quantity=Math.min(99,Number(state.quantity||1)+1);updateSummary();});\n  }\n  if(addSelectionBtn){\n    addSelectionBtn.addEventListener(\"click\",()=>{\n      if(stickyMode === \"added\"){ continueChoosing(); return; }\n      addCurrentToSelection();\n    });\n  }\n  if(viewSelectionBtn){\n    viewSelectionBtn.addEventListener(\"click\",()=>{stickyMode=\"current\";updateStickyBar();openSelectionDrawer();});\n  }\n  if(closeSelectionBtn) closeSelectionBtn.addEventListener(\"click\", closeSelectionDrawer);\n  if(drawerBackdrop) drawerBackdrop.addEventListener(\"click\", closeSelectionDrawer);\n  if(drawerContinueBtn) drawerContinueBtn.addEventListener(\"click\", continueChoosing);\n  if(requestQuoteBtn){\n    requestQuoteBtn.addEventListener(\"click\",()=>{\n      if(!selection.length){ alert(\"Your selection is empty. Please add at least one bathroom door.\"); return; }\n      const lines = selection.map((item,index)=>{\n        const subtotal = Number(item.unitPrice || 0) * Number(item.quantity || 1);\n        return ((index+1)+\". \"+item.design+\"\\n\"+\"Size: \"+item.size+\"\\n\"+\"Qty: \"+item.quantity+\"\\n\"+\"Unit Price: \"+money(item.unitPrice)+\"\\n\"+\"Subtotal: \"+money(subtotal));\n      }).join(\"\\n\\n\");\n      alert(\"Your CED bathroom door quote request\\n\\n\"+lines+\"\\n\\nSelection Total: \"+money(selectionTotal())+\"\\n\\nFree delivery across Ghana.\\nOur team will confirm measurements before final payment.\");\n    });\n  }\n\n  renderDesigns();\n  renderSelection();\n  updateSummary();\n})();\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-31077","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/pages\/31077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/comments?post=31077"}],"version-history":[{"count":1,"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/pages\/31077\/revisions"}],"predecessor-version":[{"id":31078,"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/pages\/31077\/revisions\/31078"}],"wp:attachment":[{"href":"https:\/\/www.bwmo.com\/index.php\/wp-json\/wp\/v2\/media?parent=31077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}