{"product_id":"crimson-koi-pocket-organizer","title":"Crimson Koi Pocket Organizer","description":"\u003cdiv class=\"custom-tabs\"\u003e\n\n    \u003cdiv class=\"tab-buttons\"\u003e\n        \u003cbutton class=\"tab-btn active\" onclick=\"openTab(event,'details')\"\u003eDetails\u003c\/button\u003e\n        \u003cbutton class=\"tab-btn\" onclick=\"openTab(event,'washcare')\"\u003eNotes\u003c\/button\u003e\n        \u003cbutton class=\"tab-btn\" onclick=\"openTab(event,'shipping')\"\u003eShipping\u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- ========== TAB 1: DETAILS (Simple - No Cards) ========== --\u003e\n    \u003cdiv id=\"details\" class=\"tab-content active\"\u003e\n        \u003cdiv class=\"info-card\"\u003e\n            \u003cdiv class=\"card-header\"\u003e\n                \u003ch4\u003eDetails\u003c\/h4\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"card-body\"\u003e\n                \u003cul\u003e\n                    \u003cli\u003eTheme: Growth, Resilience \u0026amp; Inner Strength\u003c\/li\u003e\n                    \u003cli\u003eStyle: Japanese Minimalist • Koi Fish Inspired • Premium\u003c\/li\u003e\n                    \u003cli\u003eMaterial: Premium Leather\u003c\/li\u003e\n                    \u003cli\u003eColor: Midnight Blue\u003c\/li\u003e\n                    \u003cli\u003eClosure: Magnetic Closure\u003c\/li\u003e\n                    \u003cli\u003eCard Slots: 6\u003c\/li\u003e\n                    \u003cli\u003eCash Pockets: 2\u003c\/li\u003e\n                    \u003cli\u003eDimensions: Length: 8.2 cm | Width: 10.3 cm | Thickness: 2 cm\u003c\/li\u003e\n                    \u003cli\u003eIdeal For: Daily Use • Business • Travel • Office • Minimalist Carry • Gifting\u003c\/li\u003e\n                \u003c\/ul\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"info-card\"\u003e\n            \u003cdiv class=\"card-header\"\u003e\n                \u003ch4\u003eDescription\u003c\/h4\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"card-body\"\u003e\n                \u003cp\u003e Escape the noise and embrace every journey with the MoonVoyage Pocket Organizer. Inspired by the serenity of a moonlit lake, majestic mountains, and the spirit of quiet exploration, this organizer is designed for those who value focus, simplicity, and purposeful living. \u003c\/p\u003e\n                \u003cp\u003e Crafted from premium leather with a secure magnetic closure, it offers a perfect blend of elegance and everyday functionality. Featuring 6 card slots and 2 cash pockets, it keeps your daily essentials neatly organized while maintaining a slim, pocket-friendly profile.\u003c\/p\u003e\n                \u003cp\u003e\n                    Whether you're heading to work, traveling, or simply organizing your day, the MoonVoyage Pocket Organizer is more than just an accessory—it's a reminder to \"Sail Beyond the Noise\" and move forward with clarity and confidence.\n                \u003c\/p\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n    \u003c!-- ========== TAB 2: NOTES (Card Design) ========== --\u003e\n    \u003cdiv id=\"washcare\" class=\"tab-content\"\u003e\n        \u003cdiv class=\"info-card highlight-card\"\u003e\n            \u003cdiv class=\"card-header\"\u003e\n                \u003cspan class=\"card-icon\"\u003e\u003c\/span\u003e\n                \u003ch4\u003eImportant Note\u003c\/h4\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"card-body\"\u003e\n                \u003cp\u003e The UV print used on this pocket organizer is highly durable and scratch-resistant, helping the\n                    design maintain its premium appearance even with regular everyday use. \u003c\/p\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- ========== TAB 3: SHIPPING (Card Design) ========== --\u003e\n    \u003cdiv id=\"shipping\" class=\"tab-content\"\u003e\n        \u003cdiv class=\"info-card\"\u003e\n            \u003cdiv class=\"card-header\"\u003e\n                \u003cspan class=\"card-icon\"\u003e\u003c\/span\u003e\n                \u003ch4\u003eShipping Information\u003c\/h4\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"card-body\"\u003e\n                \u003cul class=\"shipping-list\"\u003e\n                    \u003cli\u003e\n                        \u003cspan class=\"ship-icon\"\u003e\u003c\/span\u003e\n                        \u003cspan class=\"ship-text\"\u003e\u003cstrong\u003eDispatch\u003c\/strong\u003e within 24-48 hours\u003c\/span\u003e\n                    \u003c\/li\u003e\n                    \u003cli\u003e\n                        \u003cspan class=\"ship-icon\"\u003e\u003c\/span\u003e\n                        \u003cspan class=\"ship-text\"\u003e\u003cstrong\u003eDelivery\u003c\/strong\u003e in 3-7 business days\u003c\/span\u003e\n                    \u003c\/li\u003e\n                    \u003cli\u003e\n                        \u003cspan class=\"ship-icon\"\u003e\u003c\/span\u003e\n                        \u003cspan class=\"ship-text\"\u003e\u003cstrong\u003eTracking\u003c\/strong\u003e details provided via email\u003c\/span\u003e\n                    \u003c\/li\u003e\n                    \u003cli\u003e\n                        \u003cspan class=\"ship-icon\"\u003e\u003c\/span\u003e\n                        \u003cspan class=\"ship-text\"\u003e\u003cstrong\u003eWorldwide\u003c\/strong\u003e shipping available\u003c\/span\u003e\n                    \u003c\/li\u003e\n                \u003c\/ul\u003e\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n    \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n    \/* ============ MAIN CONTAINER ============ *\/\n    .custom-tabs {\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        border-radius: 20px;\n        padding: 18px;\n        background: #ffffff;\n        width: 100%;\n        max-width: 100%;\n        box-sizing: border-box;\n        overflow: visible;\n    }\n\n    \/* ================================================================== *\/\n    \/*           iPHONE iOS 26 LIQUID GLASS TAB BAR                       *\/\n    \/* ================================================================== *\/\n\n    .tab-buttons {\n        display: flex;\n        justify-content: space-between;\n        align-items: stretch;\n        position: relative;\n        width: 100%;\n\n        background: rgba(120, 120, 128, 0.08);\n        border-radius: 100px;\n        padding: 4px;\n        margin-bottom: 18px;\n        gap: 0;\n\n        backdrop-filter: blur(40px) saturate(240%);\n        -webkit-backdrop-filter: blur(40px) saturate(240%);\n\n        box-shadow:\n            0 8px 30px rgba(0, 0, 0, 0.07),\n            0 2px 8px rgba(0, 0, 0, 0.05),\n            0 0 0 0.5px rgba(0, 0, 0, 0.04),\n            inset 0 0.5px 0 rgba(255, 255, 255, 0.6);\n\n        border: 1px solid rgba(255, 255, 255, 0.25);\n        box-sizing: border-box;\n        overflow: visible;\n    }\n\n    \/* ================================================================== *\/\n    \/*                    INDIVIDUAL TAB BUTTONS                           *\/\n    \/* ================================================================== *\/\n\n    .tab-btn {\n        flex: 1;\n        min-width: 0;\n        border: none;\n        background: transparent;\n        padding: 12px 16px;\n        border-radius: 100px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;\n        font-size: 14px;\n        font-weight: 500;\n        letter-spacing: -0.2px;\n        color: rgba(60, 60, 67, 0.5);\n\n        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);\n        position: relative;\n        z-index: 2;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-tap-highlight-color: transparent;\n        user-select: none;\n        -webkit-user-select: none;\n        box-sizing: border-box;\n        height: 100%;\n    }\n\n    .tab-btn:hover {\n        color: rgba(60, 60, 67, 0.7);\n    }\n\n    \/* ================================================================== *\/\n    \/*            ACTIVE TAB - REAL APPLE LIQUID GLASS                    *\/\n    \/* ================================================================== *\/\n\n    .tab-btn.active {\n        color: rgba(0, 0, 0, 0.85);\n        font-weight: 590;\n\n        background: linear-gradient(160deg,\n                rgba(255, 255, 255, 0.65) 0%,\n                rgba(255, 255, 255, 0.35) 20%,\n                rgba(255, 255, 255, 0.15) 45%,\n                rgba(255, 255, 255, 0.2) 70%,\n                rgba(255, 255, 255, 0.4) 100%);\n\n        border: 1px solid rgba(255, 255, 255, 0.5);\n\n        box-shadow:\n            0 3px 12px rgba(0, 0, 0, 0.1),\n            0 1px 3px rgba(0, 0, 0, 0.06),\n            inset 0 0.5px 0 rgba(255, 255, 255, 0.85),\n            inset 0 -1px 0 rgba(0, 0, 0, 0.05);\n\n        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);\n    }\n\n    .tab-btn.active::before {\n        content: '';\n        position: absolute;\n        top: 2px;\n        left: 8px;\n        right: 8px;\n        height: 30%;\n        background: linear-gradient(180deg,\n                rgba(255, 255, 255, 0.7) 0%,\n                rgba(255, 255, 255, 0.2) 50%,\n                transparent 100%);\n        border-radius: 100px 100px 50% 50%;\n        pointer-events: none;\n        z-index: 3;\n    }\n\n    \/* ================================================================== *\/\n    \/*        SLIDING LIQUID PILL                                         *\/\n    \/* ================================================================== *\/\n\n    .tab-buttons::before {\n        content: '';\n        position: absolute;\n        top: 4px;\n        left: 4px;\n        width: calc((100% - 8px) \/ 3);\n        height: calc(100% - 8px);\n\n        background: linear-gradient(160deg,\n                rgba(255, 255, 255, 0.7) 0%,\n                rgba(255, 255, 255, 0.4) 20%,\n                rgba(255, 255, 255, 0.18) 45%,\n                rgba(255, 255, 255, 0.22) 70%,\n                rgba(255, 255, 255, 0.45) 100%);\n\n        border-radius: 100px;\n        border: 1px solid rgba(255, 255, 255, 0.5);\n\n        box-shadow:\n            0 3px 10px rgba(0, 0, 0, 0.1),\n            0 1px 3px rgba(0, 0, 0, 0.06),\n            inset 0 0.5px 0 rgba(255, 255, 255, 0.85),\n            inset 0 -1px 0 rgba(0, 0, 0, 0.05);\n\n        z-index: 1;\n        pointer-events: none;\n        box-sizing: border-box;\n\n        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n\n    .tab-buttons::after {\n        content: '';\n        position: absolute;\n        top: 5px;\n        left: 5px;\n        width: calc((100% - 10px) \/ 3);\n        height: 25%;\n\n        background: linear-gradient(180deg,\n                rgba(255, 255, 255, 0.65) 0%,\n                rgba(255, 255, 255, 0.1) 100%);\n\n        border-radius: 100px 100px 50% 50%;\n        pointer-events: none;\n        z-index: 4;\n\n        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n\n    \/* Sliding positions *\/\n    .tab-buttons[data-active=\"details\"]::before,\n    .tab-buttons[data-active=\"details\"]::after {\n        transform: translateX(0);\n    }\n\n    .tab-buttons[data-active=\"washcare\"]::before,\n    .tab-buttons[data-active=\"washcare\"]::after {\n        transform: translateX(100%);\n    }\n\n    .tab-buttons[data-active=\"shipping\"]::before,\n    .tab-buttons[data-active=\"shipping\"]::after {\n        transform: translateX(200%);\n    }\n\n    \/* ================================================================== *\/\n    \/*                    SPRING PRESS ANIMATION                          *\/\n    \/* ================================================================== *\/\n\n    .tab-btn:active {\n        transform: scale(0.94);\n        transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);\n    }\n\n    \/* ================================================================== *\/\n    \/*             TAB 1 - DETAILS (Simple Styling - No Cards)            *\/\n    \/* ================================================================== *\/\n\n    #details.tab-content {\n        display: none;\n        animation: appleReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n\n    #details.tab-content.active {\n        display: block;\n    }\n\n    #details h4 {\n        margin: 6px 0 10px 0;\n        color: #1d1d1f;\n        font-weight: 620;\n        font-size: 17px;\n        letter-spacing: -0.3px;\n        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;\n    }\n\n    #details ul {\n        padding-left: 20px;\n        margin: 0;\n    }\n\n    #details ul li {\n        font-size: 14px;\n        line-height: 1.7;\n        color: #3a3a3c;\n        padding: 2px 0;\n        letter-spacing: -0.1px;\n    }\n\n    #details p {\n        line-height: 1.65;\n        color: #3a3a3c;\n        font-size: 14px;\n        letter-spacing: -0.1px;\n        margin-bottom: 8px;\n    }\n\n    \/* ================================================================== *\/\n    \/*          TAB 2 \u0026 3 - CARD STYLING (Notes \u0026 Shipping)              *\/\n    \/* ================================================================== *\/\n\n    #washcare.tab-content,\n    #shipping.tab-content {\n        display: none;\n        animation: appleReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n\n    #washcare.tab-content.active,\n    #shipping.tab-content.active {\n        display: block;\n    }\n\n    @keyframes appleReveal {\n        0% {\n            opacity: 0;\n            transform: translateY(6px) scale(0.98);\n            filter: blur(4px);\n        }\n\n        100% {\n            opacity: 1;\n            transform: translateY(0) scale(1);\n            filter: blur(0);\n        }\n    }\n\n    \/* ================================================================== *\/\n    \/*              🆕 INFO CARDS - APPLE STYLE GLASS CARDS               *\/\n    \/* ================================================================== *\/\n\n    .info-card {\n        background: rgba(255, 255, 255, 0.8);\n        backdrop-filter: blur(20px) saturate(180%);\n        -webkit-backdrop-filter: blur(20px) saturate(180%);\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        border-radius: 16px;\n        padding: 16px;\n        box-shadow:\n            0 2px 10px rgba(0, 0, 0, 0.04),\n            0 1px 3px rgba(0, 0, 0, 0.03);\n        transition: all 0.3s ease;\n        overflow: hidden;\n        position: relative;\n      margin: 20px 0px;\n    }\n\n    .info-card::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background: linear-gradient(90deg,\n                transparent 0%,\n                rgba(255, 255, 255, 0.6) 20%,\n                rgba(255, 255, 255, 0.8) 50%,\n                rgba(255, 255, 255, 0.6) 80%,\n                transparent 100%);\n        pointer-events: none;\n    }\n\n    .info-card:hover {\n        box-shadow:\n            0 4px 16px rgba(0, 0, 0, 0.06),\n            0 1px 4px rgba(0, 0, 0, 0.04);\n        transform: translateY(-1px);\n    }\n\n    \/* Highlight card (Notes) *\/\n    .highlight-card {\n        background: linear-gradient(160deg,\n                rgba(255, 255, 255, 0.9) 0%,\n                rgba(245, 248, 255, 0.9) 100%);\n        border: 1px solid rgba(100, 150, 255, 0.15);\n        border-left: 3px solid rgba(0, 122, 255, 0.4);\n    }\n\n    \/* Card Header *\/\n    .card-header {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-bottom: 12px;\n        padding-bottom: 10px;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.04);\n    }\n\n    .card-icon {\n        font-size: 18px;\n        line-height: 1;\n    }\n\n    .card-header h4 {\n        margin: 0;\n        color: #1d1d1f;\n        font-weight: 620;\n        font-size: 16px;\n        letter-spacing: -0.3px;\n        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;\n    }\n\n    \/* Card Body *\/\n    .card-body {\n        color: #3a3a3c;\n    }\n\n    .card-body p {\n        line-height: 1.65;\n        color: #3a3a3c;\n        font-size: 13px;\n        letter-spacing: -0.1px;\n        margin: 0;\n    }\n\n    \/* Shipping List *\/\n    .shipping-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    }\n\n    .shipping-list li {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        padding: 10px 12px;\n        background: rgba(0, 0, 0, 0.02);\n        border-radius: 10px;\n        font-size: 13px;\n        transition: all 0.2s ease;\n    }\n\n    .shipping-list li:hover {\n        background: rgba(0, 0, 0, 0.04);\n    }\n\n    .ship-icon {\n        font-size: 16px;\n        flex-shrink: 0;\n    }\n\n    .ship-text {\n        color: #3a3a3c;\n        line-height: 1.4;\n    }\n\n    .ship-text strong {\n        color: #1d1d1f;\n        font-weight: 600;\n    }\n\n    \/* ================================================================== *\/\n    \/*                    📱 MOBILE RESPONSIVE                            *\/\n    \/* ================================================================== *\/\n\n    @media (max-width: 480px) {\n        .custom-tabs {\n            padding: 12px;\n            border-radius: 16px;\n        }\n\n        .tab-buttons {\n            padding: 3px;\n            border-radius: 80px;\n            margin-bottom: 14px;\n            backdrop-filter: blur(35px) saturate(220%);\n            -webkit-backdrop-filter: blur(35px) saturate(220%);\n        }\n\n        .tab-btn {\n            font-size: 12px;\n            padding: 10px 12px;\n            border-radius: 80px;\n        }\n\n        .tab-btn.active::before {\n            top: 1px;\n            left: 6px;\n            right: 6px;\n            height: 28%;\n        }\n\n        .tab-buttons::before {\n            top: 3px;\n            left: 3px;\n            width: calc((100% - 6px) \/ 3);\n            height: calc(100% - 6px);\n            border-radius: 80px;\n        }\n\n        .tab-buttons::after {\n            top: 4px;\n            left: 4px;\n            width: calc((100% - 8px) \/ 3);\n            height: 22%;\n            border-radius: 80px 80px 50% 50%;\n        }\n\n        #details h4 {\n            font-size: 15px;\n        }\n\n        #details ul li {\n            font-size: 13px;\n            line-height: 1.6;\n        }\n\n        #details p {\n            font-size: 13px;\n            line-height: 1.55;\n        }\n\n        .info-card {\n            padding: 12px;\n            border-radius: 14px;\n        }\n\n        .card-header {\n            margin-bottom: 10px;\n            padding-bottom: 8px;\n        }\n\n        .card-header h4 {\n            font-size: 14px;\n        }\n\n        .card-icon {\n            font-size: 16px;\n        }\n\n        .card-body p {\n            font-size: 12px;\n        }\n\n        .shipping-list li {\n            font-size: 12px;\n            padding: 8px 10px;\n        }\n\n        .ship-icon {\n            font-size: 14px;\n        }\n    }\n\n    @media (max-width: 370px) {\n        .custom-tabs {\n            padding: 10px;\n            border-radius: 14px;\n        }\n\n        .tab-buttons {\n            padding: 2px;\n            border-radius: 70px;\n            margin-bottom: 10px;\n        }\n\n        .tab-btn {\n            font-size: 11px;\n            padding: 9px 8px;\n            border-radius: 70px;\n        }\n\n        .tab-btn.active::before {\n            top: 1px;\n            left: 4px;\n            right: 4px;\n            height: 25%;\n        }\n\n        .tab-buttons::before {\n            top: 2px;\n            left: 2px;\n            width: calc((100% - 4px) \/ 3);\n            height: calc(100% - 4px);\n            border-radius: 70px;\n        }\n\n        .tab-buttons::after {\n            top: 3px;\n            left: 3px;\n            width: calc((100% - 6px) \/ 3);\n            height: 20%;\n            border-radius: 70px 70px 50% 50%;\n        }\n\n        #details h4 {\n            font-size: 14px;\n        }\n\n        #details ul li,\n        #details p {\n            font-size: 12px;\n        }\n\n        .info-card {\n            padding: 10px;\n            border-radius: 12px;\n        }\n\n        .card-header h4 {\n            font-size: 13px;\n        }\n\n        .card-body p {\n            font-size: 11px;\n        }\n\n        .shipping-list li {\n            font-size: 11px;\n            padding: 6px 8px;\n        }\n    }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n    function openTab(evt, tabName) {\n        var tabcontent = document.getElementsByClassName(\"tab-content\");\n        var tabbtn = document.getElementsByClassName(\"tab-btn\");\n        var i;\n\n        for (i = 0; i \u003c tabcontent.length; i++) {\n            tabcontent[i].classList.remove(\"active\");\n        }\n\n        for (i = 0; i \u003c tabbtn.length; i++) {\n            tabbtn[i].classList.remove(\"active\");\n        }\n\n        document.getElementById(tabName).classList.add(\"active\");\n        evt.currentTarget.classList.add(\"active\");\n\n        var tabContainer = document.querySelector('.tab-buttons');\n        tabContainer.setAttribute('data-active', tabName);\n\n        var btn = evt.currentTarget;\n\n        btn.style.transition = 'transform 0.08s cubic-bezier(0.25, 0.1, 0.25, 1)';\n        btn.style.transform = 'scale(0.91)';\n\n        setTimeout(function () {\n            btn.style.transition = 'transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275)';\n            btn.style.transform = 'scale(1.04)';\n\n            setTimeout(function () {\n                btn.style.transition = 'transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1)';\n                btn.style.transform = 'scale(0.97)';\n\n                setTimeout(function () {\n                    btn.style.transition = 'transform 0.12s cubic-bezier(0.25, 0.1, 0.25, 1)';\n                    btn.style.transform = 'scale(1)';\n                }, 100);\n            }, 200);\n        }, 60);\n    }\n\n    (function () {\n        var tabContainer = document.querySelector('.tab-buttons');\n        if (tabContainer \u0026\u0026 !tabContainer.getAttribute('data-active')) {\n            tabContainer.setAttribute('data-active', 'details');\n        }\n    })();\n\u003c\/script\u003e","brand":"Stelth","offers":[{"title":"Default Title","offer_id":43079590346814,"sku":null,"price":1499.0,"currency_code":"INR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0670\/9316\/8190\/files\/FullSizeRender.jpg?v=1783769735","url":"https:\/\/www.thestelth.com\/products\/crimson-koi-pocket-organizer","provider":"Stelth","version":"1.0","type":"link"}