tabexseriescomponents 0.0.239 → 0.0.241

package/dist/index.umd.js

@@ -913,21 +913,251 @@
     var css_248z$J = ".image-gallery_image-gallery-icon__WE2UX {\n\tcolor: #fff;\n\ttransition: all .3s ease-out;\n\tappearance: none;\n\tbackground-color: transparent;\n\tborder: 0;\n\tcursor: pointer;\n\toutline: none;\n\tposition: absolute;\n\tz-index: 4;\n    display: none !important;\n\t/* filter: drop-shadow(0 2px 2px #1a1a1a); */\n}\n\n@media(hover: hover)and (pointer: fine) {\n\t.image-gallery_image-gallery-icon__WE2UX:hover {\n\t\tcolor: var(--secondary)\n\t}\n\n\t.image-gallery_image-gallery-icon__WE2UX:hover .image-gallery_image-gallery-svg__XloJd {\n\t\ttransform: scale(1.1)\n\t}\n}\n\n.image-gallery_image-gallery-icon__WE2UX:focus {\n\toutline: 2px solid #000\n}\n\n.image-gallery_image-gallery-using-mouse__lBKAU .image-gallery_image-gallery-icon__WE2UX:focus {\n\toutline: none\n}\n\n.image-gallery_image-gallery-fullscreen-button__xyF3z,\n.image-gallery_image-gallery-play-button__2AS3J {\n\tbottom: 0;\n\tpadding: 20px\n}\n\n.image-gallery_image-gallery-fullscreen-button__xyF3z .image-gallery_image-gallery-svg__XloJd,\n.image-gallery_image-gallery-play-button__2AS3J .image-gallery_image-gallery-svg__XloJd {\n\theight: 28px;\n\twidth: 28px\n}\n\n@media(max-width: 768px) {\n\n\t.image-gallery_image-gallery-fullscreen-button__xyF3z,\n\t.image-gallery_image-gallery-play-button__2AS3J {\n\t\tpadding: 15px\n\t}\n\n\t.image-gallery_image-gallery-fullscreen-button__xyF3z .image-gallery_image-gallery-svg__XloJd,\n\t.image-gallery_image-gallery-play-button__2AS3J .image-gallery_image-gallery-svg__XloJd {\n\t\theight: 24px;\n\t\twidth: 24px\n\t}\n}\n\n@media(max-width: 480px) {\n\n\t.image-gallery_image-gallery-fullscreen-button__xyF3z,\n\t.image-gallery_image-gallery-play-button__2AS3J {\n\t\tpadding: 10px\n\t}\n\n\t.image-gallery_image-gallery-fullscreen-button__xyF3z .image-gallery_image-gallery-svg__XloJd,\n\t.image-gallery_image-gallery-play-button__2AS3J .image-gallery_image-gallery-svg__XloJd {\n\t\theight: 16px;\n\t\twidth: 16px\n\t}\n}\n\n.image-gallery_image-gallery-fullscreen-button__xyF3z {\n\tright: 0\n}\n\n.image-gallery_image-gallery-play-button__2AS3J {\n\tleft: 0\n}\n\n.image-gallery_image-gallery-left-nav__BmHmk,\n.image-gallery_image-gallery-right-nav__53hut {\n\tpadding: 50px 10px;\n\ttop: 50%;\n\ttransform: translateY(-50%)\n}\n\n.image-gallery_image-gallery-left-nav__BmHmk .image-gallery_image-gallery-svg__XloJd,\n.image-gallery_image-gallery-right-nav__53hut .image-gallery_image-gallery-svg__XloJd {\n\theight: 120px;\n\twidth: 60px\n}\n\n@media(max-width: 768px) {\n\n\t.image-gallery_image-gallery-left-nav__BmHmk .image-gallery_image-gallery-svg__XloJd,\n\t.image-gallery_image-gallery-right-nav__53hut .image-gallery_image-gallery-svg__XloJd {\n\t\theight: 72px;\n\t\twidth: 36px\n\t}\n}\n\n@media(max-width: 480px) {\n\n\t.image-gallery_image-gallery-left-nav__BmHmk .image-gallery_image-gallery-svg__XloJd,\n\t.image-gallery_image-gallery-right-nav__53hut .image-gallery_image-gallery-svg__XloJd {\n\t\theight: 48px;\n\t\twidth: 24px\n\t}\n}\n\n.image-gallery_image-gallery-left-nav__BmHmk[disabled],\n.image-gallery_image-gallery-right-nav__53hut[disabled] {\n\tcursor: disabled;\n\topacity: .6;\n\tpointer-events: none\n}\n\n.image-gallery_image-gallery-left-nav__BmHmk {\n\tleft: 0\n}\n\n.image-gallery_image-gallery-right-nav__53hut {\n\tright: 0\n}\n\n.image-gallery_image-gallery__FfPQj {\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\t-o-user-select: none;\n\tuser-select: none;\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\tposition: relative\n}\n\n.image-gallery_image-gallery__FfPQj.image-gallery_fullscreen-modal__KM6Xw {\n\tbackground: #000;\n\tbottom: 0;\n\theight: 100%;\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 5\n}\n\n.image-gallery_image-gallery__FfPQj.image-gallery_fullscreen-modal__KM6Xw .image-gallery_image-gallery-content__kMTBU {\n\ttop: 50%;\n\ttransform: translateY(-50%)\n}\n\n.image-gallery_image-gallery-content__kMTBU {\n\tposition: relative;\n\tline-height: 0;\n\ttop: 0\n}\n\n.image-gallery_image-gallery-content__kMTBU.image-gallery_fullscreen__VMCyX {\n\tbackground: #000\n}\n\n.image-gallery_image-gallery-content__kMTBU .image-gallery_image-gallery-slide__2BfHc .image-gallery_image-gallery-image__pCNKh {\n\tmax-height: 50vh !important;\n}\n\n.image-gallery_image-gallery-content__kMTBU.image-gallery_left__K0NWU .image-gallery_image-gallery-slide__2BfHc .image-gallery_image-gallery-image__pCNKh,\n.image-gallery_image-gallery-content__kMTBU.image-gallery_right__PlchD .image-gallery_image-gallery-slide__2BfHc .image-gallery_image-gallery-image__pCNKh {\n\tmax-height: 100vh\n}\n\n.image-gallery_image-gallery-slide-wrapper__gdmSf {\n\tposition: relative\n}\n\n.image-gallery_image-gallery-slide-wrapper__gdmSf.image-gallery_left__K0NWU,\n.image-gallery_image-gallery-slide-wrapper__gdmSf.image-gallery_right__PlchD {\n\tdisplay: inline-block;\n\twidth: calc(100% - 110px)\n}\n\n@media(max-width: 768px) {\n\n\t.image-gallery_image-gallery-slide-wrapper__gdmSf.image-gallery_left__K0NWU,\n\t.image-gallery_image-gallery-slide-wrapper__gdmSf.image-gallery_right__PlchD {\n\t\twidth: calc(100% - 87px)\n\t}\n}\n\n.image-gallery_image-gallery-slide-wrapper__gdmSf.image-gallery_image-gallery-rtl__jhrNg {\n\tdirection: rtl\n}\n\n.image-gallery_image-gallery-slides__cWfmF {\n\tline-height: 0;\n\toverflow: hidden;\n\tposition: relative;\n\twhite-space: nowrap;\n\ttext-align: center\n}\n\n.image-gallery_image-gallery-slide__2BfHc {\n\tleft: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%\n}\n\n.image-gallery_image-gallery-slide__2BfHc.image-gallery_center__1gH-w {\n\tposition: relative\n}\n\n.image-gallery_image-gallery-slide__2BfHc .image-gallery_image-gallery-image__pCNKh {\n\twidth: 100%;\n\tobject-fit: contain\n}\n\n.image-gallery_image-gallery-slide__2BfHc .image-gallery_image-gallery-description__l1rZM {\n\tbackground: rgba(0, 0, 0, .4);\n\tbottom: 70px;\n\tcolor: #fff;\n\tleft: 0;\n\tline-height: 1;\n\tpadding: 10px 20px;\n\tposition: absolute;\n\twhite-space: normal\n}\n\n@media(max-width: 768px) {\n\t.image-gallery_image-gallery-slide__2BfHc .image-gallery_image-gallery-description__l1rZM {\n\t\tbottom: 45px;\n\t\tfont-size: .8em;\n\t\tpadding: 8px 15px\n\t}\n}\n\n.image-gallery_image-gallery-bullets__CEQBy {\n\tbottom: 20px;\n\tleft: 0;\n\tmargin: 0 auto;\n\tposition: absolute;\n\tright: 0;\n\twidth: 80%;\n\tz-index: 4\n}\n\n.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullets-container__BXDlg {\n\tmargin: 0;\n\tpadding: 0;\n\ttext-align: center\n}\n\n.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullet__Z7gGG {\n\tappearance: none;\n\tbackground-color: transparent;\n\tborder: 1px solid #fff;\n\tborder-radius: 50%;\n\tbox-shadow: 0 2px 2px #1a1a1a;\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tmargin: 0 5px;\n\toutline: none;\n\tpadding: 5px;\n\ttransition: all .2s ease-out\n}\n\n@media(max-width: 768px) {\n\t.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullet__Z7gGG {\n\t\tmargin: 0 3px;\n\t\tpadding: 3px\n\t}\n}\n\n@media(max-width: 480px) {\n\t.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullet__Z7gGG {\n\t\tpadding: 2.7px\n\t}\n}\n\n.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullet__Z7gGG:focus {\n\ttransform: scale(1.2);\n\tbackground: #000;\n\tborder: 1px solid #000\n}\n\n.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullet__Z7gGG.image-gallery_active__B2qrR {\n\ttransform: scale(1.2);\n\tborder: 1px solid #fff;\n\tbackground: #fff\n}\n\n@media(hover: hover)and (pointer: fine) {\n\t.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullet__Z7gGG:hover {\n\t\tbackground: #000;\n\t\tborder: 1px solid #000\n\t}\n\n\t.image-gallery_image-gallery-bullets__CEQBy .image-gallery_image-gallery-bullet__Z7gGG.image-gallery_active__B2qrR:hover {\n\t\tbackground: #000\n\t}\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv- {\n\tposition: relative\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_thumbnails-swipe-horizontal__5-5qp {\n\ttouch-action: pan-y\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_thumbnails-swipe-vertical__-NAhb {\n\ttouch-action: pan-x\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_thumbnails-wrapper-rtl__Ya5gz {\n\tdirection: rtl\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_left__K0NWU,\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_right__PlchD {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\twidth: 100px;\n\theight: 100px !important;\n}\n\n@media(max-width: 768px) {\n\n\t.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_left__K0NWU,\n\t.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_right__PlchD {\n\t\twidth: 81px\n\t}\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_left__K0NWU .image-gallery_image-gallery-thumbnails__1BFBn,\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_right__PlchD .image-gallery_image-gallery-thumbnails__1BFBn {\n\theight: 100%;\n\twidth: 100%;\n\tleft: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_left__K0NWU .image-gallery_image-gallery-thumbnails__1BFBn .image-gallery_image-gallery-thumbnail__EKbDF,\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_right__PlchD .image-gallery_image-gallery-thumbnails__1BFBn .image-gallery_image-gallery-thumbnail__EKbDF {\n\tdisplay: block;\n\tmargin-right: 0;\n\tpadding: 0\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_left__K0NWU .image-gallery_image-gallery-thumbnails__1BFBn .image-gallery_image-gallery-thumbnail__EKbDF+.image-gallery_image-gallery-thumbnail__EKbDF,\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_right__PlchD .image-gallery_image-gallery-thumbnails__1BFBn .image-gallery_image-gallery-thumbnail__EKbDF+.image-gallery_image-gallery-thumbnail__EKbDF {\n\tmargin-left: 0;\n\tmargin-top: 2px\n}\n\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_left__K0NWU,\n.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_right__PlchD {\n\tmargin: 0 5px\n}\n\n@media(max-width: 768px) {\n\n\t.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_left__K0NWU,\n\t.image-gallery_image-gallery-thumbnails-wrapper__7vIv-.image-gallery_right__PlchD {\n\t\tmargin: 0 3px\n\t}\n}\n\n.image-gallery_image-gallery-thumbnails__1BFBn {\n\toverflow: hidden;\n\tpadding: 5px 0\n}\n\n@media(max-width: 768px) {\n\t.image-gallery_image-gallery-thumbnails__1BFBn {\n\t\tpadding: 3px 0\n\t}\n}\n\n.image-gallery_image-gallery-thumbnails__1BFBn .image-gallery_image-gallery-thumbnails-container__Z3mr8 {\n\tcursor: pointer;\n\ttext-align: center;\n\twhite-space: nowrap\n}\n\n.image-gallery_image-gallery-thumbnail__EKbDF {\n\tdisplay: inline-block;\n\tborder: 2px solid transparent;\n\ttransition: border .3s ease-out;\n\twidth: 10vh;\n\tbackground: transparent;\n\tpadding: 0\n}\n\n@media(max-width: 768px) {\n\t.image-gallery_image-gallery-thumbnail__EKbDF {\n\t\tborder: 3px solid transparent;\n\t\twidth: 81px\n\t}\n}\n\n.image-gallery_image-gallery-thumbnail__EKbDF+.image-gallery_image-gallery-thumbnail__EKbDF {\n\tmargin-left: 2px\n}\n\n.image-gallery_image-gallery-thumbnail__EKbDF .image-gallery_image-gallery-thumbnail-inner__4F4ry {\n\tdisplay: block;\n\tposition: relative\n}\n.image-gallery_image-gallery-thumbnail__EKbDF{\n\twidth: 10vh;\n\theight: 7vh;\n\toverflow: hidden;\n}\n.image-gallery_image-gallery-thumbnail__EKbDF .image-gallery_image-gallery-thumbnail-image__Oi9qX {\n\twidth: 100%;\n    height:100%;\n\tline-height: 0;\n    object-fit: contain;\n}\n\n.image-gallery_image-gallery-thumbnail__EKbDF.image-gallery_active__B2qrR,\n.image-gallery_image-gallery-thumbnail__EKbDF:focus {\n\toutline: none;\n\tborder: 2px solid var(--light);\n}\n@media(hover: hover)and (pointer: fine) {\n\t.image-gallery_image-gallery-thumbnail__EKbDF:hover {\n\t\toutline: none;\n\t\tborder: 2px solid var(--light)\n\t}\n}\n\n@media(hover: hover)and (pointer: fine)and (max-width: 768px) {\n\t.image-gallery_image-gallery-thumbnail__EKbDF:hover {\n\t\tborder: 2px solid var(--primary)\n\t}\n}\n\n.image-gallery_image-gallery-thumbnail-label__4Xph8 {\n\tbox-sizing: border-box;\n\tcolor: #fff;\n\tfont-size: 1em;\n\tleft: 0;\n\tline-height: 1em;\n\tpadding: 5%;\n\tposition: absolute;\n\ttop: 50%;\n\ttext-shadow: 0 2px 2px #1a1a1a;\n\ttransform: translateY(-50%);\n\twhite-space: normal;\n\twidth: 100%\n}\n\n@media(max-width: 768px) {\n\t.image-gallery_image-gallery-thumbnail-label__4Xph8 {\n\t\tfont-size: .8em;\n\t\tline-height: .8em\n\t}\n}\n\n.image-gallery_image-gallery-index__DbRoC {\n\tbackground: rgba(0, 0, 0, .4);\n\tcolor: #fff;\n\tline-height: 1;\n\tpadding: 10px 20px;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\tz-index: 4\n}\n\n@media(max-width: 768px) {\n\t.image-gallery_image-gallery-index__DbRoC {\n\t\tfont-size: .8em;\n\t\tpadding: 5px 10px\n\t}\n}";
     styleInject(css_248z$J);
 
