\r\n \t\t
\n\t\t\t\t\t\n\n\n\n\n
Digital Tile Adhesive Selector | White Sand<\/title>\n<style>\n\/* =========================================================\n WHITE SAND \u2014 DIGITAL TILE ADHESIVE SELECTOR\n RTL + LTR \/ Elementor-safe \/ Responsive \/ No Tailwind\n ========================================================= *\/\n\n#wsAdhesiveSelector {\n --ws-red: #ed1c24;\n --ws-red-dark: #c9141b;\n --ws-ink: #171b2a;\n --ws-text: #59606d;\n --ws-muted: #7a8390;\n --ws-bg: #f6f7f8;\n --ws-soft: #fafbfc;\n --ws-white: #ffffff;\n --ws-border: #e4e7eb;\n --ws-radius: 25px;\n --ws-radius-sm: 16px;\n --ws-shadow: 0 14px 40px rgba(23,27,42,.07);\n --ws-shadow-soft: 0 7px 22px rgba(23,27,42,.055);\n\n width: min(1180px, calc(100% - 32px));\n margin-block: 34px 70px;\n margin-inline: auto;\n color: var(--ws-ink);\n font-family: Arial, Helvetica, sans-serif;\n box-sizing: border-box;\n direction: inherit;\n text-align: start;\n}\n\n#wsAdhesiveSelector *,\n#wsAdhesiveSelector *::before,\n#wsAdhesiveSelector *::after { box-sizing: border-box; }\n\n#wsAdhesiveSelector button,\n#wsAdhesiveSelector select,\n#wsAdhesiveSelector a { font: inherit; }\n\n#wsAdhesiveSelector button,\n#wsAdhesiveSelector select { -webkit-tap-highlight-color: transparent; }\n\n\/* ------------------------- HERO ------------------------- *\/\n#wsAdhesiveSelector .ws-hero {\n position: relative;\n overflow: hidden;\n padding: 34px 34px 30px;\n background: linear-gradient(145deg,#fff 0%,#f8f9fa 100%);\n border: 1px solid var(--ws-border);\n border-top: 5px solid var(--ws-red);\n border-radius: var(--ws-radius);\n box-shadow: var(--ws-shadow);\n text-align: center;\n}\n\n#wsAdhesiveSelector .ws-hero::after {\n content: \"\";\n position: absolute;\n inset-block-start: -90px;\n inset-inline-end: -70px;\n width: 250px;\n height: 250px;\n border: 38px solid rgba(237,28,36,.035);\n border-radius: 50%;\n pointer-events: none;\n}\n\n#wsAdhesiveSelector .ws-kicker {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-block-end: 14px;\n padding: 8px 16px;\n border-radius: 999px;\n background: var(--ws-red);\n color: #fff;\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 1px;\n}\n\n#wsAdhesiveSelector .ws-hero h1 {\n position: relative;\n z-index: 1;\n max-width: 860px;\n margin: 0 auto;\n color: var(--ws-ink);\n font-size: clamp(34px,4vw,50px);\n line-height: 1.08;\n font-weight: 800;\n letter-spacing: -.7px;\n}\n\n#wsAdhesiveSelector .ws-hero p {\n position: relative;\n z-index: 1;\n max-width: 760px;\n margin: 14px auto 0;\n color: var(--ws-text);\n font-size: 15px;\n line-height: 1.75;\n}\n\n#wsAdhesiveSelector .ws-hero-line {\n position: relative;\n z-index: 1;\n width: 72px;\n height: 4px;\n margin: 19px auto 0;\n border-radius: 999px;\n background: var(--ws-red);\n}\n\n\/* ------------------------- SHELL ------------------------- *\/\n#wsAdhesiveSelector .ws-shell {\n display: grid;\n grid-template-columns: minmax(0,1fr) minmax(0,1fr);\n gap: 20px;\n margin-block-start: 20px;\n padding: 20px;\n background: var(--ws-bg);\n border: 1px solid var(--ws-border);\n border-radius: var(--ws-radius);\n box-shadow: var(--ws-shadow-soft);\n}\n\n#wsAdhesiveSelector .ws-card {\n min-width: 0;\n background: #fff;\n border: 1px solid var(--ws-border);\n border-radius: 20px;\n box-shadow: var(--ws-shadow-soft);\n}\n\n\/* ------------------------- FORM CARD ------------------------- *\/\n#wsAdhesiveSelector .ws-form-card { padding: 28px; }\n\n#wsAdhesiveSelector .ws-form-head {\n display: grid;\n grid-template-columns: minmax(0,1fr) auto;\n gap: 14px;\n align-items: start;\n padding-block-end: 18px;\n margin-block-end: 18px;\n border-bottom: 1px solid var(--ws-border);\n}\n\n#wsAdhesiveSelector .ws-eyebrow {\n display: block;\n margin-block-end: 5px;\n color: var(--ws-red);\n font-size: 11px;\n font-weight: 800;\n letter-spacing: .9px;\n text-transform: uppercase;\n}\n\n#wsAdhesiveSelector .ws-form-head h2 {\n margin: 0;\n font-size: 27px;\n line-height: 1.15;\n font-weight: 800;\n letter-spacing: -.3px;\n}\n\n#wsAdhesiveSelector .ws-form-head p {\n max-width: 520px;\n margin: 8px 0 0;\n color: var(--ws-text);\n font-size: 14px;\n line-height: 1.65;\n}\n\n#wsAdhesiveSelector .ws-progress-count {\n display: inline-flex;\n min-width: 48px;\n height: 48px;\n align-items: center;\n justify-content: center;\n padding-inline: 11px;\n border-radius: 15px;\n background: rgba(237,28,36,.08);\n color: var(--ws-red);\n font-size: 13px;\n font-weight: 800;\n}\n\n#wsAdhesiveSelector .ws-progress {\n display: grid;\n grid-template-columns: repeat(5,minmax(0,1fr));\n gap: 7px;\n margin-block-end: 20px;\n}\n\n#wsAdhesiveSelector .ws-progress span {\n height: 5px;\n border-radius: 999px;\n background: #e8ebef;\n transition: background .2s ease, transform .2s ease;\n}\n\n#wsAdhesiveSelector .ws-progress span.is-active {\n background: var(--ws-red);\n transform: scaleY(1.08);\n}\n\n#wsAdhesiveSelector #selectorForm {\n display: grid;\n grid-template-columns: repeat(2,minmax(0,1fr));\n gap: 14px;\n}\n\n#wsAdhesiveSelector .ws-field { min-width: 0; }\n#wsAdhesiveSelector .ws-field.full { grid-column: 1 \/ -1; }\n\n#wsAdhesiveSelector .ws-field-label {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-block-end: 8px;\n color: #4f5a68;\n font-size: 11px;\n font-weight: 800;\n line-height: 1.35;\n letter-spacing: .55px;\n text-transform: uppercase;\n text-align: start;\n}\n\n#wsAdhesiveSelector .ws-step-num {\n display: inline-flex;\n width: 25px;\n height: 25px;\n flex: none;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n background: #f1f3f5;\n color: #7e8793;\n font-size: 10px;\n font-weight: 800;\n}\n\n#wsAdhesiveSelector select {\n appearance: none;\n -webkit-appearance: none;\n width: 100%;\n height: 52px;\n min-width: 0;\n padding-block: 0;\n padding-inline-start: 14px;\n padding-inline-end: 44px;\n color: var(--ws-ink);\n background-color: #fff;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2378808d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n background-size: 17px;\n border: 1px solid #d8dde4;\n border-radius: 14px;\n outline: none;\n box-shadow: 0 2px 8px rgba(23,27,42,.025);\n font-size: 13px;\n font-weight: 600;\n text-align: start;\n transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;\n}\n\n[dir=\"rtl\"] #wsAdhesiveSelector select,\nbody.rtl #wsAdhesiveSelector select {\n background-position: left 14px center;\n padding-inline-start: 14px;\n padding-inline-end: 44px;\n}\n\n#wsAdhesiveSelector select:hover:not(:disabled) { border-color: #c5cbd3; }\n#wsAdhesiveSelector select:focus {\n border-color: var(--ws-red);\n box-shadow: 0 0 0 4px rgba(237,28,36,.08);\n}\n#wsAdhesiveSelector select:disabled {\n color: #aab1ba;\n background-color: #f8f9fa;\n border-color: #e4e7eb;\n cursor: not-allowed;\n}\n\n#wsAdhesiveSelector .ws-reset {\n grid-column: 1 \/ -1;\n width: 100%;\n min-height: 48px;\n margin-block-start: 2px;\n padding: 11px 18px;\n color: var(--ws-text);\n background: #f8f9fa;\n border: 1px solid var(--ws-border);\n border-radius: 13px;\n font-size: 11px;\n font-weight: 800;\n letter-spacing: .7px;\n text-transform: uppercase;\n cursor: pointer;\n transition: .2s ease;\n}\n#wsAdhesiveSelector .ws-reset:hover {\n color: #fff;\n background: var(--ws-red);\n border-color: var(--ws-red);\n}\n\n\/* ------------------------- RESULT CARD ------------------------- *\/\n#wsAdhesiveSelector .ws-result-card {\n display: flex;\n min-height: 100%;\n padding: 20px;\n}\n\n#wsAdhesiveSelector .ws-result-inner {\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-radius: 16px;\n background: linear-gradient(145deg,#f8f9fa 0%,#f2f4f6 100%);\n border: 1px solid #edf0f2;\n padding: 28px;\n}\n\n#wsAdhesiveSelector .ws-placeholder {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n min-height: 420px;\n}\n\n#wsAdhesiveSelector .ws-placeholder-icon {\n display: flex;\n width: 66px;\n height: 66px;\n align-items: center;\n justify-content: center;\n margin-block-end: 18px;\n border-radius: 18px;\n background: #fff;\n color: var(--ws-red);\n border: 1px solid var(--ws-border);\n box-shadow: 0 8px 22px rgba(23,27,42,.08);\n}\n#wsAdhesiveSelector .ws-placeholder-icon svg { width: 28px; height: 28px; }\n#wsAdhesiveSelector .ws-placeholder h3 {\n margin: 0 0 8px;\n color: var(--ws-ink);\n font-size: 23px;\n line-height: 1.25;\n font-weight: 800;\n}\n#wsAdhesiveSelector .ws-placeholder p {\n max-width: 360px;\n margin: 0;\n color: var(--ws-muted);\n font-size: 14px;\n line-height: 1.7;\n}\n\n#wsAdhesiveSelector .ws-result {\n display: none;\n width: 100%;\n animation: wsFadeIn .35s ease;\n}\n#wsAdhesiveSelector .ws-result.is-visible { display: block; }\n@keyframes wsFadeIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n#wsAdhesiveSelector .ws-match-badge {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n margin-block-end: 14px;\n padding: 7px 11px;\n border-radius: 999px;\n background: rgba(237,28,36,.08);\n color: var(--ws-red);\n font-size: 10px;\n font-weight: 800;\n letter-spacing: .7px;\n text-transform: uppercase;\n}\n\n#wsAdhesiveSelector .ws-result-grid {\n display: grid;\n grid-template-columns: 170px minmax(0,1fr);\n gap: 22px;\n align-items: center;\n}\n#wsAdhesiveSelector .ws-product-image {\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 \/ 1;\n padding: 14px;\n background: #fff;\n border: 1px solid var(--ws-border);\n border-radius: 18px;\n box-shadow: 0 8px 22px rgba(23,27,42,.06);\n overflow: hidden;\n}\n#wsAdhesiveSelector .ws-product-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n#wsAdhesiveSelector .ws-result-copy { text-align: start; }\n#wsAdhesiveSelector .ws-result h3 {\n margin: 0 0 8px;\n color: var(--ws-ink);\n font-size: 25px;\n line-height: 1.12;\n font-weight: 800;\n letter-spacing: -.25px;\n text-transform: uppercase;\n}\n#wsAdhesiveSelector .ws-result-desc {\n margin: 0 0 14px;\n color: var(--ws-text);\n font-size: 13px;\n line-height: 1.7;\n}\n#wsAdhesiveSelector .ws-choice-summary {\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n margin: 0 0 16px;\n}\n#wsAdhesiveSelector .ws-choice-summary span {\n display: inline-flex;\n min-height: 30px;\n align-items: center;\n padding: 6px 9px;\n border-radius: 999px;\n background: #fff;\n color: #5e6773;\n border: 1px solid var(--ws-border);\n font-size: 10px;\n font-weight: 700;\n}\n#wsAdhesiveSelector .ws-product-link {\n display: inline-flex;\n min-height: 46px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 11px 18px;\n border-radius: 12px;\n background: var(--ws-red);\n color: #fff;\n box-shadow: 0 8px 18px rgba(237,28,36,.18);\n font-size: 12px;\n font-weight: 800;\n text-decoration: none;\n transition: .2s ease;\n}\n#wsAdhesiveSelector .ws-product-link:hover {\n background: var(--ws-ink);\n transform: translateY(-1px);\n}\n#wsAdhesiveSelector .ws-product-link svg { width: 16px; height: 16px; }\n[dir=\"rtl\"] #wsAdhesiveSelector .ws-product-link svg,\nbody.rtl #wsAdhesiveSelector .ws-product-link svg { transform: scaleX(-1); }\n\n\/* ------------------------- TABLET ------------------------- *\/\n@media (max-width:980px) {\n #wsAdhesiveSelector { width: min(920px, calc(100% - 24px)); }\n #wsAdhesiveSelector .ws-shell {\n grid-template-columns: 1fr;\n padding: 14px;\n gap: 14px;\n }\n #wsAdhesiveSelector .ws-result-card { min-height: 0; }\n #wsAdhesiveSelector .ws-placeholder { min-height: 300px; }\n}\n\n\/* ------------------------- MOBILE ------------------------- *\/\n@media (max-width:767px) {\n \/* Direction-neutral viewport breakout. It stays centered in RTL and LTR. *\/\n #wsAdhesiveSelector {\n width: calc(100vw - 16px);\n max-width: none;\n margin-block: 12px 36px;\n margin-inline: calc(50% - 50vw + 8px);\n padding: 0;\n }\n\n #wsAdhesiveSelector .ws-hero {\n padding: 25px 18px 22px;\n border-radius: 20px;\n }\n #wsAdhesiveSelector .ws-hero::after {\n inset-block-start: -120px;\n inset-inline-end: -110px;\n width: 230px;\n height: 230px;\n border-width: 28px;\n }\n #wsAdhesiveSelector .ws-kicker {\n margin-block-end: 11px;\n padding: 7px 13px;\n font-size: 10px;\n }\n #wsAdhesiveSelector .ws-hero h1 {\n max-width: 360px;\n font-size: clamp(29px,8.5vw,38px);\n line-height: 1.08;\n }\n #wsAdhesiveSelector .ws-hero p {\n max-width: 360px;\n margin-block-start: 10px;\n font-size: 13px;\n line-height: 1.65;\n }\n #wsAdhesiveSelector .ws-hero-line {\n width: 58px;\n height: 3px;\n margin-block-start: 14px;\n }\n\n #wsAdhesiveSelector .ws-shell {\n display: grid;\n grid-template-columns: 1fr;\n margin-block-start: 10px;\n padding: 8px;\n gap: 10px;\n border-radius: 20px;\n box-shadow: none;\n }\n #wsAdhesiveSelector .ws-card {\n border-radius: 17px;\n box-shadow: none;\n }\n #wsAdhesiveSelector .ws-form-card { padding: 17px; }\n #wsAdhesiveSelector .ws-form-head {\n grid-template-columns: minmax(0,1fr) auto;\n gap: 10px;\n padding-block-end: 14px;\n margin-block-end: 14px;\n }\n #wsAdhesiveSelector .ws-eyebrow { font-size: 9px; margin-block-end: 4px; }\n #wsAdhesiveSelector .ws-form-head h2 { font-size: 23px; line-height: 1.12; }\n #wsAdhesiveSelector .ws-form-head p {\n margin-block-start: 6px;\n font-size: 12.5px;\n line-height: 1.55;\n }\n #wsAdhesiveSelector .ws-progress-count {\n min-width: 44px;\n height: 44px;\n border-radius: 13px;\n font-size: 12px;\n }\n #wsAdhesiveSelector .ws-progress { gap: 6px; margin-block-end: 16px; }\n #wsAdhesiveSelector #selectorForm { grid-template-columns: 1fr; gap: 12px; }\n #wsAdhesiveSelector .ws-field.full { grid-column: auto; }\n #wsAdhesiveSelector .ws-field-label {\n margin-block-end: 7px;\n font-size: 10.5px;\n letter-spacing: .4px;\n }\n #wsAdhesiveSelector .ws-step-num {\n width: 23px;\n height: 23px;\n border-radius: 7px;\n font-size: 9px;\n }\n #wsAdhesiveSelector select {\n height: 52px;\n padding-inline-start: 13px;\n padding-inline-end: 42px;\n background-position: right 13px center;\n border-radius: 13px;\n font-size: 13px;\n }\n [dir=\"rtl\"] #wsAdhesiveSelector select,\n body.rtl #wsAdhesiveSelector select { background-position: left 13px center; }\n\n #wsAdhesiveSelector .ws-reset {\n min-height: 48px;\n border-radius: 12px;\n font-size: 10.5px;\n }\n #wsAdhesiveSelector .ws-result-card { padding: 8px; }\n #wsAdhesiveSelector .ws-result-inner { padding: 18px; border-radius: 14px; }\n #wsAdhesiveSelector .ws-placeholder {\n min-height: 250px;\n padding: 18px 8px;\n }\n #wsAdhesiveSelector .ws-placeholder-icon {\n width: 58px;\n height: 58px;\n margin-block-end: 14px;\n border-radius: 16px;\n }\n #wsAdhesiveSelector .ws-placeholder h3 { font-size: 20px; }\n #wsAdhesiveSelector .ws-placeholder p { max-width: 300px; font-size: 12.5px; }\n #wsAdhesiveSelector .ws-match-badge { margin-block-end: 12px; font-size: 9px; }\n #wsAdhesiveSelector .ws-result-grid { grid-template-columns: 1fr; gap: 14px; }\n #wsAdhesiveSelector .ws-product-image {\n width: min(68vw,250px);\n margin-inline: auto;\n padding: 12px;\n border-radius: 16px;\n }\n #wsAdhesiveSelector .ws-result-copy { text-align: center; }\n #wsAdhesiveSelector .ws-result h3 {\n max-width: 340px;\n margin-inline: auto;\n font-size: 22px;\n }\n #wsAdhesiveSelector .ws-result-desc {\n max-width: 340px;\n margin-inline: auto;\n font-size: 12.5px;\n }\n #wsAdhesiveSelector .ws-choice-summary { justify-content: center; gap: 6px; }\n #wsAdhesiveSelector .ws-choice-summary span { font-size: 9.5px; }\n #wsAdhesiveSelector .ws-product-link {\n width: 100%;\n min-height: 50px;\n border-radius: 12px;\n font-size: 11px;\n }\n}\n\n@media (max-width:380px) {\n #wsAdhesiveSelector { width: calc(100vw - 12px); margin-inline: calc(50% - 50vw + 6px); }\n #wsAdhesiveSelector .ws-hero { padding: 22px 14px 19px; }\n #wsAdhesiveSelector .ws-hero h1 { font-size: 28px; }\n #wsAdhesiveSelector .ws-form-card { padding: 14px; }\n #wsAdhesiveSelector .ws-form-head h2 { font-size: 21px; }\n #wsAdhesiveSelector .ws-progress-count { min-width: 40px; height: 40px; }\n #wsAdhesiveSelector select { height: 50px; font-size: 12.5px; }\n}\n\n\/* ------------------------- RTL POLISH ------------------------- *\/\n[dir=\"rtl\"] #wsAdhesiveSelector,\nbody.rtl #wsAdhesiveSelector {\n direction: rtl;\n text-align: right;\n}\n\n[dir=\"rtl\"] #wsAdhesiveSelector .ws-hero,\nbody.rtl #wsAdhesiveSelector .ws-hero,\n[dir=\"rtl\"] #wsAdhesiveSelector .ws-placeholder,\nbody.rtl #wsAdhesiveSelector .ws-placeholder {\n text-align: center;\n}\n\n[dir=\"rtl\"] #wsAdhesiveSelector .ws-result-copy,\nbody.rtl #wsAdhesiveSelector .ws-result-copy,\n[dir=\"rtl\"] #wsAdhesiveSelector .ws-field-label,\nbody.rtl #wsAdhesiveSelector .ws-field-label {\n text-align: right;\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"wsAdhesiveSelector\">\n <section class=\"ws-hero\">\n <span class=\"ws-kicker\">WHITE SAND<\/span>\n <h1>Digital Tile Adhesive Selector<\/h1>\n <p>Answer five quick questions and get a White Sand adhesive recommendation matched to your tile, surface and application conditions.<\/p>\n <div class=\"ws-hero-line\"><\/div>\n <\/section>\n\n <section class=\"ws-shell\">\n <section class=\"ws-card ws-form-card\">\n <div class=\"ws-form-head\">\n <div>\n <span class=\"ws-eyebrow\">Step-by-step selection<\/span>\n <h2>Find Your Adhesive<\/h2>\n <p>Complete the fields in order. Each choice unlocks the next step.<\/p>\n <\/div>\n <div class=\"ws-progress-count\" id=\"progressCount\">0\/5<\/div>\n <\/div>\n\n <div class=\"ws-progress\" aria-hidden=\"true\">\n <span id=\"p1\"><\/span>\n <span id=\"p2\"><\/span>\n <span id=\"p3\"><\/span>\n <span id=\"p4\"><\/span>\n <span id=\"p5\"><\/span>\n <\/div>\n\n <form id=\"selectorForm\" onsubmit=\"event.preventDefault();\">\n <div class=\"ws-field\">\n <label class=\"ws-field-label\" for=\"tileType\"><span class=\"ws-step-num\">01<\/span> Type of Tile<\/label>\n <select id=\"tileType\">\n <option value=\"\">Select Tile Type...<\/option>\n <option value=\"Ceramic\">Ceramic<\/option>\n <option value=\"Porcelain\">Porcelain<\/option>\n <option value=\"Natural Stone\">Natural Stone<\/option>\n <\/select>\n <\/div>\n\n <div class=\"ws-field\">\n <label class=\"ws-field-label\" for=\"application\"><span class=\"ws-step-num\">02<\/span> Application Area<\/label>\n <select id=\"application\" disabled>\n <option value=\"\">Select Application...<\/option>\n <option value=\"Floors\">Floors<\/option>\n <option value=\"Walls\">Walls<\/option>\n <\/select>\n <\/div>\n\n <div class=\"ws-field\">\n <label class=\"ws-field-label\" for=\"tileSize\"><span class=\"ws-step-num\">03<\/span> Tile Size (cm\u00b2)<\/label>\n <select id=\"tileSize\" disabled>\n <option value=\"\">Select Tile Size...<\/option>\n <option value=\"1600\">Up to 1600 cm\u00b2<\/option>\n <option value=\"3600\">Up to 3600 cm\u00b2<\/option>\n <option value=\"5400\">Up to 5400 cm\u00b2<\/option>\n <option value=\"7200\">Up to 7200 cm\u00b2<\/option>\n <option value=\"8000\">Up to 8000 cm\u00b2<\/option>\n <\/select>\n <\/div>\n\n <div class=\"ws-field\">\n <label class=\"ws-field-label\" for=\"substrate\"><span class=\"ws-step-num\">04<\/span> Substrate \/ Surface<\/label>\n <select id=\"substrate\" disabled>\n <option value=\"\">Select Substrate...<\/option>\n <option value=\"Concrete\">Concrete<\/option>\n <option value=\"Cement-based Plaster\">Cement-based Plaster<\/option>\n <option value=\"Non-Porous Surfaces\">Non-Porous Surfaces<\/option>\n <option value=\"Underfloor Heating\">Underfloor Heating<\/option>\n <option value=\"Existing Ceramic Tiles\">Existing Ceramic Tiles<\/option>\n <option value=\"Wet\/Submerged Areas\">Wet\/Submerged Areas<\/option>\n <\/select>\n <\/div>\n\n <div class=\"ws-field full\">\n <label class=\"ws-field-label\" for=\"environment\"><span class=\"ws-step-num\">05<\/span> Environment<\/label>\n <select id=\"environment\" disabled>\n <option value=\"\">Select Environment...<\/option>\n <option value=\"Indoor\">Indoor<\/option>\n <option value=\"Outdoor\">Outdoor<\/option>\n <\/select>\n <\/div>\n\n <button type=\"button\" class=\"ws-reset\" id=\"resetBtn\">Reset Selections<\/button>\n <\/form>\n <\/section>\n\n <section class=\"ws-card ws-result-card\">\n <div class=\"ws-result-inner\">\n <div class=\"ws-placeholder\" id=\"placeholderState\">\n <div class=\"ws-placeholder-icon\">\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\"><\/path>\n <\/svg>\n <\/div>\n <h3>Recommendation Pending<\/h3>\n <p>Complete all five selections to discover the White Sand adhesive best suited to your project.<\/p>\n <\/div>\n\n <div class=\"ws-result\" id=\"resultState\">\n <div class=\"ws-match-badge\">Recommended Match<\/div>\n\n <div class=\"ws-result-grid\">\n <div class=\"ws-product-image\">\n <img decoding=\"async\" id=\"resImage\" src=\"\" alt=\"Recommended White Sand product\" \/>\n <\/div>\n\n <div class=\"ws-result-copy\">\n <h3 id=\"resTitle\">Product Name<\/h3>\n <p class=\"ws-result-desc\" id=\"resDesc\">Recommendation text.<\/p>\n\n <div class=\"ws-choice-summary\" id=\"choiceSummary\"><\/div>\n\n <a class=\"ws-product-link\" id=\"resLink\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n View Product\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/section>\n<\/div>\n\n<script>\n(function () {\n const root = document.getElementById('wsAdhesiveSelector');\n if (!root) return;\n\n const products = {\n super: {\n title: 'SUPER WHITE SAND',\n desc: 'The professional choice for standard ceramic installations on stable substrates.',\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/Untitled-design-21.jpg',\n link: 'https:\/\/www.whitesand.sa\/product\/super-white-sand\/'\n },\n premium: {\n title: 'WHITE SAND PREMIUM FIX',\n desc: 'Superior performance for porcelain, marble, and natural stone in challenging environments.',\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/Untitled-design-24.jpg',\n link: 'https:\/\/www.whitesand.sa\/product\/premium-fix\/'\n },\n pool: {\n title: 'POOL WHITE SAND',\n desc: 'Specially formulated for permanent immersion in swimming pools and wet areas.',\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/Untitled-design-23.jpg',\n link: 'https:\/\/www.whitesand.sa\/product\/pool-white-sand\/'\n },\n porcelain: {\n title: 'PORCELAIN WHITE SAND',\n desc: 'High-strength adhesive designed specifically for non-porous porcelain and stone tiles.',\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/PORCELAIN.png',\n link: 'https:\/\/www.whitesand.sa\/product\/porcelain-white-sand\/'\n }\n };\n\n const sequence = ['tileType', 'application', 'tileSize', 'substrate', 'environment'];\n const selects = sequence.map(id => root.querySelector('#' + id));\n const progressCount = root.querySelector('#progressCount');\n const progressBars = [1,2,3,4,5].map(n => root.querySelector('#p' + n));\n const placeholder = root.querySelector('#placeholderState');\n const resultState = root.querySelector('#resultState');\n const resTitle = root.querySelector('#resTitle');\n const resDesc = root.querySelector('#resDesc');\n const resImage = root.querySelector('#resImage');\n const resLink = root.querySelector('#resLink');\n const choiceSummary = root.querySelector('#choiceSummary');\n const resetBtn = root.querySelector('#resetBtn');\n\n function updateProgress() {\n const completed = selects.filter(el => el && el.value).length;\n progressCount.textContent = completed + '\/5';\n progressBars.forEach((bar, index) => {\n bar.classList.toggle('is-active', index < completed);\n });\n }\n\n function setResultVisibility(showResult) {\n placeholder.style.display = showResult ? 'none' : 'flex';\n resultState.classList.toggle('is-visible', showResult);\n }\n\n function calculateResult() {\n const type = root.querySelector('#tileType').value;\n const app = root.querySelector('#application').value;\n const size = root.querySelector('#tileSize').value;\n const sub = root.querySelector('#substrate').value;\n const env = root.querySelector('#environment').value;\n\n updateProgress();\n\n if (!type || !app || !size || !sub || !env) {\n setResultVisibility(false);\n return;\n }\n\n let result = products.premium;\n\n if (type === 'Ceramic') {\n if (sub === 'Concrete' && env === 'Indoor') result = products.super;\n else if (sub === 'Cement-based Plaster' && env === 'Indoor') result = products.super;\n else if (sub === 'Wet\/Submerged Areas') result = products.pool;\n else if (sub === 'Concrete' && env === 'Outdoor') result = products.porcelain;\n else if (sub === 'Cement-based Plaster' && env === 'Outdoor') result = products.porcelain;\n } else {\n if (env === 'Indoor' && (sub === 'Concrete' || sub === 'Cement-based Plaster')) result = products.porcelain;\n else if (env === 'Indoor' && sub === 'Wet\/Submerged Areas') result = products.pool;\n else result = products.premium;\n }\n\n resTitle.textContent = result.title;\n resDesc.textContent = result.desc;\n resImage.src = result.img;\n resLink.href = result.link;\n\n const sizeText = root.querySelector('#tileSize').selectedOptions[0].textContent;\n choiceSummary.innerHTML = '';\n [type, app, sizeText, sub, env].forEach(value => {\n const chip = document.createElement('span');\n chip.textContent = value;\n choiceSummary.appendChild(chip);\n });\n\n setResultVisibility(true);\n }\n\n sequence.forEach((id, index) => {\n const current = root.querySelector('#' + id);\n current.addEventListener('change', () => {\n const hasValue = !!current.value;\n\n if (index < sequence.length - 1) {\n const next = root.querySelector('#' + sequence[index + 1]);\n next.disabled = !hasValue;\n }\n\n for (let i = index + 1; i < sequence.length; i++) {\n if (i > index + 1 || !hasValue) {\n const future = root.querySelector('#' + sequence[i]);\n future.value = '';\n future.disabled = true;\n }\n }\n\n calculateResult();\n });\n });\n\n resetBtn.addEventListener('click', () => {\n sequence.forEach((id, index) => {\n const el = root.querySelector('#' + id);\n el.value = '';\n el.disabled = index !== 0;\n });\n\n choiceSummary.innerHTML = '';\n updateProgress();\n setResultVisibility(false);\n });\n\n updateProgress();\n setResultVisibility(false);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Digital Tile Adhesive Selector | White Sand WHITE SAND Digital Tile Adhesive Selector Answer five quick questions and get a White Sand adhesive recommendation matched to your tile, surface and application conditions. Step-by-step selection Find Your Adhesive Complete the fields in order. Each choice unlocks the next step. 0\/5 01 Type of Tile Select Tile […]<\/p>\n","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-6772","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/comments?post=6772"}],"version-history":[{"count":60,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6772\/revisions"}],"predecessor-version":[{"id":10526,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6772\/revisions\/10526"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}