{"title":"NAILS","description":"","products":[{"product_id":"nails","title":"NAILS","description":"\n    \u003ctitle\u003eNail Services Selector\u003c\/title\u003e\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        .nail-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        .nail-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        .nail-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        .nail-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        .nail-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        .nail-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        .nail-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        .service-section {\n            position: relative;\n            z-index: 10;\n            margin-top: 20px;\n        }\n        \n        .service-section h4 {\n            color: white;\n            font-size: 22px;\n            margin-bottom: 15px;\n            font-weight: 600;\n            text-shadow: \n                2px 2px 4px rgba(0, 0, 0, 0.4),\n                0 0 10px rgba(255, 255, 255, 0.3);\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: serviceLuxuryFlow 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                serviceSparkle1 7s ease-in-out infinite,\n                serviceSparkle2 9s ease-in-out infinite reverse,\n                serviceSparkle3 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: serviceShimmer 6s ease-in-out infinite;\n            border-radius: 18px;\n            pointer-events: none;\n        }\n        \n        @keyframes serviceLuxuryFlow {\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 serviceSparkle1 {\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 serviceSparkle2 {\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 serviceSparkle3 {\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 serviceShimmer {\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        .service-name {\n            color: #333;\n            font-weight: 600;\n            z-index: 1;\n            position: relative;\n        }\n        \n        .service-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            .nail-box {\n                margin: 20px;\n                padding: 25px;\n                max-width: none;\n            }\n            \n            .nail-box h3 {\n                font-size: 26px;\n                margin-bottom: 25px;\n            }\n            \n            .nail-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            .service-price {\n                align-self: flex-end;\n                font-size: 17px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            body {\n                padding: 10px;\n            }\n            \n            .nail-box {\n                padding: 20px;\n                margin: 10px;\n            }\n            \n            .nail-box h3 {\n                font-size: 24px;\n            }\n            \n            .treatments {\n                padding: 20px;\n            }\n        }\n    \u003c\/style\u003e\n\n\n    \u003c!-- Nail Services Selection --\u003e\n    \u003cdiv class=\"nail-box\"\u003e\n        \u003ch3\u003eNail Services\u003c\/h3\u003e\n        \n        \u003c!-- Step 1: Choose Category --\u003e\n        \u003cselect id=\"category\" onchange=\"showServices()\"\u003e\n            \u003coption value=\"\"\u003e-- Choose Category --\u003c\/option\u003e\n            \u003coption value=\"Manicure\"\u003eManicure\u003c\/option\u003e\n            \u003coption value=\"Pedicure\"\u003ePedicure\u003c\/option\u003e\n            \u003coption value=\"Acrylic\"\u003eAcrylic Nails\u003c\/option\u003e\n            \u003coption value=\"Treatments\"\u003eTreatments\u003c\/option\u003e\n            \u003coption value=\"Gel\"\u003eGel Nails\u003c\/option\u003e\n            \u003coption value=\"NailArt\"\u003eNail Art\u003c\/option\u003e\n            \u003coption value=\"SoakAway\"\u003eSoak Away\u003c\/option\u003e\n        \u003c\/select\u003e\n        \n        \u003c!-- Step 2: Choose Service --\u003e\n        \u003cdiv id=\"serviceSection\" class=\"service-section hidden\"\u003e\n            \u003ch4\u003eSelect Service\u003c\/h4\u003e\n            \u003cselect id=\"service\" onchange=\"showResult()\"\u003e\n                \u003coption value=\"\"\u003e-- Select Service --\u003c\/option\u003e\n            \u003c\/select\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- Step 3: Show Result --\u003e\n        \u003cdiv class=\"treatments hidden\" id=\"treatmentResults\"\u003e\n            \u003ch4\u003eYour Selected Service\u003c\/h4\u003e\n            \u003cul id=\"treatmentItems\"\u003e\u003c\/ul\u003e\n        \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cscript\u003e\n        const pricing = {\n            Manicure: {\n                \"Manicure - Basic\": \"3,000\/=\",\n                \"Manicure - French\": \"3,200\/=\",\n                \"Express manicure\": \"2,800\/=\",\n                \"Express manicure + Gel color\": \"4,000\/=\",\n                \"Express manicure + French gel color\": \"4,300\/=\",\n                \"Express manicure + Dipping powder\": \"6,000\/=\",\n                \"Express manicure + Ombre dipping powder\": \"7,000\/=\",\n                \"Cut and file\": \"1,200\/=\",\n                \"French gel color\": \"2,500\/=\",\n                \"Ombre gel color\": \"3,000\/=\",\n                \"French normal color change\": \"1,700\/=\",\n                \"Gel color change\": \"2,200\/=\",\n                \"Normal color change\": \"1,500\/=\"\n            },\n            Pedicure: {\n                \"Pedicure - Basic\": \"3,500\/=\",\n                \"Pedicure - French\": \"3,700\/=\",\n                \"Express pedicure\": \"3,000\/=\",\n                \"Express pedicure + Gel color\": \"4,000\/=\",\n                \"Express pedicure + French gel color\": \"4,300\/=\"\n            },\n            Acrylic: {\n                \"Acrylic On natural nails\": \"4,500\/=\",\n                \"Ombre acrylic on natural nails\": \"5,200\/=\",\n                \"Nude color acrylic on natural nails\": \"5,500\/=\",\n                \"Acrylic full set on tips\": \"6,000\/=\",\n                \"Ombre acrylic full set on tips\": \"7,000\/=\",\n                \"Nude color acrylic full set on tips\": \"7,500\/=\",\n                \"Acrylic refill\": \"4,500\/=\",\n                \"Acrylic one Nail\": \"600\/=\"\n            },\n            Treatments: {\n                \"Paraffin treatment - Legs (Full)\": \"9,000\/=\",\n                \"Paraffin treatment - Legs (Half)\": \"4,500\/=\",\n                \"Paraffin treatment - Hands (Full)\": \"7,400\/=\",\n                \"Paraffin treatment - Hands (Half)\": \"3,700\/=\",\n                \"Callus removal - Feet\": \"4,400\/=\",\n                \"Deep dermal treatment - Legs (Full)\": \"10,000\/=\",\n                \"Deep dermal treatment - Legs (Half)\": \"5,000\/=\",\n                \"Deep dermal treatment - Hands (Full)\": \"8,000\/=\",\n                \"Deep dermal treatment - Hands (Half)\": \"4,000\/=\"\n            },\n            Gel: {\n                \"Gel on natural nails\": \"5,000\/=\",\n                \"Gel full set on tips\": \"7,000\/=\",\n                \"Calcium gel on natural nails\": \"5,500\/=\",\n                \"Gel refill\": \"5,000\/=\",\n                \"Gel one nail\": \"700\/=\",\n                \"Temporary tips\": \"3,500\/=\"\n            },\n            NailArt: {\n                \"Simple (Per Nail)\": \"200\/=\",\n                \"Special (Per Nail)\": \"400\/=\",\n                \"Chrome (Per Nail)\": \"250\/=\",\n                \"Foil (Per Nail)\": \"250\/=\",\n                \"Marble (Per Nail)\": \"250\/=\",\n                \"Ombre (Per Nail)\": \"300\/=\",\n                \"Stone (S) (Per Stone)\": \"30\/=\",\n                \"Stone (M) (Per Stone)\": \"50\/=\",\n                \"Stone (L) (Per Stone)\": \"50\/=\"\n            },\n            SoakAway: {\n                \"Dipping powder soak off\": \"1,000\/=\",\n                \"Gel color soak off\": \"1,000\/=\",\n                \"Extension soak off\": \"2,000\/=\"\n            }\n        };\n\n        function showServices() {\n            const category = document.getElementById(\"category\").value;\n            const serviceSelect = document.getElementById(\"service\");\n            const serviceSection = document.getElementById(\"serviceSection\");\n            const treatmentResults = document.getElementById(\"treatmentResults\");\n            \n            serviceSelect.innerHTML = '\u003coption value=\"\"\u003e-- Select Service --\u003c\/option\u003e';\n            \n            if (category \u0026\u0026 pricing[category]) {\n                Object.keys(pricing[category]).forEach(service =\u003e {\n                    let opt = document.createElement(\"option\");\n                    opt.value = service;\n                    opt.textContent = service;\n                    serviceSelect.appendChild(opt);\n                });\n                serviceSection.classList.remove(\"hidden\");\n                treatmentResults.classList.add(\"hidden\");\n            } else {\n                serviceSection.classList.add(\"hidden\");\n                treatmentResults.classList.add(\"hidden\");\n            }\n        }\n\n        function showResult() {\n            const category = document.getElementById(\"category\").value;\n            const service = document.getElementById(\"service\").value;\n            const result = document.getElementById(\"treatmentResults\");\n            const list = document.getElementById(\"treatmentItems\");\n            \n            list.innerHTML = \"\";\n            \n            if (category \u0026\u0026 service) {\n                let li = document.createElement(\"li\");\n                li.innerHTML = `\n                    \u003cspan class=\"service-name\"\u003e${service}\u003c\/span\u003e\n                    \u003cspan class=\"service-price\"\u003e${pricing[category][service]}\u003c\/span\u003e\n                `;\n                list.appendChild(li);\n                result.classList.remove(\"hidden\");\n            } else {\n                result.classList.add(\"hidden\");\n            }\n        }\n\n        \/\/ Initialize on page load\n        document.addEventListener('DOMContentLoaded', function() {\n            console.log('Nail Services Selector loaded successfully');\n        });\n    \u003c\/script\u003e","brand":"360aesthetic","offers":[{"title":"Default Title","offer_id":42223933587546,"sku":null,"price":0.0,"currency_code":"LKR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0664\/5196\/3994\/files\/Artboard_34.png?v=1762239739"}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0664\/5196\/3994\/collections\/manicure-treatment.png?v=1766750145","url":"https:\/\/360aestheticscenter.com\/collections\/nails.oembed","provider":"360aesthetic","version":"1.0","type":"link"}