-    var IKurlEndpoint = 'https://ik.imagekit.io/ft8rkss6u';
-    var IKpublicKey = 'public_VBLwXEfKbDK0O9amvBYlyz5R3Nw=';
+    var IKurlEndpoint = 'https://ik.imagekit.io/ppcqtfrxp';
+    var IKpublicKey = 'public_h8U+4K+MFoeq+MKLf34NST4axAo=';
     var serverbaselink$1 = 'https://tabex-co.com';
 
+    //productidprops
+    var Variantoptions = function Variantoptions(props) {
+      var _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _ProductInfoObj$data, _ProductInfoObj$data$, _ProductInfoObj$data$2;
+      var lang = props.actions.lang;
+      var langdetect = props.actions.langdetect;
+      var selectproductoptionvalue = props.actions.selectproductoptionvalue;
+      var clearchoosenvaluesbutkeepcurrentvalue = props.actions.clearchoosenvaluesbutkeepcurrentvalue;
+      var fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+      var sectionproperties = props.actions.sectionproperties;
+      var ProductInfoObj = props.actions.ProductInfoObj;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer === void 0 ? void 0 : (_fetchProductInfoQuer2 = _fetchProductInfoQuer.data) === null || _fetchProductInfoQuer2 === void 0 ? void 0 : (_fetchProductInfoQuer3 = _fetchProductInfoQuer2.productinfo) === null || _fetchProductInfoQuer3 === void 0 ? void 0 : _fetchProductInfoQuer3.hasvariants) == 1 && sectionproperties.productInformationType == 'Product/Service Information' && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "row m-0 w-100 d-flex align-items-start"
+      }, ProductInfoObj === null || ProductInfoObj === void 0 ? void 0 : (_ProductInfoObj$data = ProductInfoObj.data) === null || _ProductInfoObj$data === void 0 ? void 0 : (_ProductInfoObj$data$ = _ProductInfoObj$data.productinfo) === null || _ProductInfoObj$data$ === void 0 ? void 0 : (_ProductInfoObj$data$2 = _ProductInfoObj$data$.productoptions) === null || _ProductInfoObj$data$2 === void 0 ? void 0 : _ProductInfoObj$data$2.map(function (item, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "col-lg-12 p-0 mb-3 d-flex justify-content-start"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "row m-0 w-100 d-flex align-items-start"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "col-lg-12 col-md-12 p-0 d-flex"
+        }, /*#__PURE__*/React__default["default"].createElement("p", {
+          className: ' m-0 p-0 wordbreak',
+          style: {
+            color: sectionproperties.varianttitle_color,
+            fontWeight: sectionproperties.varianttitle_fontweight,
+            textTransform: sectionproperties.varianttitle_texttransform,
+            fontSize: sectionproperties.varianttitle_fontSize + 'px'
+          }
+        }, lang.select, " ", langdetect == 'en' ? item.optionname : item.optionname_ar, ":")), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "col-lg-12 col-md-12 d-flex pb-md-3 justify-content-start align-items-start scrollhorixontalcontainer pt-3 pb-3",
+          style: {
+            paddingTop: sectionproperties.showRemovebutton == 'Show' ? '1rem' : 0
+          }
+        }, item.optionvalues.map(function (optionvaluesitem, optionvaluesindex) {
+          var isoptionvalueselected = 0;
+          if (optionvaluesitem.isselected == 1) {
+            isoptionvalueselected = 1;
+          } else {
+            isoptionvalueselected = 0;
+          }
+          var isoptionvaluedenabled = 0;
+          if (optionvaluesitem.isenabled == 1) {
+            isoptionvaluedenabled = 1;
+          } else {
+            isoptionvaluedenabled = 0;
+          }
+          if (item.optionname == 'color' || item.optionname == 'Color') {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              className: productinfostyles.color_container + ' mr-2 variabttcontainer ' + "".concat(isoptionvalueselected == 1 ? productinfostyles.color_container_active : ''),
+              onClick: function onClick() {
+                if (optionvaluesitem.isenabled == 1) {
+                  selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                } else {
+                  clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                }
+              },
+              style: {
+                background: optionvaluesitem.valuename,
+                opacity: isoptionvaluedenabled == 1 ? 1 : 0.2,
+                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed'
+              }
+            });
+          } else if (item.optionname == 'size' || item.optionname == 'Size') {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              className: "".concat(productinfostyles.variant_container, " ").concat(productinfostyles.size_variant_container) + ' mr-2 variabttcontainer allcentered ' + "".concat(isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''),
+              onClick: function onClick() {
+                if (optionvaluesitem.isenabled == 1) {
+                  selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                } else {
+                  clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                }
+              },
+              style: {
+                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
+                backgroundColor: isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
+                minWidth: sectionproperties.variantcontainer_minwidth + 'px',
+                height: sectionproperties.variantcontainer_height + 'px',
+                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
+                position: 'relative'
+              }
+            }, isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
+              "class": "m-0 p-0 bg-danger bgdanger-hover",
+              style: {
+                position: 'absolute',
+                top: '-15px',
+                right: '-5px',
+                width: '3vh',
+                height: '3vh',
+                borderRadius: 100
+              }
+            }, /*#__PURE__*/React__default["default"].createElement("i", {
+              "class": "h-100 allcentered"
+            }, /*#__PURE__*/React__default["default"].createElement(IoMdClose.IoMdClose, null))), /*#__PURE__*/React__default["default"].createElement("p", {
+              className: 'font-12 wordbreak m-0 p-0 d-flex align-items-center justify-content-center',
+              style: {
+                color: sectionproperties.variantcontainer_color,
+                fontSize: sectionproperties.variantcontainer_fontSize + 'px'
+              }
+            }, langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar));
+          } else {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              className: productinfostyles.variant_container + ' mr-2 variabttcontainer allcentered pl-2 pr-2 ' + "".concat(isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''),
+              onClick: function onClick() {
+                if (optionvaluesitem.isenabled == 1) {
+                  selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                } else {
+                  clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                }
+              },
+              style: {
+                backgroundColor: isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
+                width: 'auto',
+                height: sectionproperties.variantcontainer_height + 'px',
+                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
+                position: 'relative'
+              }
+            }, isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
+              "class": "m-0 p-0 bg-danger bgdanger-hover",
+              style: {
+                position: 'absolute',
+                top: '-15px',
+                right: '-5px',
+                width: '3vh',
+                height: '3vh',
+                borderRadius: 100
+              }
+            }, /*#__PURE__*/React__default["default"].createElement("i", {
+              "class": "h-100 allcentered"
+            }, /*#__PURE__*/React__default["default"].createElement(IoMdClose.IoMdClose, null))), /*#__PURE__*/React__default["default"].createElement("p", {
+              className: 'm-0 p-0 allcentered',
+              style: {
+                color: sectionproperties.variantcontainer_color,
+                fontSize: sectionproperties.variantcontainer_fontSize + 'px'
+              }
+            }, langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar));
+          }
+        }))));
+      })));
+    };
+
+    //productidprops
+    var ProductHeaderPricing = function ProductHeaderPricing(props) {
+      props.actions.lang;
+      var langdetect = props.actions.langdetect;
+      var fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+      var sectionproperties = props.actions.sectionproperties;
+      var authdetailsContext = props.actions.authdetailsContext;
+      var variantindexcompleted = props.actions.variantindexcompleted;
+      var getprice_discountpriceprops = props.actions.getprice_discountpriceprops;
+      var quantityconditionfoundobjprops = props.actions.quantityconditionfoundobjprops;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, sectionproperties.showDefaultPricingSection == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "col-lg-12 p-0 mb-3 d-flex justift-content-start",
+        style: {
+          background: sectionproperties.reservation_bgcolor,
+          borderRadius: sectionproperties.reservation_borderradius + 'px'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "row m-0 w-100",
+        style: {
+          paddingLeft: sectionproperties.reservation_padding_left + 'rem',
+          paddingRight: sectionproperties.reservation_padding_right + 'rem',
+          paddingTop: sectionproperties.reservation_padding_top + 'rem',
+          paddingBottom: sectionproperties.reservation_padding_bottom + 'rem'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        style: {
+          fontSize: sectionproperties.defaultPriceFontSize + 'px',
+          fontWeight: sectionproperties.defaultPriceFontWeight,
+          color: sectionproperties.defaultPriceColor
+        }
+      }, quantityconditionfoundobjprops != null && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.type) == 'add' ? '+' : '-', quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.value, "%")), /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "col-lg-12 p-0 d-flex justift-content-start"
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "m-0 p-0"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        style: {
+          fontSize: sectionproperties.defaultPriceFontSize + 'px',
+          fontWeight: sectionproperties.defaultPriceFontWeight,
+          color: sectionproperties.defaultPriceColor
+        }
+      }, langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : '', ' ', fetchProductInfoQueryContext.data.data.productinfo.hassale == 0 ? getprice_discountpriceprops('defaultprice', 0, variantindexcompleted) : getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted), ' ', langdetect == 'en' ? '' : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("span", {
+        style: {
+          fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
+          fontWeight: sectionproperties.defaultSalePriceFontWeight,
+          color: sectionproperties.defaultSalePriceColor
+        }
+      }, ' ', "-", ' '), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("span", {
+        "class": "linethrough",
+        style: {
+          fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
+          fontWeight: sectionproperties.defaultSalePriceFontWeight,
+          color: sectionproperties.defaultSalePriceColor
+        }
+      }, langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : '', " ", getprice_discountpriceprops('defaultprice', 0, variantindexcompleted), ' ', langdetect == 'en' ? '' : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar))), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && sectionproperties.showpill == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "col-lg-12 p-0 d-flex align-items-center justift-content-start"
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "m-0 p-0 d-flex align-items-center justift-content-start"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        style: {
+          fontSize: sectionproperties.counterTitleFontSize + 'px',
+          color: sectionproperties.counterTitleColor,
+          fontWeight: sectionproperties.counterTitleFontWeight
+        }
+      }, langdetect == 'en' ? sectionproperties.countertitleen : sectionproperties.countertitlear), /*#__PURE__*/React__default["default"].createElement("span", {
+        "class": "ml-1 mr-1",
+        style: {
+          fontSize: sectionproperties.counterValueFontSize + 'px',
+          color: sectionproperties.counterValueColor,
+          fontWeight: sectionproperties.counterValueFontWeight
+        }
+      }, parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted) - getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted)), ' ', langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          background: sectionproperties.pillbgcolor,
+          width: 'fit-content',
+          borderRadius: sectionproperties.pillborderBottomLeftRadius + 'px',
+          border: sectionproperties.pillBorderWidth + 'px solid ' + sectionproperties.pillBorderColor,
+          direction: 'ltr'
+        },
+        "class": "ml-2 mr-2"
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "m-0 pl-2 pr-2 py-0",
+        style: {
+          color: sectionproperties.pillcolor,
+          fontWeight: sectionproperties.pillfontWeight,
+          fontSize: '13px',
+          lineHeight: '25px'
+        }
+      }, '-' + Math.round(10.0 * ((parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)) - parseFloat(getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted))) / parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted))) * 100) / 10.0 + '%'))))));
+    };
+
     function ownKeys$1_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     function _objectSpread$1_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1_(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     var Product_itemtype = function Product_itemtype(props) {
-      var _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _ProductInfoObj$data, _ProductInfoObj$data$, _ProductInfoObj$data$2, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _ProductInfoObj$data2, _ProductInfoObj$data3, _ProductInfoObj$data4;
+      var _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _ProductInfoObj$data, _ProductInfoObj$data$, _ProductInfoObj$data$2;
       var lang = props.actions.lang;
       var langdetect = props.actions.langdetect;
       var srcfromprops = props.actions.srcfromprops;
       props.actions.returnpolicyobj;
       var productinfo_cssstyles = props.actions.productinfo_cssstyles;
       var addtocartfunc = props.actions.addtocartfunc;
-      var selectproductoptionvalue = props.actions.selectproductoptionvalue;
+      props.actions.selectproductoptionvalue;
+      props.actions.clearchoosenvaluesbutkeepcurrentvalue;
       var productimagesarray = props.actions.productimagesarray;
       var fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
       var sectionproperties = props.actions.sectionproperties;
@@ -943,7 +1173,7 @@
       props.actions.relatedproducts;
       var StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
       var getprice_discountpriceprops = props.actions.getprice_discountpriceprops;
-      var quantityconditionfoundobjprops = props.actions.quantityconditionfoundobjprops;
+      props.actions.quantityconditionfoundobjprops;
       var StoreInfoprops = props.actions.StoreInfoprops;
       var _useState = React.useState(false),
         _useState2 = _slicedToArray__default["default"](_useState, 2);
@@ -1079,84 +1309,9 @@
         style: {
           textAlign: langdetect == 'en' ? 'left' : 'right'
         }
-      }, langdetect == 'en' ? 'Delivery Time' : 'مدة الشحن', ": ", fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer7 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer7 === void 0 ? void 0 : (_fetchProductInfoQuer8 = _fetchProductInfoQuer7.data) === null || _fetchProductInfoQuer8 === void 0 ? void 0 : (_fetchProductInfoQuer9 = _fetchProductInfoQuer8.productinfo) === null || _fetchProductInfoQuer9 === void 0 ? void 0 : _fetchProductInfoQuer9.deliverydatetext)), sectionproperties.showDefaultPricingSection == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0 mb-3 d-flex justift-content-start",
-        style: {
-          background: sectionproperties.reservation_bgcolor,
-          borderRadius: sectionproperties.reservation_borderradius + 'px'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "row m-0 w-100",
-        style: {
-          paddingLeft: sectionproperties.reservation_padding_left + 'rem',
-          paddingRight: sectionproperties.reservation_padding_right + 'rem',
-          paddingTop: sectionproperties.reservation_padding_top + 'rem',
-          paddingBottom: sectionproperties.reservation_padding_bottom + 'rem'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.defaultPriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultPriceFontWeight,
-          color: sectionproperties.defaultPriceColor
-        }
-      }, quantityconditionfoundobjprops != null && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.type) == 'add' ? '+' : '-', quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.value, "%")), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0 d-flex justift-content-start"
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 p-0"
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.defaultPriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultPriceFontWeight,
-          color: sectionproperties.defaultPriceColor
-        }
-      }, langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : '', ' ', fetchProductInfoQueryContext.data.data.productinfo.hassale == 0 ? getprice_discountpriceprops('defaultprice', 0, variantindexcompleted) : getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted), ' ', langdetect == 'en' ? '' : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultSalePriceFontWeight,
-          color: sectionproperties.defaultSalePriceColor
-        }
-      }, ' ', "-", ' '), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("span", {
-        "class": "linethrough",
-        style: {
-          fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultSalePriceFontWeight,
-          color: sectionproperties.defaultSalePriceColor
-        }
-      }, langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : '', " ", getprice_discountpriceprops('defaultprice', 0, variantindexcompleted), ' ', langdetect == 'en' ? '' : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar))), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && sectionproperties.showpill == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0 d-flex align-items-center justift-content-start"
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 p-0 d-flex align-items-center justift-content-start"
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.counterTitleFontSize + 'px',
-          color: sectionproperties.counterTitleColor,
-          fontWeight: sectionproperties.counterTitleFontWeight
-        }
-      }, langdetect == 'en' ? sectionproperties.countertitleen : sectionproperties.countertitlear), /*#__PURE__*/React__default["default"].createElement("span", {
-        "class": "ml-1 mr-1",
-        style: {
-          fontSize: sectionproperties.counterValueFontSize + 'px',
-          color: sectionproperties.counterValueColor,
-          fontWeight: sectionproperties.counterValueFontWeight
-        }
-      }, parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted) - getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted)), ' ', langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          background: sectionproperties.pillbgcolor,
-          width: 'fit-content',
-          borderRadius: sectionproperties.pillborderBottomLeftRadius + 'px',
-          border: sectionproperties.pillBorderWidth + 'px solid ' + sectionproperties.pillBorderColor,
-          direction: 'ltr'
-        },
-        "class": "ml-2 mr-2"
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 pl-2 pr-2 py-0",
-        style: {
-          color: sectionproperties.pillcolor,
-          fontWeight: sectionproperties.pillfontWeight,
-          fontSize: '13px',
-          lineHeight: '25px'
-        }
-      }, '-' + Math.round(10.0 * ((parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)) - parseFloat(getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted))) / parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted))) * 100) / 10.0 + '%'))))), (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer10 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer10 === void 0 ? void 0 : (_fetchProductInfoQuer11 = _fetchProductInfoQuer10.data) === null || _fetchProductInfoQuer11 === void 0 ? void 0 : (_fetchProductInfoQuer12 = _fetchProductInfoQuer11.productinfo) === null || _fetchProductInfoQuer12 === void 0 ? void 0 : _fetchProductInfoQuer12.hasvariants) == 1 && sectionproperties.productInformationType == 'Profile' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, langdetect == 'en' ? 'Delivery Time' : 'مدة الشحن', ": ", fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer7 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer7 === void 0 ? void 0 : (_fetchProductInfoQuer8 = _fetchProductInfoQuer7.data) === null || _fetchProductInfoQuer8 === void 0 ? void 0 : (_fetchProductInfoQuer9 = _fetchProductInfoQuer8.productinfo) === null || _fetchProductInfoQuer9 === void 0 ? void 0 : _fetchProductInfoQuer9.deliverydatetext)), /*#__PURE__*/React__default["default"].createElement(ProductHeaderPricing, {
+        actions: props.actions
+      }), (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer10 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer10 === void 0 ? void 0 : (_fetchProductInfoQuer11 = _fetchProductInfoQuer10.data) === null || _fetchProductInfoQuer11 === void 0 ? void 0 : (_fetchProductInfoQuer12 = _fetchProductInfoQuer11.productinfo) === null || _fetchProductInfoQuer12 === void 0 ? void 0 : _fetchProductInfoQuer12.hasvariants) == 1 && sectionproperties.productInformationType == 'Profile' && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "row m-0 w-100 d-flex align-items-start"
       }, ProductInfoObj === null || ProductInfoObj === void 0 ? void 0 : (_ProductInfoObj$data = ProductInfoObj.data) === null || _ProductInfoObj$data === void 0 ? void 0 : (_ProductInfoObj$data$ = _ProductInfoObj$data.productinfo) === null || _ProductInfoObj$data$ === void 0 ? void 0 : (_ProductInfoObj$data$2 = _ProductInfoObj$data$.productoptions) === null || _ProductInfoObj$data$2 === void 0 ? void 0 : _ProductInfoObj$data$2.map(function (item, index) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1216,127 +1371,9 @@
             }
           }, langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar));
         })));
