{"title":"BODY","description":"","products":[{"product_id":"body-rituals","title":"BODY RITUALS","description":"\n    \u003c!-- Treatment Type Selection --\u003e\n    \u003cdiv class=\"treatment-box\"\u003e\n        \u003ch3\u003eSelect Your Treatment Type\u003c\/h3\u003e\n        \u003cselect id=\"treatmentType\" onchange=\"showTreatmentOptions()\"\u003e\n            \u003coption value=\"\"\u003e-- Choose Treatment Type --\u003c\/option\u003e\n            \u003coption value=\"Massage\"\u003eMassage\u003c\/option\u003e\n            \u003coption value=\"ScrubOnly\"\u003eScrub Only\u003c\/option\u003e\n            \u003coption value=\"MilkBathMassage\"\u003eMilk Bath + Massage\u003c\/option\u003e\n            \u003coption value=\"ScrubMassage\"\u003eScrub + Massage\u003c\/option\u003e\n            \u003coption value=\"ScrubMassageWrap\"\u003eScrub + Massage + Body Wrap\u003c\/option\u003e\n            \u003coption value=\"ScrubMassageMaskWrap\"\u003eScrub + Massage + Mask + Body Wrap\u003c\/option\u003e\n            \u003coption value=\"ScrubMassageYoghurtMask\"\u003eScrub + Massage + Body Yoghurt + Mask\u003c\/option\u003e\n        \u003c\/select\u003e\n        \n        \u003c!-- Body Area Selection (shows only for body treatments) --\u003e\n        \u003cdiv id=\"bodyAreaSection\" class=\"body-area-section hidden\"\u003e\n            \u003ch4\u003eSelect Body Area\u003c\/h4\u003e\n            \u003cselect id=\"bodyArea\" onchange=\"updatePricing()\"\u003e\n                \u003coption value=\"\"\u003e-- Select Area --\u003c\/option\u003e\n                \u003coption value=\"FullBody\"\u003eFull Body\u003c\/option\u003e\n                \u003coption value=\"FullLegs\"\u003eFull Legs\u003c\/option\u003e\n                \u003coption value=\"FullHands\"\u003eFull Hands\u003c\/option\u003e\n            \u003c\/select\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- Massage Type Selection (shows only for massage treatments) --\u003e\n        \u003cdiv id=\"massageTypeSection\" class=\"massage-type-section hidden\"\u003e\n            \u003ch4\u003ePreferred Massage Option\u003c\/h4\u003e\n            \u003cselect id=\"massageType\"\u003e\n                \u003coption value=\"\"\u003e-- Select Massage Type --\u003c\/option\u003e\n                \u003coption value=\"Deep Tissue\"\u003eDeep Tissue Massage\u003c\/option\u003e\n                \u003coption value=\"Lymphatic\"\u003eLymphatic Drainage Massage\u003c\/option\u003e\n                \u003coption value=\"Swedish\"\u003eSwedish Massage\u003c\/option\u003e\n                \u003coption value=\"Hot Stone\"\u003eHot Stone Massage\u003c\/option\u003e\n            \u003c\/select\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- Treatment Options will show here --\u003e\n        \u003cdiv id=\"treatmentOptions\" class=\"treatments hidden\"\u003e\n            \u003ch4\u003eAvailable Options for \u003cspan id=\"selectedTreatmentType\"\u003e\u003c\/span\u003e\n\u003c\/h4\u003e\n            \u003cul id=\"treatmentItems\"\u003e\n                \u003c!-- Dynamic treatment list will be populated here --\u003e\n            \u003c\/ul\u003e\n        \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cstyle\u003e\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: #f8f9fa;\n            min-height: 100vh;\n            padding: 20px;\n        }\n        \n        .treatment-box {\n            text-align: center;\n            margin: 40px auto;\n            padding: 40px;\n            max-width: 800px;\n            border-radius: 25px;\n            background: linear-gradient(135deg, #f7e98e 0%, #f4d03f 15%, #f1c40f 30%, #e6c200 45%, #d4af37 60%, #c9a96e 75%, #b8860b 90%, #9a7d0a 100%);\n            background-size: 300% 300%;\n            animation: luxuryGoldFlow 12s ease-in-out infinite;\n            position: relative;\n            overflow: hidden;\n            box-shadow: \n                0 25px 50px rgba(212, 175, 55, 0.6),\n                0 15px 30px rgba(184, 134, 11, 0.4),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3),\n                inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n            border: 3px solid rgba(255, 223, 0, 0.8);\n        }\n        \n        .treatment-box::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.9) 2px, transparent 2px),\n                radial-gradient(circle at 20% 90%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),\n                radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),\n                radial-gradient(circle at 95% 50%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 15% 60%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 60% 85%, rgba(255, 255, 255, 0.5) 1px, transparent 1px);\n            background-size: \n                120px 120px, 80px 80px, 100px 100px, 140px 140px, 90px 90px,\n                110px 110px, 70px 70px, 130px 130px, 95px 95px, 85px 85px;\n            border-radius: 25px;\n            pointer-events: none;\n            animation: \n                luxurySparkle1 6s ease-in-out infinite,\n                luxurySparkle2 8s ease-in-out infinite reverse,\n                luxurySparkle3 10s ease-in-out infinite;\n        }\n        \n        .treatment-box::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(45deg, \n                transparent 30%, \n                rgba(255, 255, 255, 0.1) 50%, \n                transparent 70%);\n            animation: shimmerSweep 4s ease-in-out infinite;\n            border-radius: 25px;\n            pointer-events: none;\n        }\n        \n        @keyframes luxuryGoldFlow {\n            0%, 100% { \n                background-position: 0% 50%;\n                transform: scale(1);\n            }\n            25% { \n                background-position: 100% 0%;\n                transform: scale(1.01);\n            }\n            50% { \n                background-position: 100% 100%;\n                transform: scale(1);\n            }\n            75% { \n                background-position: 0% 100%;\n                transform: scale(1.01);\n            }\n        }\n        \n        @keyframes luxurySparkle1 {\n            0%, 100% { \n                opacity: 0.4; \n                transform: translateY(0px) rotate(0deg);\n            }\n            50% { \n                opacity: 1; \n                transform: translateY(-5px) rotate(180deg);\n            }\n        }\n        \n        @keyframes luxurySparkle2 {\n            0%, 100% { \n                opacity: 0.6; \n                transform: translateX(0px) scale(1);\n            }\n            50% { \n                opacity: 0.9; \n                transform: translateX(3px) scale(1.1);\n            }\n        }\n        \n        @keyframes luxurySparkle3 {\n            0%, 100% { \n                opacity: 0.3; \n                transform: rotate(0deg);\n            }\n            33% { \n                opacity: 0.8; \n                transform: rotate(120deg);\n            }\n            66% { \n                opacity: 0.5; \n                transform: rotate(240deg);\n            }\n        }\n        \n        @keyframes shimmerSweep {\n            0% { transform: translateX(-100%) skewX(-15deg); }\n            100% { transform: translateX(200%) skewX(-15deg); }\n        }\n        \n        .treatment-box h3 {\n            position: relative;\n            z-index: 10;\n            font-size: 32px;\n            margin-bottom: 30px;\n            font-weight: 700;\n            color: white;\n            text-shadow: \n                2px 2px 4px rgba(0, 0, 0, 0.5),\n                0 0 10px rgba(255, 255, 255, 0.3);\n            letter-spacing: 1px;\n            animation: textGlow 3s ease-in-out infinite alternate;\n        }\n        \n        @keyframes textGlow {\n            from { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.5),\n                    0 0 10px rgba(255, 255, 255, 0.3);\n            }\n            to { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.5),\n                    0 0 20px rgba(255, 255, 255, 0.6),\n                    0 0 30px rgba(255, 215, 0, 0.4);\n            }\n        }\n        \n        .treatment-box select {\n            position: relative;\n            z-index: 10;\n            width: 90%;\n            padding: 18px 25px;\n            font-size: 18px;\n            border-radius: 15px;\n            border: 2px solid rgba(255, 255, 255, 0.9);\n            margin-bottom: 25px;\n            background: rgba(255, 255, 255, 0.98);\n            transition: all 0.4s ease;\n            cursor: pointer;\n            font-weight: 500;\n            color: #333;\n            box-shadow: \n                0 8px 25px rgba(0, 0, 0, 0.15),\n                0 4px 10px rgba(212, 175, 55, 0.3);\n        }\n        \n        .treatment-box select:focus {\n            border-color: white;\n            box-shadow: \n                0 0 30px rgba(255, 255, 255, 0.8),\n                0 10px 40px rgba(212, 175, 55, 0.4);\n            outline: none;\n            transform: translateY(-3px) scale(1.02);\n            background: white;\n        }\n        \n        .treatment-box select:hover {\n            border-color: white;\n            transform: translateY(-2px);\n            box-shadow: \n                0 12px 30px rgba(0, 0, 0, 0.2),\n                0 6px 15px rgba(212, 175, 55, 0.4);\n        }\n        \n        .massage-type-section, .body-area-section {\n            position: relative;\n            z-index: 10;\n            margin: 25px 0;\n            padding: 25px;\n            background: linear-gradient(135deg, #f7e98e, #f4d03f, #e6c200, #d4af37);\n            background-size: 400% 400%;\n            animation: sectionGoldFlow 8s ease-in-out infinite;\n            border-radius: 18px;\n            border: 2px solid rgba(255, 255, 255, 0.8);\n            box-shadow: \n                0 15px 30px rgba(212, 175, 55, 0.4),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3);\n            overflow: hidden;\n        }\n        \n        .massage-type-section::before, .body-area-section::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.5) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),\n                radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px);\n            background-size: 60px 60px, 45px 45px, 70px 70px, 55px 55px, 40px 40px;\n            border-radius: 18px;\n            pointer-events: none;\n            animation: sectionSparkle 5s ease-in-out infinite;\n        }\n        \n        @keyframes sectionGoldFlow {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n        \n        @keyframes sectionSparkle {\n            0%, 100% { \n                opacity: 0.6; \n                transform: scale(1);\n            }\n            50% { \n                opacity: 1; \n                transform: scale(1.05);\n            }\n        }\n        \n        .massage-type-section h4, .body-area-section h4 {\n            position: relative;\n            z-index: 10;\n            font-size: 20px;\n            margin-bottom: 15px;\n            font-weight: 600;\n            color: white;\n            text-shadow: \n                1px 1px 2px rgba(0, 0, 0, 0.4),\n                0 0 8px rgba(255, 255, 255, 0.3);\n            letter-spacing: 0.5px;\n        }\n        \n        .treatments {\n            position: relative;\n            z-index: 10;\n            text-align: left;\n            margin-top: 30px;\n            padding: 25px;\n            border-radius: 18px;\n            background: linear-gradient(135deg, #f7e98e 0%, #f4d03f 20%, #e6c200 40%, #d4af37 60%, #c9a96e 80%, #b8860b 100%);\n            background-size: 500% 500%;\n            animation: treatmentLuxuryFlow 15s ease-in-out infinite;\n            border: 3px solid rgba(255, 255, 255, 0.9);\n            box-shadow: \n                0 20px 40px rgba(212, 175, 55, 0.5),\n                inset 0 2px 0 rgba(255, 255, 255, 0.4),\n                inset 0 -2px 0 rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n        }\n        \n        .treatments::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.7) 2px, transparent 2px),\n                radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 75% 45%, rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 25% 85%, rgba(255, 255, 255, 0.9) 1px, transparent 1px),\n                radial-gradient(circle at 95% 25%, rgba(255, 255, 255, 0.5) 2px, transparent 2px),\n                radial-gradient(circle at 5% 65%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 65% 95%, rgba(255, 255, 255, 0.7) 1.5px, transparent 1.5px);\n            background-size: \n                80px 80px, 120px 120px, 60px 60px, 100px 100px,\n                70px 70px, 140px 140px, 50px 50px, 90px 90px;\n            border-radius: 18px;\n            pointer-events: none;\n            animation: \n                treatmentSparkle1 7s ease-in-out infinite,\n                treatmentSparkle2 9s ease-in-out infinite reverse,\n                treatmentSparkle3 11s ease-in-out infinite;\n        }\n        \n        .treatments::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(60deg, \n                transparent 20%, \n                rgba(255, 255, 255, 0.15) 40%, \n                rgba(255, 255, 255, 0.3) 50%, \n                rgba(255, 255, 255, 0.15) 60%, \n                transparent 80%);\n            animation: treatmentShimmer 6s ease-in-out infinite;\n            border-radius: 18px;\n            pointer-events: none;\n        }\n        \n        @keyframes treatmentLuxuryFlow {\n            0%, 100% { \n                background-position: 0% 50%;\n                filter: brightness(1);\n            }\n            25% { \n                background-position: 100% 25%;\n                filter: brightness(1.1);\n            }\n            50% { \n                background-position: 100% 75%;\n                filter: brightness(1);\n            }\n            75% { \n                background-position: 0% 100%;\n                filter: brightness(1.05);\n            }\n        }\n        \n        @keyframes treatmentSparkle1 {\n            0%, 100% { \n                opacity: 0.5; \n                transform: translateY(0px) rotate(0deg) scale(1);\n            }\n            33% { \n                opacity: 1; \n                transform: translateY(-3px) rotate(120deg) scale(1.1);\n            }\n            66% { \n                opacity: 0.7; \n                transform: translateY(2px) rotate(240deg) scale(0.9);\n            }\n        }\n        \n        @keyframes treatmentSparkle2 {\n            0%, 100% { \n                opacity: 0.4; \n                transform: translateX(0px) scale(1);\n            }\n            50% { \n                opacity: 0.9; \n                transform: translateX(4px) scale(1.15);\n            }\n        }\n        \n        @keyframes treatmentSparkle3 {\n            0%, 100% { \n                opacity: 0.6; \n                transform: rotate(0deg) scale(1);\n            }\n            25% { \n                opacity: 0.3; \n                transform: rotate(90deg) scale(0.8);\n            }\n            50% { \n                opacity: 1; \n                transform: rotate(180deg) scale(1.2);\n            }\n            75% { \n                opacity: 0.4; \n                transform: rotate(270deg) scale(0.9);\n            }\n        }\n        \n        @keyframes treatmentShimmer {\n            0% { transform: translateX(-150%) skewX(-20deg); }\n            100% { transform: translateX(250%) skewX(-20deg); }\n        }\n        \n        .treatments h4 {\n            position: relative;\n            z-index: 10;\n            font-size: 24px;\n            margin-bottom: 20px;\n            font-weight: 600;\n            text-align: center;\n            color: white;\n            text-shadow: \n                2px 2px 4px rgba(0, 0, 0, 0.4),\n                0 0 15px rgba(255, 255, 255, 0.4);\n            letter-spacing: 0.5px;\n            animation: headingGlow 4s ease-in-out infinite alternate;\n        }\n        \n        @keyframes headingGlow {\n            from { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.4),\n                    0 0 15px rgba(255, 255, 255, 0.4);\n            }\n            to { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.4),\n                    0 0 25px rgba(255, 255, 255, 0.7),\n                    0 0 35px rgba(255, 215, 0, 0.5);\n            }\n        }\n        \n        .treatments ul {\n            position: relative;\n            z-index: 10;\n            list-style: none;\n            padding: 0;\n        }\n        \n        .treatments li {\n            margin: 15px 0;\n            padding: 20px 25px;\n            font-size: 17px;\n            font-weight: 600;\n            background: rgba(255, 255, 255, 0.98);\n            border: 2px solid rgba(212, 175, 55, 0.4);\n            border-radius: 12px;\n            transition: all 0.5s ease;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            box-shadow: \n                0 8px 20px rgba(212, 175, 55, 0.3),\n                inset 0 1px 0 rgba(255, 255, 255, 0.8);\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .treatments li::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, \n                transparent, \n                rgba(255, 215, 0, 0.3) 40%, \n                rgba(255, 255, 255, 0.5) 50%, \n                rgba(255, 215, 0, 0.3) 60%, \n                transparent);\n            transition: left 0.8s ease;\n        }\n        \n        .treatments li:hover::before {\n            left: 100%;\n        }\n        \n        .treatments li:hover {\n            transform: translateY(-4px) scale(1.02);\n            box-shadow: \n                0 15px 35px rgba(212, 175, 55, 0.5),\n                0 5px 15px rgba(255, 215, 0, 0.3),\n                inset 0 1px 0 rgba(255, 255, 255, 1);\n            border-color: #ffd700;\n            background: white;\n        }\n        \n        .treatment-name {\n            color: #333;\n            font-weight: 600;\n            z-index: 1;\n            position: relative;\n        }\n        \n        .treatment-price {\n            font-weight: 700;\n            font-size: 18px;\n            background: linear-gradient(135deg, #b8860b, #ffd700, #f1c40f);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            z-index: 1;\n            position: relative;\n            text-shadow: 0 1px 2px rgba(184, 134, 11, 0.3);\n        }\n        \n        .hidden {\n            display: none;\n        }\n        \n        \/* Mobile responsiveness *\/\n        @media (max-width: 768px) {\n            .treatment-box {\n                margin: 20px;\n                padding: 25px;\n                max-width: none;\n            }\n            \n            .treatment-box h3 {\n                font-size: 26px;\n                margin-bottom: 25px;\n            }\n            \n            .treatment-box select {\n                width: 100%;\n                font-size: 16px;\n                padding: 15px 20px;\n            }\n            \n            .treatments li {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 10px;\n                padding: 18px 20px;\n            }\n            \n            .treatment-price {\n                align-self: flex-end;\n                font-size: 17px;\n            }\n            \n            .massage-type-section, .body-area-section {\n                padding: 20px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            body {\n                padding: 10px;\n            }\n            \n            .treatment-box {\n                padding: 20px;\n                margin: 10px;\n            }\n            \n            .treatment-box h3 {\n                font-size: 24px;\n            }\n            \n            .treatments {\n                padding: 20px;\n            }\n        }\n    \u003c\/style\u003e\n\n    \u003cscript\u003e\n        \/\/ Treatment options and pricing structure\n        const massageTreatments = [\n            { name: 'Head + Neck + Shoulder', price: '6,000\/=' },\n            { name: 'Foot Massage', price: '6,000\/=' },\n            { name: 'Full Body Massage', price: '12,500\/=' }\n        ];\n\n        \/\/ Body treatment pricing by area\n        const bodyTreatmentPricing = {\n            'ScrubOnly': {\n                'FullBody': '8,000\/=',\n                'FullLegs': '4,000\/=',\n                'FullHands': '4,000\/='\n            },\n            'MilkBathMassage': {\n                'FullBody': '15,000\/=',\n                'FullLegs': '7,500\/=',\n                'FullHands': '7,500\/='\n            },\n            'ScrubMassage': {\n                'FullBody': '20,000\/=',\n                'FullLegs': '10,000\/=',\n                'FullHands': '10,000\/='\n            },\n            'ScrubMassageWrap': {\n                'FullBody': '23,000\/=',\n                'FullLegs': '11,500\/=',\n                'FullHands': '11,500\/='\n            },\n            'ScrubMassageMaskWrap': {\n                'FullBody': '25,000\/=',\n                'FullLegs': '12,500\/=',\n                'FullHands': '12,500\/='\n            },\n            'ScrubMassageYoghurtMask': {\n                'FullBody': '25,000\/=',\n                'FullLegs': '12,500\/=',\n                'FullHands': '12,500\/='\n            }\n        };\n\n        \/\/ Treatments that include massage and should show massage type selector\n        const treatmentsWithMassage = [\n            'Massage', \n            'MilkBathMassage', \n            'ScrubMassage', \n            'ScrubMassageWrap', \n            'ScrubMassageMaskWrap', \n            'ScrubMassageYoghurtMask'\n        ];\n\n        \/\/ Body treatments that need area selection\n        const bodyTreatments = [\n            'ScrubOnly',\n            'MilkBathMassage', \n            'ScrubMassage', \n            'ScrubMassageWrap', \n            'ScrubMassageMaskWrap', \n            'ScrubMassageYoghurtMask'\n        ];\n\n        \/\/ Treatment type display names\n        const treatmentDisplayNames = {\n            'Massage': 'Massage',\n            'ScrubOnly': 'Scrub Only',\n            'MilkBathMassage': 'Milk Bath + Massage',\n            'ScrubMassage': 'Scrub + Massage',\n            'ScrubMassageWrap': 'Scrub + Massage + Body Wrap',\n            'ScrubMassageMaskWrap': 'Scrub + Massage + Mask + Body Wrap',\n            'ScrubMassageYoghurtMask': 'Scrub + Massage + Body Yoghurt + Mask'\n        };\n\n        \/\/ Area display names\n        const areaDisplayNames = {\n            'FullBody': 'Full Body',\n            'FullLegs': 'Full Legs',\n            'FullHands': 'Full Hands'\n        };\n\n        function showTreatmentOptions() {\n            const treatmentType = document.getElementById(\"treatmentType\").value;\n            const treatmentOptions_div = document.getElementById(\"treatmentOptions\");\n            const massageTypeSection = document.getElementById(\"massageTypeSection\");\n            const bodyAreaSection = document.getElementById(\"bodyAreaSection\");\n            const selectedTreatmentTypeSpan = document.getElementById(\"selectedTreatmentType\");\n            const treatmentItems = document.getElementById(\"treatmentItems\");\n            const bodyAreaSelect = document.getElementById(\"bodyArea\");\n            \n            \/\/ Hide everything first\n            treatmentOptions_div.classList.add(\"hidden\");\n            massageTypeSection.classList.add(\"hidden\");\n            bodyAreaSection.classList.add(\"hidden\");\n            \n            \/\/ Reset body area selection\n            bodyAreaSelect.value = \"\";\n            \n            if (treatmentType) {\n                selectedTreatmentTypeSpan.textContent = treatmentDisplayNames[treatmentType];\n                \n                \/\/ Show massage type selector if this treatment includes massage\n                if (treatmentsWithMassage.includes(treatmentType)) {\n                    massageTypeSection.classList.remove(\"hidden\");\n                }\n                \n                if (treatmentType === 'Massage') {\n                    \/\/ Show massage treatments directly\n                    treatmentItems.innerHTML = '';\n                    massageTreatments.forEach(treatment =\u003e {\n                        const listItem = document.createElement('li');\n                        listItem.innerHTML = `\n                            \u003cspan class=\"treatment-name\"\u003e${treatment.name}\u003c\/span\u003e\n                            \u003cspan class=\"treatment-price\"\u003e${treatment.price}\u003c\/span\u003e\n                        `;\n                        treatmentItems.appendChild(listItem);\n                    });\n                    treatmentOptions_div.classList.remove(\"hidden\");\n                } else if (bodyTreatments.includes(treatmentType)) {\n                    \/\/ Show body area selection for body treatments\n                    bodyAreaSection.classList.remove(\"hidden\");\n                }\n            }\n        }\n\n        function updatePricing() {\n            const treatmentType = document.getElementById(\"treatmentType\").value;\n            const bodyArea = document.getElementById(\"bodyArea\").value;\n            const treatmentOptions_div = document.getElementById(\"treatmentOptions\");\n            const treatmentItems = document.getElementById(\"treatmentItems\");\n            \n            if (treatmentType \u0026\u0026 bodyArea \u0026\u0026 bodyTreatments.includes(treatmentType)) {\n                const price = bodyTreatmentPricing[treatmentType][bodyArea];\n                const areaName = areaDisplayNames[bodyArea];\n                \n                \/\/ Clear and show the selected treatment with price\n                treatmentItems.innerHTML = '';\n                const listItem = document.createElement('li');\n                listItem.innerHTML = `\n                    \u003cspan class=\"treatment-name\"\u003e${treatmentDisplayNames[treatmentType]} - ${areaName}\u003c\/span\u003e\n                    \u003cspan class=\"treatment-price\"\u003e${price}\u003c\/span\u003e\n                `;\n                treatmentItems.appendChild(listItem);\n                \n                treatmentOptions_div.classList.remove(\"hidden\");\n            }\n        }\n    \u003c\/script\u003e\n","brand":"360aesthetic","offers":[{"title":"Default Title","offer_id":42223932866650,"sku":null,"price":0.0,"currency_code":"LKR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0664\/5196\/3994\/files\/Artboard_3_6.jpg?v=1759306229"},{"product_id":"slimming","title":"BODY SLIMMING","description":"\u003cstyle\u003e\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: #f8f9fa;\n            min-height: 100vh;\n            padding: 20px;\n        }\n        \n        .treatment-box {\n            text-align: center;\n            margin: 40px auto;\n            padding: 40px;\n            max-width: 800px;\n            border-radius: 25px;\n            background: linear-gradient(135deg, #f7e98e 0%, #f4d03f 15%, #f1c40f 30%, #e6c200 45%, #d4af37 60%, #c9a96e 75%, #b8860b 90%, #9a7d0a 100%);\n            background-size: 300% 300%;\n            animation: luxuryGoldFlow 12s ease-in-out infinite;\n            position: relative;\n            overflow: hidden;\n            box-shadow: \n                0 25px 50px rgba(212, 175, 55, 0.6),\n                0 15px 30px rgba(184, 134, 11, 0.4),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3),\n                inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n            border: 3px solid rgba(255, 223, 0, 0.8);\n        }\n        \n        .treatment-box::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.9) 2px, transparent 2px),\n                radial-gradient(circle at 20% 90%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),\n                radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),\n                radial-gradient(circle at 95% 50%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 15% 60%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 60% 85%, rgba(255, 255, 255, 0.5) 1px, transparent 1px);\n            background-size: \n                120px 120px, 80px 80px, 100px 100px, 140px 140px, 90px 90px,\n                110px 110px, 70px 70px, 130px 130px, 95px 95px, 85px 85px;\n            border-radius: 25px;\n            pointer-events: none;\n            animation: \n                luxurySparkle1 6s ease-in-out infinite,\n                luxurySparkle2 8s ease-in-out infinite reverse,\n                luxurySparkle3 10s ease-in-out infinite;\n        }\n        \n        .treatment-box::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(45deg, \n                transparent 30%, \n                rgba(255, 255, 255, 0.1) 50%, \n                transparent 70%);\n            animation: shimmerSweep 4s ease-in-out infinite;\n            border-radius: 25px;\n            pointer-events: none;\n        }\n        \n        @keyframes luxuryGoldFlow {\n            0%, 100% { \n                background-position: 0% 50%;\n                transform: scale(1);\n            }\n            25% { \n                background-position: 100% 0%;\n                transform: scale(1.01);\n            }\n            50% { \n                background-position: 100% 100%;\n                transform: scale(1);\n            }\n            75% { \n                background-position: 0% 100%;\n                transform: scale(1.01);\n            }\n        }\n        \n        @keyframes luxurySparkle1 {\n            0%, 100% { \n                opacity: 0.4; \n                transform: translateY(0px) rotate(0deg);\n            }\n            50% { \n                opacity: 1; \n                transform: translateY(-5px) rotate(180deg);\n            }\n        }\n        \n        @keyframes luxurySparkle2 {\n            0%, 100% { \n                opacity: 0.6; \n                transform: translateX(0px) scale(1);\n            }\n            50% { \n                opacity: 0.9; \n                transform: translateX(3px) scale(1.1);\n            }\n        }\n        \n        @keyframes luxurySparkle3 {\n            0%, 100% { \n                opacity: 0.3; \n                transform: rotate(0deg);\n            }\n            33% { \n                opacity: 0.8; \n                transform: rotate(120deg);\n            }\n            66% { \n                opacity: 0.5; \n                transform: rotate(240deg);\n            }\n        }\n        \n        @keyframes shimmerSweep {\n            0% { transform: translateX(-100%) skewX(-15deg); }\n            100% { transform: translateX(200%) skewX(-15deg); }\n        }\n        \n        .treatment-box h3 {\n            position: relative;\n            z-index: 10;\n            font-size: 32px;\n            margin-bottom: 30px;\n            font-weight: 700;\n            color: white;\n            text-shadow: \n                2px 2px 4px rgba(0, 0, 0, 0.5),\n                0 0 10px rgba(255, 255, 255, 0.3);\n            letter-spacing: 1px;\n            animation: textGlow 3s ease-in-out infinite alternate;\n        }\n        \n        @keyframes textGlow {\n            from { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.5),\n                    0 0 10px rgba(255, 255, 255, 0.3);\n            }\n            to { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.5),\n                    0 0 20px rgba(255, 255, 255, 0.6),\n                    0 0 30px rgba(255, 215, 0, 0.4);\n            }\n        }\n        \n        .treatment-box select {\n            position: relative;\n            z-index: 10;\n            width: 90%;\n            padding: 18px 25px;\n            font-size: 18px;\n            border-radius: 15px;\n            border: 2px solid rgba(255, 255, 255, 0.9);\n            margin-bottom: 25px;\n            background: rgba(255, 255, 255, 0.98);\n            transition: all 0.4s ease;\n            cursor: pointer;\n            font-weight: 500;\n            color: #333;\n            box-shadow: \n                0 8px 25px rgba(0, 0, 0, 0.15),\n                0 4px 10px rgba(212, 175, 55, 0.3);\n        }\n        \n        .treatment-box select:focus {\n            border-color: white;\n            box-shadow: \n                0 0 30px rgba(255, 255, 255, 0.8),\n                0 10px 40px rgba(212, 175, 55, 0.4);\n            outline: none;\n            transform: translateY(-3px) scale(1.02);\n            background: white;\n        }\n        \n        .treatment-box select:hover {\n            border-color: white;\n            transform: translateY(-2px);\n            box-shadow: \n                0 12px 30px rgba(0, 0, 0, 0.2),\n                0 6px 15px rgba(212, 175, 55, 0.4);\n        }\n        \n        .area-section {\n            position: relative;\n            z-index: 10;\n            margin: 25px 0;\n            padding: 25px;\n            background: linear-gradient(135deg, #f7e98e, #f4d03f, #e6c200, #d4af37);\n            background-size: 400% 400%;\n            animation: sectionGoldFlow 8s ease-in-out infinite;\n            border-radius: 18px;\n            border: 2px solid rgba(255, 255, 255, 0.8);\n            box-shadow: \n                0 15px 30px rgba(212, 175, 55, 0.4),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3);\n            overflow: hidden;\n        }\n        \n        .area-section::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.5) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),\n                radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px);\n            background-size: 60px 60px, 45px 45px, 70px 70px, 55px 55px, 40px 40px;\n            border-radius: 18px;\n            pointer-events: none;\n            animation: sectionSparkle 5s ease-in-out infinite;\n        }\n        \n        @keyframes sectionGoldFlow {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n        \n        @keyframes sectionSparkle {\n            0%, 100% { \n                opacity: 0.6; \n                transform: scale(1);\n            }\n            50% { \n                opacity: 1; \n                transform: scale(1.05);\n            }\n        }\n        \n        .area-section h4 {\n            position: relative;\n            z-index: 10;\n            font-size: 20px;\n            margin-bottom: 15px;\n            font-weight: 600;\n            color: white;\n            text-shadow: \n                1px 1px 2px rgba(0, 0, 0, 0.4),\n                0 0 8px rgba(255, 255, 255, 0.3);\n            letter-spacing: 0.5px;\n        }\n        \n        .treatments {\n            position: relative;\n            z-index: 10;\n            text-align: left;\n            margin-top: 30px;\n            padding: 25px;\n            border-radius: 18px;\n            background: linear-gradient(135deg, #f7e98e 0%, #f4d03f 20%, #e6c200 40%, #d4af37 60%, #c9a96e 80%, #b8860b 100%);\n            background-size: 500% 500%;\n            animation: treatmentLuxuryFlow 15s ease-in-out infinite;\n            border: 3px solid rgba(255, 255, 255, 0.9);\n            box-shadow: \n                0 20px 40px rgba(212, 175, 55, 0.5),\n                inset 0 2px 0 rgba(255, 255, 255, 0.4),\n                inset 0 -2px 0 rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n        }\n        \n        .treatments::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.7) 2px, transparent 2px),\n                radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 75% 45%, rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 25% 85%, rgba(255, 255, 255, 0.9) 1px, transparent 1px),\n                radial-gradient(circle at 95% 25%, rgba(255, 255, 255, 0.5) 2px, transparent 2px),\n                radial-gradient(circle at 5% 65%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 65% 95%, rgba(255, 255, 255, 0.7) 1.5px, transparent 1.5px);\n            background-size: \n                80px 80px, 120px 120px, 60px 60px, 100px 100px,\n                70px 70px, 140px 140px, 50px 50px, 90px 90px;\n            border-radius: 18px;\n            pointer-events: none;\n            animation: \n                treatmentSparkle1 7s ease-in-out infinite,\n                treatmentSparkle2 9s ease-in-out infinite reverse,\n                treatmentSparkle3 11s ease-in-out infinite;\n        }\n        \n        .treatments::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(60deg, \n                transparent 20%, \n                rgba(255, 255, 255, 0.15) 40%, \n                rgba(255, 255, 255, 0.3) 50%, \n                rgba(255, 255, 255, 0.15) 60%, \n                transparent 80%);\n            animation: treatmentShimmer 6s ease-in-out infinite;\n            border-radius: 18px;\n            pointer-events: none;\n        }\n        \n        @keyframes treatmentLuxuryFlow {\n            0%, 100% { \n                background-position: 0% 50%;\n                filter: brightness(1);\n            }\n            25% { \n                background-position: 100% 25%;\n                filter: brightness(1.1);\n            }\n            50% { \n                background-position: 100% 75%;\n                filter: brightness(1);\n            }\n            75% { \n                background-position: 0% 100%;\n                filter: brightness(1.05);\n            }\n        }\n        \n        @keyframes treatmentSparkle1 {\n            0%, 100% { \n                opacity: 0.5; \n                transform: translateY(0px) rotate(0deg) scale(1);\n            }\n            33% { \n                opacity: 1; \n                transform: translateY(-3px) rotate(120deg) scale(1.1);\n            }\n            66% { \n                opacity: 0.7; \n                transform: translateY(2px) rotate(240deg) scale(0.9);\n            }\n        }\n        \n        @keyframes treatmentSparkle2 {\n            0%, 100% { \n                opacity: 0.4; \n                transform: translateX(0px) scale(1);\n            }\n            50% { \n                opacity: 0.9; \n                transform: translateX(4px) scale(1.15);\n            }\n        }\n        \n        @keyframes treatmentSparkle3 {\n            0%, 100% { \n                opacity: 0.6; \n                transform: rotate(0deg) scale(1);\n            }\n            25% { \n                opacity: 0.3; \n                transform: rotate(90deg) scale(0.8);\n            }\n            50% { \n                opacity: 1; \n                transform: rotate(180deg) scale(1.2);\n            }\n            75% { \n                opacity: 0.4; \n                transform: rotate(270deg) scale(0.9);\n            }\n        }\n        \n        @keyframes treatmentShimmer {\n            0% { transform: translateX(-150%) skewX(-20deg); }\n            100% { transform: translateX(250%) skewX(-20deg); }\n        }\n        \n        .treatments h4 {\n            position: relative;\n            z-index: 10;\n            font-size: 24px;\n            margin-bottom: 20px;\n            font-weight: 600;\n            text-align: center;\n            color: white;\n            text-shadow: \n                2px 2px 4px rgba(0, 0, 0, 0.4),\n                0 0 15px rgba(255, 255, 255, 0.4);\n            letter-spacing: 0.5px;\n            animation: headingGlow 4s ease-in-out infinite alternate;\n        }\n        \n        @keyframes headingGlow {\n            from { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.4),\n                    0 0 15px rgba(255, 255, 255, 0.4);\n            }\n            to { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.4),\n                    0 0 25px rgba(255, 255, 255, 0.7),\n                    0 0 35px rgba(255, 215, 0, 0.5);\n            }\n        }\n        \n        .treatments ul {\n            position: relative;\n            z-index: 10;\n            list-style: none;\n            padding: 0;\n        }\n        \n        .treatments li {\n            margin: 15px 0;\n            padding: 20px 25px;\n            font-size: 17px;\n            font-weight: 600;\n            background: rgba(255, 255, 255, 0.98);\n            border: 2px solid rgba(212, 175, 55, 0.4);\n            border-radius: 12px;\n            transition: all 0.5s ease;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            box-shadow: \n                0 8px 20px rgba(212, 175, 55, 0.3),\n                inset 0 1px 0 rgba(255, 255, 255, 0.8);\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .treatments li::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, \n                transparent, \n                rgba(255, 215, 0, 0.3) 40%, \n                rgba(255, 255, 255, 0.5) 50%, \n                rgba(255, 215, 0, 0.3) 60%, \n                transparent);\n            transition: left 0.8s ease;\n        }\n        \n        .treatments li:hover::before {\n            left: 100%;\n        }\n        \n        .treatments li:hover {\n            transform: translateY(-4px) scale(1.02);\n            box-shadow: \n                0 15px 35px rgba(212, 175, 55, 0.5),\n                0 5px 15px rgba(255, 215, 0, 0.3),\n                inset 0 1px 0 rgba(255, 255, 255, 1);\n            border-color: #ffd700;\n            background: white;\n        }\n        \n        .treatment-name {\n            color: #333;\n            font-weight: 600;\n            z-index: 1;\n            position: relative;\n        }\n        \n        .treatment-price {\n            font-weight: 700;\n            font-size: 18px;\n            background: linear-gradient(135deg, #b8860b, #ffd700, #f1c40f);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            z-index: 1;\n            position: relative;\n        }\n        \n        .pricing-note {\n            position: relative;\n            z-index: 10;\n            font-style: italic;\n            color: white;\n            text-align: center;\n            margin-bottom: 15px;\n            padding: 10px;\n            background: rgba(255, 255, 255, 0.1);\n            border-radius: 8px;\n            font-size: 16px;\n        }\n        \n        .hidden {\n            display: none;\n        }\n        \n        @media (max-width: 768px) {\n            .treatment-box {\n                margin: 20px;\n                padding: 25px;\n                max-width: none;\n            }\n            \n            .treatment-box h3 {\n                font-size: 26px;\n                margin-bottom: 25px;\n            }\n            \n            .treatment-box select {\n                width: 100%;\n                font-size: 16px;\n                padding: 15px 20px;\n            }\n            \n            .treatments li {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 10px;\n                padding: 18px 20px;\n            }\n            \n            .treatment-price {\n                align-self: flex-end;\n                font-size: 17px;\n            }\n            \n            .area-section {\n                padding: 20px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            body {\n                padding: 10px;\n            }\n            \n            .treatment-box {\n                padding: 20px;\n                margin: 10px;\n            }\n            \n            .treatment-box h3 {\n                font-size: 24px;\n            }\n            \n            .treatments {\n                padding: 20px;\n            }\n        }\n    \u003c\/style\u003e\n\n\n    \u003cdiv class=\"treatment-box\"\u003e\n        \u003ch3\u003eSelect Your Body Slimming Treatment\u003c\/h3\u003e\n        \u003cselect id=\"treatmentType\"\u003e\n            \u003coption value=\"\"\u003e-- Select Treatment Type --\u003c\/option\u003e\n            \u003coption value=\"EMSCULPT\"\u003eEMSCULPT\u003c\/option\u003e\n            \u003coption value=\"LipoSculpt\"\u003eLIPO SCULPT COMBO\u003c\/option\u003e\n        \u003c\/select\u003e\n\n        \u003cdiv id=\"areaSection\" class=\"area-section hidden\"\u003e\n            \u003ch4\u003eSelect Treatment Option\u003c\/h4\u003e\n            \u003cselect id=\"areaType\"\u003e\n                \u003coption value=\"\"\u003e-- Select Option --\u003c\/option\u003e\n            \u003c\/select\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv id=\"treatmentResults\" class=\"treatments hidden\"\u003e\n            \u003ch4\u003eYour Selected Treatment\u003c\/h4\u003e\n            \u003cdiv id=\"pricingNote\" class=\"pricing-note hidden\"\u003e\u003c\/div\u003e\n            \u003cul id=\"treatmentItems\"\u003e\u003c\/ul\u003e\n        \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cscript\u003e\n        const treatmentData = {\n            EMSCULPT: {\n                options: [\n                    { name: 'Single Area', price: 'Rs. 25,000' },\n                    { name: 'Double Area', price: 'Rs. 45,000' }\n                ]\n            },\n            LipoSculpt: {\n                options: [\n                    { name: 'Single Area', price: 'Rs. 20,000' },\n                    { name: 'Double Area', price: 'Rs. 35,000' }\n                ]\n            }\n        };\n\n        const treatmentTypeSelect = document.getElementById('treatmentType');\n        const areaSection = document.getElementById('areaSection');\n        const areaTypeSelect = document.getElementById('areaType');\n        const treatmentResults = document.getElementById('treatmentResults');\n        const treatmentItems = document.getElementById('treatmentItems');\n        const pricingNote = document.getElementById('pricingNote');\n\n        treatmentTypeSelect.addEventListener('change', function() {\n            const selectedTreatment = this.value;\n            \n            if (selectedTreatment) {\n                areaTypeSelect.innerHTML = '\u003coption value=\"\"\u003e-- Select Option --\u003c\/option\u003e';\n                \n                const options = treatmentData[selectedTreatment].options;\n                options.forEach((option, index) =\u003e {\n                    const optionElement = document.createElement('option');\n                    optionElement.value = index;\n                    optionElement.textContent = option.name;\n                    areaTypeSelect.appendChild(optionElement);\n                });\n                \n                areaSection.classList.remove('hidden');\n                treatmentResults.classList.add('hidden');\n            } else {\n                areaSection.classList.add('hidden');\n                treatmentResults.classList.add('hidden');\n            }\n        });\n\n        areaTypeSelect.addEventListener('change', function() {\n            const selectedTreatment = treatmentTypeSelect.value;\n            const selectedOptionIndex = this.value;\n            \n            if (selectedOptionIndex !== '') {\n                const option = treatmentData[selectedTreatment].options[selectedOptionIndex];\n                \n                treatmentItems.innerHTML = '';\n                \n                const listItem = document.createElement('li');\n                listItem.innerHTML = `\n                    \u003cspan class=\"treatment-name\"\u003e${selectedTreatment} - ${option.name}\u003c\/span\u003e\n                    \u003cspan class=\"treatment-price\"\u003e${option.price}\u003c\/span\u003e\n                `;\n                treatmentItems.appendChild(listItem);\n                \n                treatmentResults.classList.remove('hidden');\n            } else {\n                treatmentResults.classList.add('hidden');\n            }\n        });\n    \u003c\/script\u003e","brand":"360aesthetic","offers":[{"title":"Default Title","offer_id":42343954481242,"sku":null,"price":0.0,"currency_code":"LKR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0664\/5196\/3994\/files\/Artboard_2_729aa914-bc85-45b4-850c-2b7233107e80.jpg?v=1759284388"},{"product_id":"cellulite-reduction","title":"CELLULITE REDUCTION","description":"\u003cstyle\u003e\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: #f8f9fa;\n            min-height: 100vh;\n            padding: 20px;\n        }\n        \n        .treatment-box {\n            text-align: center;\n            margin: 40px auto;\n            padding: 40px;\n            max-width: 800px;\n            border-radius: 25px;\n            background: linear-gradient(135deg, #f7e98e 0%, #f4d03f 15%, #f1c40f 30%, #e6c200 45%, #d4af37 60%, #c9a96e 75%, #b8860b 90%, #9a7d0a 100%);\n            background-size: 300% 300%;\n            animation: luxuryGoldFlow 12s ease-in-out infinite;\n            position: relative;\n            overflow: hidden;\n            box-shadow: \n                0 25px 50px rgba(212, 175, 55, 0.6),\n                0 15px 30px rgba(184, 134, 11, 0.4),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3),\n                inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n            border: 3px solid rgba(255, 223, 0, 0.8);\n        }\n        \n        .treatment-box::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.9) 2px, transparent 2px),\n                radial-gradient(circle at 20% 90%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),\n                radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),\n                radial-gradient(circle at 95% 50%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 15% 60%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 60% 85%, rgba(255, 255, 255, 0.5) 1px, transparent 1px);\n            background-size: \n                120px 120px, 80px 80px, 100px 100px, 140px 140px, 90px 90px,\n                110px 110px, 70px 70px, 130px 130px, 95px 95px, 85px 85px;\n            border-radius: 25px;\n            pointer-events: none;\n            animation: \n                luxurySparkle1 6s ease-in-out infinite,\n                luxurySparkle2 8s ease-in-out infinite reverse,\n                luxurySparkle3 10s ease-in-out infinite;\n        }\n        \n        .treatment-box::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(45deg, \n                transparent 30%, \n                rgba(255, 255, 255, 0.1) 50%, \n                transparent 70%);\n            animation: shimmerSweep 4s ease-in-out infinite;\n            border-radius: 25px;\n            pointer-events: none;\n        }\n        \n        @keyframes luxuryGoldFlow {\n            0%, 100% { \n                background-position: 0% 50%;\n                transform: scale(1);\n            }\n            25% { \n                background-position: 100% 0%;\n                transform: scale(1.01);\n            }\n            50% { \n                background-position: 100% 100%;\n                transform: scale(1);\n            }\n            75% { \n                background-position: 0% 100%;\n                transform: scale(1.01);\n            }\n        }\n        \n        @keyframes luxurySparkle1 {\n            0%, 100% { \n                opacity: 0.4; \n                transform: translateY(0px) rotate(0deg);\n            }\n            50% { \n                opacity: 1; \n                transform: translateY(-5px) rotate(180deg);\n            }\n        }\n        \n        @keyframes luxurySparkle2 {\n            0%, 100% { \n                opacity: 0.6; \n                transform: translateX(0px) scale(1);\n            }\n            50% { \n                opacity: 0.9; \n                transform: translateX(3px) scale(1.1);\n            }\n        }\n        \n        @keyframes luxurySparkle3 {\n            0%, 100% { \n                opacity: 0.3; \n                transform: rotate(0deg);\n            }\n            33% { \n                opacity: 0.8; \n                transform: rotate(120deg);\n            }\n            66% { \n                opacity: 0.5; \n                transform: rotate(240deg);\n            }\n        }\n        \n        @keyframes shimmerSweep {\n            0% { transform: translateX(-100%) skewX(-15deg); }\n            100% { transform: translateX(200%) skewX(-15deg); }\n        }\n        \n        .treatment-box h3 {\n            position: relative;\n            z-index: 10;\n            font-size: 32px;\n            margin-bottom: 30px;\n            font-weight: 700;\n            color: white;\n            text-shadow: \n                2px 2px 4px rgba(0, 0, 0, 0.5),\n                0 0 10px rgba(255, 255, 255, 0.3);\n            letter-spacing: 1px;\n            animation: textGlow 3s ease-in-out infinite alternate;\n        }\n        \n        @keyframes textGlow {\n            from { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.5),\n                    0 0 10px rgba(255, 255, 255, 0.3);\n            }\n            to { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.5),\n                    0 0 20px rgba(255, 255, 255, 0.6),\n                    0 0 30px rgba(255, 215, 0, 0.4);\n            }\n        }\n        \n        .treatment-box select {\n            position: relative;\n            z-index: 10;\n            width: 90%;\n            padding: 18px 25px;\n            font-size: 18px;\n            border-radius: 15px;\n            border: 2px solid rgba(255, 255, 255, 0.9);\n            margin-bottom: 25px;\n            background: rgba(255, 255, 255, 0.98);\n            transition: all 0.4s ease;\n            cursor: pointer;\n            font-weight: 500;\n            color: #333;\n            box-shadow: \n                0 8px 25px rgba(0, 0, 0, 0.15),\n                0 4px 10px rgba(212, 175, 55, 0.3);\n        }\n        \n        .treatment-box select:focus {\n            border-color: white;\n            box-shadow: \n                0 0 30px rgba(255, 255, 255, 0.8),\n                0 10px 40px rgba(212, 175, 55, 0.4);\n            outline: none;\n            transform: translateY(-3px) scale(1.02);\n            background: white;\n        }\n        \n        .treatment-box select:hover {\n            border-color: white;\n            transform: translateY(-2px);\n            box-shadow: \n                0 12px 30px rgba(0, 0, 0, 0.2),\n                0 6px 15px rgba(212, 175, 55, 0.4);\n        }\n        \n        .area-section {\n            position: relative;\n            z-index: 10;\n            margin: 25px 0;\n            padding: 25px;\n            background: linear-gradient(135deg, #f7e98e, #f4d03f, #e6c200, #d4af37);\n            background-size: 400% 400%;\n            animation: sectionGoldFlow 8s ease-in-out infinite;\n            border-radius: 18px;\n            border: 2px solid rgba(255, 255, 255, 0.8);\n            box-shadow: \n                0 15px 30px rgba(212, 175, 55, 0.4),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3);\n            overflow: hidden;\n        }\n        \n        .area-section::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),\n                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.5) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),\n                radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px);\n            background-size: 60px 60px, 45px 45px, 70px 70px, 55px 55px, 40px 40px;\n            border-radius: 18px;\n            pointer-events: none;\n            animation: sectionSparkle 5s ease-in-out infinite;\n        }\n        \n        @keyframes sectionGoldFlow {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n        \n        @keyframes sectionSparkle {\n            0%, 100% { \n                opacity: 0.6; \n                transform: scale(1);\n            }\n            50% { \n                opacity: 1; \n                transform: scale(1.05);\n            }\n        }\n        \n        .area-section h4 {\n            position: relative;\n            z-index: 10;\n            font-size: 20px;\n            margin-bottom: 15px;\n            font-weight: 600;\n            color: white;\n            text-shadow: \n                1px 1px 2px rgba(0, 0, 0, 0.4),\n                0 0 8px rgba(255, 255, 255, 0.3);\n            letter-spacing: 0.5px;\n        }\n        \n        .treatments {\n            position: relative;\n            z-index: 10;\n            text-align: left;\n            margin-top: 30px;\n            padding: 25px;\n            border-radius: 18px;\n            background: linear-gradient(135deg, #f7e98e 0%, #f4d03f 20%, #e6c200 40%, #d4af37 60%, #c9a96e 80%, #b8860b 100%);\n            background-size: 500% 500%;\n            animation: treatmentLuxuryFlow 15s ease-in-out infinite;\n            border: 3px solid rgba(255, 255, 255, 0.9);\n            box-shadow: \n                0 20px 40px rgba(212, 175, 55, 0.5),\n                inset 0 2px 0 rgba(255, 255, 255, 0.4),\n                inset 0 -2px 0 rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n        }\n        \n        .treatments::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: \n                radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.7) 2px, transparent 2px),\n                radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 75% 45%, rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px),\n                radial-gradient(circle at 25% 85%, rgba(255, 255, 255, 0.9) 1px, transparent 1px),\n                radial-gradient(circle at 95% 25%, rgba(255, 255, 255, 0.5) 2px, transparent 2px),\n                radial-gradient(circle at 5% 65%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),\n                radial-gradient(circle at 65% 95%, rgba(255, 255, 255, 0.7) 1.5px, transparent 1.5px);\n            background-size: \n                80px 80px, 120px 120px, 60px 60px, 100px 100px,\n                70px 70px, 140px 140px, 50px 50px, 90px 90px;\n            border-radius: 18px;\n            pointer-events: none;\n            animation: \n                treatmentSparkle1 7s ease-in-out infinite,\n                treatmentSparkle2 9s ease-in-out infinite reverse,\n                treatmentSparkle3 11s ease-in-out infinite;\n        }\n        \n        .treatments::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(60deg, \n                transparent 20%, \n                rgba(255, 255, 255, 0.15) 40%, \n                rgba(255, 255, 255, 0.3) 50%, \n                rgba(255, 255, 255, 0.15) 60%, \n                transparent 80%);\n            animation: treatmentShimmer 6s ease-in-out infinite;\n            border-radius: 18px;\n            pointer-events: none;\n        }\n        \n        @keyframes treatmentLuxuryFlow {\n            0%, 100% { \n                background-position: 0% 50%;\n                filter: brightness(1);\n            }\n            25% { \n                background-position: 100% 25%;\n                filter: brightness(1.1);\n            }\n            50% { \n                background-position: 100% 75%;\n                filter: brightness(1);\n            }\n            75% { \n                background-position: 0% 100%;\n                filter: brightness(1.05);\n            }\n        }\n        \n        @keyframes treatmentSparkle1 {\n            0%, 100% { \n                opacity: 0.5; \n                transform: translateY(0px) rotate(0deg) scale(1);\n            }\n            33% { \n                opacity: 1; \n                transform: translateY(-3px) rotate(120deg) scale(1.1);\n            }\n            66% { \n                opacity: 0.7; \n                transform: translateY(2px) rotate(240deg) scale(0.9);\n            }\n        }\n        \n        @keyframes treatmentSparkle2 {\n            0%, 100% { \n                opacity: 0.4; \n                transform: translateX(0px) scale(1);\n            }\n            50% { \n                opacity: 0.9; \n                transform: translateX(4px) scale(1.15);\n            }\n        }\n        \n        @keyframes treatmentSparkle3 {\n            0%, 100% { \n                opacity: 0.6; \n                transform: rotate(0deg) scale(1);\n            }\n            25% { \n                opacity: 0.3; \n                transform: rotate(90deg) scale(0.8);\n            }\n            50% { \n                opacity: 1; \n                transform: rotate(180deg) scale(1.2);\n            }\n            75% { \n                opacity: 0.4; \n                transform: rotate(270deg) scale(0.9);\n            }\n        }\n        \n        @keyframes treatmentShimmer {\n            0% { transform: translateX(-150%) skewX(-20deg); }\n            100% { transform: translateX(250%) skewX(-20deg); }\n        }\n        \n        .treatments h4 {\n            position: relative;\n            z-index: 10;\n            font-size: 24px;\n            margin-bottom: 20px;\n            font-weight: 600;\n            text-align: center;\n            color: white;\n            text-shadow: \n                2px 2px 4px rgba(0, 0, 0, 0.4),\n                0 0 15px rgba(255, 255, 255, 0.4);\n            letter-spacing: 0.5px;\n            animation: headingGlow 4s ease-in-out infinite alternate;\n        }\n        \n        @keyframes headingGlow {\n            from { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.4),\n                    0 0 15px rgba(255, 255, 255, 0.4);\n            }\n            to { \n                text-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.4),\n                    0 0 25px rgba(255, 255, 255, 0.7),\n                    0 0 35px rgba(255, 215, 0, 0.5);\n            }\n        }\n        \n        .treatments ul {\n            position: relative;\n            z-index: 10;\n            list-style: none;\n            padding: 0;\n        }\n        \n        .treatments li {\n            margin: 15px 0;\n            padding: 25px 30px;\n            font-size: 18px;\n            font-weight: 600;\n            background: rgba(255, 255, 255, 0.98);\n            border: 2px solid rgba(212, 175, 55, 0.4);\n            border-radius: 15px;\n            transition: all 0.5s ease;\n            box-shadow: \n                0 8px 20px rgba(212, 175, 55, 0.3),\n                inset 0 1px 0 rgba(255, 255, 255, 0.8);\n            position: relative;\n            overflow: hidden;\n            text-align: center;\n        }\n        \n        .treatments li::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, \n                transparent, \n                rgba(255, 215, 0, 0.3) 40%, \n                rgba(255, 255, 255, 0.5) 50%, \n                rgba(255, 215, 0, 0.3) 60%, \n                transparent);\n            transition: left 0.8s ease;\n        }\n        \n        .treatments li:hover::before {\n            left: 100%;\n        }\n        \n        .treatments li:hover {\n            transform: translateY(-4px) scale(1.02);\n            box-shadow: \n                0 15px 35px rgba(212, 175, 55, 0.5),\n                0 5px 15px rgba(255, 215, 0, 0.3),\n                inset 0 1px 0 rgba(255, 255, 255, 1);\n            border-color: #ffd700;\n            background: white;\n        }\n        \n        .treatment-details {\n            color: #333;\n            line-height: 1.6;\n            z-index: 1;\n            position: relative;\n        }\n        \n        .treatment-name {\n            font-size: 20px;\n            font-weight: 700;\n            margin-bottom: 8px;\n            background: linear-gradient(135deg, #b8860b, #ffd700, #f1c40f);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n        \n        .treatment-area {\n            font-size: 16px;\n            color: #555;\n            margin-bottom: 12px;\n        }\n        \n        .treatment-price {\n            font-weight: 700;\n            font-size: 22px;\n            background: linear-gradient(135deg, #b8860b, #ffd700, #f1c40f);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            text-shadow: 0 1px 2px rgba(184, 134, 11, 0.3);\n        }\n        \n        .hidden {\n            display: none;\n        }\n        \n        \/* Mobile responsiveness *\/\n        @media (max-width: 768px) {\n            .treatment-box {\n                margin: 20px;\n                padding: 25px;\n                max-width: none;\n            }\n            \n            .treatment-box h3 {\n                font-size: 26px;\n                margin-bottom: 25px;\n            }\n            \n            .treatment-box select {\n                width: 100%;\n                font-size: 16px;\n                padding: 15px 20px;\n            }\n            \n            .treatments li {\n                padding: 20px 25px;\n                font-size: 16px;\n            }\n            \n            .treatment-name {\n                font-size: 18px;\n            }\n            \n            .treatment-price {\n                font-size: 20px;\n            }\n            \n            .area-section {\n                padding: 20px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            body {\n                padding: 10px;\n            }\n            \n            .treatment-box {\n                padding: 20px;\n                margin: 10px;\n            }\n            \n            .treatment-box h3 {\n                font-size: 24px;\n            }\n            \n            .treatments {\n                padding: 20px;\n            }\n        }\n    \u003c\/style\u003e\n\n\n    \u003c!-- Cellulite Reduction Treatment Selection --\u003e\n    \u003cdiv class=\"treatment-box\"\u003e\n        \u003ch3\u003eCellulite Reduction Treatment\u003c\/h3\u003e\n        \u003cselect id=\"treatmentType\" onchange=\"showAreaSelection()\"\u003e\n            \u003coption value=\"\"\u003e-- Choose Your Treatment --\u003c\/option\u003e\n            \u003coption value=\"RadioFrequency\"\u003eRadio Frequency\u003c\/option\u003e\n            \u003coption value=\"Cavitation\"\u003eCavitation\u003c\/option\u003e\n            \u003coption value=\"EndosphereInnerBallRoller\"\u003eEndosphere Inner Ball Roller\u003c\/option\u003e\n        \u003c\/select\u003e\n        \n        \u003c!-- Area Selection --\u003e\n        \u003cdiv class=\"area-section hidden\" id=\"areaSection\"\u003e\n            \u003ch4\u003eSelect Treatment Area\u003c\/h4\u003e\n            \u003cselect id=\"areaType\" onchange=\"updatePricing()\"\u003e\n                \u003coption value=\"\"\u003e-- Select Area --\u003c\/option\u003e\n                \u003coption value=\"FullBack\"\u003eFull Back\u003c\/option\u003e\n                \u003coption value=\"UpperBack\"\u003eUpper Back\u003c\/option\u003e\n                \u003coption value=\"Abdomen\"\u003eAbdomen\u003c\/option\u003e\n                \u003coption value=\"HalfLeg\"\u003eHalf Leg\u003c\/option\u003e\n                \u003coption value=\"FullLeg\"\u003eFull Leg\u003c\/option\u003e\n                \u003coption value=\"HalfHand\"\u003eHalf Hand\u003c\/option\u003e\n                \u003coption value=\"FullHand\"\u003eFull Hand\u003c\/option\u003e\n                \u003coption value=\"FaceNeck\"\u003eFace \u0026amp; Neck\u003c\/option\u003e\n                \u003coption value=\"Neck\"\u003eNeck\u003c\/option\u003e\n                \u003coption value=\"DoubleChin\"\u003eDouble Chin\u003c\/option\u003e\n            \u003c\/select\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- Treatment Results --\u003e\n        \u003cdiv class=\"treatments hidden\" id=\"treatmentResults\"\u003e\n            \u003ch4\u003eYour Selected Treatment\u003c\/h4\u003e\n            \u003cul id=\"treatmentItems\"\u003e\n                \u003c!-- Dynamic treatment result will be populated here --\u003e\n            \u003c\/ul\u003e\n        \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cscript\u003e\n        \/\/ Pricing structure for cellulite reduction treatments\n        const cellulitePricing = {\n            'RadioFrequency': {\n                'FullBack': '18,000\/=',\n                'UpperBack': '10,000\/=',\n                'Abdomen': '15,000\/=',\n                'HalfLeg': '20,000\/=',\n                'FullLeg': '25,000\/=',\n                'HalfHand': '10,000\/=',\n                'FullHand': '16,000\/=',\n                'FaceNeck': '15,000\/=',\n                'Neck': '6,000\/=',\n                'DoubleChin': '6,000\/='\n            },\n            'Cavitation': {\n                'FullBack': '18,000\/=',\n                'UpperBack': '10,000\/=',\n                'Abdomen': '15,000\/=',\n                'HalfLeg': '20,000\/=',\n                'FullLeg': '25,000\/=',\n                'HalfHand': '10,000\/=',\n                'FullHand': '16,000\/=',\n                'FaceNeck': '15,000\/=',\n                'Neck': '6,000\/=',\n                'DoubleChin': '6,000\/='\n            },\n            'EndosphereInnerBallRoller': {\n                'FullBack': '18,000\/=',\n                'UpperBack': '10,000\/=',\n                'Abdomen': '15,000\/=',\n                'HalfLeg': '20,000\/=',\n                'FullLeg': '25,000\/=',\n                'HalfHand': '10,000\/=',\n                'FullHand': '16,000\/=',\n                'FaceNeck': '15,000\/=',\n                'Neck': '6,000\/=',\n                'DoubleChin': '6,000\/='\n            }\n        };\n\n        \/\/ Treatment display names\n        const treatmentNames = {\n            'RadioFrequency': 'Radio Frequency',\n            'Cavitation': 'Cavitation',\n            'EndosphereInnerBallRoller': 'Endosphere Inner Ball Roller'\n        };\n\n        \/\/ Area display names\n        const areaNames = {\n            'FullBack': 'Full Back',\n            'UpperBack': 'Upper Back',\n            'Abdomen': 'Abdomen',\n            'HalfLeg': 'Half Leg',\n            'FullLeg': 'Full Leg',\n            'HalfHand': 'Half Hand',\n            'FullHand': 'Full Hand',\n            'FaceNeck': 'Face \u0026 Neck',\n            'Neck': 'Neck',\n            'DoubleChin': 'Double Chin'\n        };\n\n        function showAreaSelection() {\n            const treatmentType = document.getElementById(\"treatmentType\").value;\n            const areaSection = document.getElementById(\"areaSection\");\n            const treatmentResults = document.getElementById(\"treatmentResults\");\n            \n            \/\/ Hide results first\n            treatmentResults.classList.add(\"hidden\");\n            \n            \/\/ Reset area selection\n            document.getElementById(\"areaType\").value = \"\";\n            \n            if (treatmentType) {\n                \/\/ Show area selection\n                areaSection.classList.remove(\"hidden\");\n            } else {\n                areaSection.classList.add(\"hidden\");\n            }\n        }\n\n        function updatePricing() {\n            const treatmentType = document.getElementById(\"treatmentType\").value;\n            const areaType = document.getElementById(\"areaType\").value;\n            const treatmentResults = document.getElementById(\"treatmentResults\");\n            const treatmentItems = document.getElementById(\"treatmentItems\");\n            \n            \/\/ Show results if both selections are made\n            if (treatmentType \u0026\u0026 areaType) {\n                const price = cellulitePricing[treatmentType][areaType];\n                \n                \/\/ Clear and show the selected treatment with details\n                treatmentItems.innerHTML = '';\n                const listItem = document.createElement('li');\n                \n                let treatmentDetails = `\n                    \u003cdiv class=\"treatment-details\"\u003e\n                        \u003cdiv class=\"treatment-name\"\u003e${treatmentNames[treatmentType]}\u003c\/div\u003e\n                        \u003cdiv class=\"treatment-area\"\u003eArea: ${areaNames[areaType]}\u003c\/div\u003e\n                        \u003cdiv class=\"treatment-price\"\u003e${price}\u003c\/div\u003e\n                    \u003c\/div\u003e\n                `;\n                \n                listItem.innerHTML = treatmentDetails;\n                treatmentItems.appendChild(listItem);\n                \n                treatmentResults.classList.remove(\"hidden\");\n            }\n        }\n\n        \/\/ Initialize on page load\n        document.addEventListener('DOMContentLoaded', function() {\n            console.log('Cellulite Reduction Selector loaded successfully');\n        });\n    \u003c\/script\u003e","brand":"360aesthetic","offers":[{"title":"Default Title","offer_id":42343954514010,"sku":null,"price":0.0,"currency_code":"LKR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0664\/5196\/3994\/files\/Artboard_4_2533809d-8fe5-42ca-be8f-571b94c635e0.jpg?v=1759284379"}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0664\/5196\/3994\/collections\/Artboard_1.png?v=1758882300","url":"https:\/\/360aestheticscenter.com\/collections\/body.oembed","provider":"360aesthetic","version":"1.0","type":"link"}