{"id":1748,"date":"2025-12-02T07:29:08","date_gmt":"2025-12-02T07:29:08","guid":{"rendered":"https:\/\/super-fizzy.com\/?page_id=1748"},"modified":"2025-12-03T11:00:29","modified_gmt":"2025-12-03T11:00:29","slug":"original","status":"publish","type":"page","link":"https:\/\/super-fizzy.com\/ar\/our-drinks\/original\/","title":{"rendered":"\u0627\u0644\u0646\u0643\u0647\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1748\" class=\"elementor elementor-1748\">\n\t\t\t\t<div class=\"elementor-element elementor-element-21b0515 e-flex e-con-boxed e-con e-parent\" data-id=\"21b0515\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_bottom&quot;:&quot;waves&quot;,&quot;shape_divider_top&quot;:&quot;waves&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7\tc23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4\tc21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7\tc23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4\tc21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89fca4d elementor-widget elementor-widget-heading\" data-id=\"89fca4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">\u0627\u0644\u0646\u0643\u0647\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5d53ce1 e-flex e-con-boxed e-con e-parent\" data-id=\"5d53ce1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top&quot;:&quot;waves&quot;,&quot;shape_divider_top_negative&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"true\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M790.5,93.1c-59.3-5.3-116.8-18-192.6-50c-29.6-12.7-76.9-31-100.5-35.9c-23.6-4.9-52.6-7.8-75.5-5.3\tc-10.2,1.1-22.6,1.4-50.1,7.4c-27.2,6.3-58.2,16.6-79.4,24.7c-41.3,15.9-94.9,21.9-134,22.6C72,58.2,0,25.8,0,25.8V100h1000V65.3\tc0,0-51.5,19.4-106.2,25.7C839.5,97,814.1,95.2,790.5,93.1z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4798dda e-con-full e-flex e-con e-parent\" data-id=\"4798dda\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top&quot;:&quot;waves&quot;,&quot;shape_divider_bottom&quot;:&quot;waves&quot;}\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7\tc23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4\tc21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7\tc23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4\tc21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0ebdf4 elementor-widget elementor-widget-html\" data-id=\"f0ebdf4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 60px 0px;\r\n            text-align: center;\r\n        }\r\n\r\n        .slider-title {\r\n            text-align: center;\r\n            font-size: 35px;\r\n            margin-bottom: 10px;\r\n            font-weight: 900;\r\n            color:#000;\r\n            letter-spacing: -1px;\r\n        }\r\n\r\n        .slider-title .italic {\r\n            font-family: 'Georgia', serif;\r\n            font-style: italic;\r\n            font-weight: normal;\r\n        }\r\n\r\n        .carousel-wrapper {\r\n            position: relative;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .carousel-container {\r\n            position: relative;\r\n            height: 420px;\r\n            overflow: hidden;\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        .carousel-track {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 40px;\r\n            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n            will-change: transform;\r\n            padding: 0 50px;\r\n        }\r\n\r\n.carousel-item {\r\n    flex-shrink: 0;\r\n    width: 220px;\r\n    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    transform: scale(0.7);\r\n    display: none; \/* hide all by default *\/\r\n}\r\n\r\n.carousel-item.visible {\r\n    display: block; \/* show only controlled items *\/\r\n}\r\n\r\n.carousel-item.active {\r\n    transform: scale(1.2);\r\n}\r\n\r\n.carousel-item.adjacent-1 {\r\n    transform: scale(1);\r\n}\r\n\r\n.carousel-item.adjacent-2 {\r\n    transform: scale(0.9);\r\n}\r\n.carousel-track {\r\n  visibility: hidden;\r\n}\r\n\r\n.carousel-track.ready {\r\n  visibility: visible;\r\n}\r\n\r\n\r\n        .carousel-item img {\r\n            width: 100px;\r\n            margin: auto;\r\n            height: auto;\r\n            display: block;\r\n        }\r\n\r\n        .carousel-nav {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            background: none;\r\n            border: none;\r\n            font-size: 48px;\r\n            color: #333;\r\n            cursor: pointer;\r\n            padding: 10px 20px;\r\n            z-index: 20;\r\n            transition: color 0.3s ease;\r\n            font-weight: 300;\r\n            user-select: none;\r\n        }\r\n\r\n        .carousel-nav:hover {\r\n            color: #000;\r\n        }\r\n\r\n        .carousel-nav.prev {\r\n            left: 39%;\r\n            box-shadow: 0 0 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .carousel-nav.next {\r\n            right: 39%;\r\n            box-shadow: 0 0 0;\r\n            padding: 0;\r\n        }\r\n        \r\n        .carousel-nav:hover, .carousel-nav:focus {\r\n            background: transparent;\r\n            color: #000;\r\n        }\r\n\r\n        .product-info {\r\n            text-align: center;\r\n            margin-top: 10px;\r\n        }\r\n\r\n        .flavor-title {\r\n            font-size: 25px;\r\n            line-height: 30px;\r\n            font-weight: 800;\r\n            margin-bottom: 10px !imporant;\r\n            text-transform: uppercase;\r\n            color:#000;\r\n        }\r\n\r\n        .flavor-title .plus {\r\n            display: inline-block;\r\n            background: #000;\r\n            color: #fff;\r\n            width: 30px;\r\n            height: 30px;\r\n            line-height: 30px;\r\n            border-radius: 50%;\r\n            margin: 0 15px;\r\n            font-size: 24px;\r\n        }\r\n\r\n        .flavor-description {\r\n            font-size: clamp(16px, 2vw, 22px);\r\n            font-weight: normal;\r\n            color: #000;\r\n            margin-bottom: 10px !important;\r\n            font-family: Arial, sans-serif;\r\n            \r\n        }\r\n        \r\n        \r\n        \r\n        \r\n.gradient-shadow {\r\n    position: relative;\r\n    display: inline-block;\r\n    font-weight: 900;\r\n    color: #000;      \/* black text *\/\r\n    z-index: 0;       \/* create stacking context *\/\r\n    font-size: 35px;\r\n}\r\n\r\n.gradient-shadow::before {\r\n    content: attr(data-text);\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    transform: translate(2px, 2px);  \/* shadow offset *\/\r\n    z-index: -1;                     \/* go behind the main text *\/\r\n\r\n    background: linear-gradient(\r\n        90deg,\r\n        #ff0000,\r\n        #ff7a00,\r\n        #ffea00,\r\n        #a6ff00,\r\n        #00ff6a,\r\n        #00c8ff,\r\n        #0043ff,\r\n        #7a00ff\r\n    );\r\n    -webkit-background-clip: text;\r\n    color: transparent;\r\n}\r\n        \r\n        \r\n\r\n        .shop-btn {\r\n            \/*background: #3e407a;*\/\r\n                box-shadow: 3px 3px #000 !important;\r\n    border: solid 3px #000 !important;\r\n            color: #fff;\r\n            border: none;\r\n            font-size: 18px;\r\n            border-radius: 50px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .shop-btn:hover {\r\n            background: #333;\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        @media (max-width: 1200px) {\r\n            .carousel-item {\r\n                width: 180px;\r\n            }\r\n            \r\n            .carousel-track {\r\n                gap: 30px;\r\n            }\r\n            \r\n            .carousel-nav.prev {\r\n                left: 5%;\r\n            }\r\n            \r\n            .carousel-nav.next {\r\n                right: 5%;\r\n            }\r\n        }\r\n\r\n  @media (max-width: 768px) {\r\n    .carousel-container {\r\n        height: 350px; \/* smaller height *\/\r\n    }\r\n\r\n    .carousel-item {\r\n        width: 120px;\r\n    }\r\n\r\n    .carousel-item.active {\r\n        transform: scale(1.15);\r\n    }\r\n\r\n    .carousel-item.adjacent-1 {\r\n        transform: scale(1);\r\n    }\r\n\r\n    .carousel-item.adjacent-2 {\r\n        transform: scale(0.85);\r\n    }\r\n\r\n    .carousel-track {\r\n        gap: 15px;\r\n    }\r\n\r\n    .carousel-nav {\r\n        font-size: 32px;\r\n    }\r\n\r\n    .carousel-nav.prev {\r\n        left: 36%;\r\n    }\r\n\r\n    .carousel-nav.next {\r\n        right: 36%;\r\n    }\r\n\r\n    .flavor-title .plus {\r\n        width: 25px;\r\n        height: 25px;\r\n        line-height: 25px;\r\n        font-size: 16px;\r\n        margin: 0 8px;\r\n    }\r\n            .carousel-item img {\r\n            width: 85px;\r\n        }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .carousel-container {\r\n        height: 225px;\r\n    }\r\n\r\n    .carousel-item {\r\n        width: 90px;\r\n    }\r\n\r\n    .carousel-item.active {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    .carousel-item.adjacent-1 {\r\n        transform: scale(0.95);\r\n    }\r\n\r\n    .carousel-item.adjacent-2 {\r\n        transform: scale(0.8);\r\n    }\r\n\r\n    .carousel-track {\r\n        gap: 10px;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    .carousel-nav {\r\n        font-size: 28px;\r\n            width: 16px;\r\n    }\r\n\r\n    .carousel-nav.prev {\r\n        left: 32%;\r\n    }\r\n\r\n    .carousel-nav.next {\r\n        right: 32%;\r\n    }\r\n\r\n    .flavor-title {\r\n        font-size: 18px;\r\n    }\r\n\r\n    .flavor-title .plus {\r\n        width: 20px;\r\n        height: 20px;\r\n        line-height: 20px;\r\n        font-size: 14px;\r\n        margin: 0 5px;\r\n    }\r\n\r\n    .flavor-description {\r\n        font-size: 14px;\r\n    }\r\n        .carousel-item img {\r\n        width: 56px;\r\n    }\r\n}\r\n@media (max-width: 350px) {\r\n        .carousel-nav.prev {\r\n        left: 27%;\r\n    }\r\n\r\n    .carousel-nav.next {\r\n        right: 27%;\r\n    }\r\n}\r\n.flavor-desc {height:90px;}\r\n\r\n\r\n\/* Make carousel items positioned so ::before works *\/\r\n.carousel-item {\r\n    position: relative;\r\n}\r\n\r\n\/* The colored circle that appears behind active can *\/\r\n.carousel-item.active::before {\r\n    content: '';\r\n    position: absolute;\r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: var(--circle-color);\r\n    border-radius: 50%;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    z-index: -1;\r\n    opacity: 0.9;\r\n    transition: background-color 0.6s ease;\r\n}\r\n\r\n\/* Responsive sizes for smaller screens *\/\r\n@media (max-width: 768px) {\r\n    .carousel-item.active::before {\r\n        width: 140px;\r\n        height: 140px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .carousel-item.active::before {\r\n        width: 110px;\r\n        height: 110px;\r\n    }\r\n}\r\n\r\n.carousel-item.active::after {\r\n    content: '';\r\n    position: absolute;\r\n    width: 80px;\r\n    height: 80px;\r\n    background-image: url('\/wp-content\/uploads\/2025\/10\/doodle_Burst-scaled.webp');\r\n    background-size: contain;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    top: 0%;\r\n    left: 76%;\r\n    transform: translate(-50%, -50%);\r\n    z-index: -1;\r\n    opacity: 0.8;\r\n}\r\n<\/style>\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"carousel-wrapper\">\r\n            <div class=\"carousel-container\">\r\n                <button class=\"carousel-nav prev\" onclick=\"moveCarousel(-1)\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/10\/Line_5_Stroke.webp\"><\/button>\r\n                \r\n                <div class=\"carousel-track\" id=\"carouselTrack\">\r\n                    <!-- Items will be generated by JavaScript -->\r\n                <\/div>\r\n                \r\n                <button class=\"carousel-nav next\" onclick=\"moveCarousel(1)\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/10\/Line_5_Stroke-right.png\"><\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"product-info\" id=\"productInfo\">\r\n            <div class=\"flavor-title\">\r\n                <div class=\"flavor-desc\">\r\n                <span id=\"flavorName\">GINGER <span class=\"plus\">+<\/span> LEMON <span class=\"plus\">+<\/span> TURMERIC<\/span>\r\n            \r\n            <p class=\"flavor-description\" id=\"flavorDesc\">bright & tart, a zesty refresh<\/p>\r\n            \r\n            <\/div>\r\n            <button class=\"shop-btn\">\u0627\u0643\u062a\u0634\u0641 \u0645\u0632\u0627\u062c\u0643 \u0627\u0644\u064a\u0648\u0645<\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n const products = [\r\n    { \r\n        name: '\u062a\u0648\u062a\u064a \u0641\u0631\u0648\u062a\u064a', \r\n        desc: '\u0627\u0644\u0637\u0639\u0645 \u0627\u0644\u0645\u062c\u0646\u0648\u0646',\r\n        img: '\/wp-content\/uploads\/2025\/10\/tutti-frutti-small.webp',\r\n        link: '\/ar\/products\/tutti-frutti',\r\n        color: '#0077be' \/\/ green\r\n    },\r\n    { \r\n        name: '\u062a\u0631\u0628\u0644 \u0628\u064a\u0631\u064a', \r\n        desc: '\u0645\u0632\u0627\u062c\u0643 \u062b\u0644\u0627\u062b\u064a',\r\n        img: '\/wp-content\/uploads\/2025\/11\/tripleberry-1.webp',\r\n        link: '\/ar\/products\/triple-berry',\r\n        color: '#2C5F9F' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0644\u0627\u064a\u0645', \r\n        desc: '\u0641\u0631\u064a\u0634 \u0639\u0644\u0649 \u0637\u0648\u0644',\r\n        img: '\/wp-content\/uploads\/2025\/10\/lime-small.webp',\r\n        link: '\/ar\/products\/lime',\r\n        color: '#6BBD4D' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0628\u0644\u0648\u0628\u064a\u0631\u064a', \r\n        desc: '\u0627\u0644\u0646\u0643\u0647\u0629 \u0627\u0644\u0644\u064a \u062a\u062c\u0645\u0639\u0646\u0627',\r\n        img: '\/wp-content\/uploads\/2025\/11\/blueberry-1.webp',\r\n        link: '\/ar\/products\/blueberry',\r\n        color: '#2C5F9F' \/\/ green\r\n    },\r\n    { \r\n        name: '\u062e\u0648\u062e \u0648\u0645\u0627\u0646\u062c\u0648', \r\n        desc: '\u0627\u0644\u0637\u0639\u0645 \u0627\u0644\u0623\u0633\u0637\u0648\u0631\u064a',\r\n        img: '\/wp-content\/uploads\/2025\/10\/mango-peach-small.webp',\r\n        link: '\/ar\/products\/mango-peach',\r\n        color: '#EC5643' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0628\u0637\u064a\u062e', \r\n        desc: '\u0646\u0643\u0647\u0629 \u062a\u0639\u064a\u0634\u0643 \u0641\u064a \u0627\u0644\u0635\u064a\u0641',\r\n        img: '\/wp-content\/uploads\/2025\/10\/watermelon-small.webp',\r\n        link: '\/ar\/products\/watermelon',\r\n        color: '#4AAC48' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0627\u0644\u0631\u0645\u0627\u0646', \r\n        desc: '\u0637\u0639\u0645 \u0627\u0644\u0641\u062e\u0627\u0645\u0629',\r\n        img: '\/wp-content\/uploads\/2025\/10\/pomegranate-small.webp',\r\n        link: '\/ar\/products\/pomegranate',\r\n        color: '#E7194F' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0639\u0644\u0643\u0629', \r\n        desc: '\u0646\u0643\u0647\u0629 \u0627\u0644\u0633\u0639\u0627\u062f\u0629',\r\n        img: '\/wp-content\/uploads\/2025\/10\/bubble-gum-small.webp',\r\n        link: '\/ar\/products\/bubble-gum',\r\n        color: '#EF62A2' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0628\u064a\u0646\u0627 \u0643\u0648\u0644\u0627\u062f\u0627', \r\n        desc: '\u0627\u0633\u062a\u0648\u0627\u0626\u064a \u0628\u0643\u0644 \u0644\u062d\u0638\u0629',\r\n        img: '\/wp-content\/uploads\/2025\/10\/pina-colada-small.webp',\r\n        link: '\/products\/pina-colada',\r\n        color: '#00788C' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0639\u0646\u0628', \r\n        desc: '\u062d\u0644\u0627\u0648\u0629 \u0643\u0644 \u0644\u062d\u0638\u0629',\r\n        img: '\/wp-content\/uploads\/2025\/10\/grape-small.webp',\r\n        link: '\/ar\/products\/grape',\r\n        color: '#9A268E' \/\/ green\r\n    },\r\n    { \r\n        name: '\u0645\u0648\u0647\u064a\u062a\u0648',\r\n        desc: '\u0637\u0639\u0645 \u064a\u0641\u062c\u0631 \u0627\u0644\u0627\u0646\u062a\u0639\u0627\u0634',\r\n        img: '\/wp-content\/uploads\/2025\/10\/mojito-small.webp',\r\n        link: '\/ar\/products\/mojito',\r\n        color: '#3CAE49' \/\/ green\r\n    }\r\n];\r\n\r\n\r\n        const track = document.getElementById('carouselTrack');\r\n        const totalProducts = products.length;\r\n        let currentIndex = 0;\r\n        const clonesCount = 3; \/\/ Number of clones on each side\r\n\r\n        \/\/ Create infinite carousel by cloning items\r\n        function initCarousel() {\r\n            \/\/ Clone items before (for backward infinite scroll)\r\n            for (let i = totalProducts - clonesCount; i < totalProducts; i++) {\r\n                const clone = createCarouselItem(products[i], i);\r\n                track.appendChild(clone);\r\n            }\r\n\r\n            \/\/ Add original items\r\n            products.forEach((product, i) => {\r\n                const item = createCarouselItem(product, i);\r\n                track.appendChild(item);\r\n            });\r\n\r\n            \/\/ Clone items after (for forward infinite scroll)\r\n            for (let i = 0; i < clonesCount; i++) {\r\n                const clone = createCarouselItem(products[i], i);\r\n                track.appendChild(clone);\r\n            }\r\n\r\n            currentIndex = clonesCount + 2; \/\/ Start at original third item\r\n            updateCarousel(false);\r\n        }\r\n\r\n        function createCarouselItem(product, dataIndex) {\r\n            const div = document.createElement('div');\r\n            div.className = 'carousel-item';\r\n            div.setAttribute('data-index', dataIndex);\r\n            div.innerHTML = `<img decoding=\"async\" src=\"${product.img}\" alt=\"${product.name}\">`;\r\n            return div;\r\n        }\r\n        \r\n        \r\n\r\nfunction updateCarousel(animated = true) {\r\n    const items = Array.from(track.querySelectorAll('.carousel-item'));\r\n    \r\n    if (!animated) {\r\n        track.style.transition = 'none';\r\n    }\r\n    \r\n    items.forEach(item => {\r\n        item.classList.remove('active', 'adjacent-1', 'adjacent-2', 'visible');\r\n        item.style.display = \"none\";\r\n        \/\/ Clear circle color from all items\r\n        item.style.removeProperty('--circle-color');\r\n    });\r\n    \r\n    for (let i = -2; i <= 2; i++) {\r\n        let index = (currentIndex + i + items.length) % items.length;\r\n        const item = items[index];\r\n        item.style.display = \"block\";\r\n        item.classList.add('visible');\r\n        \r\n        if (i === 0) {\r\n            item.classList.add('active');\r\n        } else if (Math.abs(i) === 1) {\r\n            item.classList.add('adjacent-1');\r\n        } else if (Math.abs(i) === 2) {\r\n            item.classList.add('adjacent-2');\r\n        }\r\n    }\r\n    \r\n    \/\/ --- Position track so active item is centered ---\r\n    const containerWidth = track.parentElement.offsetWidth;\r\n    const activeItem = items[currentIndex];\r\n    const activeRect = activeItem.getBoundingClientRect();\r\n    const trackRect = track.getBoundingClientRect();\r\n    const activeCenter = activeRect.left + activeRect.width \/ 2 - trackRect.left;\r\n    const containerCenter = containerWidth \/ 2;\r\n    let shift = containerCenter - activeCenter;\r\n    \r\n    \/\/ \u2705 Fix for RTL: reverse the shift\r\n    const isRTL = document.dir === \"rtl\" || getComputedStyle(track).direction === \"rtl\";\r\n    if (isRTL) {\r\n        shift = -(containerCenter - activeCenter);\r\n    }\r\n    \r\n    track.style.transform = `translateX(${shift}px)`;\r\n    \r\n    if (!animated) {\r\n        track.offsetHeight; \/\/ force reflow\r\n        track.style.transition = '';\r\n    }\r\n    \r\n    const productIndex = parseInt(activeItem.getAttribute('data-index'));\r\n    updateProductInfo(productIndex);\r\n    \r\n    \/\/ Set the circle color for the active item\r\n    activeItem.style.setProperty('--circle-color', products[productIndex].color);\r\n}\r\n\r\n\r\n        function updateProductInfo(index) {\r\n    document.getElementById('flavorName').innerHTML = products[index].name;\r\n    document.getElementById('flavorDesc').textContent = products[index].desc;\r\n\r\n    \/\/ \u2705 Update button link\r\n    const btn = document.querySelector('.shop-btn');\r\n    btn.onclick = () => window.location.href = products[index].link;\r\n    \r\n        \/\/ \ud83c\udfa8 Change button color dynamically\r\n    btn.style.backgroundColor = products[index].color;\r\n    \r\n        }\r\n\r\n        function moveCarousel(direction) {\r\n            currentIndex += direction;\r\n            const items = track.querySelectorAll('.carousel-item');\r\n            \r\n            updateCarousel(true);\r\n\r\n            \/\/ Check if we need to loop back\r\n            setTimeout(() => {\r\n                if (currentIndex <= clonesCount - 1) {\r\n                    \/\/ Jumped to clones at the beginning, reset to end of originals\r\n                    currentIndex = clonesCount + totalProducts - 1;\r\n                    updateCarousel(false);\r\n                } else if (currentIndex >= clonesCount + totalProducts) {\r\n                    \/\/ Jumped to clones at the end, reset to beginning of originals\r\n                    currentIndex = clonesCount;\r\n                    updateCarousel(false);\r\n                }\r\n            }, 600); \/\/ Match transition duration\r\n        }\r\n\r\n        \/\/ Initialize carousel\r\n        initCarousel();\r\n\r\n        \/\/ Handle window resize\r\n        let resizeTimer;\r\n        window.addEventListener('resize', () => {\r\n            clearTimeout(resizeTimer);\r\n            resizeTimer = setTimeout(() => {\r\n                updateCarousel(false);\r\n            }, 250);\r\n        });\r\n        \r\n        window.addEventListener(\"load\", () => {\r\n    updateCarousel(false);\r\n    track.classList.add(\"ready\");\r\n});\r\n\r\n\r\n\r\nfunction imagesLoaded(parentNode) {\r\n  const imgElements = parentNode.querySelectorAll(\"img\");\r\n  return Promise.all(\r\n    Array.from(imgElements).map(img => {\r\n      if (img.complete) return Promise.resolve();\r\n      return new Promise(resolve => {\r\n        img.onload = resolve;\r\n        img.onerror = resolve; \/\/ still resolve on error\r\n      });\r\n    })\r\n  );\r\n}\r\n\r\n\/\/ Usage\r\nwindow.addEventListener(\"load\", () => {\r\n  imagesLoaded(document.querySelector(\".carousel-track\")).then(() => {\r\n    updateCarousel(false);\r\n    setTimeout(() => updateCarousel(false), 100); \/\/ extra safeguard\r\n  });\r\n});\r\n\r\n\r\nimagesLoaded(document.querySelector(\".carousel-track\")).then(() => {\r\n  updateCarousel(false);\r\n  document.querySelector(\".carousel-track\").classList.add(\"ready\");\r\n});\r\n\r\n\r\n    <\/script>\r\n    \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Original GINGER + LEMON + TURMERIC bright &#038; tart, a zesty refresh Explore Your Mood! GINGER + LEMON + TURMERIC bright &#038; tart, a zesty refresh Learn More<\/p>","protected":false},"author":1,"featured_media":0,"parent":1309,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1748","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/pages\/1748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/comments?post=1748"}],"version-history":[{"count":0,"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/pages\/1748\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/pages\/1309"}],"wp:attachment":[{"href":"https:\/\/super-fizzy.com\/ar\/wp-json\/wp\/v2\/media?parent=1748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}