-      })), (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer13 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer13 === void 0 ? void 0 : (_fetchProductInfoQuer14 = _fetchProductInfoQuer13.data) === null || _fetchProductInfoQuer14 === void 0 ? void 0 : (_fetchProductInfoQuer15 = _fetchProductInfoQuer14.productinfo) === null || _fetchProductInfoQuer15 === void 0 ? void 0 : _fetchProductInfoQuer15.hasvariants) == 1 && sectionproperties.productInformationType == 'Product/Service Information' && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "row m-0 w-100 d-flex align-items-start"
-      }, ProductInfoObj === null || ProductInfoObj === void 0 ? void 0 : (_ProductInfoObj$data2 = ProductInfoObj.data) === null || _ProductInfoObj$data2 === void 0 ? void 0 : (_ProductInfoObj$data3 = _ProductInfoObj$data2.productinfo) === null || _ProductInfoObj$data3 === void 0 ? void 0 : (_ProductInfoObj$data4 = _ProductInfoObj$data3.productoptions) === null || _ProductInfoObj$data4 === void 0 ? void 0 : _ProductInfoObj$data4.map(function (item, index) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "col-lg-12 p-0 mb-3 d-flex justify-content-start"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "row m-0 w-100 d-flex align-items-start"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "col-lg-12 col-md-12 p-0 d-flex"
-        }, /*#__PURE__*/React__default["default"].createElement("p", {
-          className: ' m-0 p-0 wordbreak',
-          style: {
-            color: sectionproperties.varianttitle_color,
-            fontWeight: sectionproperties.varianttitle_fontweight,
-            textTransform: sectionproperties.varianttitle_texttransform,
-            fontSize: sectionproperties.varianttitle_fontSize + 'px'
-          }
-        }, lang.select, " ", langdetect == 'en' ? item.optionname : item.optionname_ar, ":")), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "col-lg-12 col-md-12 d-flex pb-md-3 justify-content-start align-items-start scrollhorixontalcontainer pt-3 pb-3",
-          style: {
-            paddingTop: sectionproperties.showRemovebutton == 'Show' ? '1rem' : 0
-          }
-        }, item.optionvalues.map(function (optionvaluesitem, optionvaluesindex) {
-          var isoptionvalueselected = 0;
-          if (optionvaluesitem.isselected == 1) {
-            isoptionvalueselected = 1;
-          } else {
-            isoptionvalueselected = 0;
-          }
-          var isoptionvaluedenabled = 0;
-          if (optionvaluesitem.isenabled == 1) {
-            isoptionvaluedenabled = 1;
-          } else {
-            isoptionvaluedenabled = 0;
-          }
-          if (item.optionname == 'color' || item.optionname == 'Color') {
-            return /*#__PURE__*/React__default["default"].createElement("div", {
-              className: productinfostyles.color_container + ' mr-2 variabttcontainer ' + "".concat(isoptionvalueselected == 1 ? productinfostyles.color_container_active : ''),
-              onClick: function onClick() {
-                if (optionvaluesitem.isenabled == 1) {
-                  selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
-                }
-              },
-              style: {
-                background: optionvaluesitem.valuename,
-                opacity: isoptionvaluedenabled == 1 ? 1 : 0.2,
-                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed'
-              }
-            });
-          } else if (item.optionname == 'size' || item.optionname == 'Size') {
-            return /*#__PURE__*/React__default["default"].createElement("div", {
-              className: "".concat(productinfostyles.variant_container, " ").concat(productinfostyles.size_variant_container) + ' mr-2 variabttcontainer allcentered ' + "".concat(isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''),
-              onClick: function onClick() {
-                if (optionvaluesitem.isenabled == 1) {
-                  selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
-                }
-              },
-              style: {
-                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
-                backgroundColor: isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
-                minWidth: sectionproperties.variantcontainer_minwidth + 'px',
-                height: sectionproperties.variantcontainer_height + 'px',
-                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
-                position: 'relative'
-              }
-            }, isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
-              "class": "m-0 p-0 bg-danger bgdanger-hover",
-              style: {
-                position: 'absolute',
-                top: '-15px',
-                right: '-5px',
-                width: '3vh',
-                height: '3vh',
-                borderRadius: 100
-              }
-            }, /*#__PURE__*/React__default["default"].createElement("i", {
-              "class": "h-100 allcentered"
-            }, /*#__PURE__*/React__default["default"].createElement(IoMdClose.IoMdClose, null))), /*#__PURE__*/React__default["default"].createElement("p", {
-              className: 'font-12 wordbreak m-0 p-0 d-flex align-items-center justify-content-center',
-              style: {
-                color: sectionproperties.variantcontainer_color,
-                fontSize: sectionproperties.variantcontainer_fontSize + 'px'
-              }
-            }, langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar));
-          } else {
-            return /*#__PURE__*/React__default["default"].createElement("div", {
-              className: productinfostyles.variant_container + ' mr-2 variabttcontainer allcentered pl-2 pr-2 ' + "".concat(isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''),
-              onClick: function onClick() {
-                if (optionvaluesitem.isenabled == 1) {
-                  selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
-                }
-              },
-              style: {
-                backgroundColor: isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
-                width: 'auto',
-                height: sectionproperties.variantcontainer_height + 'px',
-                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
-                position: 'relative'
-              }
-            }, isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
-              "class": "m-0 p-0 bg-danger bgdanger-hover",
-              style: {
-                position: 'absolute',
-                top: '-15px',
-                right: '-5px',
-                width: '3vh',
-                height: '3vh',
-                borderRadius: 100
-              }
-            }, /*#__PURE__*/React__default["default"].createElement("i", {
-              "class": "h-100 allcentered"
-            }, /*#__PURE__*/React__default["default"].createElement(IoMdClose.IoMdClose, null))), /*#__PURE__*/React__default["default"].createElement("p", {
-              className: 'm-0 p-0 allcentered',
-              style: {
-                color: sectionproperties.variantcontainer_color,
-                fontSize: sectionproperties.variantcontainer_fontSize + 'px'
-              }
-            }, langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar));
-          }
-        }))));
-      })), sectionproperties.quantitybtn_show == 'Show' && sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement(Variantoptions, {
+        actions: props.actions
+      }), sectionproperties.quantitybtn_show == 'Show' && sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-lg-12 p-0 mb-3"
       }, /*#__PURE__*/React__default["default"].createElement("hr", {
         className: "mb-0 mt-2"
@@ -2193,7 +2230,8 @@
       var GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
       var NotificationManager = props.actions.NotificationManager;
       var getprice_discountpriceprops = props.actions.getprice_discountpriceprops;
-      var quantityconditionfoundobjprops = props.actions.quantityconditionfoundobjprops;
+      props.actions.quantityconditionfoundobjprops;
+      props.actions.variantindexcompleted;
       var StoreInfoprops = props.actions.StoreInfoprops;
       var _useState = React.useState(''),
         _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -2393,84 +2431,9 @@
         style: {
           textAlign: langdetect == 'en' ? 'left' : 'right'
         }
-      }, fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer7 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer7 === void 0 ? void 0 : (_fetchProductInfoQuer8 = _fetchProductInfoQuer7.data) === null || _fetchProductInfoQuer8 === void 0 ? void 0 : (_fetchProductInfoQuer9 = _fetchProductInfoQuer8.productinfo) === null || _fetchProductInfoQuer9 === void 0 ? void 0 : _fetchProductInfoQuer9.deliverydatetext)), sectionproperties.showDefaultPricingSection == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0 mb-3 d-flex justift-content-start",
-        style: {
-          background: sectionproperties.reservation_bgcolor,
-          borderRadius: sectionproperties.reservation_borderradius + 'px'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "row m-0 w-100",
-        style: {
-          paddingLeft: sectionproperties.reservation_padding_left + 'rem',
-          paddingRight: sectionproperties.reservation_padding_right + 'rem',
-          paddingTop: sectionproperties.reservation_padding_top + 'rem',
-          paddingBottom: sectionproperties.reservation_padding_bottom + 'rem'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.defaultPriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultPriceFontWeight,
-          color: sectionproperties.defaultPriceColor
-        }
-      }, quantityconditionfoundobjprops != null && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.type) == 'add' ? '+' : '-', quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.value, "%")), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0 d-flex justift-content-start"
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 p-0"
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.defaultPriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultPriceFontWeight,
-          color: sectionproperties.defaultPriceColor
-        }
-      }, langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : '', ' ', fetchProductInfoQueryContext.data.data.productinfo.hassale == 0 ? getprice_discountpriceprops('defaultprice', 0) : getprice_discountpriceprops('defaultsaleprice', 0), ' ', langdetect == 'en' ? '' : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultSalePriceFontWeight,
-          color: sectionproperties.defaultSalePriceColor
-        }
-      }, ' ', "-", ' '), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("span", {
-        "class": "linethrough",
-        style: {
-          fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
-          fontWeight: sectionproperties.defaultSalePriceFontWeight,
-          color: sectionproperties.defaultSalePriceColor
-        }
-      }, langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : '', " ", getprice_discountpriceprops('defaultprice', 0), ' ', langdetect == 'en' ? '' : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar))), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && sectionproperties.showpill == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0 d-flex align-items-center justift-content-start"
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 p-0 d-flex align-items-center justift-content-start"
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: sectionproperties.counterTitleFontSize + 'px',
-          color: sectionproperties.counterTitleColor,
-          fontWeight: sectionproperties.counterTitleFontWeight
-        }
-      }, langdetect == 'en' ? sectionproperties.countertitleen : sectionproperties.countertitlear), /*#__PURE__*/React__default["default"].createElement("span", {
-        "class": "ml-1 mr-1",
-        style: {
-          fontSize: sectionproperties.counterValueFontSize + 'px',
-          color: sectionproperties.counterValueColor,
-          fontWeight: sectionproperties.counterValueFontWeight
-        }
-      }, parseFloat(getprice_discountpriceprops('defaultprice', 0) - getprice_discountpriceprops('defaultsaleprice', 0)), ' ', langdetect == 'en' ? authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_en : authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          background: sectionproperties.pillbgcolor,
-          width: 'fit-content',
-          borderRadius: sectionproperties.pillborderBottomLeftRadius + 'px',
-          border: sectionproperties.pillBorderWidth + 'px solid ' + sectionproperties.pillBorderColor,
-          direction: 'ltr'
-        },
-        "class": "ml-2 mr-2"
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 pl-2 pr-2 py-0",
-        style: {
-          color: sectionproperties.pillcolor,
-          fontWeight: sectionproperties.pillfontWeight,
-          fontSize: '13px',
-          lineHeight: '25px'
-        }
-      }, '-' + Math.round(10.0 * ((parseFloat(getprice_discountpriceprops('defaultprice', 0)) - parseFloat(getprice_discountpriceprops('defaultsaleprice', 0))) / parseFloat(getprice_discountpriceprops('defaultprice', 0))) * 100) / 10.0 + '%'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 ? void 0 : (_fetchProductInfoQuer7 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer7 === void 0 ? void 0 : (_fetchProductInfoQuer8 = _fetchProductInfoQuer7.data) === null || _fetchProductInfoQuer8 === void 0 ? void 0 : (_fetchProductInfoQuer9 = _fetchProductInfoQuer8.productinfo) === null || _fetchProductInfoQuer9 === void 0 ? void 0 : _fetchProductInfoQuer9.deliverydatetext)), /*#__PURE__*/React__default["default"].createElement(ProductHeaderPricing, {
+        actions: props.actions
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 d-flex align-items-center justify-content-start p-0 flex-column"
       }, /*#__PURE__*/React__default["default"].createElement("p", {
         "class": "m-0 p-0 mb-2 w-100",
@@ -2494,7 +2457,9 @@
         "class": langdetect == 'en' ? productinfo_cssstyles.before + ' before ' : productinfo_cssstyles.before + ' beforear '
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 p-0"
-      }, /*#__PURE__*/React__default["default"].createElement(Serviceinfotabs, {
+      }, /*#__PURE__*/React__default["default"].createElement(Variantoptions, {
+        actions: props.actions
+      }), /*#__PURE__*/React__default["default"].createElement(Serviceinfotabs, {
         actions: {
           fetchProductInfoQueryContext: fetchProductInfoQueryContext,
           sectionproperties: sectionproperties,
@@ -2750,8 +2715,24 @@
           }
         }
       }, [fetchProductInfoQueryContext.isSuccess, fetchProductInfoQueryContext.data]);
-      var selectproductoptionvalue = function selectproductoptionvalue(optionindex, optionvaluesitem, optionvaluesindex) {
+      var clearchoosenvaluesbutkeepcurrentvalue = function clearchoosenvaluesbutkeepcurrentvalue(optionindex, optionvaluesitem, optionvaluesindex) {
+        var _productarr$data, _productarr$data$prod, _productarr$data$prod2;
         var productarr = ProductInfoObj;
+        productarr === null || productarr === void 0 ? void 0 : (_productarr$data = productarr.data) === null || _productarr$data === void 0 ? void 0 : (_productarr$data$prod = _productarr$data.productinfo) === null || _productarr$data$prod === void 0 ? void 0 : (_productarr$data$prod2 = _productarr$data$prod.productoptions) === null || _productarr$data$prod2 === void 0 ? void 0 : _productarr$data$prod2.forEach(function (item, index) {
+          var _item$optionvalues;
+          item.isselected = 0;
+          item === null || item === void 0 ? void 0 : (_item$optionvalues = item.optionvalues) === null || _item$optionvalues === void 0 ? void 0 : _item$optionvalues.forEach(function (valueitem, valueindex) {
+            valueitem.isselected = 0;
+          });
+        });
+        selectproductoptionvalue(optionindex, optionvaluesitem, optionvaluesindex, productarr);
+      };
+      var selectproductoptionvalue = function selectproductoptionvalue(optionindex, optionvaluesitem, optionvaluesindex, productarrtobepassed) {
+        if (productarrtobepassed == undefined || productarrtobepassed == null) {
+          var productarr = ProductInfoObj;
+        } else {
+          var productarr = productarrtobepassed;
+        }
         var isselected = productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected;
         if (isselected == 1) {
           productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected = 0;
@@ -2770,8 +2751,8 @@
       var variantchecker = function variantchecker() {
         var productarr = ProductInfoObj;
         if (Object.keys(productarr).length != 0) {
-          var _productarr$data, _productarr$data$prod;
-          if ((productarr === null || productarr === void 0 ? void 0 : (_productarr$data = productarr.data) === null || _productarr$data === void 0 ? void 0 : (_productarr$data$prod = _productarr$data.productinfo) === null || _productarr$data$prod === void 0 ? void 0 : _productarr$data$prod.hasvariants) == 1) {
+          var _productarr$data2, _productarr$data2$pro;
+          if ((productarr === null || productarr === void 0 ? void 0 : (_productarr$data2 = productarr.data) === null || _productarr$data2 === void 0 ? void 0 : (_productarr$data2$pro = _productarr$data2.productinfo) === null || _productarr$data2$pro === void 0 ? void 0 : _productarr$data2$pro.hasvariants) == 1) {
             var selectedoptionsvalues = [];
             var variantsaccessible = [];
             productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
@@ -3475,14 +3456,14 @@
           langdetect: langdetect,
           lang: lang,
           srcfromprops: props.srcfromprops
-        }, _defineProperty__default["default"](_ref, "returnpolicyobj", returnpolicyobj), _defineProperty__default["default"](_ref, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty__default["default"](_ref, "addtocartfunc", addtocartfunc), _defineProperty__default["default"](_ref, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty__default["default"](_ref, "productimagesarray", productimagesarray), _defineProperty__default["default"](_ref, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty__default["default"](_ref, "ProductInfoObj", ProductInfoObj), _defineProperty__default["default"](_ref, "sectionproperties", sectionproperties), _defineProperty__default["default"](_ref, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty__default["default"](_ref, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty__default["default"](_ref, "routingcountext", routingcountext), _defineProperty__default["default"](_ref, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty__default["default"](_ref, "authdetailsContext", authdetailsContext), _defineProperty__default["default"](_ref, "addtofavoritescontext", addtofavoritescontext), _defineProperty__default["default"](_ref, "variantindexcompleted", variantindexcompleted), _defineProperty__default["default"](_ref, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty__default["default"](_ref, "NotificationManager", NotificationManager), _defineProperty__default["default"](_ref, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty__default["default"](_ref, "relatedproducts", relatedproducts), _defineProperty__default["default"](_ref, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty__default["default"](_ref, "StoreInfoprops", StoreInfo), _ref)
+        }, _defineProperty__default["default"](_ref, "returnpolicyobj", returnpolicyobj), _defineProperty__default["default"](_ref, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty__default["default"](_ref, "addtocartfunc", addtocartfunc), _defineProperty__default["default"](_ref, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty__default["default"](_ref, "clearchoosenvaluesbutkeepcurrentvalue", clearchoosenvaluesbutkeepcurrentvalue), _defineProperty__default["default"](_ref, "productimagesarray", productimagesarray), _defineProperty__default["default"](_ref, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty__default["default"](_ref, "ProductInfoObj", ProductInfoObj), _defineProperty__default["default"](_ref, "sectionproperties", sectionproperties), _defineProperty__default["default"](_ref, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty__default["default"](_ref, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty__default["default"](_ref, "routingcountext", routingcountext), _defineProperty__default["default"](_ref, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty__default["default"](_ref, "authdetailsContext", authdetailsContext), _defineProperty__default["default"](_ref, "addtofavoritescontext", addtofavoritescontext), _defineProperty__default["default"](_ref, "variantindexcompleted", variantindexcompleted), _defineProperty__default["default"](_ref, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty__default["default"](_ref, "NotificationManager", NotificationManager), _defineProperty__default["default"](_ref, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty__default["default"](_ref, "relatedproducts", relatedproducts), _defineProperty__default["default"](_ref, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty__default["default"](_ref, "StoreInfoprops", StoreInfo), _ref)
       }), fetchProductInfoQueryContext.data.data.productinfo.item_type == 'service' && /*#__PURE__*/React__default["default"].createElement(Service_itemtype, {
         actions: (_ref2 = {
           returnpolicyobj: returnpolicyobj,
           langdetect: langdetect,
           lang: lang,
           srcfromprops: props.srcfromprops
-        }, _defineProperty__default["default"](_ref2, "returnpolicyobj", returnpolicyobj), _defineProperty__default["default"](_ref2, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty__default["default"](_ref2, "addtocartfunc", addtocartfunc), _defineProperty__default["default"](_ref2, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty__default["default"](_ref2, "productimagesarray", productimagesarray), _defineProperty__default["default"](_ref2, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty__default["default"](_ref2, "sectionproperties", sectionproperties), _defineProperty__default["default"](_ref2, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty__default["default"](_ref2, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty__default["default"](_ref2, "routingcountext", routingcountext), _defineProperty__default["default"](_ref2, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty__default["default"](_ref2, "authdetailsContext", authdetailsContext), _defineProperty__default["default"](_ref2, "addtofavoritescontext", addtofavoritescontext), _defineProperty__default["default"](_ref2, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty__default["default"](_ref2, "variantindexcompleted", variantindexcompleted), _defineProperty__default["default"](_ref2, "GeneralAPIMutationContext", GeneralAPIMutationContext), _defineProperty__default["default"](_ref2, "NotificationManager", NotificationManager), _defineProperty__default["default"](_ref2, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty__default["default"](_ref2, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty__default["default"](_ref2, "relatedproducts", relatedproducts), _defineProperty__default["default"](_ref2, "getQuantityCondition", getQuantityCondition), _defineProperty__default["default"](_ref2, "StoreInfoprops", StoreInfo), _ref2)
+        }, _defineProperty__default["default"](_ref2, "returnpolicyobj", returnpolicyobj), _defineProperty__default["default"](_ref2, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty__default["default"](_ref2, "addtocartfunc", addtocartfunc), _defineProperty__default["default"](_ref2, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty__default["default"](_ref2, "clearchoosenvaluesbutkeepcurrentvalue", clearchoosenvaluesbutkeepcurrentvalue), _defineProperty__default["default"](_ref2, "productimagesarray", productimagesarray), _defineProperty__default["default"](_ref2, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty__default["default"](_ref2, "sectionproperties", sectionproperties), _defineProperty__default["default"](_ref2, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty__default["default"](_ref2, "ProductInfoObj", ProductInfoObj), _defineProperty__default["default"](_ref2, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty__default["default"](_ref2, "routingcountext", routingcountext), _defineProperty__default["default"](_ref2, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty__default["default"](_ref2, "authdetailsContext", authdetailsContext), _defineProperty__default["default"](_ref2, "addtofavoritescontext", addtofavoritescontext), _defineProperty__default["default"](_ref2, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty__default["default"](_ref2, "variantindexcompleted", variantindexcompleted), _defineProperty__default["default"](_ref2, "GeneralAPIMutationContext", GeneralAPIMutationContext), _defineProperty__default["default"](_ref2, "NotificationManager", NotificationManager), _defineProperty__default["default"](_ref2, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty__default["default"](_ref2, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty__default["default"](_ref2, "relatedproducts", relatedproducts), _defineProperty__default["default"](_ref2, "getQuantityCondition", getQuantityCondition), _defineProperty__default["default"](_ref2, "StoreInfoprops", StoreInfo), _ref2)
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: sectionproperties.card_marginLeft != 0 ? ' col-lg-12 p-0 pl-lg-3 pr-lg-3 pl-md-4 pr-md-4 pl-sm-1 pr-sm-1 ' : ' col-lg-12 p-sm-0 ',
         style: {
@@ -10792,7 +10773,7 @@
               return /*#__PURE__*/React__default["default"].createElement("div", {
                 className: section_cssstyles.cards_sections + ' row ml-0 mr-0 w-100 p-md-0 px-1025-1 '
               }, sectionproperties.view_as_slider_vertical == 'Slider (Horizontal)' && /*#__PURE__*/React__default["default"].createElement("div", {
-                "class": langdetect == 'en' ? 'col-lg-12 p-0 pl-sm-2' : 'col-lg-12 p-0 pr-sm-2'
+                "class": langdetect == 'en' ? sectionproperties.paddingLeft != 0 ? 'col-lg-12 p-0 pl-sm-2' : 'col-lg-12 p-0 ' : sectionproperties.paddingRight != 0 ? 'col-lg-12 p-0 pr-sm-2' : 'col-lg-12 p-0 '
               }, /*#__PURE__*/React__default["default"].createElement(reactHorizontalScrollingMenu.ScrollMenu, {
                 transitionBehavior: 'auto',
                 wrapperClassName: '',
@@ -26341,7 +26322,7 @@
     function ownKeys$1o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     function _objectSpread$1o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1o(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     var Allinonefooter = function Allinonefooter(props) {
-      var _logoarrayofobjects$, _logoarrayofobjects$2, _authdetailsContext$i6, _authdetailsContext$i7, _templatepropcontext$;
+      var _logoarrayofobjects$, _logoarrayofobjects$2, _authdetailsContext$i6, _authdetailsContext$i7, _templatepropcontext$, _authdetailsContext$i10, _authdetailsContext$i13, _authdetailsContext$i16;
       var _useState = React.useState(''),
         _useState2 = _slicedToArray__default["default"](_useState, 2),
         sectionproperties = _useState2[0],
@@ -26734,35 +26715,35 @@
         }
       }, langdetect == 'en' ? sectionproperties.otherinfotitle2en : sectionproperties.otherinfotitle2ar)), /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 p-0 d-flex align-items-center justify-content-start"
-      }, sectionproperties.fbbtn_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, sectionproperties.fbbtn_show == 'Show' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i10 = authdetailsContext.instinfo) === null || _authdetailsContext$i10 === void 0 ? void 0 : _authdetailsContext$i10.facebooklink) != null && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "".concat(footerStyles.facebook_btn) + '  d-flex align-items-center justify-content-center ',
         onClick: function onClick() {
-          var _authdetailsContext$i10;
-          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i10 = authdetailsContext.instinfo) === null || _authdetailsContext$i10 === void 0 ? void 0 : _authdetailsContext$i10.facebooklink) != null) {
-            var _authdetailsContext$i11;
-            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i11 = authdetailsContext.instinfo) === null || _authdetailsContext$i11 === void 0 ? void 0 : _authdetailsContext$i11.facebooklink, '_blank');
+          var _authdetailsContext$i11;
+          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i11 = authdetailsContext.instinfo) === null || _authdetailsContext$i11 === void 0 ? void 0 : _authdetailsContext$i11.facebooklink) != null) {
+            var _authdetailsContext$i12;
+            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i12 = authdetailsContext.instinfo) === null || _authdetailsContext$i12 === void 0 ? void 0 : _authdetailsContext$i12.facebooklink, '_blank');
           }
         }
       }, /*#__PURE__*/React__default["default"].createElement(FaFacebookF.FaFacebookF, {
         size: sectionproperties.facebkbtnniconfontsize
-      })), sectionproperties.instbtn_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      })), sectionproperties.instbtn_show == 'Show' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i13 = authdetailsContext.instinfo) === null || _authdetailsContext$i13 === void 0 ? void 0 : _authdetailsContext$i13.instagramlink) != null && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "".concat(footerStyles.instgram_btn) + '  d-flex align-items-center justify-content-center ml-3 mr-3 ',
         onClick: function onClick() {
-          var _authdetailsContext$i12;
-          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i12 = authdetailsContext.instinfo) === null || _authdetailsContext$i12 === void 0 ? void 0 : _authdetailsContext$i12.instagramlink) != null) {
-            var _authdetailsContext$i13;
-            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i13 = authdetailsContext.instinfo) === null || _authdetailsContext$i13 === void 0 ? void 0 : _authdetailsContext$i13.instagramlink, '_blank');
+          var _authdetailsContext$i14;
+          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i14 = authdetailsContext.instinfo) === null || _authdetailsContext$i14 === void 0 ? void 0 : _authdetailsContext$i14.instagramlink) != null) {
+            var _authdetailsContext$i15;
+            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i15 = authdetailsContext.instinfo) === null || _authdetailsContext$i15 === void 0 ? void 0 : _authdetailsContext$i15.instagramlink, '_blank');
           }
         }
       }, /*#__PURE__*/React__default["default"].createElement(AiFillInstagram.AiFillInstagram, {
         size: sectionproperties.instgrambtniconfontsize
-      })), sectionproperties.youtbtn_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      })), sectionproperties.youtbtn_show == 'Show' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i16 = authdetailsContext.instinfo) === null || _authdetailsContext$i16 === void 0 ? void 0 : _authdetailsContext$i16.whatsappnumber) != null && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "".concat(footerStyles.youtube_btn) + '  d-flex align-items-center justify-content-center ',
         onClick: function onClick() {
-          var _authdetailsContext$i14;
-          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i14 = authdetailsContext.instinfo) === null || _authdetailsContext$i14 === void 0 ? void 0 : _authdetailsContext$i14.whatsappnumber) != null) {
-            var _authdetailsContext$i15;
-            window.open('https://api.whatsapp.com/send?phone=' + (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i15 = authdetailsContext.instinfo) === null || _authdetailsContext$i15 === void 0 ? void 0 : _authdetailsContext$i15.whatsappnumber), '_blank');
+          var _authdetailsContext$i17;
+          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i17 = authdetailsContext.instinfo) === null || _authdetailsContext$i17 === void 0 ? void 0 : _authdetailsContext$i17.whatsappnumber) != null) {
+            var _authdetailsContext$i18;
+            window.open('https://api.whatsapp.com/send?phone=' + (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i18 = authdetailsContext.instinfo) === null || _authdetailsContext$i18 === void 0 ? void 0 : _authdetailsContext$i18.whatsappnumber), '_blank');
           }
         }
       }, /*#__PURE__*/React__default["default"].createElement(FaWhatsapp.FaWhatsapp, {
@@ -27837,7 +27818,7 @@
     function ownKeys$1k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     function _objectSpread$1k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1k(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     var Footer4 = function Footer4(props) {
-      var _logoarrayofobjects$, _logoarrayofobjects$2, _templatepropcontext$, _authdetailsContext$i, _authdetailsContext$i4, _authdetailsContext$i5;
+      var _logoarrayofobjects$, _logoarrayofobjects$2, _templatepropcontext$, _authdetailsContext$i, _authdetailsContext$i4, _authdetailsContext$i5, _authdetailsContext$i8, _authdetailsContext$i11, _authdetailsContext$i14;
       var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
       var lang = props.actions.lang;
       var langdetect = props.actions.langdetect;
@@ -28175,39 +28156,39 @@
           color: sectionproperties.generaltext_fontColor,
           fontWeight: sectionproperties.generaltext_fontWeight
         }
-      }, langdetect == 'en' ? sectionproperties.general_text_content : sectionproperties.general_text_content_ar), sectionproperties.fbbtn_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, langdetect == 'en' ? sectionproperties.general_text_content : sectionproperties.general_text_content_ar), sectionproperties.fbbtn_show == 'Show' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i8 = authdetailsContext.instinfo) === null || _authdetailsContext$i8 === void 0 ? void 0 : _authdetailsContext$i8.facebooklink) && /*#__PURE__*/React__default["default"].createElement("div", {
         className: langdetect == 'en' ? "".concat(footerStyles.facebook_btn) + ' allcentered mr-3 mr-sm-4 ' : "".concat(footerStyles.facebook_btn) + ' allcentered ml-3 ml-sm-4 ',
         onClick: function onClick() {
-          var _authdetailsContext$i8;
-          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i8 = authdetailsContext.instinfo) === null || _authdetailsContext$i8 === void 0 ? void 0 : _authdetailsContext$i8.facebooklink) != null) {
-            var _authdetailsContext$i9;
-            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i9 = authdetailsContext.instinfo) === null || _authdetailsContext$i9 === void 0 ? void 0 : _authdetailsContext$i9.facebooklink, '_blank');
+          var _authdetailsContext$i9;
+          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i9 = authdetailsContext.instinfo) === null || _authdetailsContext$i9 === void 0 ? void 0 : _authdetailsContext$i9.facebooklink) != null) {
+            var _authdetailsContext$i10;
+            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i10 = authdetailsContext.instinfo) === null || _authdetailsContext$i10 === void 0 ? void 0 : _authdetailsContext$i10.facebooklink, '_blank');
           }
         }
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "h-100 allcentered"
       }, /*#__PURE__*/React__default["default"].createElement(FaFacebookF.FaFacebookF, {
         size: sectionproperties.facebkbtnniconfontsize
-      }))), sectionproperties.instbtn_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }))), sectionproperties.instbtn_show == 'Show' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i11 = authdetailsContext.instinfo) === null || _authdetailsContext$i11 === void 0 ? void 0 : _authdetailsContext$i11.instagramlink) != null && /*#__PURE__*/React__default["default"].createElement("div", {
         className: langdetect == 'en' ? "".concat(footerStyles.instgram_btn) + ' allcentered mr-3 mr-sm-4 ' : "".concat(footerStyles.instgram_btn) + ' allcentered ml-3 ml-sm-4 ',
         onClick: function onClick() {
-          var _authdetailsContext$i10;
-          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i10 = authdetailsContext.instinfo) === null || _authdetailsContext$i10 === void 0 ? void 0 : _authdetailsContext$i10.instagramlink) != null) {
-            var _authdetailsContext$i11;
-            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i11 = authdetailsContext.instinfo) === null || _authdetailsContext$i11 === void 0 ? void 0 : _authdetailsContext$i11.instagramlink, '_blank');
+          var _authdetailsContext$i12;
+          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i12 = authdetailsContext.instinfo) === null || _authdetailsContext$i12 === void 0 ? void 0 : _authdetailsContext$i12.instagramlink) != null) {
+            var _authdetailsContext$i13;
+            window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i13 = authdetailsContext.instinfo) === null || _authdetailsContext$i13 === void 0 ? void 0 : _authdetailsContext$i13.instagramlink, '_blank');
           }
         }
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "h-100 allcentered"
       }, /*#__PURE__*/React__default["default"].createElement(AiFillInstagram.AiFillInstagram, {
         size: sectionproperties.instgrambtniconfontsize
-      }))), sectionproperties.youtbtn_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }))), sectionproperties.youtbtn_show == 'Show' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i14 = authdetailsContext.instinfo) === null || _authdetailsContext$i14 === void 0 ? void 0 : _authdetailsContext$i14.whatsappnumber) != null && /*#__PURE__*/React__default["default"].createElement("div", {
         className: langdetect == 'en' ? "".concat(footerStyles.youtube_btn) + ' allcentered mr-3 mr-sm-4 ' : "".concat(footerStyles.youtube_btn) + ' allcentered ml-3 ml-sm-4 ',
         onClick: function onClick() {
-          var _authdetailsContext$i12;
-          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i12 = authdetailsContext.instinfo) === null || _authdetailsContext$i12 === void 0 ? void 0 : _authdetailsContext$i12.whatsappnumber) != null) {
-            var _authdetailsContext$i13;
-            window.open('https://api.whatsapp.com/send?phone=' + (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i13 = authdetailsContext.instinfo) === null || _authdetailsContext$i13 === void 0 ? void 0 : _authdetailsContext$i13.whatsappnumber), '_blank');
+          var _authdetailsContext$i15;
+          if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i15 = authdetailsContext.instinfo) === null || _authdetailsContext$i15 === void 0 ? void 0 : _authdetailsContext$i15.whatsappnumber) != null) {
+            var _authdetailsContext$i16;
+            window.open('https://api.whatsapp.com/send?phone=' + (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i16 = authdetailsContext.instinfo) === null || _authdetailsContext$i16 === void 0 ? void 0 : _authdetailsContext$i16.whatsappnumber), '_blank');
           }
         }
       }, /*#__PURE__*/React__default["default"].createElement("i", {
@@ -28416,6 +28397,14 @@
             top: 0,
             bottom: 0
           }
+        }),
+        apptore: glamor.css({
+          width: '100%',
+          objectFit: 'contain'
+        }),
+        googleplay: glamor.css({
+          width: '100%',
+          objectFit: 'contain'
         })
       };
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -28455,7 +28444,10 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-lg-12 allcentered p-0"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "".concat(footerStyles.footerlogo) + ' d-flex flex-column align-items-center justify-content-start '
+        className: "".concat(footerStyles.footerlogo) + ' d-flex flex-column align-items-center justify-content-start cursor-pointer ',
+        onClick: function onClick() {
+          routingcountext('home');
+        }
       }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
         urlEndpoint: IKurlEndpoint,
         publicKey: IKpublicKey,
