{"id":8016,"date":"2026-01-16T17:37:10","date_gmt":"2026-01-16T09:37:10","guid":{"rendered":"https:\/\/louisthai.com\/?page_id=8016"},"modified":"2026-01-16T23:17:49","modified_gmt":"2026-01-16T15:17:49","slug":"the-exclusive-2","status":"publish","type":"page","link":"https:\/\/louisthai.com\/hk\/the-exclusive-2\/","title":{"rendered":"The Exclusive"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n \n \n THE Exclusive Series 2.0 \u2014 Glass Catalog<\/title>\n <style>\n #exclusive-catalog-app * {\n color: inherit !important;\n }\n\n #exclusive-catalog-app,\n :root {\n --bg1: #09122a;\n --glass: rgba(255, 255, 255, .08);\n --glass2: rgba(255, 255, 255, .12);\n --stroke: rgba(255, 255, 255, .14);\n --stroke2: rgba(255, 255, 255, .22);\n --text: rgba(255, 255, 255, .92);\n --muted: rgba(255, 255, 255, .62);\n --muted2: rgba(255, 255, 255, .46);\n --shadow: 0 18px 60px rgba(0, 0, 0, .55);\n --shadow2: 0 10px 30px rgba(0, 0, 0, .45);\n --r: 22px;\n --r2: 16px;\n\n --brand: #ffffff;\n --accent: #5b7cff;\n --accent2: #67e8ff;\n --ok: #22C55E;\n --warn: #F59E0B;\n --danger: #FF3B30;\n --chip: rgba(255, 255, 255, .10);\n --chip2: rgba(255, 255, 255, .14);\n\n --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --ui: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Inter\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n * {\n box-sizing: border-box\n }\n\n html,\n body {\n height: 100%\n }\n\n body,\n #exclusive-catalog-app {\n margin: 0;\n font-family: var(--ui) !important;\n font-size: 16px;\n line-height: 1.55;\n color: var(--text) !important;\n background:\n linear-gradient(180deg, var(--bg0), var(--bg1));\n overflow-x: hidden;\n }\n\n b,\n strong {\n font-weight: 600;\n }\n\n \/* subtle animated grain *\/\n body::before {\n content: \"\";\n position: fixed;\n inset: -40%;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'\/%3E%3C\/svg%3E\");\n mix-blend-mode: overlay;\n opacity: .06;\n transform: translateZ(0);\n pointer-events: none;\n animation: drift 14s linear infinite;\n }\n\n @keyframes drift {\n 0% {\n transform: translate3d(0, 0, 0) rotate(0deg)\n }\n\n 100% {\n transform: translate3d(6%, -6%, 0) rotate(6deg)\n }\n }\n\n \/* floating bokeh *\/\n .bokeh {\n position: fixed;\n inset: 0;\n pointer-events: none;\n opacity: .75;\n filter: blur(1px);\n }\n\n .bokeh span {\n position: absolute;\n width: 260px;\n height: 260px;\n border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05) 45%, transparent 70%) !important;\n mix-blend-mode: screen;\n animation: float 16s ease-in-out infinite;\n }\n\n .bokeh span:nth-child(1) {\n left: -40px;\n top: 80px;\n transform: scale(.9);\n animation-duration: 18s\n }\n\n .bokeh span:nth-child(2) {\n right: -70px;\n top: 140px;\n transform: scale(1.2);\n animation-duration: 22s\n }\n\n .bokeh span:nth-child(3) {\n left: 18%;\n bottom: -110px;\n transform: scale(1.1);\n animation-duration: 20s\n }\n\n .bokeh span:nth-child(4) {\n right: 20%;\n bottom: -140px;\n transform: scale(.95);\n animation-duration: 19s\n }\n\n @keyframes float {\n\n 0%,\n 100% {\n translate: 0 0\n }\n\n 50% {\n translate: 0 -22px\n }\n }\n\n .wrap {\n max-width: 1200px;\n margin: 0 auto;\n padding: 26px 18px 120px;\n }\n\n \/* top bar *\/\n .topbar {\n position: sticky;\n top: 0;\n z-index: 50;\n padding: 14px 0 12px;\n backdrop-filter: blur(18px) saturate(160%);\n -webkit-backdrop-filter: blur(18px) saturate(160%);\n background: linear-gradient(180deg, rgba(10, 12, 22, .80), rgba(10, 12, 22, .45)) !important;\n border-bottom: 1px solid rgba(255, 255, 255, .08);\n }\n\n .topbar .inner {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 18px;\n display: flex;\n gap: 12px;\n align-items: center;\n justify-content: space-between;\n }\n\n .brand {\n display: flex;\n align-items: baseline;\n gap: 10px;\n white-space: nowrap;\n }\n\n .brand .logo {\n font-weight: 650;\n letter-spacing: .12em;\n font-size: 16px;\n color: rgba(255, 255, 255, .96) !important;\n }\n\n .brand .sub {\n font-weight: 600;\n font-size: 16px;\n color: rgba(255, 255, 255, .60) !important;\n }\n\n .pill {\n margin-left: 8px;\n font-family: var(--ui) !important;\n font-weight: 500;\n font-size: 16px;\n color: rgba(255, 255, 255, .85) !important;\n background: rgba(255, 255, 255, .10) !important;\n border: 1px solid rgba(255, 255, 255, .16);\n padding: 5px 10px;\n border-radius: 999px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .25);\n }\n\n .actions {\n display: flex;\n gap: 10px;\n align-items: center;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n .search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n min-width: min(440px, 72vw);\n border-radius: 999px;\n background: rgba(255, 255, 255, .08) !important;\n border: 1px solid rgba(255, 255, 255, .14);\n box-shadow: var(--shadow2);\n backdrop-filter: blur(18px) saturate(160%);\n -webkit-backdrop-filter: blur(18px) saturate(160%);\n }\n\n .search input {\n width: 100%;\n font-size: 16px;\n color: var(--text) !important;\n background: transparent !important;\n border: none;\n outline: none;\n }\n\n .search .k {\n font-family: var(--ui) !important;\n font-size: 16px;\n color: rgba(255, 255, 255, .65) !important;\n border: 1px solid rgba(255, 255, 255, .18);\n background: rgba(255, 255, 255, .08) !important;\n padding: 4px 7px;\n border-radius: 9px;\n white-space: nowrap;\n }\n\n .btn {\n border: 1px solid rgba(255, 255, 255, .16);\n background: rgba(255, 255, 255, .08) !important;\n color: rgba(255, 255, 255, .90) !important;\n padding: 10px 12px;\n border-radius: 999px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 650;\n box-shadow: var(--shadow2);\n backdrop-filter: blur(18px) saturate(160%);\n -webkit-backdrop-filter: blur(18px) saturate(160%);\n transition: transform .12s ease, background .12s ease, border-color .12s ease;\n user-select: none;\n }\n\n .btn:hover {\n transform: translateY(-1px);\n background: rgba(255, 255, 255, .11) !important;\n border-color: rgba(255, 255, 255, .22)\n }\n\n .btn:active {\n transform: translateY(0px) scale(.99)\n }\n\n .btn.primary {\n background: linear-gradient(135deg, rgba(91, 124, 255, .80), rgba(0, 212, 255, .55)) !important;\n border-color: rgba(255, 255, 255, .22) !important;\n }\n\n .btn.danger {\n background: rgba(255, 59, 48, .16) !important;\n border-color: rgba(255, 59, 48, .30) !important;\n }\n\n .hero {\n padding: 28px 0 16px;\n display: flex;\n gap: 18px;\n align-items: flex-end;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n\n .hero h1 {\n margin: 0;\n font-size: 36px;\n letter-spacing: -.02em;\n line-height: 1.05;\n }\n\n .hero p {\n margin: 8px 0 0;\n color: var(--muted) !important;\n font-size: 16px;\n max-width: 720px;\n }\n\n .metaRow {\n display: flex;\n gap: 10px;\n align-items: center;\n flex-wrap: wrap;\n margin-top: 12px;\n }\n\n .chip {\n padding: 7px 10px;\n font-family: var(--ui) !important;\n font-weight: 500;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, .14);\n background: rgba(255, 255, 255, .08) !important;\n color: rgba(255, 255, 255, .82) !important;\n font-size: 16px;\n box-shadow: var(--shadow2);\n }\n\n .chip strong {\n color: rgba(255, 255, 255, .95)\n }\n\n \/* category tabs *\/\n .tabs {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin: 10px 0 18px;\n }\n\n .tab {\n padding: 9px 12px;\n font-size: 16px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, .14);\n background: rgba(255, 255, 255, .06) !important;\n color: rgba(255, 255, 255, .80) !important;\n cursor: pointer;\n user-select: none;\n transition: all .12s ease;\n }\n\n .tab:hover {\n background: rgba(255, 255, 255, .10) !important;\n border-color: rgba(255, 255, 255, .20)\n }\n\n .tab.active {\n background: linear-gradient(135deg, rgba(91, 124, 255, .45), rgba(0, 212, 255, .25)) !important;\n border-color: rgba(255, 255, 255, .26) !important;\n color: rgba(255, 255, 255, .95) !important;\n }\n\n \/* grid *\/\n .grid {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 14px;\n }\n\n .card {\n grid-column: span 6;\n border-radius: var(--r);\n background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06)) !important;\n border: 1px solid rgba(255, 255, 255, .14);\n box-shadow: var(--shadow);\n backdrop-filter: blur(20px) saturate(170%);\n -webkit-backdrop-filter: blur(20px) saturate(170%);\n overflow: hidden;\n position: relative;\n }\n\n .card::before {\n content: \"\";\n position: absolute;\n inset: -60px -80px auto auto;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .20), transparent 65%) !important;\n opacity: .55;\n pointer-events: none;\n transform: translateZ(0);\n }\n\n .head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 14px 12px;\n border-bottom: 1px solid rgba(255, 255, 255, .10);\n }\n\n .title {\n display: flex;\n gap: 10px;\n align-items: center;\n min-width: 0;\n }\n\n .badge {\n font-family: var(--ui) !important;\n font-size: 16px;\n padding: 6px 9px;\n border-radius: 999px;\n background: rgba(255, 255, 255, .10) !important;\n border: 1px solid rgba(255, 255, 255, .14);\n color: rgba(255, 255, 255, .86) !important;\n white-space: nowrap;\n }\n\n .name {\n font-size: 17px;\n font-weight: 650;\n letter-spacing: -.01em;\n color: rgba(255, 255, 255, .95) !important;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .cat {\n font-size: 16px;\n color: rgba(255, 255, 255, .65) !important;\n white-space: nowrap;\n }\n\n .body {\n padding: 14px;\n display: grid;\n grid-template-columns: 1.35fr .65fr;\n gap: 12px;\n align-items: stretch;\n }\n\n .desc {\n min-width: 0;\n }\n\n .lineCN {\n font-size: 17px;\n font-weight: 650;\n color: rgba(255, 255, 255, .92) !important;\n margin: 0 0 6px;\n }\n\n .lineEN {\n font-size: 16px;\n color: rgba(255, 255, 255, .70) !important;\n margin: 0 0 10px;\n }\n\n .note {\n font-size: 16px;\n color: rgba(255, 255, 255, .52) !important;\n margin: 0;\n\n display: none;\n }\n\n .side {\n display: flex;\n width: 240px;\n min-height: 150px;\n flex-direction: column;\n justify-content: space-between;\n gap: 10px;\n padding: 12px;\n border-radius: var(--r2);\n background: rgba(0, 0, 0, .18) !important;\n border: 1px solid rgba(255, 255, 255, .10);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);\n }\n\n .price {\n text-align: right;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n }\n\n .price .from {\n font-size: 16px;\n color: rgba(255, 255, 255, .55) !important;\n letter-spacing: .06em;\n text-transform: uppercase;\n }\n\n .price .amt {\n margin-top: 4px;\n font-size: 30px;\n font-weight: 650;\n letter-spacing: -.02em;\n display: inline-flex;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 6px;\n min-width: 200px;\n }\n\n .price .cur {\n font-size: 16px;\n color: rgba(255, 255, 255, .70) !important;\n font-weight: 650;\n margin-right: 6px;\n vertical-align: super;\n }\n\n .price .na {\n font-size: 16px;\n color: rgba(255, 255, 255, .66) !important;\n font-weight: 650;\n }\n\n .select {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n align-items: center;\n }\n\n .mini {\n padding: 9px 11px;\n border-radius: 999px;\n font-size: 16px;\n font-weight: 700;\n cursor: pointer;\n border: 1px solid rgba(255, 255, 255, .14);\n background: rgba(255, 255, 255, .08) !important;\n color: rgba(255, 255, 255, .92) !important;\n box-shadow: var(--shadow2);\n transition: transform .12s ease, background .12s ease, border-color .12s ease;\n user-select: none;\n }\n\n .mini:hover {\n transform: translateY(-1px);\n background: rgba(255, 255, 255, .12) !important;\n border-color: rgba(255, 255, 255, .22)\n }\n\n .mini.primary {\n background: linear-gradient(135deg, rgba(91, 124, 255, .70), rgba(0, 212, 255, .45)) !important;\n border-color: rgba(255, 255, 255, .22) !important;\n }\n\n .footerNote {\n margin-top: 18px;\n padding: 14px 16px;\n border-radius: var(--r);\n border: 1px solid rgba(255, 255, 255, .10);\n background: rgba(255, 255, 255, .06) !important;\n backdrop-filter: blur(18px) saturate(160%);\n -webkit-backdrop-filter: blur(18px) saturate(160%);\n color: rgba(255, 255, 255, .60) !important;\n font-size: 16px;\n line-height: 1.6;\n }\n\n \/* editor mode *\/\n .editable [contenteditable=\"true\"] {\n outline: 1px solid rgba(0, 212, 255, .22);\n outline-offset: 1px;\n border-radius: 8px;\n padding: 2px 6px;\n background: rgba(0, 212, 255, .08) !important;\n }\n\n .hint {\n font-size: 16px;\n color: rgba(255, 255, 255, .55) !important;\n margin-top: 6px;\n }\n\n \/* modal *\/\n .modalBackdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, .55) !important;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 100;\n padding: 22px;\n }\n\n .modal {\n width: min(860px, 96vw);\n border-radius: 26px;\n background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08)) !important;\n border: 1px solid rgba(255, 255, 255, .16);\n box-shadow: 0 30px 90px rgba(0, 0, 0, .65);\n overflow: hidden;\n }\n\n .modalTop {\n padding: 16px 18px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid rgba(255, 255, 255, .10);\n }\n\n .modalTop .mTitle {\n font-size: 16px;\n font-weight: 700;\n letter-spacing: -.01em;\n }\n\n .modalBody {\n padding: 16px 18px 18px;\n display: grid;\n grid-template-columns: 1.05fr .95fr;\n gap: 14px;\n }\n\n .panel {\n border-radius: 18px;\n border: 1px solid rgba(255, 255, 255, .12);\n background: rgba(0, 0, 0, .16) !important;\n padding: 12px;\n }\n\n .panel h3 {\n margin: 0 0 8px;\n font-size: 16px;\n color: rgba(255, 255, 255, .70) !important;\n letter-spacing: .08em;\n text-transform: uppercase;\n }\n\n .field {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin-top: 10px;\n }\n\n .field label {\n font-size: 16px;\n color: rgba(255, 255, 255, .68) !important;\n display: block;\n margin-bottom: 6px;\n }\n\n .field input,\n .field textarea {\n width: 100%;\n padding: 10px 12px;\n border-radius: 14px;\n border: 1px solid rgba(255, 255, 255, .14);\n background: rgba(255, 255, 255, .07) !important;\n color: rgba(255, 255, 255, .92) !important;\n outline: none;\n font-family: var(--ui) !important;\n font-size: 16px;\n }\n\n .field textarea {\n min-height: 92px;\n resize: vertical;\n grid-column: span 2\n }\n\n .quote {\n width: 100%;\n min-height: 220px;\n resize: vertical;\n font-family: var(--mono) !important;\n font-size: 16px;\n line-height: 1.55;\n color: rgba(255, 255, 255, .90) !important;\n background: rgba(0, 0, 0, .30) !important;\n }\n\n .modalActions {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n flex-wrap: wrap;\n padding: 0 18px 18px;\n }\n\n \/* responsive *\/\n @media (max-width: 940px) {\n .card {\n grid-column: span 12;\n }\n\n .side {\n width: 100%;\n min-height: unset;\n }\n\n .search {\n min-width: min(620px, 92vw)\n }\n\n .modalBody {\n grid-template-columns: 1fr;\n }\n\n .field {\n grid-template-columns: 1fr;\n }\n\n .field textarea {\n grid-column: span 1\n }\n }\n\n \/* tiny toast *\/\n .toast {\n position: fixed;\n left: 50%;\n bottom: 18px;\n transform: translateX(-50%);\n padding: 10px 12px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, .16);\n background: rgba(20, 22, 35, .72) !important;\n backdrop-filter: blur(16px) saturate(160%);\n -webkit-backdrop-filter: blur(16px) saturate(160%);\n box-shadow: var(--shadow2);\n color: rgba(255, 255, 255, .90) !important;\n font-size: 16px;\n display: none;\n z-index: 120;\n max-width: min(92vw, 820px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n\n \/* --- Quick Guide Callout --- *\/\n .callout {\n margin-top: 14px;\n padding: 14px 16px;\n border-radius: 18px;\n background: rgba(255, 255, 255, 0.06) !important;\n border: 1px solid rgba(255, 255, 255, 0.12);\n box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);\n backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px);\n }\n\n .calloutTitle {\n font-weight: 650;\n letter-spacing: .2px;\n margin-bottom: 10px;\n }\n\n .calloutGrid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px 14px;\n font-size: 13px;\n line-height: 1.35;\n }\n\n @media (max-width: 860px) {\n .calloutGrid {\n grid-template-columns: 1fr;\n }\n }\n\n .calloutFoot {\n margin-top: 10px;\n font-size: 12px;\n opacity: .85;\n }\n\n .btnPrimary {\n background: var(--primary) !important;\n border-color: rgba(255, 255, 255, 0.18) !important;\n }\n\n \/* ===== v3.4: solid brand background + bilingual toggle ===== *\/\n :root {\n --bgSolid: #14233A;\n \/* deep navy close to LOUIS THAI THE Exclusive brand *\/\n }\n\n html,\n body {\n background: var(--bgSolid) !important;\n background-image: none !important;\n \/* Force removal of gradients *\/\n }\n\n .bokeh {\n display: none !important;\n }\n\n .exclusiveScript {\n font-family: \"Zapfino\", \"Snell Roundhand\", \"Apple Chancery\", \"Segoe Script\", \"Lucida Handwriting\", \"Brush Script MT\", cursive !important;\n font-style: normal;\n font-weight: 400;\n letter-spacing: .2px;\n color: #ffffff !important;\n text-shadow: 0 0 14px rgba(255, 255, 255, .18);\n }\n\n .theWord {\n font-family: \"Eras Demi ITC\", \"Eras ITC Demi\", \"Eras Medium ITC\", \"Eras ITC\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif !important;\n font-weight: 600;\n letter-spacing: .02em;\n color: #ffffff !important;\n text-shadow: 0 0 10px rgba(255, 255, 255, .16);\n }\n\n body {\n font-size: 14px !important;\n \/* slightly smaller overall as requested *\/\n }\n\n strong,\n b {\n font-weight: 600 !important;\n \/* half-bold \/ medium *\/\n }\n\n \/* language visibility helpers *\/\n [data-lang=\"en\"] .only-zh {\n display: none !important;\n }\n\n [data-lang=\"zh\"] .only-en {\n display: none !important;\n }\n\n\n \/* === v3_7 micro-tuning (requested) === *\/\n .brandLine .sub {\n color: #ffffff !important;\n opacity: 1 !important;\n }\n\n .heroTitle .theWord,\n .heroTitle .exclusiveScript {\n color: #ffffff !important;\n }\n\n \/* Card header (all items): 50% smaller + no bold *\/\n .card .badge {\n font-size: 8px !important;\n font-weight: 500 !important;\n }\n\n .card .name {\n font-size: 9px !important;\n font-weight: 500 !important;\n }\n\n .card .cat {\n font-size: 8px !important;\n font-weight: 400 !important;\n opacity: .95 !important;\n }\n\n \/* Chinese title line: not bold *\/\n .card .lineCN {\n font-weight: 400 !important;\n }\n\n \/* DETAIL \/ SELECT pills: smaller + not bold *\/\n .card .mini {\n font-size: 11px !important;\n font-weight: 500 !important;\n padding: 6px 9px !important;\n }\n\n .card .mini.primary {\n font-weight: 600 !important;\n }\n\n \/* Price block: 40% smaller *\/\n .card .price .from {\n font-size: 10px !important;\n }\n\n .card .price .cur {\n font-size: 10px !important;\n }\n\n .card .price .amt {\n font-size: 18px !important;\n }\n\n .card .price .na {\n font-size: 10px !important;\n }\n\n \/* Creative Director note (embedded images) *\/\n .cdNote {\n margin: 14px 0 6px;\n padding: 14px;\n border-radius: 22px;\n background: rgba(255, 255, 255, .06) !important;\n border: 1px solid rgba(255, 255, 255, .12);\n box-shadow: 0 18px 60px rgba(0, 0, 0, .25);\n }\n\n .cdTop {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n\n .cdTitle {\n font-weight: 650;\n letter-spacing: .2px;\n opacity: .98;\n }\n\n .cdToggle {\n padding: 10px 14px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, .16);\n background: rgba(255, 255, 255, .08) !important;\n color: rgba(255, 255, 255, .92) !important;\n font-weight: 600;\n cursor: pointer;\n }\n\n .cdToggle:hover {\n background: rgba(255, 255, 255, .11) !important;\n }\n\n .cdBody {\n margin-top: 12px;\n }\n\n .cdGrid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 12px;\n }\n\n .cdImg {\n width: 100%;\n height: auto;\n border-radius: 18px;\n border: 1px solid rgba(255, 255, 255, .10);\n background: rgba(255, 255, 255, .03) !important;\n }\n\n .cdHint {\n margin-top: 10px;\n font-size: 12px;\n opacity: .75;\n }\n\n @media (max-width:820px) {\n .cdGrid {\n grid-template-columns: 1fr;\n }\n }\n\n \/* ===== v3_10 tweaks: tabs + header alignment ===== *\/\n .tabs {\n flex-wrap: nowrap !important;\n overflow-x: auto !important;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n\n .tabs::-webkit-scrollbar {\n display: none;\n }\n\n .tab {\n padding: 7px 12px !important;\n font-size: 12.5px !important;\n border-width: 1px !important;\n }\n\n .topbar .right {\n flex-wrap: nowrap !important;\n gap: 10px !important;\n }\n\n .topbar .search {\n min-width: 380px !important;\n }\n\n @media (max-width: 980px) {\n .topbar .right {\n flex-wrap: wrap !important;\n }\n\n .topbar .search {\n min-width: 220px !important;\n width: 100% !important;\n }\n\n .tabs {\n flex-wrap: wrap !important;\n overflow-x: visible !important;\n }\n }\n\n \/* Ensure Corporate Services chip visually matches others *\/\n .tab[data-brand=\"Corporate Services\"] {\n background: linear-gradient(180deg, rgba(125, 140, 255, .22), rgba(30, 40, 90, .18)) !important;\n }\n\n \/* Gold ADD-ON button + dropdown *\/\n .btn.addonBtn {\n background: linear-gradient(135deg, rgba(255, 215, 64, .92), rgba(180, 120, 0, .86)) !important;\n color: rgba(20, 12, 0, .96) !important;\n border-color: rgba(255, 215, 120, .55) !important;\n box-shadow: 0 14px 36px rgba(220, 170, 20, .18);\n }\n\n .btn.addonBtn:hover {\n filter: brightness(1.04)\n }\n\n .addonWrap {\n position: relative\n }\n\n .addonDropdown {\n margin-top: 10px;\n border-radius: 14px;\n border: 1px solid rgba(255, 255, 255, .12);\n background: linear-gradient(180deg, rgba(30, 38, 60, .75), rgba(10, 14, 24, .68)) !important;\n box-shadow: 0 18px 60px rgba(0, 0, 0, .40);\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n transform: translateY(-6px);\n transition: max-height .24s ease, opacity .18s ease, transform .24s ease;\n }\n\n .addonDropdown.open {\n max-height: 260px;\n opacity: 1;\n transform: translateY(0)\n }\n\n .addonDropdown .addonHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-bottom: 1px solid rgba(255, 255, 255, .10)\n }\n\n .addonDropdown .addonHeader .t {\n font-size: 12px;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, .78)\n }\n\n .addonDropdown .addonHeader .viewAll {\n font-size: 12px;\n color: rgba(255, 255, 255, .86) !important;\n border: 1px solid rgba(255, 255, 255, .18);\n background: rgba(255, 255, 255, .06) !important;\n padding: 6px 10px;\n border-radius: 999px;\n cursor: pointer\n }\n\n .addonDropdown .addonList {\n padding: 10px 12px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n max-height: 200px;\n overflow: auto\n }\n\n .addonPill {\n display: inline-flex;\n gap: 8px;\n align-items: center;\n padding: 8px 10px;\n border-radius: 999px;\n cursor: pointer;\n user-select: none;\n border: 1px solid rgba(255, 255, 255, .14);\n background: rgba(255, 255, 255, .06) !important;\n color: rgba(255, 255, 255, .90) !important;\n font-size: 12px\n }\n\n .addonPill:hover {\n background: rgba(255, 255, 255, .10)\n }\n\n .addonPill .price {\n font-variant-numeric: tabular-nums;\n color: rgba(255, 255, 255, .78)\n }\n\n \/* Enforced Colors for Elementor Compatibility *\/\n #exclusive-catalog-app,\n #exclusive-catalog-app * {\n color: inherit !important;\n }\n\n #exclusive-catalog-app .muted,\n #exclusive-catalog-app .sub,\n #exclusive-catalog-app .cat,\n #exclusive-catalog-app .lineEN,\n #exclusive-catalog-app .note,\n #exclusive-catalog-app .footerNote,\n #exclusive-catalog-app .hint,\n #exclusive-catalog-app .from,\n #exclusive-catalog-app .cur,\n #exclusive-catalog-app .na {\n color: var(--muted) !important;\n }\n\n #exclusive-catalog-app .logo,\n #exclusive-catalog-app .name,\n #exclusive-catalog-app .lineCN,\n #exclusive-catalog-app .amt,\n #exclusive-catalog-app .btn.primary,\n #exclusive-catalog-app .mini.primary,\n #exclusive-catalog-app h1 {\n color: var(--text) !important;\n }\n\n \/* Fixed visibility for Modal inputs (Quote & Warranty) *\/\n #exclusive-catalog-app .modal input,\n #exclusive-catalog-app .modal textarea,\n #exclusive-catalog-app .modal select,\n #exclusive-catalog-app .input {\n background: #ffffff !important;\n color: #333333 !important;\n border: 1px solid rgba(0, 0, 0, 0.2) !important;\n padding: 8px 12px;\n border-radius: 8px;\n }\n\n \/* Fallback for the preserve-font-colors class if needed *\/\n .preserve-font-colors * {\n color: inherit !important;\n }\n\n \/* Mobile Header Cleanup *\/\n .series-label {\n opacity: 0.7;\n font-weight: 300;\n font-style: italic;\n margin-left: 16px;\n }\n\n .series-label-large {\n opacity: 0.7;\n font-weight: 300;\n font-style: italic;\n font-size: 0.65em;\n margin-left: 22px;\n vertical-align: middle;\n }\n\n @media (max-width: 820px) {\n .topbar {\n padding: 10px 0;\n }\n\n .topbar .inner {\n flex-direction: column;\n align-items: center;\n gap: 14px;\n }\n\n .brand {\n flex-direction: column;\n align-items: center;\n gap: 4px;\n text-align: center;\n }\n\n .brand .logo {\n font-size: 14px;\n }\n\n .brand .sub {\n font-size: 15px;\n }\n\n .series-label {\n margin-left: 6px;\n display: block;\n font-size: 12px;\n }\n\n .series-label-large {\n margin-left: 0;\n display: block;\n margin-top: 8px;\n font-size: 0.55em;\n }\n\n .pill {\n display: none !important;\n \/* Hide view mode pill on mobile header to save space *\/\n }\n\n .actions {\n width: 100%;\n justify-content: center;\n gap: 8px;\n }\n\n .search {\n min-width: 100% !important;\n }\n\n .hero h1 {\n font-size: 28px;\n text-align: center;\n }\n\n .hero p {\n text-align: center;\n font-size: 14px;\n }\n\n .hero {\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n }\n\n @media (max-width: 480px) {\n .actions .btn:not(#quoteBtn):not(#langBtn) {\n display: none;\n \/* Hide extra buttons on very small screens to keep it clean *\/\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <div id=\"exclusive-catalog-app\" class=\"preserve-font-colors\">\n <div aria-hidden=\"true\" class=\"bokeh\">\n <span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <div class=\"topbar\">\n <div class=\"inner\">\n <div class=\"brand\">\n <div class=\"logo\">LOUIS THAI<\/div>\n <div class=\"sub\"><span class=\"theWord\">THE<\/span> <span class=\"exclusiveScript\">Exclusive<\/span> <i\n class=\"series-label\">Series 2.0<\/i><\/div>\n <div class=\"pill\" id=\"modePill\">View Mode<\/div>\n <\/div>\n <div class=\"actions\">\n <button class=\"btn\" id=\"langBtn\" title=\"Language\">\u4e2d\u6587<\/button>\n <div class=\"search\" title=\"Tip: press \/ to focus\">\n <span style=\"opacity:.7\">\ud83d\udd0e<\/span>\n <input autocomplete=\"off\" id=\"q\"\n placeholder=\"Search service \/ code \/ keyword\u2026 (e.g., i-Premium, Z14, Finder)\" \/>\n <span class=\"k\">\/<\/span>\n <\/div>\n <button class=\"btn\" id=\"copyBtn\" title=\"Copy filtered list\">Copy<\/button>\n <button class=\"btn\" id=\"editBtn\" title=\"Toggle Edit Mode\">Edit<\/button><button class=\"btn\" id=\"warrantyBtn\"\n title=\"Warranty 3.0 add-on\">Warranty 3.0 Series<\/button>\n <button class=\"btn primary\" id=\"quoteBtn\" title=\"Open Quote Builder\">Quote<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wrap\" id=\"app\">\n <div class=\"hero\">\n <div>\n <h1><span class=\"theWord\">THE<\/span> <span class=\"exclusiveScript\">Exclusive<\/span> <i\n class=\"series-label-large\">Series 2.0<\/i><\/h1>\n <div class=\"callout\">\n <div class=\"calloutTitle\">\u2728 Quick Guide<\/div>\n <div class=\"calloutGrid\">\n <div>\ud83d\udd0e <b>Search<\/b>: type keyword \/ code (press <b>\/<\/b>)<\/div>\n <div>\ud83e\udde9 <b>Filter<\/b>: use the chips to switch package groups<\/div>\n <div>\ud83d\udcdd <b>Edit<\/b>: toggle to change text \/ prices directly (saved on this browser)<\/div>\n <div>\ud83d\udccb <b>Copy<\/b>: copy the current filtered list for easy sharing<\/div>\n <div>\ud83d\udcac <b>Quote<\/b>: generate a ready-to-send quotation for WhatsApp \/ Email<\/div>\n <div>\ud83d\udee1\ufe0f <b>Warranty 3.0<\/b>: buy add-on separately (only for i\u2011Premium \/ i\u2011Premium Upgrade \/ i\u2011Flexi)\n <\/div>\n <\/div>\n <div class=\"calloutFoot\">\u2328\ufe0f Shortcuts: <b>\/<\/b> focus search \u00b7 <b>Esc<\/b> clear search \/ close modal<\/div>\n <\/div>\n <div class=\"metaRow\">\n <div class=\"chip\">Filtered: <strong id=\"count\">0<\/strong> items<\/div>\n <div class=\"chip\">Selected: <strong id=\"selCount\">0<\/strong> items<\/div>\n <div class=\"chip\"><span class=\"only-en\">Total:<\/span><span class=\"only-zh\">\u5408\u8ba1\uff1a<\/span> <strong id=\"total\">MYR\n 0.00<\/strong><\/div>\n <div class=\"chip\" id=\"statusChip\">Ready<\/div>\n <\/div>\n <div class=\"hint\">Keyboard: press <b>\/<\/b> to search \u2022 press <b>Esc<\/b> to clear search \/ close modal<\/div>\n <\/div>\n <\/div>\n\n <div class=\"cdNote\" id=\"cdNote\">\n <div class=\"cdTop\">\n <div class=\"cdTitle\">\n <span class=\"only-en\">Creative Director\u2019s Note<\/span>\n <span class=\"only-zh\">\u521b\u610f\u603b\u76d1\u5bc4\u8bed<\/span>\n <\/div>\n <button class=\"cdToggle\" id=\"cdToggle\" type=\"button\" aria-expanded=\"false\">\n <span class=\"only-en\" data-open=\"Hide\" data-closed=\"Show\">Show<\/span>\n <span class=\"only-zh\" data-open=\"\u6536\u8d77\" data-closed=\"\u5c55\u5f00\">\u5c55\u5f00<\/span>\n <\/button>\n <\/div>\n <div class=\"cdBody\" id=\"cdBody\" hidden>\n <div class=\"cdGrid\">\n <img decoding=\"async\" class=\"cdImg lazyload\"\n data-src=\"https:\/\/louisthai.com\/wp-content\/uploads\/2026\/01\/the-exclusive-1.jpeg\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1131px; --smush-placeholder-aspect-ratio: 1131\/1600;\">\n <img decoding=\"async\" class=\"cdImg lazyload\"\n data-src=\"https:\/\/louisthai.com\/wp-content\/uploads\/2026\/01\/the-exclusive-2.jpeg\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1131px; --smush-placeholder-aspect-ratio: 1131\/1600;\">\n <img decoding=\"async\" class=\"cdImg lazyload\"\n data-src=\"https:\/\/louisthai.com\/wp-content\/uploads\/2026\/01\/the-exclusive-3.jpeg\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1131px; --smush-placeholder-aspect-ratio: 1131\/1600;\">\n <img decoding=\"async\" class=\"cdImg lazyload\"\n data-src=\"https:\/\/louisthai.com\/wp-content\/uploads\/2026\/01\/the-exclusive-4.jpeg\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1131px; --smush-placeholder-aspect-ratio: 1131\/1600;\">\n <\/div>\n <div class=\"cdHint\">\n <span class=\"only-en\">Tip: tap images to zoom in your browser.<\/span>\n <span class=\"only-zh\">\u63d0\u793a\uff1a\u53ef\u5728\u6d4f\u89c8\u5668\u4e2d\u653e\u5927\u67e5\u770b\u56fe\u7247\u3002<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"tabs\" id=\"tabs\"><\/div>\n <div class=\"grid\" id=\"grid\"><\/div>\n <div class=\"footerNote\">\n <div>\u24d8 Notes<\/div>\n <div>\u2022 Prices are displayed as provided; items marked \u201cNot Available\u201d are for reference only.<\/div>\n <div>\u2022 Edit Mode changes are stored locally in your browser (same computer).<\/div>\n <div>\u2022 \u201cQuote\u201d builds a text quote you can copy to WhatsApp\/Email.<\/div>\n <\/div>\n <\/div>\n <!-- Quote Modal -->\n <div class=\"modalBackdrop\" id=\"modalBackdrop\">\n <div aria-labelledby=\"modalTitle\" aria-modal=\"true\" class=\"modal\" role=\"dialog\">\n <div class=\"modalTop\">\n <div class=\"mTitle\" id=\"modalTitle\">Quote Builder<\/div>\n <button class=\"btn danger\" id=\"closeModal\">Close<\/button>\n <\/div>\n <div class=\"modalBody\">\n <div class=\"panel\">\n <h3>Customer Details<\/h3>\n <div class=\"field\">\n <div>\n <label>Client Name<\/label>\n <input id=\"clientName\" placeholder=\"e.g., Mr. Tan\" \/>\n <\/div>\n <div>\n <label>Contact<\/label>\n <input id=\"clientContact\" placeholder=\"WhatsApp \/ Email\" \/>\n <\/div>\n <div>\n <label>Preferred Date<\/label>\n <input id=\"prefDate\" placeholder=\"e.g., 18 Jan 2026\" \/>\n <\/div>\n <div>\n <label>Currency<\/label>\n <input id=\"currency\" value=\"MYR\" \/>\n <\/div>\n <div style=\"grid-column: span 2\">\n <label>Notes (optional)<\/label>\n <textarea id=\"notes\" placeholder=\"Special requests, time slot, add-ons, etc.\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"panel\">\n <h3>Generated Quote<\/h3>\n <textarea class=\"quote\" id=\"quoteText\" readonly=\"\"><\/textarea>\n <div class=\"hint\" style=\"margin-top:10px\">Tip: click \u201cCopy Quote\u201d to paste directly to WhatsApp.<\/div>\n <\/div>\n <\/div>\n <div class=\"modalActions\">\n <button class=\"btn\" id=\"clearSel\">Clear Selection<\/button>\n <button class=\"btn\" id=\"copyQuote\">Copy Quote<\/button>\n <button class=\"btn primary\" id=\"refreshQuote\">Refresh<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"modalBackdrop\" id=\"warrantyBackdrop\" style=\"display:none;\">\n <div aria-labelledby=\"warrantyTitle\" aria-modal=\"true\" class=\"modal\" role=\"dialog\">\n <div class=\"modalHeader\">\n <div class=\"modalTitle\" id=\"warrantyTitle\">Warranty 3.0 \u2014 Add\u2011On Purchase<\/div>\n <button aria-label=\"Close\" class=\"iconBtn\" id=\"warrantyClose\">\u2715<\/button>\n <\/div>\n <div class=\"modalBody\">\n <div class=\"muted\" style=\"margin-bottom:10px;\">\n Available only for <b>i\u2011Premium<\/b>, <b>i\u2011Premium Upgrade<\/b>, and <b>i\u2011Flexi<\/b>.\n <\/div>\n <div class=\"formRow\">\n <label class=\"field\">\n <span class=\"fieldLabel\">Series<\/span>\n <select class=\"input\" id=\"warrantySeries\">\n <option value=\"X30\">X30<\/option>\n <option value=\"X180\">X180<\/option>\n <\/select>\n <\/label>\n <label class=\"field\">\n <span class=\"fieldLabel\">Quantity<\/span>\n <input class=\"input\" id=\"warrantyQty\" min=\"1\" type=\"number\" value=\"1\" \/>\n <\/label>\n <\/div>\n <label class=\"field\" style=\"margin-top:10px;\">\n <span class=\"fieldLabel\">Notes (optional)<\/span>\n <input class=\"input\" id=\"warrantyNote\"\n placeholder=\"e.g., attach to existing package code \/ customer name\" \/>\n <\/label>\n <div class=\"modalActions\" style=\"margin-top:14px;\">\n <button class=\"btn btnPrimary\" id=\"warrantyBuild\">Build Text<\/button>\n <button class=\"btn\" id=\"warrantyCopy\">Copy<\/button>\n <\/div>\n <textarea class=\"input\" id=\"warrantyOut\" placeholder=\"Generated message will appear here...\"\n style=\"margin-top:10px; min-height:110px;\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"toast\" id=\"toast\"><\/div>\n <script>\n \/* ===== v3.4 Language Toggle (EN \/ \u4e2d\u6587) ===== *\/\n const THE_LANG_KEY = \"the_exclusive_lang_v1\";\n function getLang() {\n const v = (localStorage.getItem(THE_LANG_KEY) || \"\").toLowerCase();\n if (v === \"zh\" || v === \"cn\" || v === \"zh-cn\" || v === \"zh-hans\") return \"zh\";\n return \"en\";\n }\n function setLang(lang) {\n const v = (lang === \"zh\") ? \"zh\" : \"en\";\n document.documentElement.setAttribute(\"data-lang\", v);\n localStorage.setItem(THE_LANG_KEY, v);\n const btn = document.getElementById(\"langBtn\");\n if (btn) btn.textContent = (v === \"en\") ? \"\u4e2d\u6587\" : \"EN\";\n \/\/ refresh any dynamic renders that depend on text\n try { render(); } catch (e) { }\n }\n document.addEventListener(\"DOMContentLoaded\", () => {\n const btn = document.getElementById(\"langBtn\");\n if (btn) {\n btn.addEventListener(\"click\", () => {\n const cur = document.documentElement.getAttribute(\"data-lang\") || \"en\";\n setLang(cur === \"en\" ? \"zh\" : \"en\");\n });\n }\n setLang(getLang());\n });\n\n \/* ==========\n DATA (You can extend later)\n - id: unique code\n - brand: group\/category\n - title: display name\n - cn\/en: bilingual lines\n - price: number or null (null = Not Available)\n - tag: keywords\n ========== *\/\n const DATA_DEFAULT = [\n \/\/ i-Premium\n { id: \"IP-2Y-BASIC\", brand: \"i-Premium\", title: \"i-Premium (2 Years) \u2014 Basic\", cn: \"2 Years \u57fa\u7840\u914d\u5957\", en: \"Duration < 85 min \u2022 Includes 7 days complimentary re-inquiry\", price: 550, tag: \"i-premium basic 2 years\" },\n { id: \"IP-1Y-BASIC\", brand: \"i-Premium\", title: \"i-Premium (1 Year) \u2014 Basic\", cn: \"1 Years \u57fa\u7840\u914d\u5957\\n\u2022 \u53ef\u52a0\u8d2d Warranty 3.0 Series\uff1aX30 \/ X180\", en: \"Duration < 65 min \u2022 Includes 7 days complimentary re-inquiry\\n\u2022 Warranty 3.0 Series add\u2011on: X30 \/ X180\", price: 350, tag: \"i-premium basic 1 year\" },\n { id: \"IPU-2Y-DELUXE\", brand: \"i-Premium Upgrade\", title: \"i-Premium Upgrade (2 Years) \u2014 Deluxe\", cn: \"2 Years \u8c6a\u534e\u5347\u7ea7\\n\u2022 \u53ef\u52a0\u8d2d Warranty 3.0 Series\uff1aX30 \/ X180\", en: \"Duration < 85 min \u2022 Includes 7 days complimentary re-inquiry\\n\u2022 Warranty 3.0 Series add\u2011on: X30 \/ X180\", price: 850, tag: \"i-premium upgrade deluxe 2 years\" },\n { id: \"IP-AOS-1H\", brand: \"Add-On\", title: \"Advance Operating Services (AOS) +1 Hour\", cn: \"AOS 12am\u20137am +1\u5c0f\u65f6\", en: \"Extra 60 min \u2022 Malaysia & International\", price: 50, tag: \"aos add-on hour\" },\n\n\n { id: \"PWP-THFENGSHUI\", brand: \"Add-On\", title: \"Thai Feng Shui (PWP econ)\", cn: \"\u4f4f\u5b85\u6cf0\u5f0f\u98ce\u6c34\", en: \"Add-on PWP economy\", price: 650, tag: \"thai feng shui pwp\" },\n\n \/\/ i-Flexi\n { id: \"IF-1Y-BASIC\", brand: \"i-Flexi\", title: \"i-Flexi (1 Year) \u2014 Basic\", cn: \"1 Years \u7075\u6d3b\u914d\u5957\\n\u2022 \u53ef\u52a0\u8d2d Warranty 3.0 Series\uff1aX30 \/ X180\", en: \"Duration < 45 min \u2022 Includes 7 days complimentary re-inquiry\\n\u2022 Warranty 3.0 Series add\u2011on: X30 \/ X180\", price: 200, tag: \"i-flexi 1 year basic\" },\n\n \/\/ i-MyLife\n { id: \"IML-WHOLELIFE\", brand: \"i-MyLife\", title: \"i-MyLife \u2014 Whole Life Summary\", cn: \"\u4eba\u751f\u5168\u76d8\u603b\u7ed3\", en: \"Duration < 95 min \u2022 Includes 7 days complimentary re-inquiry\", price: 650, tag: \"i-mylife whole life summary\" },\n\n \/\/ i-Individual (from your screenshot pages 24\u201326)\n { id: \"ZI-Z01\", brand: \"i-Individual\", title: \"i-Individual Z01\", cn: \"\u5404\u7c7b\u5355\u4e00\u95ee\u9898 x1\", en: \"Any topic as in a topic issue\", price: 150, tag: \"individual z01 single question\" },\n { id: \"ZI-Z02\", brand: \"i-Individual\", title: \"i-Individual Z02\", cn: \"\u53cc\u65b9\u7231\u60c5\u7f18\u5206\", en: \"Love fate (1 pair of couple)\", price: 250, tag: \"individual z02 love couple\" },\n { id: \"ZI-Z03\", brand: \"i-Individual\", title: \"i-Individual Z03\", cn: \"\u7075\u9b42\u4f34\u4fa3\uff08\u73b0\u4efb\uff09\", en: \"Current couple\u2019s spirit luck (1 pair of couple)\", price: 250, tag: \"individual z03 spirit luck\" },\n { id: \"ZI-ZA\", brand: \"i-Individual\", title: \"i-Individual ZA\", cn: \"\u60c5\u4fa3\u7231\u60c5\u8fd0\", en: \"Couple fate (1 pair of couple)\", price: 250, tag: \"individual za couple fate\" },\n { id: \"ZI-Z05\", brand: \"i-Individual\", title: \"i-Individual Z05\", cn: \"60 \u5206\u949f\u4e8b\u60c5\u53d1\u5c55\u8d8b\u5411\", en: \"Next 60 min case develop (1 case)\", price: 80, tag: \"individual z05 60 min\" },\n { id: \"ZI-Z09\", brand: \"i-Individual\", title: \"i-Individual Z09\", cn: \"\u5bb6\u5b85\u8fd0\", en: \"House luck (1 unit)\", price: 150, tag: \"individual z09 house luck\" },\n { id: \"ZI-Z10\", brand: \"i-Individual\", title: \"i-Individual Z10\", cn: \"\u8f66\u8fd0\", en: \"Vehicle luck (1 unit)\", price: 150, tag: \"individual z10 vehicle luck\" },\n { id: \"ZI-Z06\", brand: \"i-Individual\", title: \"i-Individual Z06\", cn: \"\u6b7b\u8005\u6b7b\u540e\u7684\u8fd0\u7a0b\", en: \"Fortune life after dead\", price: null, tag: \"individual z06 after dead\" },\n { id: \"ZI-Z07\", brand: \"i-Individual\", title: \"i-Individual Z07\", cn: \"\u8c0b\u6740\u6848\uff08\u6b7b\u56e0\uff09\", en: \"(Murdered case)\", price: null, tag: \"individual z07 murdered\" },\n { id: \"ZI-Z11\", brand: \"i-Individual\", title: \"i-Individual Z11\", cn: \"\u6cf0\u5f0f\u98ce\u6c34\u4f4f\u5bb6\uff081 Unit\uff09\", en: \"Thai Feng Shui\", price: 1659, tag: \"individual z11 thai feng shui\" },\n { id: \"ZI-Z12\", brand: \"i-Individual\", title: \"i-Individual Z12\", cn: \"\u9009\u8d2d\u65b0\u5bb6\uff083 Units\uff09\", en: \"Select new house\", price: 200, tag: \"individual z12 select new house\" },\n { id: \"ZI-Z13\", brand: \"i-Individual\", title: \"i-Individual Z13\", cn: \"\u5165\u5c4b\u65b0\u5bb6\u62e9\u65e5 \/ 30\u5929\u5185\u5409\u7965\u65e5\", en: \"Choose good luck date enter new house (30 days)\", price: 300, tag: \"individual z13 choose date\" },\n { id: \"ZI-Z14-D01\", brand: \"i-Individual\", title: \"i-Individual Z14 \u2014 D01\", cn: \"\u89e3\u68a6\", en: \"Dream interpreted\", price: null, tag: \"individual z14 dream\" },\n { id: \"ZI-Z15\", brand: \"i-Individual\", title: \"i-Individual Z15\", cn: \"\u5bfb\u627e\u9057\u5931\u7269\", en: \"Find lose items (Sub-brand: THE Finder)\", price: null, tag: \"individual z15 finder\" },\n { id: \"ZI-Z16\", brand: \"i-Individual\", title: \"i-Individual Z16\", cn: \"\u5256\u8179\u4ea7\u62e9\u65e5\", en: \"Caesarean\u2019s date\", price: 1288, tag: \"individual z16 caesarean\" },\n { id: \"ZI-Z17-D05\", brand: \"i-Individual\", title: \"i-Individual Z17 \u2014 D05\", cn: \"\u5165\u68a6\u67e5\u529e\", en: \"Enter dream investigate\", price: null, tag: \"individual z17 enter dream\" },\n\n \/\/ i-Junior (page 27\u201328)\n { id: \"JB-A\", brand: \"i-Junior\", title: \"i-Baby (Junior Before Born)\", cn: \"JA \u5a74\u513f\u51fa\u751f\u524d\u670d\u52a1\", en: \"Service unavailable for China Mainland\/Taiwan due to law restrictions\", price: 50, tag: \"i-baby junior before born\" },\n { id: \"J01\", brand: \"i-Junior\", title: \"J01\", cn: \"\u5b69\u5b50\u76ee\u524d\u5c81\u6570\u7684\u8fd0\u7a0b\", en: \"Fortune for Junior current luck\", price: 100, tag: \"junior current luck\" },\n { id: \"J02\", brand: \"i-Junior\", title: \"J02\", cn: \"\u5b69\u5b50\u672a\u6765\u53d1\u5c55\u8ba1\u5212\", en: \"Fortune for Junior future planning\", price: 100, tag: \"junior future planning\" },\n { id: \"J05\", brand: \"i-Junior\", title: \"J05\", cn: \"\u5b9d\u5b9d\u53d6\u540d\u670d\u52a1\", en: \"Design good luck name for baby\", price: 688, tag: \"junior baby name\" },\n { id: \"J06\", brand: \"i-Junior\", title: \"J06\", cn: \"\u5b9d\u5b9d\u540d\u5b57\u9884\u6d4b\u672a\u6765\u53d1\u5c55\u8d8b\u5411\", en: \"Baby future life based on name predict\", price: 80, tag: \"junior name predict\" },\n\n \/\/ Dream Z14+ (page 29\u201330)\n { id: \"DZ14-D01\", brand: \"Dream Z14+\", title: \"D01\", cn: \"1\u6b21\u89e3\u68a6\", en: \"1 Dream interpreted\", price: 100, tag: \"dream z14 d01 1 time\" },\n { id: \"DZ14-D02\", brand: \"Dream Z14+\", title: \"D02\", cn: \"5\u6b21\u89e3\u68a6\", en: \"5 Dreams interpreted\", price: 100, tag: \"dream z14 d02 5 times\" },\n { id: \"DZ14-D03\", brand: \"Dream Z14+\", title: \"D03\", cn: \"10\u6b21\u89e3\u68a6\", en: \"10 Dreams interpreted\", price: 688, tag: \"dream z14 d03 10 times\" },\n { id: \"DZ14-D04\", brand: \"Dream Z14+\", title: \"D04\", cn: \"20\u6b21\u89e3\u68a6\", en: \"20 Dreams interpreted\", price: 80, tag: \"dream z14 d04 20 times\" },\n { id: \"DZ14-D05\", brand: \"Dream Z14+\", title: \"D05\", cn: \"\u5165\u68a6\u8c03\u67e5\u8c08\u5224\", en: \"Dream investigated\", price: null, tag: \"dream z14 d05 investigate\" },\n { id: \"DZ14-D06\", brand: \"Dream Z14+\", title: \"D06\", cn: \"\u68a6\u4e2d\u4ed8\u8d39\u5f69\u7968\u53f7\u7801\uff08\u540e\u4ed8\uff09\", en: \"Post paid lottery number from dream\", price: null, tag: \"dream z14 d06 lottery\" },\n\n \/\/ THE Finder (page 31\u201332)\n { id: \"TF-F01\", brand: \"THE Finder\", title: \"THE Finder F01\", cn: \"\u5bfb\u627e\u5177\u578b\u7269\u4f53\uff08>25cm\u00b3\uff09\", en: \"Largest size item > 25cm\u00b3\", price: 200, tag: \"the finder f01 large item\" },\n { id: \"TF-F02\", brand: \"THE Finder\", title: \"THE Finder F02\", cn: \"\u5bfb\u627e\u4e2d\u578b\u7269\u54c1\uff0825cm\u00b3\u5de6\u53f3\uff09\", en: \"Small item range between 25cm\u00b3\", price: 80, tag: \"the finder f02 medium item\" },\n { id: \"TF-F03\", brand: \"THE Finder\", title: \"THE Finder F03\", cn: \"\u5bfb\u627e\u5c0f\u578b\u7269\u4f53\uff08<25cm\u00b3\uff09\", en: \"Smaller item < 25cm\u00b3\", price: 50, tag: \"the finder f03 small item\" },\n { id: \"TF-F04\", brand: \"THE Finder\", title: \"THE Finder F04\", cn: \"\u5bfb\u9b42\uff1a\u8fc7\u4e16\u540e\u7684\u4eb2\u670b\u621a\u53cb\", en: \"Find family member and friend spirit\", price: null, tag: \"the finder f04 spirit\" },\n { id: \"TF-F05\", brand: \"THE Finder\", title: \"THE Finder F05\", cn: \"\u5931\u8e2a\u4eba\", en: \"Missing people\", price: null, tag: \"the finder f05 missing\" }\n\n ,\/\/ Corporate Services (C01\u2013C10)\n\n \/\/ Corporate Services (C01\u2013C10)\n { id: \"C01\", brand: \"Corporate Services\", title: \"Shop Lot Choosing (3 Units)\", cn: \"\u5e97\u94fa\u9009\u8d2d\uff083\u4e2a\u5355\u4f4d\uff09\", en: \"Shop Lot choosing before purchase\", price: 500, tag: \"corporate services c01\" },\n { id: \"C02\", brand: \"Corporate Services\", title: \"Company Fortune (Sdn Bhd)\", cn: \"\u516c\u53f8\u8fd0\u7a0b\uff08Sdn Bhd\uff09\", en: \"Company fortune (Sdn Bhd)\", price: 300, tag: \"corporate services c02\" },\n { id: \"C03\", brand: \"Corporate Services\", title: \"Company Fortune (Berhad)\", cn: \"\u516c\u53f8\u8fd0\u7a0b\uff08Berhad\uff09\", en: \"Company fortune (Berhad)\", price: 1300, tag: \"corporate services c03\" },\n { id: \"C04\", brand: \"Corporate Services\", title: \"Office Thai Feng Shui\", cn: \"\u529e\u516c\u5ba4\u6cf0\u5f0f\u98ce\u6c34\", en: \"Office Thai Feng Shui\", price: null, tag: \"corporate services c04\" },\n { id: \"C05\", brand: \"Corporate Services\", title: \"Building Fortune\", cn: \"\u5efa\u7b51\u8fd0\u7a0b\", en: \"Building Fortune\", price: null, tag: \"corporate services c05\" },\n { id: \"C06\", brand: \"Corporate Services\", title: \"Corporate Service (Custom)\", cn: \"\u4f01\u4e1a\u670d\u52a1\uff08\u5b9a\u5236\uff09\", en: \"Corporate service (custom)\", price: null, tag: \"corporate services c06\" },\n { id: \"C07\", brand: \"Corporate Services\", title: \"Warehouse Bangkok Storage Services\", cn: \"\u66fc\u8c37\u4ed3\u50a8\u670d\u52a1\", en: \"Warehouse Bangkok storage services\", price: null, tag: \"corporate services c07\" },\n { id: \"C08\", brand: \"Corporate Services\", title: \"International Delivery Services\", cn: \"\u56fd\u9645\u8fd0\u8f93\u670d\u52a1\", en: \"International delivery services\", price: null, tag: \"corporate services c08\" },\n { id: \"C09\", brand: \"Corporate Services\", title: \"Filter Bank Loan Application (Pre\u2011Result)\", cn: \"\u7b5b\u9009\u94f6\u884c\u8d37\u6b3e\u7533\u8bf7\uff08\u9884\u7ed3\u679c\uff09\", en: \"Filter bank loan application (pre\u2011result)\", price: null, tag: \"corporate services c09\" },\n { id: \"C10\", brand: \"Corporate Services\", title: \"Corporate Service (General)\", cn: \"\u4f01\u4e1a\u670d\u52a1\uff08\u4e00\u822c\uff09\", en: \"Corporate service (general)\", price: null, tag: \"corporate services c10\" },\n\n ];\n\n const STORAGE_KEY = \"THE_EXCLUSIVE_IOS26_GLASS_V2_DATA\";\n const SEL_KEY = \"THE_EXCLUSIVE_IOS26_GLASS_V2_SEL\";\n const MODE_KEY = \"THE_EXCLUSIVE_IOS26_GLASS_V2_MODE\";\n\n const $ = (s, el = document) => el.querySelector(s);\n const $$ = (s, el = document) => Array.from(el.querySelectorAll(s));\n\n function money(n) {\n if (n === null || n === undefined) return \"Not Available\";\n const fixed = (Math.round(n * 100) \/ 100).toFixed(2);\n return `MYR ${fixed}`;\n }\n\n function loadData() {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return structuredClone(DATA_DEFAULT);\n try {\n const parsed = JSON.parse(raw);\n if (Array.isArray(parsed) && parsed.length > 0) return parsed;\n return structuredClone(DATA_DEFAULT);\n } catch { return structuredClone(DATA_DEFAULT); }\n }\n\n function saveData() {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(DATA));\n }\n\n function loadSel() {\n const raw = localStorage.getItem(SEL_KEY);\n if (!raw) return [];\n try {\n const parsed = JSON.parse(raw);\n return Array.isArray(parsed) ? parsed : [];\n } catch { return []; }\n }\n function saveSel() {\n localStorage.setItem(SEL_KEY, JSON.stringify(SELECTED));\n }\n\n function loadMode() {\n const raw = localStorage.getItem(MODE_KEY);\n return raw === \"1\";\n }\n function saveMode() {\n localStorage.setItem(MODE_KEY, EDIT_MODE ? \"1\" : \"0\");\n }\n\n function toast(msg) {\n const t = $(\"#toast\");\n t.textContent = msg;\n t.style.display = \"block\";\n clearTimeout(toast._t);\n toast._t = setTimeout(() => t.style.display = \"none\", 1800);\n }\n\n let DATA = loadData();\n let SELECTED = loadSel(); \/\/ array of ids\n let ACTIVE_BRAND = \"All\";\n let EDIT_MODE = loadMode();\n\n const brands = () => {\n const base = [\"All\", ...Array.from(new Set(DATA.map(d => d.brand)))];\n \/\/ Add Corporate Services tab next to THE Finder (even if there are no items yet)\n if (!base.includes(\"Corporate Services\")) {\n const i = base.indexOf(\"THE Finder\");\n if (i >= 0) base.splice(i + 1, 0, \"Corporate Services\");\n else base.push(\"Corporate Services\");\n }\n return base;\n };\n\n function renderTabs() {\n const t = $(\"#tabs\");\n t.innerHTML = \"\";\n brands().forEach(b => {\n const div = document.createElement(\"div\");\n div.className = \"tab\" + (b === ACTIVE_BRAND ? \" active\" : \"\");\n div.textContent = b;\n div.onclick = () => { ACTIVE_BRAND = b; $(\"#q\").value = \"\"; render(); };\n t.appendChild(div);\n });\n }\n\n function getQuery() {\n return ($(\"#q\").value || \"\").trim().toLowerCase();\n }\n\n function filtered() {\n const q = getQuery();\n return DATA.filter(d => {\n const matchBrand = (ACTIVE_BRAND === \"All\") ? true : d.brand === ACTIVE_BRAND;\n const blob = `${d.id} ${d.brand} ${d.title} ${d.cn} ${d.en} ${d.tag || \"\"}`.toLowerCase();\n const matchQ = q ? blob.includes(q) : true;\n return matchBrand && matchQ;\n });\n }\n\n function sumSelected() {\n let total = 0;\n let count = 0;\n for (const id of SELECTED) {\n const it = DATA.find(x => x.id === id);\n if (it && typeof it.price === \"number\") {\n total += it.price;\n count++;\n }\n }\n return { total, count };\n }\n\n function setEditable(root, editable) {\n if (editable) {\n root.setAttribute(\"contenteditable\", \"true\");\n } else {\n root.removeAttribute(\"contenteditable\");\n }\n }\n\n function cardTemplate(d) {\n const isNA = (d.price === null || d.price === undefined || Number.isNaN(d.price));\n const picked = SELECTED.includes(d.id);\n\n const card = document.createElement(\"div\");\n card.className = \"card\";\n card.dataset.id = d.id;\n\n const head = document.createElement(\"div\");\n head.className = \"head\";\n\n const title = document.createElement(\"div\");\n title.className = \"title\";\n\n const badge = document.createElement(\"div\");\n badge.className = \"badge\";\n badge.textContent = d.id;\n\n const name = document.createElement(\"div\");\n name.className = \"name\";\n name.textContent = d.title;\n\n title.appendChild(badge);\n title.appendChild(name);\n\n const cat = document.createElement(\"div\");\n cat.className = \"cat\";\n cat.textContent = d.brand;\n\n head.appendChild(title);\n head.appendChild(cat);\n\n const body = document.createElement(\"div\");\n body.className = \"body\";\n\n const desc = document.createElement(\"div\");\n desc.className = \"desc\";\n\n const cn = document.createElement(\"p\");\n cn.className = \"lineCN\";\n cn.textContent = d.cn;\n\n const en = document.createElement(\"p\");\n en.className = \"lineEN\";\n en.textContent = d.en;\n\n const note = document.createElement(\"p\");\n note.className = \"note\";\n note.textContent = \"\"; \/\/ Keywords display removed\n\n desc.appendChild(cn);\n desc.appendChild(en);\n \/\/ desc.appendChild(note); \/\/ removed\n\n const side = document.createElement(\"div\");\n side.className = \"side\";\n\n const price = document.createElement(\"div\");\n price.className = \"price\";\n\n const from = document.createElement(\"div\");\n from.className = \"from\";\n from.textContent = \"from\";\n\n const amt = document.createElement(\"div\");\n amt.className = \"amt\";\n\n if (isNA) {\n amt.innerHTML = `<span class=\"na\">Not Available<\/span>`;\n } else {\n amt.innerHTML = `<span class=\"cur\">MYR<\/span><span class=\"num\">${Number(d.price).toFixed(2)}<\/span>`;\n }\n\n price.appendChild(from);\n price.appendChild(amt);\n\n const select = document.createElement(\"div\");\n select.className = \"select\";\n\n const btn = document.createElement(\"button\");\n btn.className = \"mini primary\";\n btn.textContent = picked ? \"SELECTED\" : \"SELECT\";\n btn.onclick = () => toggleSelect(d.id);\n\n const quick = document.createElement(\"button\");\n quick.className = \"mini\";\n quick.textContent = \"DETAIL\";\n quick.onclick = () => {\n const text = `${d.id} \u2014 ${d.title}\\nCN: ${d.cn}\\nEN: ${d.en}\\nPrice: ${money(d.price)}`;\n navigator.clipboard?.writeText(text).then(() => toast(\"Copied detail\")).catch(() => toast(\"Copy not supported\"));\n };\n\n select.appendChild(quick);\n\n \/\/ Gold ADD-ON button + dropdown (only for i-Premium \/ i-Premium Upgrade \/ i-Flexi)\n const eligibleForAddOn = (d.brand === 'i-Premium' || d.brand === 'i-Premium Upgrade' || d.brand === 'i-Flexi');\n if (eligibleForAddOn) {\n const addOnBtn = document.createElement('button');\n addOnBtn.className = 'mini addonBtn';\n addOnBtn.textContent = 'ADD-ON';\n\n const dd = document.createElement('div');\n dd.className = 'addonDropdown';\n dd.innerHTML = '<div class=\"addonTitle\">Add-On Options<\/div><div class=\"addonPills\"><\/div>';\n const pills = dd.querySelector('.addonPills');\n\n const addOnItems = DATA.filter(x => x.brand === 'Add-On');\n addOnItems.forEach(item => {\n const p = document.createElement('button');\n p.type = 'button';\n p.className = 'addonPill';\n p.textContent = `${item.title} \u2022 ${money(item.price)}`;\n p.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n toggleSelect(item);\n dd.classList.remove('open');\n });\n pills.appendChild(p);\n });\n\n addOnBtn.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n document.querySelectorAll('.addonDropdown.open').forEach(el => {\n if (el !== dd) el.classList.remove('open');\n });\n dd.classList.toggle('open');\n });\n\n select.appendChild(addOnBtn);\n side.appendChild(dd);\n }\n\n select.appendChild(btn);\n\n side.appendChild(price);\n side.appendChild(select);\n\n body.appendChild(desc);\n body.appendChild(side);\n\n card.appendChild(head);\n card.appendChild(body);\n\n \/\/ editable fields\n if (EDIT_MODE) {\n \/\/ allow editing title\/cn\/en\/price number (if not NA)\n setEditable(name, true);\n setEditable(cn, true);\n setEditable(en, true);\n if (!isNA) {\n const num = amt.querySelector(\".num\");\n setEditable(num, true);\n num.dataset.price = \"1\";\n }\n } else {\n setEditable(name, false);\n setEditable(cn, false);\n setEditable(en, false);\n const num = amt.querySelector(\".num\");\n if (num) setEditable(num, false);\n }\n\n \/\/ on blur save edits\n card.addEventListener(\"focusout\", (e) => {\n if (!EDIT_MODE) return;\n const id = card.dataset.id;\n const it = DATA.find(x => x.id === id);\n if (!it) return;\n\n it.title = name.textContent.trim();\n it.cn = cn.textContent.trim();\n it.en = en.textContent.trim();\n\n const numEl = card.querySelector(\".num[contenteditable='true']\");\n if (numEl) {\n const v = numEl.textContent.replace(\/[^0-9.]\/g, \"\");\n const n = Number(v);\n if (!Number.isNaN(n)) it.price = Math.round(n * 100) \/ 100;\n }\n saveData();\n refreshMeta();\n });\n\n return card;\n }\n\n function toggleSelect(id) {\n if (SELECTED.includes(id)) {\n SELECTED = SELECTED.filter(x => x !== id);\n } else {\n SELECTED.push(id);\n }\n saveSel();\n render(); \/\/ refresh buttons and totals\n }\n\n function refreshMeta() {\n const items = filtered();\n $(\"#count\").textContent = items.length;\n $(\"#selCount\").textContent = SELECTED.length;\n\n const s = sumSelected();\n $(\"#total\").textContent = `MYR ${s.total.toFixed(2)}`;\n\n $(\"#statusChip\").textContent = EDIT_MODE ? \"Editing\" : \"Ready\";\n $(\"#statusChip\").style.background = EDIT_MODE ? \"rgba(0,212,255,.10)\" : \"rgba(255,255,255,.08)\";\n $(\"#statusChip\").style.border = EDIT_MODE ? \"1px solid rgba(0,212,255,.26)\" : \"1px solid rgba(255,255,255,.14)\";\n }\n\n function render() {\n renderTabs();\n const g = $(\"#grid\");\n g.innerHTML = \"\";\n const items = filtered();\n items.forEach(d => g.appendChild(cardTemplate(d)));\n document.getElementById(\"exclusive-catalog-app\").classList.toggle(\"editable\", EDIT_MODE);\n $(\"#modePill\").textContent = EDIT_MODE ? \"Edit Mode\" : \"View Mode\";\n refreshMeta();\n }\n\n function clearSearch() {\n $(\"#q\").value = \"\";\n render();\n }\n\n function buildQuote() {\n const name = $(\"#clientName\").value.trim();\n const contact = $(\"#clientContact\").value.trim();\n const date = $(\"#prefDate\").value.trim();\n const cur = ($(\"#currency\").value || \"MYR\").trim();\n const note = $(\"#notes\").value.trim();\n\n const lines = [];\n lines.push(\"THE Exclusive Series 2.0 \u2014 Quotation\");\n lines.push(\"\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\");\n if (name) lines.push(`Client: ${name}`);\n if (contact) lines.push(`Contact: ${contact}`);\n if (date) lines.push(`Preferred Date: ${date}`);\n lines.push(\"\");\n\n lines.push(\"Selected Services:\");\n if (SELECTED.length === 0) {\n lines.push(\"- (none selected)\");\n } else {\n let total = 0;\n for (const id of SELECTED) {\n const it = DATA.find(x => x.id === id);\n if (!it) continue;\n const p = (typeof it.price === \"number\") ? it.price : null;\n const priceStr = (p === null) ? \"Not Available\" : `${cur} ${p.toFixed(2)}`;\n lines.push(`- [${it.brand}] ${it.id} \u2014 ${it.title} | ${priceStr}`);\n if (typeof p === \"number\") total += p;\n }\n lines.push(\"\");\n lines.push(`Total (items with price): ${cur} ${total.toFixed(2)}`);\n }\n\n if (note) {\n lines.push(\"\");\n lines.push(\"Notes:\");\n lines.push(note);\n }\n\n lines.push(\"\");\n lines.push(\"LOUIS THAI \u2014 THE Exclusive Series 2.0\");\n $(\"#quoteText\").value = lines.join(\"\\\\n\");\n }\n\n function openModal() {\n $(\"#modalBackdrop\").style.display = \"flex\";\n buildQuote();\n }\n function closeModal() {\n $(\"#modalBackdrop\").style.display = \"none\";\n }\n\n \/\/ top buttons\n $(\"#editBtn\").addEventListener(\"click\", () => {\n EDIT_MODE = !EDIT_MODE;\n saveMode();\n toast(EDIT_MODE ? \"Edit Mode ON\" : \"Edit Mode OFF\");\n render();\n });\n\n $(\"#copyBtn\").addEventListener(\"click\", async () => {\n const items = filtered();\n const lines = items.map(d => {\n const priceStr = (typeof d.price === \"number\") ? `MYR ${d.price.toFixed(2)}` : \"Not Available\";\n return `[${d.brand}] ${d.id} \u2014 ${d.title} | ${priceStr}`;\n });\n const text = lines.join(\"\\\\n\");\n try {\n await navigator.clipboard.writeText(text);\n toast(\"Copied filtered list\");\n } catch (e) {\n toast(\"Copy not supported (use Safari\/Chrome)\");\n }\n });\n\n $(\"#quoteBtn\").addEventListener(\"click\", openModal);\n $(\"#closeModal\").addEventListener(\"click\", closeModal);\n $(\"#modalBackdrop\").addEventListener(\"click\", (e) => {\n if (e.target.id === \"modalBackdrop\") closeModal();\n });\n\n $(\"#refreshQuote\").addEventListener(\"click\", () => {\n buildQuote();\n toast(\"Quote refreshed\");\n });\n\n $(\"#copyQuote\").addEventListener(\"click\", async () => {\n buildQuote();\n try {\n await navigator.clipboard.writeText($(\"#quoteText\").value);\n toast(\"Copied quote\");\n } catch (e) {\n toast(\"Copy not supported\");\n }\n });\n\n $(\"#clearSel\").addEventListener(\"click\", () => {\n SELECTED = [];\n saveSel();\n buildQuote();\n toast(\"Selection cleared\");\n render();\n });\n\n \/\/ live update quote when typing\n [\"clientName\", \"clientContact\", \"prefDate\", \"currency\", \"notes\"].forEach(id => {\n $(\"#\" + id).addEventListener(\"input\", buildQuote);\n });\n\n \/\/ keyboard shortcuts\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"\/\" && document.activeElement !== $(\"#q\")) {\n e.preventDefault();\n $(\"#q\").focus();\n }\n if (e.key === \"Escape\") {\n const modalOpen = $(\"#modalBackdrop\").style.display === \"flex\";\n if (modalOpen) { closeModal(); return; }\n if (getQuery()) { clearSearch(); toast(\"Search cleared\"); }\n }\n });\n\n \/\/ search input re-render\n $(\"#q\").addEventListener(\"input\", () => render());\n\n \/\/ initial render\n render();\n\n\n \/\/ --- Warranty 3.0 modal ---\n const warrantyBackdrop = $('#warrantyBackdrop');\n const warrantyBtn = $('#warrantyBtn');\n const warrantyClose = $('#warrantyClose');\n const warrantyBuild = $('#warrantyBuild');\n const warrantyCopy = $('#warrantyCopy');\n const warrantySeries = $('#warrantySeries');\n const warrantyQty = $('#warrantyQty');\n const warrantyNote = $('#warrantyNote');\n const warrantyOut = $('#warrantyOut');\n\n function openWarranty() {\n if (!warrantyBackdrop) return;\n warrantyBackdrop.style.display = 'flex';\n setTimeout(() => warrantyBackdrop.classList.add('show'), 10);\n }\n function closeWarranty() {\n if (!warrantyBackdrop) return;\n warrantyBackdrop.classList.remove('show');\n setTimeout(() => warrantyBackdrop.style.display = 'none', 180);\n }\n\n warrantyBtn?.addEventListener('click', openWarranty);\n warrantyClose?.addEventListener('click', closeWarranty);\n warrantyBackdrop?.addEventListener('click', (e) => { if (e.target === warrantyBackdrop) closeWarranty(); });\n\n function buildWarrantyText() {\n const series = warrantySeries?.value || 'X30';\n const qty = Math.max(1, parseInt(warrantyQty?.value || '1', 10));\n const note = (warrantyNote?.value || '').trim();\n let msg = `Warranty 3.0 Series Add\u2011On: ${series}\\nQuantity: ${qty}\\nEligible: i\u2011Premium \/ i\u2011Premium Upgrade \/ i\u2011Flexi`;\n if (note) msg += `\\nNote: ${note}`;\n warrantyOut.value = msg;\n }\n warrantyBuild?.addEventListener('click', buildWarrantyText);\n warrantyCopy?.addEventListener('click', async () => {\n if (!warrantyOut.value.trim()) buildWarrantyText();\n try {\n await navigator.clipboard.writeText(warrantyOut.value);\n toast('Copied Warranty 3.0 text');\n } catch (e) {\n warrantyOut.select();\n document.execCommand('copy');\n toast('Copied Warranty 3.0 text');\n }\n });\n\n \/\/ Creative Director note toggle\n (() => {\n const btn = document.getElementById('cdToggle');\n const body = document.getElementById('cdBody');\n if (!btn || !body) return;\n\n const updateLabel = (open) => {\n btn.setAttribute('aria-expanded', open ? 'true' : 'false');\n btn.querySelectorAll('[data-open][data-closed]').forEach(el => {\n el.textContent = open ? el.getAttribute('data-open') : el.getAttribute('data-closed');\n });\n };\n\n btn.addEventListener('click', () => {\n const open = body.hidden; \/\/ will open if currently hidden\n body.hidden = !open;\n updateLabel(open);\n });\n\n updateLabel(false);\n })();\n\n <\/script>\n <\/div>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>THE Exclusive Series 2.0 \u2014 Glass Catalog LOUIS THAI THE Exclusive Series 2.0 View Mode \u4e2d\u6587 \ud83d\udd0e \/ Copy EditWarranty 3.0 Series Quote THE Exclusive Series 2.0 \u2728 Quick Guide \ud83d\udd0e Search: type keyword \/ code (press \/) \ud83e\udde9 Filter: use the chips to switch package groups \ud83d\udcdd Edit: toggle to change text \/ prices […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","_joinchat":[],"footnotes":""},"class_list":["post-8016","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/8016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/comments?post=8016"}],"version-history":[{"count":31,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/8016\/revisions"}],"predecessor-version":[{"id":8053,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/8016\/revisions\/8053"}],"wp:attachment":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/media?parent=8016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}