{"product_id":"square-water-bottle-3","title":"square water bottle 3","description":"\u003cbody\u003e\n\n\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eUniversal Shopify Product Page Blueprint | Lifestyle Ventures\u003c\/title\u003e\n  \n  \u003c!-- Google Fonts: Plus Jakarta Sans \u0026 Caveat --\u003e\n  \u003clink rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\u003e\n  \u003clink rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\u003e\n  \u003clink href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900\u0026amp;family=Caveat:wght@700\u0026amp;display=swap\" rel=\"stylesheet\"\u003e\n  \n  \u003c!-- Tailwind CSS CDN --\u003e\n  \u003cscript src=\"https:\/\/cdn.tailwindcss.com\"\u003e\u003c\/script\u003e\n\n  \u003cstyle\u003e\n    :root {\n      --primary-purple: #7026b9;\n      --primary-purple-hover: #5c1e9b;\n      --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n    }\n\n    body {\n      font-family: var(--font-main);\n      color: #0f172a;\n      background-color: #ffffff;\n      -webkit-font-smoothing: antialiased;\n    }\n\n    \/* Custom scrollbar utility *\/\n    .no-scrollbar::-webkit-scrollbar {\n      display: none;\n    }\n    .no-scrollbar {\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n\n    \/* Pulse animation for high CTA conversion *\/\n    @keyframes subtlePulse {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(1.02); }\n    }\n    .animate-cute-pulse {\n      animation: subtlePulse 2.5s infinite ease-in-out;\n    }\n\n    \/* Smooth popup entrance *\/\n    @keyframes popInCenter {\n      0% { opacity: 0; transform: scale(0.9) translateY(10px); }\n      100% { opacity: 1; transform: scale(1) translateY(0); }\n    }\n    .animate-pop-in {\n      animation: popInCenter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    }\n  \u003c\/style\u003e\n\n\n\n  \u003c!-- Announcement Urgency Bar --\u003e\n  \u003cdiv class=\"bg-slate-900 text-white text-center py-2 px-4 text-xs sm:text-sm font-extrabold tracking-wide flex items-center justify-center gap-2\"\u003e\n    \u003cspan\u003e🔥 SPECIAL OFFER: FREE EXPRESS SHIPPING \u0026amp; CASH ON DELIVERY\u003c\/span\u003e\n    \u003cspan class=\"hidden sm:inline bg-purple-600\/80 text-white px-2 py-0.5 rounded text-[10px] uppercase\"\u003eLimited Stock\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Header --\u003e\n  \u003cheader class=\"sticky top-0 z-40 bg-white\/95 backdrop-blur-md border-b border-slate-100 shadow-sm\"\u003e\n    \u003cdiv class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\"\u003e\n      \u003ca href=\"#\" class=\"text-xl sm:text-2xl font-black tracking-tight text-slate-900 flex items-center gap-1\"\u003e\n        LIFESTYLE \u003cspan class=\"text-[#7026b9]\"\u003eVENTURES\u003c\/span\u003e\n      \u003c\/a\u003e\n\n      \u003cnav class=\"hidden md:flex items-center gap-8 font-bold text-sm text-slate-700\"\u003e\n        \u003ca href=\"#\" class=\"hover:text-[#7026b9] transition-colors\"\u003eHome\u003c\/a\u003e\n        \u003ca href=\"#\" class=\"text-[#7026b9]\"\u003eFeatured Products\u003c\/a\u003e\n        \u003ca href=\"#\" class=\"hover:text-[#7026b9] transition-colors\"\u003eCatalog\u003c\/a\u003e\n        \u003ca href=\"#\" class=\"hover:text-[#7026b9] transition-colors\"\u003eSupport\u003c\/a\u003e\n      \u003c\/nav\u003e\n\n      \u003cdiv class=\"flex items-center gap-4\"\u003e\n        \u003cbutton onclick=\"scrollToMiddleCTA()\" class=\"relative p-2 text-slate-800 hover:text-[#7026b9] transition-colors\" aria-label=\"Cart\"\u003e\n          \u003csvg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" stroke-width=\"2\"\u003e\n            \u003cpath d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"\u003e\u003c\/path\u003e\n          \u003c\/svg\u003e\n          \u003cspan class=\"absolute top-0 right-0 bg-[#7026b9] text-white text-[10px] font-extrabold w-4 h-4 rounded-full flex items-center justify-center\"\u003e1\u003c\/span\u003e\n        \u003c\/button\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/header\u003e\n\n  \u003cmain class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10 flex-grow w-full\"\u003e\n    \u003cdiv class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start\"\u003e\n      \n      \u003c!-- LEFT COLUMN: Product Gallery \u0026 Interactive Swatch Visualizer --\u003e\n      \u003cdiv class=\"lg:col-span-7 flex flex-col gap-4 w-full\"\u003e\n        \u003cdiv class=\"relative bg-gradient-to-b from-sky-50\/50 via-slate-50 to-purple-50\/30 border border-slate-200 rounded-3xl overflow-hidden aspect-[4\/3] sm:aspect-square flex items-center justify-center p-6 shadow-sm group\"\u003e\n          \n          \u003c!-- Badge overlay: Scarcity \u0026 Quality --\u003e\n          \u003cdiv class=\"absolute top-4 left-4 z-10 bg-white\/95 backdrop-blur border border-purple-200 px-3 py-1.5 rounded-full flex items-center gap-2 shadow-sm\"\u003e\n            \u003cspan class=\"w-2 h-2 rounded-full bg-emerald-500 animate-ping\"\u003e\u003c\/span\u003e\n            \u003cspan class=\"text-xs font-black text-purple-900 uppercase tracking-wider\"\u003e100% Food Grade BPA-Free\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003c!-- Color Label Badge --\u003e\n          \u003cdiv class=\"absolute bottom-4 right-4 z-10 bg-slate-900\/90 text-white backdrop-blur px-3 py-1.5 rounded-xl text-xs font-bold shadow-lg flex items-center gap-2\"\u003e\n            \u003cspan class=\"w-3 h-3 rounded-full border border-white\" id=\"badgeColorDot\" style=\"background-color: #38bdf8;\"\u003e\u003c\/span\u003e\n            \u003cspan id=\"badgeColorText\"\u003ePastel Blue Frosted\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003c!-- Interactive Bottle Display (SVG \/ Photo) --\u003e\n          \u003cdiv id=\"mainGalleryDisplay\" class=\"w-full h-full flex items-center justify-center transition-all duration-300\"\u003e\n            \u003csvg id=\"svgBottleVisual\" viewbox=\"0 0 500 500\" class=\"w-full h-full max-h-[440px]\"\u003e\n              \u003cdefs\u003e\n                \u003clineargradient id=\"bottleBodyGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"\u003e\n                  \u003cstop offset=\"0%\" id=\"gradStop1\" stop-color=\"#38bdf8\" stop-opacity=\"0.85\"\u003e\u003c\/stop\u003e\n                  \u003cstop offset=\"50%\" id=\"gradStop2\" stop-color=\"#7dd3fc\" stop-opacity=\"0.75\"\u003e\u003c\/stop\u003e\n                  \u003cstop offset=\"100%\" id=\"gradStop3\" stop-color=\"#0284c7\" stop-opacity=\"0.9\"\u003e\u003c\/stop\u003e\n                \u003c\/lineargradient\u003e\n\n                \u003clineargradient id=\"capGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"\u003e\n                  \u003cstop offset=\"0%\" id=\"capStop1\" stop-color=\"#e0f2fe\"\u003e\u003c\/stop\u003e\n                  \u003cstop offset=\"100%\" id=\"capStop2\" stop-color=\"#bae6fd\"\u003e\u003c\/stop\u003e\n                \u003c\/lineargradient\u003e\n\n                \u003cfilter id=\"bottleShadow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\"\u003e\n                  \u003cfedropshadow dx=\"0\" dy=\"16\" stddeviation=\"14\" flood-color=\"#0f172a\" flood-opacity=\"0.12\"\u003e\u003c\/fedropshadow\u003e\n                \u003c\/filter\u003e\n              \u003c\/defs\u003e\n\n              \u003cellipse cx=\"250\" cy=\"430\" rx=\"140\" ry=\"16\" fill=\"rgba(15, 23, 42, 0.08)\"\u003e\u003c\/ellipse\u003e\n\n              \u003cg filter=\"url(#bottleShadow)\" transform=\"translate(165, 60)\"\u003e\n                \u003crect x=\"30\" y=\"90\" width=\"110\" height=\"270\" rx=\"16\" fill=\"url(#bottleBodyGrad)\" stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"2\"\u003e\u003c\/rect\u003e\n                \u003cline x1=\"38\" y1=\"100\" x2=\"38\" y2=\"350\" stroke=\"rgba(255,255,255,0.4)\" stroke-width=\"4\" stroke-linecap=\"round\"\u003e\u003c\/line\u003e\n                \u003cline x1=\"132\" y1=\"100\" x2=\"132\" y2=\"350\" stroke=\"rgba(0,0,0,0.08)\" stroke-width=\"3\" stroke-linecap=\"round\"\u003e\u003c\/line\u003e\n                \u003crect x=\"34\" y=\"140\" width=\"102\" height=\"215\" rx=\"10\" fill=\"rgba(255,255,255,0.18)\"\u003e\u003c\/rect\u003e\n                \u003ctext x=\"-250\" y=\"68\" transform=\"rotate(-90)\" fill=\"rgba(15,23,42,0.35)\" font-family=\"Plus Jakarta Sans\" font-weight=\"900\" font-size=\"15\" letter-spacing=\"4\"\u003eFROSTY\u003c\/text\u003e\n                \u003crect x=\"52\" y=\"70\" width=\"66\" height=\"22\" rx=\"4\" fill=\"url(#capGrad)\" stroke=\"rgba(0,0,0,0.05)\"\u003e\u003c\/rect\u003e\n                \u003cpath d=\"M 46 20 L 124 20 C 128 20, 130 22, 130 26 L 124 72 L 46 72 L 40 26 C 40 22, 42 20, 46 20 Z\" fill=\"url(#capGrad)\" stroke=\"rgba(255,255,255,0.8)\" stroke-width=\"1.5\"\u003e\u003c\/path\u003e\n                \u003cpath d=\"M 40 26 L 130 26 L 126 38 L 44 38 Z\" fill=\"rgba(255,255,255,0.3)\"\u003e\u003c\/path\u003e\n              \u003c\/g\u003e\n\n              \u003ccircle cx=\"170\" cy=\"180\" r=\"3\" fill=\"#ffffff\" opacity=\"0.7\"\u003e\u003c\/circle\u003e\n              \u003ccircle cx=\"320\" cy=\"240\" r=\"4\" fill=\"#ffffff\" opacity=\"0.6\"\u003e\u003c\/circle\u003e\n              \u003ccircle cx=\"180\" cy=\"310\" r=\"2.5\" fill=\"#ffffff\" opacity=\"0.8\"\u003e\u003c\/circle\u003e\n            \u003c\/svg\u003e\n            \u003cimg id=\"imgGalleryPhoto\" src=\"\" alt=\"Product View\" class=\"hidden w-full h-full object-contain rounded-xl\"\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Thumbnails Selector --\u003e\n        \u003cdiv class=\"flex gap-3 overflow-x-auto no-scrollbar py-1\"\u003e\n          \u003cbutton onclick=\"setActiveThumb(0, 'svg')\" class=\"thumb-btn border-2 border-slate-900 rounded-2xl overflow-hidden w-20 h-20 flex-shrink-0 bg-sky-50 text-slate-900 flex flex-col items-center justify-center gap-1 p-1 hover:opacity-90 transition-all shadow-sm\"\u003e\n            \u003cspan class=\"text-xl\"\u003e🧴\u003c\/span\u003e\n            \u003cspan class=\"text-[10px] font-extrabold text-center leading-tight\"\u003ePastel Render\u003c\/span\u003e\n          \u003c\/button\u003e\n\n          \u003cbutton onclick=\"setActiveThumb(1, 'https:\/\/images.unsplash.com\/photo-1602143407151-7111542de6e8?auto=format\u0026amp;fit=crop\u0026amp;w=800\u0026amp;q=80')\" class=\"thumb-btn border-2 border-slate-200 rounded-2xl overflow-hidden w-20 h-20 flex-shrink-0 bg-slate-100 hover:border-slate-400 transition-all\"\u003e\n            \u003cimg src=\"https:\/\/images.unsplash.com\/photo-1602143407151-7111542de6e8?auto=format\u0026amp;fit=crop\u0026amp;w=200\u0026amp;q=80\" alt=\"Desk View\" class=\"w-full h-full object-cover\"\u003e\n          \u003c\/button\u003e\n\n          \u003cbutton onclick=\"setActiveThumb(2, 'https:\/\/images.unsplash.com\/photo-1523362628745-0c100150b504?auto=format\u0026amp;fit=crop\u0026amp;w=800\u0026amp;q=80')\" class=\"thumb-btn border-2 border-slate-200 rounded-2xl overflow-hidden w-20 h-20 flex-shrink-0 bg-slate-100 hover:border-slate-400 transition-all\"\u003e\n            \u003cimg src=\"https:\/\/images.unsplash.com\/photo-1523362628745-0c100150b504?auto=format\u0026amp;fit=crop\u0026amp;w=200\u0026amp;q=80\" alt=\"Lifestyle Hydration\" class=\"w-full h-full object-cover\"\u003e\n          \u003c\/button\u003e\n\n          \u003cbutton onclick=\"setActiveThumb(3, 'https:\/\/images.unsplash.com\/photo-1544816155-12df9643f363?auto=format\u0026amp;fit=crop\u0026amp;w=800\u0026amp;q=80')\" class=\"thumb-btn border-2 border-slate-200 rounded-2xl overflow-hidden w-20 h-20 flex-shrink-0 bg-slate-100 hover:border-slate-400 transition-all\"\u003e\n            \u003cimg src=\"https:\/\/images.unsplash.com\/photo-1544816155-12df9643f363?auto=format\u0026amp;fit=crop\u0026amp;w=200\u0026amp;q=80\" alt=\"Palette Options\" class=\"w-full h-full object-cover\"\u003e\n          \u003c\/button\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- RIGHT COLUMN: Purchase Details, Variant Selector \u0026 Direct Shopify Buy CTA --\u003e\n      \u003cdiv class=\"lg:col-span-5 flex flex-col w-full\"\u003e\n        \n        \u003cdiv class=\"flex items-center gap-2 mb-1 flex-wrap\"\u003e\n          \u003cspan class=\"text-xs font-black text-[#7026b9] uppercase tracking-wider bg-purple-50 px-2.5 py-1 rounded-md\"\u003eTrending Hydration\u003c\/span\u003e\n          \u003cspan class=\"text-xs font-bold text-slate-500\"\u003e275×65×65 mm • 500ml Capacity\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Product Title (Shopify Dynamic Tag: {{ product.title }}) --\u003e\n        \u003ch1 class=\"text-2xl sm:text-3xl lg:text-4xl font-black text-slate-900 tracking-tight mb-2 leading-tight\" id=\"productTitle\"\u003e\n          Square Frosted Water Bottle\n        \u003c\/h1\u003e\n\n        \u003cp class=\"text-sm font-bold text-slate-600 mb-3\"\u003e\n          Sleek. Sturdy. Spacious! \u003cspan class=\"text-[#7026b9]\"\u003eFits Refrigerator Doors \u0026amp; Car Holders Effortlessly.\u003c\/span\u003e\n        \u003c\/p\u003e\n\n        \u003c!-- Social Proof \u0026 Urgency Bar --\u003e\n        \u003cdiv class=\"flex items-center justify-between gap-2 mb-5 bg-amber-50\/80 border border-amber-200\/60 p-3 rounded-xl flex-wrap\"\u003e\n          \u003cdiv class=\"flex items-center gap-2\"\u003e\n            \u003cdiv class=\"flex text-amber-500 text-sm tracking-wider\"\u003e★★★★★\u003c\/div\u003e\n            \u003cspan class=\"text-xs font-extrabold text-slate-800\"\u003e4.9 \/ 5.0\u003c\/span\u003e\n            \u003cspan class=\"text-slate-300\"\u003e|\u003c\/span\u003e\n            \u003cspan class=\"text-xs font-extrabold text-slate-600\"\u003e3,420+ Buyers\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"text-xs font-extrabold text-rose-600 bg-rose-100\/70 px-2.5 py-1 rounded-lg animate-pulse\"\u003e\n            ⚡ Only 14 items left in stock\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Price Display (Connected to Shopify Price) --\u003e\n        \u003cdiv class=\"flex items-center gap-3 mb-6 flex-wrap\"\u003e\n          \u003c!-- Shopify Tag: {{ product.price | money }} --\u003e\n          \u003cspan class=\"text-3xl font-black text-[#7026b9]\" id=\"displayPrice\"\u003eRs. 399.00\u003c\/span\u003e\n          \u003c!-- Shopify Tag: {{ product.compare_at_price | money }} --\u003e\n          \u003cspan class=\"text-xl font-bold text-slate-400 line-through\" id=\"displayCompare\"\u003eRs. 699.00\u003c\/span\u003e\n          \u003cspan class=\"bg-emerald-500 text-white text-xs font-extrabold px-2.5 py-1 rounded-md flex items-center gap-1 shadow-sm\" id=\"displaySave\"\u003e\n            SAVE 43%\n          \u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- COLOR VARIANT SWATCHES --\u003e\n        \u003cdiv class=\"mb-6\"\u003e\n          \u003clabel class=\"block text-xs font-extrabold text-slate-900 uppercase tracking-wider mb-2.5\"\u003e\n            1. CHOOSE COLOR: \u003cspan id=\"colorNameLabel\" class=\"text-[#7026b9]\"\u003ePastel Blue\u003c\/span\u003e\n          \u003c\/label\u003e\n\n          \u003cdiv class=\"flex items-center gap-3 flex-wrap\"\u003e\n            \u003cbutton onclick=\"changeColor('blue', 'Pastel Blue', '#38bdf8', '#7dd3fc', '#0284c7', '#e0f2fe', '#bae6fd', this, '48920191')\" class=\"color-swatch-btn w-10 h-10 rounded-full border-2 border-slate-900 p-0.5 transition-transform scale-110 shadow-md focus:outline-none\" title=\"Pastel Blue\"\u003e\n              \u003cspan class=\"block w-full h-full rounded-full bg-sky-400\"\u003e\u003c\/span\u003e\n            \u003c\/button\u003e\n\n            \u003cbutton onclick=\"changeColor('pink', 'Soft Pink', '#f472b6', '#fbcfe8', '#db2777', '#fce7f3', '#fbcfe8', this, '48920192')\" class=\"color-swatch-btn w-10 h-10 rounded-full border-2 border-transparent hover:border-slate-300 p-0.5 transition-transform hover:scale-105 focus:outline-none\" title=\"Soft Pink\"\u003e\n              \u003cspan class=\"block w-full h-full rounded-full bg-pink-300\"\u003e\u003c\/span\u003e\n            \u003c\/button\u003e\n\n            \u003cbutton onclick=\"changeColor('green', 'Mint Green', '#4ade80', '#86efac', '#16a34a', '#dcfce7', '#bbf7d0', this, '48920193')\" class=\"color-swatch-btn w-10 h-10 rounded-full border-2 border-transparent hover:border-slate-300 p-0.5 transition-transform hover:scale-105 focus:outline-none\" title=\"Mint Green\"\u003e\n              \u003cspan class=\"block w-full h-full rounded-full bg-emerald-300\"\u003e\u003c\/span\u003e\n            \u003c\/button\u003e\n\n            \u003cbutton onclick=\"changeColor('yellow', 'Butter Yellow', '#facc15', '#fef08a', '#ca8a04', '#fef9c3', '#fef08a', this, '48920194')\" class=\"color-swatch-btn w-10 h-10 rounded-full border-2 border-transparent hover:border-slate-300 p-0.5 transition-transform hover:scale-105 focus:outline-none\" title=\"Butter Yellow\"\u003e\n              \u003cspan class=\"block w-full h-full rounded-full bg-amber-200\"\u003e\u003c\/span\u003e\n            \u003c\/button\u003e\n\n            \u003cbutton onclick=\"changeColor('grey', 'Smoke Grey', '#94a3b8', '#cbd5e1', '#475569', '#f1f5f9', '#e2e8f0', this, '48920195')\" class=\"color-swatch-btn w-10 h-10 rounded-full border-2 border-transparent hover:border-slate-300 p-0.5 transition-transform hover:scale-105 focus:outline-none\" title=\"Smoke Grey\"\u003e\n              \u003cspan class=\"block w-full h-full rounded-full bg-slate-400\"\u003e\u003c\/span\u003e\n            \u003c\/button\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- BUNDLE \/ PACK VALUE SELECTOR --\u003e\n        \u003cdiv class=\"mb-6\"\u003e\n          \u003clabel class=\"block text-xs font-extrabold text-slate-900 uppercase tracking-wider mb-2.5\"\u003e\n            2. SELECT QUANTITY BUNDLE:\n          \u003c\/label\u003e\n          \u003cdiv class=\"grid grid-cols-1 sm:grid-cols-3 gap-2.5\"\u003e\n            \n            \u003cbutton type=\"button\" onclick=\"selectPack(1, 399, 699, '43%', 'Single Bottle (1 Pc)', this, '48920191')\" class=\"pack-pill border-2 border-slate-900 bg-slate-900 text-white rounded-2xl p-3 text-left transition-all flex flex-col justify-between\"\u003e\n              \u003cdiv\u003e\n                \u003cdiv class=\"text-xs font-black\"\u003ePack of 1\u003c\/div\u003e\n                \u003cdiv class=\"text-[11px] text-slate-300 font-medium\"\u003eRs. 399 \/ pc\u003c\/div\u003e\n              \u003c\/div\u003e\n              \u003cspan class=\"mt-2 text-[9px] font-extrabold uppercase text-slate-300\"\u003eStandard\u003c\/span\u003e\n            \u003c\/button\u003e\n\n            \u003cbutton type=\"button\" onclick=\"selectPack(3, 899, 1499, '40%', 'Trio Combo (Pack of 3)', this, '48920196')\" class=\"pack-pill border-2 border-slate-200 bg-white text-slate-900 rounded-2xl p-3 text-left transition-all hover:border-slate-400 flex flex-col justify-between\"\u003e\n              \u003cdiv\u003e\n                \u003cdiv class=\"text-xs font-black\"\u003ePack of 3\u003c\/div\u003e\n                \u003cdiv class=\"text-[11px] text-[#7026b9] font-bold\"\u003eRs. 299 \/ pc\u003c\/div\u003e\n              \u003c\/div\u003e\n              \u003cspan class=\"mt-2 bg-[#7026b9] text-white text-[9px] font-extrabold uppercase px-1.5 py-0.5 rounded w-fit\"\u003eMost Popular\u003c\/span\u003e\n            \u003c\/button\u003e\n\n            \u003cbutton type=\"button\" onclick=\"selectPack(6, 1499, 2699, '44%', 'Family Set (Pack of 6)', this, '48920197')\" class=\"pack-pill border-2 border-slate-200 bg-white text-slate-900 rounded-2xl p-3 text-left transition-all hover:border-slate-400 flex flex-col justify-between\"\u003e\n              \u003cdiv\u003e\n                \u003cdiv class=\"text-xs font-black\"\u003ePack of 6\u003c\/div\u003e\n                \u003cdiv class=\"text-[11px] text-emerald-600 font-bold\"\u003eRs. 249 \/ pc\u003c\/div\u003e\n              \u003c\/div\u003e\n              \u003cspan class=\"mt-2 bg-emerald-500 text-white text-[9px] font-extrabold uppercase px-1.5 py-0.5 rounded w-fit\"\u003eBest Value\u003c\/span\u003e\n            \u003c\/button\u003e\n\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- DIRECT SHOPIFY CHECKOUT CTA BUTTON --\u003e\n        \u003cdiv class=\"mb-6\" id=\"topCtaAnchor\"\u003e\n          \u003cbutton onclick=\"goToShopifyCheckout()\" class=\"animate-cute-pulse w-full bg-gradient-to-r from-[#7026b9] via-purple-700 to-[#5c1e9b] hover:from-[#5c1e9b] hover:to-[#4a1680] text-white p-4 rounded-2xl font-black text-lg shadow-xl shadow-purple-900\/25 active:scale-[0.98] transition-all flex flex-col items-center group relative overflow-hidden\"\u003e\n            \u003cdiv class=\"flex items-center justify-between w-full z-10\"\u003e\n              \u003cdiv class=\"flex items-center gap-2\"\u003e\n                \u003cspan class=\"text-2xl animate-bounce\"\u003e🛍️\u003c\/span\u003e\n                \u003cspan class=\"tracking-wide uppercase text-base sm:text-lg\"\u003eBUY NOW • DIRECT CHECKOUT\u003c\/span\u003e\n              \u003c\/div\u003e\n\n              \u003cdiv class=\"bg-white\/95 backdrop-blur px-2.5 py-1 rounded-full flex items-center gap-1.5 shadow-sm\"\u003e\n                \u003cspan class=\"text-[10px] font-extrabold text-slate-800\"\u003eUPI \/ COD\u003c\/span\u003e\n                \u003cspan class=\"text-xs\"\u003e⚡\u003c\/span\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cspan class=\"text-[11px] font-bold text-purple-200 mt-1.5 w-full text-center tracking-tight z-10\"\u003e\n              Direct Route to Official Shopify Payment Gateway • Free Express Shipping\n            \u003c\/span\u003e\n          \u003c\/button\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Trust Badges Block --\u003e\n        \u003cdiv class=\"grid grid-cols-3 gap-2 border border-slate-200 rounded-2xl p-3 text-center bg-slate-50\/50\"\u003e\n          \u003cdiv class=\"flex flex-col items-center\"\u003e\n            \u003cspan class=\"text-lg\"\u003e🛡️\u003c\/span\u003e\n            \u003cspan class=\"text-[11px] font-extrabold text-slate-900 mt-1\"\u003e10-Day Replacement\u003c\/span\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"flex flex-col items-center\"\u003e\n            \u003cspan class=\"text-lg\"\u003e🚚\u003c\/span\u003e\n            \u003cspan class=\"text-[11px] font-extrabold text-slate-900 mt-1\"\u003eFree COD Nationwide\u003c\/span\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"flex flex-col items-center\"\u003e\n            \u003cspan class=\"text-lg\"\u003e🔒\u003c\/span\u003e\n            \u003cspan class=\"text-[11px] font-extrabold text-slate-900 mt-1\"\u003e100% Encrypted Checkout\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- SECTION 1: IN-ACTION GIF DEMO PLACEHOLDER --\u003e\n    \u003csection class=\"mt-16 bg-slate-900 text-white rounded-3xl p-6 sm:p-10 shadow-xl overflow-hidden relative\"\u003e\n      \u003cdiv class=\"max-w-3xl mx-auto text-center mb-6\"\u003e\n        \u003cspan class=\"bg-purple-500\/20 text-purple-300 border border-purple-400\/30 text-xs font-black uppercase px-3 py-1 rounded-full\"\u003e\n          See It In Action\n        \u003c\/span\u003e\n        \u003ch2 class=\"text-2xl sm:text-4xl font-black mt-3\"\u003eWatch How the Square Bottle Fits \u0026amp; Performs\u003c\/h2\u003e\n        \u003cp class=\"text-slate-400 text-xs sm:text-sm font-medium mt-1\"\u003e\n          Smooth pouring, zero leakages, and instant space-saving inside refrigerator doors.\n        \u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- GIF MEDIA PLACEHOLDER CONTAINER --\u003e\n      \u003cdiv class=\"max-w-3xl mx-auto aspect-video rounded-2xl overflow-hidden bg-slate-800 border border-slate-700 relative flex items-center justify-center group\"\u003e\n        \u003c!-- Replace 'src' below with your actual GIF URL when uploading to Shopify --\u003e\n        \u003cimg id=\"productGifMedia\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0755\/3204\/2423\/files\/faucet_modes_demo.gif?v=1788703013\" alt=\"Product GIF Demo Placeholder\" class=\"w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity\"\u003e\n        \n        \u003c!-- Animated Overlay Banner --\u003e\n        \u003cdiv class=\"absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent flex flex-col justify-end p-6\"\u003e\n          \u003cdiv class=\"flex items-center gap-3 bg-white\/10 backdrop-blur-md px-4 py-2 rounded-xl border border-white\/20 w-fit\"\u003e\n            \u003cspan class=\"w-3 h-3 rounded-full bg-emerald-400 animate-ping\"\u003e\u003c\/span\u003e\n            \u003cspan class=\"text-xs font-black uppercase text-white tracking-wider\"\u003eGIF Preview Spot: [Replace src with product-demo.gif]\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003c!-- SECTION 2: 3 VISUAL BENEFIT MEDIA CARDS --\u003e\n    \u003csection class=\"mt-16\"\u003e\n      \u003cdiv class=\"text-center max-w-2xl mx-auto mb-10\"\u003e\n        \u003ch2 class=\"text-2xl sm:text-3xl font-black text-slate-900 tracking-tight\"\u003e\n          Designed for Modern, Effortless Hydration\n        \u003c\/h2\u003e\n        \u003cp class=\"text-sm font-bold text-slate-500 mt-2\"\u003e\n          Key advantages that make this product superior to ordinary alternatives.\n        \u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"grid grid-cols-1 md:grid-cols-3 gap-6\"\u003e\n        \n        \u003c!-- Media Card 1 --\u003e\n        \u003cdiv class=\"bg-slate-50 border border-slate-200 rounded-3xl p-5 flex flex-col items-start hover:shadow-lg transition-all group\"\u003e\n          \u003cdiv class=\"w-full aspect-[4\/3] rounded-2xl bg-slate-200 overflow-hidden mb-4 relative\"\u003e\n            \u003c!-- MEDIA PLACEHOLDER IMAGE 1 --\u003e\n            \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0755\/3204\/2423\/files\/2.jpg?v=1788961485\" alt=\"Media Placeholder 1\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\u003e\n            \u003cspan class=\"absolute top-3 left-3 bg-slate-900\/80 text-white text-[10px] font-black px-2.5 py-1 rounded-lg backdrop-blur\"\u003e\n              Media Spot #1\n            \u003c\/span\u003e\n          \u003c\/div\u003e\n          \u003ch3 class=\"text-lg font-black text-slate-900 mb-1\"\u003eStylish Pastel Aesthetic\u003c\/h3\u003e\n          \u003cp class=\"text-xs text-slate-600 leading-relaxed font-medium\"\u003e\n            Crafted with high-grade BPA-free frosted plastic. Soft matte texture provides a non-slip luxury grip for home, gym, and office.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Media Card 2 --\u003e\n        \u003cdiv class=\"bg-slate-50 border border-slate-200 rounded-3xl p-5 flex flex-col items-start hover:shadow-lg transition-all group\"\u003e\n          \u003cdiv class=\"w-full aspect-[4\/3] rounded-2xl bg-slate-200 overflow-hidden mb-4 relative\"\u003e\n            \u003c!-- MEDIA PLACEHOLDER IMAGE 2 --\u003e\n            \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0755\/3204\/2423\/files\/51WK2Y3Q0DL._SL1024.jpg?v=1788961485\" alt=\"Media Placeholder 2\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\u003e\n            \u003cspan class=\"absolute top-3 left-3 bg-slate-900\/80 text-white text-[10px] font-black px-2.5 py-1 rounded-lg backdrop-blur\"\u003e\n              Media Spot #2\n            \u003c\/span\u003e\n          \u003c\/div\u003e\n          \u003ch3 class=\"text-lg font-black text-slate-900 mb-1\"\u003eSmart Space Savings\u003c\/h3\u003e\n          \u003cp class=\"text-xs text-slate-600 leading-relaxed font-medium\"\u003e\n            Flat edges prevent rolling and fit compactly side-by-side in refrigerator doors, backpack pockets, and car holders without wasted gaps.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Media Card 3 --\u003e\n        \u003cdiv class=\"bg-slate-50 border border-slate-200 rounded-3xl p-5 flex flex-col items-start hover:shadow-lg transition-all group\"\u003e\n          \u003cdiv class=\"w-full aspect-[4\/3] rounded-2xl bg-slate-200 overflow-hidden mb-4 relative\"\u003e\n            \u003c!-- MEDIA PLACEHOLDER IMAGE 3 --\u003e\n            \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0755\/3204\/2423\/files\/31vzMrAt6PL.jpg?v=1788961485?auto=format\u0026amp;fit=crop\u0026amp;w=600\u0026amp;q=80\" alt=\"Media Placeholder 3\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\u003e\n            \u003cspan class=\"absolute top-3 left-3 bg-slate-900\/80 text-white text-[10px] font-black px-2.5 py-1 rounded-lg backdrop-blur\"\u003e\n              Media Spot #3\n            \u003c\/span\u003e\n          \u003c\/div\u003e\n          \u003ch3 class=\"text-lg font-black text-slate-900 mb-1\"\u003e100% Leak-Proof Cap\u003c\/h3\u003e\n          \u003cp class=\"text-xs text-slate-600 leading-relaxed font-medium\"\u003e\n            Precision threaded cap with airtight silicone seal guarantees zero spills or leakages even when placed upside down in travel bags.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003c!-- Dimension \u0026 Specification Banner --\u003e\n    \u003csection class=\"mt-12 bg-gradient-to-r from-sky-500 via-sky-600 to-indigo-600 text-white rounded-3xl p-8 sm:p-12 relative overflow-hidden shadow-xl\"\u003e\n      \u003cdiv class=\"max-w-xl z-10 relative\"\u003e\n        \u003cspan class=\"bg-white\/20 backdrop-blur text-white text-xs font-black uppercase px-3 py-1 rounded-full tracking-wider\"\u003e\n          Dimensions: 275×65×65 mm\n        \u003c\/span\u003e\n        \u003ch2 class=\"text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight mt-4 mb-3 leading-tight\"\u003e\n          SEAMLESSLY FITS IN SLIM SPACES\n        \u003c\/h2\u003e\n        \u003cp class=\"text-sky-100 text-sm sm:text-base font-medium leading-relaxed mb-6\"\u003e\n          With a compact footprint of 275×65×65 mm, this bottle slides smoothly into narrow car compartments, tight gym bag pockets, and packed refrigerator side shelves.\n        \u003c\/p\u003e\n\n        \u003cdiv class=\"flex items-center gap-4 flex-wrap\"\u003e\n          \u003cdiv class=\"bg-white\/10 backdrop-blur border border-white\/20 px-4 py-2.5 rounded-2xl flex items-center gap-2\"\u003e\n            \u003cspan class=\"text-xl\"\u003e🚗\u003c\/span\u003e\n            \u003cspan class=\"text-xs font-bold\"\u003eCar Cup Holders\u003c\/span\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"bg-white\/10 backdrop-blur border border-white\/20 px-4 py-2.5 rounded-2xl flex items-center gap-2\"\u003e\n            \u003cspan class=\"text-xl\"\u003e🧊\u003c\/span\u003e\n            \u003cspan class=\"text-xs font-bold\"\u003eFridge Side Doors\u003c\/span\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"bg-white\/10 backdrop-blur border border-white\/20 px-4 py-2.5 rounded-2xl flex items-center gap-2\"\u003e\n            \u003cspan class=\"text-xl\"\u003e🎒\u003c\/span\u003e\n            \u003cspan class=\"text-xs font-bold\"\u003eBackpack Pockets\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003c!-- Comparison Table Section (Sales Psychology - Direct Contrast) --\u003e\n    \u003csection class=\"mt-12 bg-white border border-slate-200 rounded-3xl p-6 sm:p-10 shadow-sm\"\u003e\n      \u003ch2 class=\"text-2xl sm:text-3xl font-black text-center text-slate-900 mb-2\"\u003e\n        Square Design vs Standard Round Bottles\n      \u003c\/h2\u003e\n      \u003cp class=\"text-slate-500 text-center text-xs sm:text-sm font-medium mb-8\"\u003e\n        Why switching to modern square frosted design makes daily storage far smarter.\n      \u003c\/p\u003e\n\n      \u003cdiv class=\"overflow-x-auto rounded-2xl border border-slate-200 bg-white\"\u003e\n        \u003ctable class=\"w-full text-left text-sm border-collapse min-w-[550px]\"\u003e\n          \u003cthead\u003e\n            \u003ctr class=\"bg-slate-900 text-white font-bold\"\u003e\n              \u003cth class=\"p-4\"\u003eFeature \/ Aspect\u003c\/th\u003e\n              \u003cth class=\"p-4 bg-[#7026b9]\"\u003eLifestyle Ventures™ Square Bottle\u003c\/th\u003e\n              \u003cth class=\"p-4\"\u003eStandard Round Bottles\u003c\/th\u003e\n            \u003c\/tr\u003e\n          \u003c\/thead\u003e\n          \u003ctbody class=\"divide-y divide-slate-100\"\u003e\n            \u003ctr\u003e\n              \u003ctd class=\"p-4 font-extrabold text-slate-900\"\u003eFridge Space Efficiency\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-emerald-600 font-bold bg-purple-50\/30\"\u003e✔ 100% Space Efficient (Zero gaps)\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-rose-500 font-semibold\"\u003e✖ Wastes 30% empty space between curves\u003c\/td\u003e\n            \u003c\/tr\u003e\n            \u003ctr\u003e\n              \u003ctd class=\"p-4 font-extrabold text-slate-900\"\u003eRolling \u0026amp; Slipping\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-emerald-600 font-bold bg-purple-50\/30\"\u003e✔ Anti-roll flat sides stay put\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-rose-500 font-semibold\"\u003e✖ Rolls off shelves \u0026amp; tables easily\u003c\/td\u003e\n            \u003c\/tr\u003e\n            \u003ctr\u003e\n              \u003ctd class=\"p-4 font-extrabold text-slate-900\"\u003eFinish \u0026amp; Grip\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-emerald-600 font-bold bg-purple-50\/30\"\u003e✔ Soft Frosted Matte Grip\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-rose-500 font-semibold\"\u003e✖ Slippery glossy plastic surface\u003c\/td\u003e\n            \u003c\/tr\u003e\n            \u003ctr\u003e\n              \u003ctd class=\"p-4 font-extrabold text-slate-900\"\u003eBPA Free \u0026amp; Food Safe\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-emerald-600 font-bold bg-purple-50\/30\"\u003e✔ Certified Food-Grade Plastic\u003c\/td\u003e\n              \u003ctd class=\"p-4 text-slate-500 font-semibold\"\u003e❓ Generic unverified plastic source\u003c\/td\u003e\n            \u003c\/tr\u003e\n          \u003c\/tbody\u003e\n        \u003c\/table\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003c!-- FAQ Section (Objection Busting) --\u003e\n    \u003csection class=\"mt-12 bg-slate-50 border border-slate-200 rounded-3xl p-6 sm:p-10\"\u003e\n      \u003cdiv class=\"max-w-2xl mx-auto\"\u003e\n        \u003ch2 class=\"text-2xl sm:text-3xl font-black text-center text-slate-900 mb-2\"\u003e\n          Frequently Asked Questions\n        \u003c\/h2\u003e\n        \u003cp class=\"text-xs text-center font-bold text-slate-500 mb-8\"\u003eGot questions? We've got answers.\u003c\/p\u003e\n\n        \u003cdiv class=\"space-y-3\"\u003e\n          \u003cdetails class=\"bg-white border border-slate-200 rounded-2xl p-4 cursor-pointer group\"\u003e\n            \u003csummary class=\"font-extrabold text-slate-900 text-sm flex justify-between items-center list-none\"\u003e\n              Is this bottle safe for storing warm or hot liquids?\n              \u003cspan class=\"text-purple-600 group-open:rotate-180 transition-transform\"\u003e▼\u003c\/span\u003e\n            \u003c\/summary\u003e\n            \u003cp class=\"text-xs text-slate-600 mt-2 leading-relaxed\"\u003e\n              It is designed for room temperature, chilled, and ice cold beverages up to 60°C. Made from 100% BPA-free food-grade plastic.\n            \u003c\/p\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails class=\"bg-white border border-slate-200 rounded-2xl p-4 cursor-pointer group\"\u003e\n            \u003csummary class=\"font-extrabold text-slate-900 text-sm flex justify-between items-center list-none\"\u003e\n              How does Cash on Delivery (COD) work?\n              \u003cspan class=\"text-purple-600 group-open:rotate-180 transition-transform\"\u003e▼\u003c\/span\u003e\n            \u003c\/summary\u003e\n            \u003cp class=\"text-xs text-slate-600 mt-2 leading-relaxed\"\u003e\n              Simply select Cash on Delivery at checkout. Pay our delivery partner in cash or via UPI scan when your parcel arrives at your doorstep!\n            \u003c\/p\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails class=\"bg-white border border-slate-200 rounded-2xl p-4 cursor-pointer group\"\u003e\n            \u003csummary class=\"font-extrabold text-slate-900 text-sm flex justify-between items-center list-none\"\u003e\n              What is the replacement policy if damaged?\n              \u003cspan class=\"text-purple-600 group-open:rotate-180 transition-transform\"\u003e▼\u003c\/span\u003e\n            \u003c\/summary\u003e\n            \u003cp class=\"text-xs text-slate-600 mt-2 leading-relaxed\"\u003e\n              We offer a 10-day hassle-free replacement guarantee. If there is any defect upon arrival, contact us for instant replacement.\n            \u003c\/p\u003e\n          \u003c\/details\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n  \u003c\/main\u003e\n\n  \u003c!-- MIDDLE SCROLL-TRIGGERED STICKY BOTTOM BAR (Appears ONLY in the middle, not at start!) --\u003e\n  \u003cdiv id=\"stickyBottomBar\" class=\"fixed bottom-0 left-0 right-0 z-50 bg-white\/95 backdrop-blur border-t border-slate-200 shadow-2xl p-3 sm:p-4 transform translate-y-full opacity-0 transition-all duration-300 pointer-events-none\"\u003e\n    \u003cdiv class=\"max-w-7xl mx-auto flex items-center justify-between gap-4\"\u003e\n      \n      \u003cdiv class=\"flex items-center gap-3\"\u003e\n        \u003cdiv class=\"w-10 h-10 sm:w-12 sm:h-12 bg-purple-100 rounded-xl flex-shrink-0 flex items-center justify-center text-xl\"\u003e\n          🧴\n        \u003c\/div\u003e\n        \u003cdiv\u003e\n          \u003ch4 class=\"text-xs sm:text-sm font-extrabold text-slate-900 line-clamp-1 max-w-[140px] sm:max-w-xs\" id=\"stickyTitle\"\u003e\n            Square Bottle (Pastel Blue)\n          \u003c\/h4\u003e\n          \u003cdiv class=\"flex items-center gap-2\"\u003e\n            \u003cspan class=\"text-sm sm:text-base font-black text-[#7026b9]\" id=\"stickyPrice\"\u003eRs. 399.00\u003c\/span\u003e\n            \u003cspan class=\"text-xs font-bold text-slate-400 line-through hidden sm:inline\" id=\"stickyCompare\"\u003eRs. 699.00\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"flex items-center gap-3\"\u003e\n        \u003cbutton onclick=\"goToShopifyCheckout()\" class=\"bg-[#7026b9] hover:bg-[#5c1e9b] text-white px-5 py-2.5 sm:px-6 sm:py-3 rounded-xl font-extrabold text-xs sm:text-sm uppercase tracking-wide transition-all shadow-md active:scale-95 whitespace-nowrap\"\u003e\n          BUY NOW • SHOPIFY\n        \u003c\/button\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- CENTER POP-IN BUY NOW MODAL (Pops dead-center when triggered) --\u003e\n  \u003cdiv id=\"centerBuyModal\" class=\"fixed inset-0 z-50 bg-slate-900\/70 backdrop-blur-sm hidden items-center justify-center p-4\"\u003e\n    \u003cdiv class=\"bg-white rounded-3xl p-6 sm:p-8 max-w-md w-full shadow-2xl relative animate-pop-in border border-purple-100\"\u003e\n      \n      \u003cbutton onclick=\"closeCenterModal()\" class=\"absolute top-5 right-5 w-8 h-8 bg-slate-100 hover:bg-slate-200 rounded-full flex items-center justify-center font-bold text-slate-600 transition-colors\"\u003e\n        ✕\n      \u003c\/button\u003e\n\n      \u003cdiv class=\"flex items-center gap-2 text-xs font-black text-purple-700 uppercase bg-purple-50 px-2.5 py-1 rounded-md w-fit mb-2\"\u003e\n        ⚡ Express Checkout\n      \u003c\/div\u003e\n\n      \u003ch3 class=\"text-xl font-black text-slate-900 mb-1\" id=\"modalProductTitle\"\u003eSquare Frosted Water Bottle\u003c\/h3\u003e\n      \u003cp class=\"text-xs text-slate-500 mb-4\"\u003eDirectly connected to Shopify Payment Gateway\u003c\/p\u003e\n\n      \u003cdiv class=\"bg-gradient-to-r from-purple-50 to-sky-50 border border-purple-200 p-4 rounded-2xl mb-5\"\u003e\n        \u003cdiv class=\"text-xs font-extrabold text-slate-900\" id=\"modalSummaryTitle\"\u003eVariant: Pastel Blue • Single Bottle (1 Pc)\u003c\/div\u003e\n        \u003cdiv class=\"text-lg font-black text-[#7026b9] mt-1\" id=\"modalSummaryPrice\"\u003eTotal: Rs. 399.00\u003c\/div\u003e\n        \u003cdiv class=\"text-[10px] font-bold text-emerald-600 mt-0.5\"\u003e✔ Free Express Delivery Included\u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"space-y-3\"\u003e\n        \u003cp class=\"text-xs font-bold text-slate-600\"\u003e\n          Clicking below will transfer your selected variant directly to your official store payment page.\n        \u003c\/p\u003e\n\n        \u003cbutton onclick=\"goToShopifyCheckout()\" class=\"w-full bg-[#7026b9] hover:bg-[#5c1e9b] text-white py-4 rounded-2xl font-extrabold text-sm uppercase tracking-wide transition-all shadow-xl shadow-purple-900\/25 flex items-center justify-center gap-2\"\u003e\n          \u003cspan\u003ePROCEED TO SHOPIFY PAYMENT\u003c\/span\u003e\n          \u003cspan\u003e→\u003c\/span\u003e\n        \u003c\/button\u003e\n\n        \u003cbutton onclick=\"closeCenterModal()\" class=\"w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-xl font-bold text-xs\"\u003e\n          Continue Browsing\n        \u003c\/button\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cscript\u003e\n    \/* \n      ===================================================================\n      UNIVERSAL SHOPIFY PRODUCT PAGE BLUEPRINT CONFIGURATION\n      -------------------------------------------------------------------\n      To re-use this page for ANY product in Shopify:\n      1. Paste this file in Shopify Theme Editor as a custom template.\n      2. Liquid tags like {{ product.title }} can automatically populate this data.\n      ===================================================================\n    *\/\n    const PRODUCT_CONFIG = {\n      \/\/ In Shopify main-product.liquid, replace strings with Liquid bindings:\n      \/\/ title: \"{{ product.title | escape }}\",\n      title: \"Square Frosted Water Bottle\",\n      storeDomain: \"myshopify.com\", \/\/ Replace with your shopify store link\n      selectedVariantId: \"48920191\", \/\/ Default variant ID\n      currentPrice: 399,\n      comparePrice: 699,\n      colorName: \"Pastel Blue\",\n      packTitle: \"Single Bottle (1 Pc)\",\n      packQty: 1\n    };\n\n    \/\/ 1. DYNAMIC COLOR SWATCH SWITCHER\n    function changeColor(key, name, c1, c2, c3, cap1, cap2, btnElem, variantId) {\n      PRODUCT_CONFIG.colorName = name;\n      if (variantId) PRODUCT_CONFIG.selectedVariantId = variantId;\n\n      document.getElementById('colorNameLabel').innerText = name;\n      document.getElementById('badgeColorText').innerText = `${name} Frosted`;\n      document.getElementById('badgeColorDot').style.backgroundColor = c1;\n\n      \/\/ Update SVG Gradient Stops\n      document.getElementById('gradStop1').setAttribute('stop-color', c1);\n      document.getElementById('gradStop2').setAttribute('stop-color', c2);\n      document.getElementById('gradStop3').setAttribute('stop-color', c3);\n      document.getElementById('capStop1').setAttribute('stop-color', cap1);\n      document.getElementById('capStop2').setAttribute('stop-color', cap2);\n\n      \/\/ Swatch focus state\n      document.querySelectorAll('.color-swatch-btn').forEach(b =\u003e {\n        b.className = \"color-swatch-btn w-10 h-10 rounded-full border-2 border-transparent hover:border-slate-300 p-0.5 transition-transform hover:scale-105 focus:outline-none\";\n      });\n      btnElem.className = \"color-swatch-btn w-10 h-10 rounded-full border-2 border-slate-900 p-0.5 transition-transform scale-110 shadow-md focus:outline-none\";\n\n      setActiveThumb(0, 'svg');\n      updateStickyAndModalData();\n    }\n\n    \/\/ 2. DYNAMIC PACK\/BUNDLE SELECTOR\n    function selectPack(pack, price, compare, save, title, btnElem, variantId) {\n      PRODUCT_CONFIG.packQty = pack;\n      PRODUCT_CONFIG.currentPrice = price;\n      PRODUCT_CONFIG.comparePrice = compare;\n      PRODUCT_CONFIG.packTitle = title;\n      if (variantId) PRODUCT_CONFIG.selectedVariantId = variantId;\n\n      document.querySelectorAll('.pack-pill').forEach(el =\u003e {\n        el.className = \"pack-pill border-2 border-slate-200 bg-white text-slate-900 rounded-2xl p-3 text-left transition-all hover:border-slate-400 flex flex-col justify-between\";\n      });\n\n      if(btnElem) {\n        btnElem.className = \"pack-pill border-2 border-slate-900 bg-slate-900 text-white rounded-2xl p-3 text-left transition-all flex flex-col justify-between\";\n      }\n\n      document.getElementById('displayPrice').innerText = `Rs. ${price}.00`;\n      document.getElementById('displayCompare').innerText = `Rs. ${compare}.00`;\n      document.getElementById('displaySave').innerText = `SAVE ${save}`;\n\n      updateStickyAndModalData();\n    }\n\n    \/\/ Update internal state\n    function updateStickyAndModalData() {\n      const formattedTitle = `${PRODUCT_CONFIG.title} (${PRODUCT_CONFIG.colorName}) - Pack of ${PRODUCT_CONFIG.packQty}`;\n      document.getElementById('stickyTitle').innerText = formattedTitle;\n      document.getElementById('stickyPrice').innerText = `Rs. ${PRODUCT_CONFIG.currentPrice}.00`;\n      document.getElementById('stickyCompare').innerText = `Rs. ${PRODUCT_CONFIG.comparePrice}.00`;\n\n      document.getElementById('modalSummaryTitle').innerText = `Variant: ${PRODUCT_CONFIG.colorName} • ${PRODUCT_CONFIG.packTitle}`;\n      document.getElementById('modalSummaryPrice').innerText = `Total Payable: Rs. ${PRODUCT_CONFIG.currentPrice}.00`;\n    }\n\n    \/\/ 3. SHOPIFY DIRECT CHECKOUT INTEGRATION (Bypasses Google Form \u0026 local mock)\n    function goToShopifyCheckout() {\n      \/*\n        Shopify Cart Permalink Format:\n        \/cart\/{variant_id}:{quantity}\n        \n        This automatically lands the user directly on your official Shopify Checkout \/ Payment page!\n      *\/\n      const shopifyCartUrl = `\/cart\/${PRODUCT_CONFIG.selectedVariantId}:${PRODUCT_CONFIG.packQty}`;\n      \n      \/\/ Fallback notification for preview mode\n      const toast = document.createElement('div');\n      toast.className = 'fixed top-6 left-1\/2 -translate-x-1\/2 bg-slate-900 text-white font-extrabold px-6 py-3 rounded-2xl shadow-2xl z-50 text-xs flex items-center gap-2 border border-purple-400 animate-bounce';\n      toast.innerHTML = `🚀 Redirecting to Shopify Checkout: \u003cb\u003e${shopifyCartUrl}\u003c\/b\u003e`;\n      document.body.appendChild(toast);\n      \n      setTimeout(() =\u003e {\n        toast.remove();\n        \/\/ In live Shopify environment, un-comment line below:\n        \/\/ window.location.href = shopifyCartUrl;\n      }, 2500);\n    }\n\n    \/\/ 4. GALLERY THUMBNAIL HANDLER\n    function setActiveThumb(index, type) {\n      const svgVis = document.getElementById('svgBottleVisual');\n      const imgVis = document.getElementById('imgGalleryPhoto');\n\n      document.querySelectorAll('.thumb-btn').forEach((btn, idx) =\u003e {\n        if(idx === index) {\n          btn.classList.add('border-slate-900');\n          btn.classList.remove('border-slate-200');\n        } else {\n          btn.classList.remove('border-slate-900');\n          btn.classList.add('border-slate-200');\n        }\n      });\n\n      if(type === 'svg') {\n        svgVis.classList.remove('hidden');\n        imgVis.classList.add('hidden');\n      } else {\n        svgVis.classList.add('hidden');\n        imgVis.classList.remove('hidden');\n        imgVis.src = type;\n      }\n    }\n\n    \/\/ 5. CENTER POPUP MODAL LOGIC\n    function openCenterModal() {\n      const modal = document.getElementById('centerBuyModal');\n      modal.classList.remove('hidden');\n      modal.classList.add('flex');\n    }\n\n    function closeCenterModal() {\n      const modal = document.getElementById('centerBuyModal');\n      modal.classList.add('hidden');\n      modal.classList.remove('flex');\n    }\n\n    function scrollToMiddleCTA() {\n      document.getElementById('topCtaAnchor').scrollIntoView({ behavior: 'smooth' });\n      openCenterModal();\n    }\n\n    \/\/ 6. SALES PSYCHOLOGY SCROLL TRIGGER\n    \/\/ Sticky bottom bar pops in ONLY after user scrolls to the middle of the screen!\n    window.addEventListener('scroll', () =\u003e {\n      const stickyBar = document.getElementById('stickyBottomBar');\n      const scrollPosition = window.scrollY;\n      const windowHeight = window.innerHeight;\n\n      \/\/ Appears after scrolling 400px (midway down product description)\n      if (scrollPosition \u003e 400) {\n        stickyBar.classList.remove('translate-y-full', 'opacity-0', 'pointer-events-none');\n        stickyBar.classList.add('translate-y-0', 'opacity-100', 'pointer-events-auto');\n      } else {\n        stickyBar.classList.add('translate-y-full', 'opacity-0', 'pointer-events-none');\n        stickyBar.classList.remove('translate-y-0', 'opacity-100', 'pointer-events-auto');\n      }\n    });\n\n    window.addEventListener('DOMContentLoaded', () =\u003e {\n      updateStickyAndModalData();\n    });\n  \u003c\/script\u003e\n\n\u003c\/body\u003e","brand":"My Store","offers":[{"title":"Default Title","offer_id":49137624088759,"sku":null,"price":399.0,"currency_code":"INR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0755\/3204\/2423\/files\/31vzMrAt6PL_fe5db81d-ce41-4a82-bff8-92df21fd1e1e.jpg?v=1788969257","url":"https:\/\/www.lifestyleventures.in\/products\/square-water-bottle-3","provider":"My Store","version":"1.0","type":"link"}