@@ -28589,7 +28581,10 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-lg-12 allcentered"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "".concat(footerStyles.footerlogo) + ' d-flex flex-column align-items-center justify-content-start '
+        className: "".concat(footerStyles.footerlogo) + ' d-flex flex-column align-items-center justify-content-start cursor-pointer ',
+        onClick: function onClick() {
+          routingcountext('home');
+        }
       }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
         urlEndpoint: IKurlEndpoint,
         publicKey: IKpublicKey,
@@ -28718,6 +28713,40 @@
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         src: mastercard,
         className: "".concat(footerStyles.payimg)
+      })))), sectionproperties.showdownloadsection == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "row m-0 w-100 mt-3"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "col-lg-12 p-0 d-flex justify-content-md-center"
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        className: "".concat(footerStyles.footertitlestyles) + ' m-0 p-0 '
+      }, langdetect == 'en' ? sectionproperties.otherinfotitle1en : sectionproperties.otherinfotitle1ar)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "col-lg-12 mt-2 p-0 m-0 w-100 d-flex flex-row align-items-center justify-content-start justify-content-md-center"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": 'col-lg-6 col-md-4 col-sm-6 p-0 '
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        "class": "".concat(footerStyles.apptore) + ' d-flex justify-content-center align-items-center cursor-pointer ',
+        src: appstore,
+        onClick: function onClick() {
+          var _authdetailsContext$i25;
+          window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i25 = authdetailsContext.instinfo) === null || _authdetailsContext$i25 === void 0 ? void 0 : _authdetailsContext$i25.mobileapplink_appstore, '_blank');
+        },
+        style: {
+          width: '80%',
+          height: '80%'
+        }
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": 'col-lg-6 col-md-4 col-sm-6 p-0'
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        "class": "".concat(footerStyles.googleplay) + ' d-flex justify-content-start align-items-center cursor-pointer ',
+        src: googleplay,
+        onClick: function onClick() {
+          var _authdetailsContext$i26;
+          window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i26 = authdetailsContext.instinfo) === null || _authdetailsContext$i26 === void 0 ? void 0 : _authdetailsContext$i26.mobileapplink_playstore, '_blank');
+        },
+        style: {
+          width: '80%',
+          height: '80%'
+        }
       }))))))));
     };
 
@@ -36495,11 +36524,11 @@
         }, sectionproperties.slideshowtext1_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
           className: bgcssstyles.text1styles + ' col-lg-12 p-0 w-100 d-flex align-items-center '
         }, /*#__PURE__*/React__default["default"].createElement("p", {
-          className: bgcssstyles.text1styles + ' d-flex wordbreak m-0 p-0 '
+          className: bgcssstyles.text1styles + ' d-flex wordbreak m-0 p-0 w-100 '
         }, langdetect == 'en' ? item.title_en : item.title_ar)), sectionproperties.slideshowtext2_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
           className: bgcssstyles.text2styles + ' col-lg-12 p-0 w-100 d-flex '
         }, /*#__PURE__*/React__default["default"].createElement("p", {
-          className: bgcssstyles.text2styles + ' d-flex wordbreak m-0 p-0 '
+          className: bgcssstyles.text2styles + ' d-flex wordbreak m-0 p-0 w-100 '
         }, langdetect == 'en' ? item.description_en : item.description_ar)));
       };
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -41564,8 +41593,8 @@
       }, item.name)));
     };
 
-    var css_248z$e = "\n@media (max-width: 576px) {\n    .generalCardsStyles-module_productcard__3PgiR {\n        max-width: 280px !important;\n        min-width: 280px !important;\n    }\n    .generalCardsStyles-module_Simpleproductcard__GhVP7 {\n        max-width: 250px !important;\n        min-width: 250px !important;\n    }\n    .generalCardsStyles-module_ClassicCategoryCard__UWO1a{\n        max-width: 330px !important;\n        min-width: 330px !important;\n    }\n}\n";
-    var generalCardsStyles = {"productcard":"generalCardsStyles-module_productcard__3PgiR","Simpleproductcard":"generalCardsStyles-module_Simpleproductcard__GhVP7","ClassicCategoryCard":"generalCardsStyles-module_ClassicCategoryCard__UWO1a"};
+    var css_248z$e = "\n@media (max-width: 576px) {\n    .generalCardsStyles-module_productcard__3PgiR {\n        max-width: 280px !important;\n        min-width: 280px !important;\n    }\n    .generalCardsStyles-module_Simpleproductcard__GhVP7 {\n        max-width: 250px !important;\n        min-width: 250px !important;\n    }\n    .generalCardsStyles-module_ClassicCategoryCard__UWO1a{\n        max-width: 330px !important;\n        min-width: 330px !important;\n    }\n    .generalCardsStyles-module_newproductcard__ATddn{\n        max-width: 330px !important;\n        min-width: 330px !important;\n    }\n}\n";
+    var generalCardsStyles = {"productcard":"generalCardsStyles-module_productcard__3PgiR","Simpleproductcard":"generalCardsStyles-module_Simpleproductcard__GhVP7","ClassicCategoryCard":"generalCardsStyles-module_ClassicCategoryCard__UWO1a","newproductcard":"generalCardsStyles-module_newproductcard__ATddn"};
     styleInject(css_248z$e);
 
     function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -42889,29 +42918,17 @@
       var setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
       var addtofavoritescontext = props.actions.addtofavoritescontext;
       var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
-      props.actions.AddtoCartContext;
-      props.actions.AddtoCartMutationContext;
-      props.actions.StaticPagesLinksContext;
-      props.actions.routingcountext;
       var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
       React.useEffect(function () {
-        if (props.srcfrom == 'addsectionform') {
-          var secpropobj = {};
-          props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
-            secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
-          });
-          setsectionproperties(_objectSpread$y({}, secpropobj));
-        } else {
-          var secpropobj = {};
-          StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
-            if (sectionitem.sectionid == props.sectionidprops) {
-              sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
-                secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
-              });
-            }
-          });
-          setsectionproperties(_objectSpread$y({}, secpropobj));
-        }
+        var secpropobj = {};
+        StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+          if (sectionitem.sectionid == props.sectionidprops) {
+            sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+              secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+            });
+          }
+        });
+        setsectionproperties(_objectSpread$y({}, secpropobj));
       }, [StatePagePropertiesContext]);
       React.useEffect(function () {
         setitem(props.cardinfoitemprops);
@@ -42922,7 +42939,15 @@
           height: sectionproperties.variantcontainer_height + 'vh',
           borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px'
         }),
-        productcard: glamor.css((_css = {
+        productcard: glamor.css({
+          minWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+          maxWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+          '@media (max-width: 800px)': {
+            minWidth: sectionproperties.widthresponsive + 'px',
+            maxWidth: sectionproperties.widthresponsive + 'px'
+          }
+        }),
+        innerproductcard: glamor.css((_css = {
           background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
           opacity: sectionproperties.cardbg_opacity,
           borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
@@ -42946,7 +42971,6 @@
           opacity: 1
         }), _css)),
         productcard_imgcontainer: glamor.css({
-          height: sectionproperties.image_height + 'px',
           background: sectionproperties.image_bgtransparent == 'Transparent' ? '' : sectionproperties.image_bgcolor,
           border: sectionproperties.image_borderwidth + 'px solid ' + sectionproperties.image_bordercolor,
           borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
@@ -43087,164 +43111,182 @@
           zIndex: 10000
         })
       };
+      var ImageContent = function ImageContent() {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "w-100"
+        }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
+          urlEndpoint: IKurlEndpoint,
+          publicKey: IKpublicKey,
+          path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
+          loading: "lazy",
+          style: {
+            width: '100%',
+            height: '100%',
+            objectFit: sectionproperties.bgcovercontain == 'Contain' ? 'contain' : 'cover',
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px'
+          }
+        }), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "".concat(card_cssstyles.wishlist_btn) + ' wishlist_btn cursor-pointer ',
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            addtofavoritescontext(item.productid);
+          }
+        }, item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
+          "class": "h-100 d-flex align-items-center justify-content-center"
+        }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiFillStar.AiFillStar, {
+          size: sectionproperties.favBtnIconfontsize,
+          style: {
+            color: sectionproperties.activefaviconcolor
+          }
+        }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaHeart.FaHeart, {
+          size: sectionproperties.favBtnIconfontsize,
+          style: {
+            color: sectionproperties.activefaviconcolor
+          }
+        })), !item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
+          "class": "h-100 d-flex align-items-center justify-content-center"
+        }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiOutlineStar.AiOutlineStar, {
+          size: sectionproperties.favBtnIconfontsize
+        }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaRegHeart.FaRegHeart, {
+          size: sectionproperties.favBtnIconfontsize
+        }))), sectionproperties.showbadge == 'Show' && item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "allcentered",
+          style: {
+            position: 'absolute',
+            top: sectionproperties.badge_top + 'px',
+            right: sectionproperties.badge_right + 'px',
+            width: sectionproperties.badge_width + 'px',
+            height: sectionproperties.badge_height + 'px',
+            background: sectionproperties.badge_bgcolor,
+            borderRadius: sectionproperties.badge_borderradius + 'px',
+            border: sectionproperties.badgeborderwidth + 'px solid ' + sectionproperties.badge_color
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("p", {
+          "class": "m-0 p-0 text-uppercase",
+          style: {
+            color: sectionproperties.badge_color,
+            fontSize: sectionproperties.badge_fontsize + 'px'
+          }
+        }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr)), sectionproperties.showpill == 'Show' && item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "allcentered",
+          style: {
+            position: 'absolute',
+            top: sectionproperties.pillpositionfromtop + 'px',
+            right: sectionproperties.pillpositionfromright + 'px',
+            width: sectionproperties.pillwidth + 'px',
+            height: sectionproperties.pillheight + 'px',
+            background: sectionproperties.pillbgcolor,
+            borderRadius: sectionproperties.pillborderBottomLeftRadius + 'px'
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("p", {
+          "class": "m-0 p-0 text-uppercase",
+          style: {
+            color: sectionproperties.pillcolor,
+            fontSize: sectionproperties.pillfontSize + 'px',
+            direction: 'ltr'
+          }
+        }, '-' + Math.round(10.0 * ((parseInt(item.defaultprice) - parseInt(item.defaultsaleprice)) / parseInt(item.defaultprice)) * 100) / 10.0 + '%')), /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "".concat(card_cssstyles.buttoncont) + ' buttoncont row w-100 m-0 d-flex justify-content-center align-items-center '
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "col-lg-12 p-0 mb-2"
+        }, /*#__PURE__*/React__default["default"].createElement("button", {
+          "class": "".concat(card_cssstyles.quickshow_btn) + ' cursor-pointer d-flex d-md-none d-sm-none justify-content-center align-items-center quickshow_btn ',
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setShowProductInfoModalContext(true);
+            setProductIdProdutInfoModalContext(item.productid);
+          }
+        }, langdetect == 'en' ? sectionproperties.slideshow_btn_text : sectionproperties.slideshow_btn_text_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "col-lg-12 p-0"
+        }, sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("button", {
+          "class": "".concat(card_cssstyles.cart_btn) + ' cursor-pointer d-flex d-md-none d-sm-none justify-content-center align-items-center cart_btn ',
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
+          }
+        }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic))), /*#__PURE__*/React__default["default"].createElement("div", {
+          style: {
+            bottom: 0,
+            position: 'absolute',
+            width: '100%'
+          },
+          "class": "d-none d-md-flex d-sm-flex"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          style: {
+            background: sectionproperties.slideshow_btn_bg,
+            color: sectionproperties.generalbtn_textColor,
+            height: '40px'
+          },
+          "class": "col-lg-6 p-0 d-flex align-items-center justify-content-center",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setShowProductInfoModalContext(true);
+            setProductIdProdutInfoModalContext(item.productid);
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(BsEye.BsEye, {
+          size: sectionproperties.cartBtn_iconFontSize
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
+          style: {
+            background: sectionproperties.cartbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColor,
+            color: sectionproperties.cartBtnTextcolor,
+            height: '40px'
+          },
+          "class": "col-lg-6 p-0 d-flex align-items-center justify-content-center",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
+          }
+        }, sectionproperties.carticonstyle == 'Shopping bag 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingBag.FiShoppingBag, {
+          "class": "",
+          size: sectionproperties.cartBtn_iconFontSize
+        }), sectionproperties.carticonstyle == 'Shopping bag 2' && /*#__PURE__*/React__default["default"].createElement(CgShoppingBag.CgShoppingBag, {
+          "class": "",
+          size: sectionproperties.cartBtn_iconFontSize
+        }), sectionproperties.carticonstyle == 'Shopping bag 3' && /*#__PURE__*/React__default["default"].createElement(BsBag.BsBag, {
+          "class": "",
+          size: sectionproperties.cartBtn_iconFontSize
+        }), sectionproperties.carticonstyle == 'Shopping bag 4' && /*#__PURE__*/React__default["default"].createElement(RiHandbagLine.RiHandbagLine, {
+          size: sectionproperties.cartBtn_iconFontSize
+        }), sectionproperties.carticonstyle == 'Shopping cart 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingCart.FiShoppingCart, {
+          "class": "",
+          size: sectionproperties.cartBtn_iconFontSize
+        }), sectionproperties.carticonstyle == 'Shopping cart 2' && /*#__PURE__*/React__default["default"].createElement(MdAddShoppingCart.MdAddShoppingCart, {
+          size: sectionproperties.cartBtn_iconFontSize
+        }))));
+      };
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "row m-0 w-100",
+        // ${generalCardsStyles.newproductcard}
+        "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 ' : " ".concat(card_cssstyles.productcard),
         style: {
           paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
           paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px'
         }
       }, sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "".concat(card_cssstyles.productcard) + ' w-100 '
+        "class": "".concat(card_cssstyles.innerproductcard) + ' w-100 '
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: function onClick() {
           cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
         },
-        "class": "".concat(card_cssstyles.productcard_imgcontainer) + ' cursor-pointer ',
+        "class": "".concat(card_cssstyles.productcard_imgcontainer) + ' cursor-pointer d-flex d-md-none w-100 ',
         style: {
           position: 'relative',
-          marginBottom: sectionproperties.image_mb + 'px'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
-        urlEndpoint: IKurlEndpoint,
-        publicKey: IKpublicKey,
-        path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
-        loading: "lazy",
-        style: {
-          width: '100%',
-          height: '100%',
-          objectFit: sectionproperties.bgcovercontain == 'Contain' ? 'contain' : 'cover',
-          borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
-          borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
-          borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
-          borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px'
-        }
-      }), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "".concat(card_cssstyles.wishlist_btn) + ' wishlist_btn cursor-pointer ',
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          addtofavoritescontext(item.productid);
-        }
-      }, item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
-        "class": "h-100 d-flex align-items-center justify-content-center"
-      }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiFillStar.AiFillStar, {
-        size: sectionproperties.favBtnIconfontsize,
-        style: {
-          color: sectionproperties.activefaviconcolor
-        }
-      }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaHeart.FaHeart, {
-        size: sectionproperties.favBtnIconfontsize,
-        style: {
-          color: sectionproperties.activefaviconcolor
-        }
-      })), !item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
-        "class": "h-100 d-flex align-items-center justify-content-center"
-      }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiOutlineStar.AiOutlineStar, {
-        size: sectionproperties.favBtnIconfontsize
-      }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaRegHeart.FaRegHeart, {
-        size: sectionproperties.favBtnIconfontsize
-      }))), sectionproperties.showbadge == 'Show' && item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "allcentered",
-        style: {
-          position: 'absolute',
-          top: sectionproperties.badge_top + 'px',
-          right: sectionproperties.badge_right + 'px',
-          width: sectionproperties.badge_width + 'px',
-          height: sectionproperties.badge_height + 'px',
-          background: sectionproperties.badge_bgcolor,
-          borderRadius: sectionproperties.badge_borderradius + 'px'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 p-0 text-uppercase",
-        style: {
-          color: sectionproperties.badge_color,
-          fontSize: sectionproperties.badge_fontsize + 'px'
-        }
-      }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr)), sectionproperties.showpill == 'Show' && item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "allcentered",
-        style: {
-          position: 'absolute',
-          top: sectionproperties.pillpositionfromtop + 'px',
-          right: sectionproperties.pillpositionfromright + 'px',
-          width: sectionproperties.pillwidth + 'px',
-          height: sectionproperties.pillheight + 'px',
-          background: sectionproperties.pillbgcolor,
-          borderRadius: sectionproperties.pillborderBottomLeftRadius + 'px'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 p-0 text-uppercase",
-        style: {
-          color: sectionproperties.pillcolor,
-          fontSize: sectionproperties.pillfontSize + 'px',
-          direction: 'ltr'
-        }
-      }, '-' + Math.round(10.0 * ((parseInt(item.defaultprice) - parseInt(item.defaultsaleprice)) / parseInt(item.defaultprice)) * 100) / 10.0 + '%')), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "".concat(card_cssstyles.buttoncont) + ' buttoncont row w-100 m-0 d-flex justify-content-center align-items-center '
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0 mb-2"
-      }, /*#__PURE__*/React__default["default"].createElement("button", {
-        "class": "".concat(card_cssstyles.quickshow_btn) + ' cursor-pointer d-flex d-md-none d-sm-none justify-content-center align-items-center quickshow_btn ',
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          setShowProductInfoModalContext(true);
-          setProductIdProdutInfoModalContext(item.productid);
+          marginBottom: sectionproperties.image_mb + 'px',
+          height: sectionproperties.image_height + 'px'
         }
-      }, langdetect == 'en' ? sectionproperties.slideshow_btn_text : sectionproperties.slideshow_btn_text_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 p-0"
-      }, sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("button", {
-        "class": "".concat(card_cssstyles.cart_btn) + ' cursor-pointer d-flex d-md-none d-sm-none justify-content-center align-items-center cart_btn ',
-        onClick: function onClick(e) {
-          e.stopPropagation();
+      }, ImageContent()), /*#__PURE__*/React__default["default"].createElement("div", {
+        onClick: function onClick() {
           cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
-        }
-      }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic))), /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          bottom: 0,
-          position: 'absolute',
-          width: '100%'
         },
-        "class": "d-none d-md-flex d-sm-flex"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          background: sectionproperties.slideshow_btn_bg,
-          color: sectionproperties.generalbtn_textColor,
-          height: '40px'
-        },
-        "class": "col-lg-6 p-0 d-flex align-items-center justify-content-center",
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          setShowProductInfoModalContext(true);
-          setProductIdProdutInfoModalContext(item.productid);
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(BsEye.BsEye, {
-        size: sectionproperties.cartBtn_iconFontSize
-      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "".concat(card_cssstyles.productcard_imgcontainer) + ' cursor-pointer d-none d-md-flex ',
         style: {
-          background: sectionproperties.cartbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColor,
-          color: sectionproperties.cartBtnTextcolor,
-          height: '40px'
-        },
-        "class": "col-lg-6 p-0 d-flex align-items-center justify-content-center",
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
+          position: 'relative',
+          marginBottom: sectionproperties.image_mb + 'px',
+          height: sectionproperties.height_responsive + 'px'
         }
-      }, sectionproperties.carticonstyle == 'Shopping bag 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingBag.FiShoppingBag, {
-        "class": "",
-        size: sectionproperties.cartBtn_iconFontSize
-      }), sectionproperties.carticonstyle == 'Shopping bag 2' && /*#__PURE__*/React__default["default"].createElement(CgShoppingBag.CgShoppingBag, {
-        "class": "",
-        size: sectionproperties.cartBtn_iconFontSize
-      }), sectionproperties.carticonstyle == 'Shopping bag 3' && /*#__PURE__*/React__default["default"].createElement(BsBag.BsBag, {
-        "class": "",
-        size: sectionproperties.cartBtn_iconFontSize
-      }), sectionproperties.carticonstyle == 'Shopping bag 4' && /*#__PURE__*/React__default["default"].createElement(RiHandbagLine.RiHandbagLine, {
-        size: sectionproperties.cartBtn_iconFontSize
-      }), sectionproperties.carticonstyle == 'Shopping cart 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingCart.FiShoppingCart, {
-        "class": "",
-        size: sectionproperties.cartBtn_iconFontSize
-      }), sectionproperties.carticonstyle == 'Shopping cart 2' && /*#__PURE__*/React__default["default"].createElement(MdAddShoppingCart.MdAddShoppingCart, {
-        size: sectionproperties.cartBtn_iconFontSize
-      })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, ImageContent()), /*#__PURE__*/React__default["default"].createElement("div", {
         "class": 'row m-0 w-100 text-start d-flex justify-content-start mt-2'
       }, sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 d-flex justify-content-start p-0"
@@ -43257,7 +43299,10 @@
           textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
         }
       }, item.name)), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "col-lg-12 d-flex align-items-center justify-content-start p-0"
+        "class": "col-lg-12 d-flex align-items-center p-0",
+        style: {
+          justifyContent: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
+        }
       }, sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
         "class": "".concat(card_cssstyles.productPricestyles) + ' m-0 p-0  '
       }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname, ' '), sectionproperties.prodsalePriceshow == 'Show' && item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -47094,7 +47139,7 @@
           fontSize: sectionproperties.badge_fontsize + 'px'
         }
       }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": sectionproperties.image_show == 'Show' ? 'col-lg-8 col-md-8 col-sm-8 pt-2' : 'col-lg-12 col-md-12 col-sm-12 pt-2',
+        "class": sectionproperties.image_show == 'show' ? 'col-lg-8 col-md-8 col-sm-8 pt-2' : 'col-lg-12 col-md-12 col-sm-12 pt-2',
         style: {
           paddingRight: langdetect == 'en' ? 0 : '',
           paddingLeft: langdetect == 'ar' ? 0 : '',