tabexseriescomponents 0.0.239 → 0.0.241

package/dist/index.esm.js

@@ -1012,21 +1012,251 @@ styleInject(css_248z$K);
 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.createElement(React.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.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.createElement("div", {
+      className: "col-lg-12 p-0 mb-3 d-flex justify-content-start"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "row m-0 w-100 d-flex align-items-start"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "col-lg-12 col-md-12 p-0 d-flex"
+    }, /*#__PURE__*/React.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.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.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.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.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.createElement("i", {
+          "class": "h-100 allcentered"
+        }, /*#__PURE__*/React.createElement(IoMdClose, null))), /*#__PURE__*/React.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.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.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.createElement("i", {
+          "class": "h-100 allcentered"
+        }, /*#__PURE__*/React.createElement(IoMdClose, null))), /*#__PURE__*/React.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.createElement(React.Fragment, null, sectionproperties.showDefaultPricingSection == 'Show' && /*#__PURE__*/React.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.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.createElement("span", {
+    style: {
+      fontSize: sectionproperties.defaultPriceFontSize + 'px',
+      fontWeight: sectionproperties.defaultPriceFontWeight,
+      color: sectionproperties.defaultPriceColor
+    }
+  }, quantityconditionfoundobjprops != null && /*#__PURE__*/React.createElement(React.Fragment, null, (quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.type) == 'add' ? '+' : '-', quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.value, "%")), /*#__PURE__*/React.createElement("div", {
+    "class": "col-lg-12 p-0 d-flex justift-content-start"
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": "m-0 p-0"
+  }, /*#__PURE__*/React.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.createElement("span", {
+    style: {
+      fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
+      fontWeight: sectionproperties.defaultSalePriceFontWeight,
+      color: sectionproperties.defaultSalePriceColor
+    }
+  }, ' ', "-", ' '), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React.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.createElement("div", {
+    "class": "col-lg-12 p-0 d-flex align-items-center justift-content-start"
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": "m-0 p-0 d-flex align-items-center justift-content-start"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: sectionproperties.counterTitleFontSize + 'px',
+      color: sectionproperties.counterTitleColor,
+      fontWeight: sectionproperties.counterTitleFontWeight
+    }
+  }, langdetect == 'en' ? sectionproperties.countertitleen : sectionproperties.countertitlear), /*#__PURE__*/React.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.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.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(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;
@@ -1042,7 +1272,7 @@ var Product_itemtype = function Product_itemtype(props) {
   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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2);
@@ -1178,84 +1408,9 @@ var Product_itemtype = function Product_itemtype(props) {
     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.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.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.createElement("span", {
-    style: {
-      fontSize: sectionproperties.defaultPriceFontSize + 'px',
-      fontWeight: sectionproperties.defaultPriceFontWeight,
-      color: sectionproperties.defaultPriceColor
-    }
-  }, quantityconditionfoundobjprops != null && /*#__PURE__*/React.createElement(React.Fragment, null, (quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.type) == 'add' ? '+' : '-', quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.value, "%")), /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 p-0 d-flex justift-content-start"
-  }, /*#__PURE__*/React.createElement("p", {
-    "class": "m-0 p-0"
-  }, /*#__PURE__*/React.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.createElement("span", {
-    style: {
-      fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
-      fontWeight: sectionproperties.defaultSalePriceFontWeight,
-      color: sectionproperties.defaultSalePriceColor
-    }
-  }, ' ', "-", ' '), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React.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.createElement("div", {
-    "class": "col-lg-12 p-0 d-flex align-items-center justift-content-start"
-  }, /*#__PURE__*/React.createElement("p", {
-    "class": "m-0 p-0 d-flex align-items-center justift-content-start"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: sectionproperties.counterTitleFontSize + 'px',
-      color: sectionproperties.counterTitleColor,
-      fontWeight: sectionproperties.counterTitleFontWeight
-    }
-  }, langdetect == 'en' ? sectionproperties.countertitleen : sectionproperties.countertitlear), /*#__PURE__*/React.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.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.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.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.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.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.createElement("div", {
@@ -1315,127 +1470,9 @@ var Product_itemtype = function Product_itemtype(props) {
         }
       }, 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.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.createElement("div", {
-      className: "col-lg-12 p-0 mb-3 d-flex justify-content-start"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "row m-0 w-100 d-flex align-items-start"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "col-lg-12 col-md-12 p-0 d-flex"
-    }, /*#__PURE__*/React.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.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.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.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.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.createElement("i", {
-          "class": "h-100 allcentered"
-        }, /*#__PURE__*/React.createElement(IoMdClose, null))), /*#__PURE__*/React.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.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.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.createElement("i", {
-          "class": "h-100 allcentered"
-        }, /*#__PURE__*/React.createElement(IoMdClose, null))), /*#__PURE__*/React.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.createElement("div", {
+  })), /*#__PURE__*/React.createElement(Variantoptions, {
+    actions: props.actions
+  }), sectionproperties.quantitybtn_show == 'Show' && sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React.createElement("div", {
     className: "col-lg-12 p-0 mb-3"
   }, /*#__PURE__*/React.createElement("hr", {
     className: "mb-0 mt-2"
@@ -2292,7 +2329,8 @@ var Service_itemtype = function Service_itemtype(props) {
   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 = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -2492,84 +2530,9 @@ var Service_itemtype = function Service_itemtype(props) {
     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.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.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.createElement("span", {
-    style: {
-      fontSize: sectionproperties.defaultPriceFontSize + 'px',
-      fontWeight: sectionproperties.defaultPriceFontWeight,
-      color: sectionproperties.defaultPriceColor
-    }
-  }, quantityconditionfoundobjprops != null && /*#__PURE__*/React.createElement(React.Fragment, null, (quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.type) == 'add' ? '+' : '-', quantityconditionfoundobjprops === null || quantityconditionfoundobjprops === void 0 ? void 0 : quantityconditionfoundobjprops.value, "%")), /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 p-0 d-flex justift-content-start"
-  }, /*#__PURE__*/React.createElement("p", {
-    "class": "m-0 p-0"
-  }, /*#__PURE__*/React.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.createElement("span", {
-    style: {
-      fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
-      fontWeight: sectionproperties.defaultSalePriceFontWeight,
-      color: sectionproperties.defaultSalePriceColor
-    }
-  }, ' ', "-", ' '), fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && /*#__PURE__*/React.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.createElement("div", {
-    "class": "col-lg-12 p-0 d-flex align-items-center justift-content-start"
-  }, /*#__PURE__*/React.createElement("p", {
-    "class": "m-0 p-0 d-flex align-items-center justift-content-start"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: sectionproperties.counterTitleFontSize + 'px',
-      color: sectionproperties.counterTitleColor,
-      fontWeight: sectionproperties.counterTitleFontWeight
-    }
-  }, langdetect == 'en' ? sectionproperties.countertitleen : sectionproperties.countertitlear), /*#__PURE__*/React.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.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.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.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.createElement(ProductHeaderPricing, {
+    actions: props.actions
+  }), /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 d-flex align-items-center justify-content-start p-0 flex-column"
   }, /*#__PURE__*/React.createElement("p", {
     "class": "m-0 p-0 mb-2 w-100",
@@ -2593,7 +2556,9 @@ var Service_itemtype = function Service_itemtype(props) {
     "class": langdetect == 'en' ? productinfo_cssstyles.before + ' before ' : productinfo_cssstyles.before + ' beforear '
   })), /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 p-0"
-  }, /*#__PURE__*/React.createElement(Serviceinfotabs, {
+  }, /*#__PURE__*/React.createElement(Variantoptions, {
+    actions: props.actions
+  }), /*#__PURE__*/React.createElement(Serviceinfotabs, {
     actions: {
       fetchProductInfoQueryContext: fetchProductInfoQueryContext,
       sectionproperties: sectionproperties,
@@ -2849,8 +2814,24 @@ var Productinfo = function Productinfo(props) {
       }
     }
   }, [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;
@@ -2869,8 +2850,8 @@ var Productinfo = function Productinfo(props) {
   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) {
@@ -3574,14 +3555,14 @@ var Productinfo = function Productinfo(props) {
       langdetect: langdetect,
       lang: lang,
       srcfromprops: props.srcfromprops
-    }, _defineProperty(_ref, "returnpolicyobj", returnpolicyobj), _defineProperty(_ref, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty(_ref, "addtocartfunc", addtocartfunc), _defineProperty(_ref, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty(_ref, "productimagesarray", productimagesarray), _defineProperty(_ref, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty(_ref, "ProductInfoObj", ProductInfoObj), _defineProperty(_ref, "sectionproperties", sectionproperties), _defineProperty(_ref, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty(_ref, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty(_ref, "routingcountext", routingcountext), _defineProperty(_ref, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty(_ref, "authdetailsContext", authdetailsContext), _defineProperty(_ref, "addtofavoritescontext", addtofavoritescontext), _defineProperty(_ref, "variantindexcompleted", variantindexcompleted), _defineProperty(_ref, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty(_ref, "NotificationManager", NotificationManager), _defineProperty(_ref, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty(_ref, "relatedproducts", relatedproducts), _defineProperty(_ref, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty(_ref, "StoreInfoprops", StoreInfo), _ref)
+    }, _defineProperty(_ref, "returnpolicyobj", returnpolicyobj), _defineProperty(_ref, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty(_ref, "addtocartfunc", addtocartfunc), _defineProperty(_ref, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty(_ref, "clearchoosenvaluesbutkeepcurrentvalue", clearchoosenvaluesbutkeepcurrentvalue), _defineProperty(_ref, "productimagesarray", productimagesarray), _defineProperty(_ref, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty(_ref, "ProductInfoObj", ProductInfoObj), _defineProperty(_ref, "sectionproperties", sectionproperties), _defineProperty(_ref, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty(_ref, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty(_ref, "routingcountext", routingcountext), _defineProperty(_ref, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty(_ref, "authdetailsContext", authdetailsContext), _defineProperty(_ref, "addtofavoritescontext", addtofavoritescontext), _defineProperty(_ref, "variantindexcompleted", variantindexcompleted), _defineProperty(_ref, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty(_ref, "NotificationManager", NotificationManager), _defineProperty(_ref, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty(_ref, "relatedproducts", relatedproducts), _defineProperty(_ref, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty(_ref, "StoreInfoprops", StoreInfo), _ref)
   }), fetchProductInfoQueryContext.data.data.productinfo.item_type == 'service' && /*#__PURE__*/React.createElement(Service_itemtype, {
     actions: (_ref2 = {
       returnpolicyobj: returnpolicyobj,
       langdetect: langdetect,
       lang: lang,
       srcfromprops: props.srcfromprops
-    }, _defineProperty(_ref2, "returnpolicyobj", returnpolicyobj), _defineProperty(_ref2, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty(_ref2, "addtocartfunc", addtocartfunc), _defineProperty(_ref2, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty(_ref2, "productimagesarray", productimagesarray), _defineProperty(_ref2, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty(_ref2, "sectionproperties", sectionproperties), _defineProperty(_ref2, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty(_ref2, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty(_ref2, "routingcountext", routingcountext), _defineProperty(_ref2, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty(_ref2, "authdetailsContext", authdetailsContext), _defineProperty(_ref2, "addtofavoritescontext", addtofavoritescontext), _defineProperty(_ref2, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty(_ref2, "variantindexcompleted", variantindexcompleted), _defineProperty(_ref2, "GeneralAPIMutationContext", GeneralAPIMutationContext), _defineProperty(_ref2, "NotificationManager", NotificationManager), _defineProperty(_ref2, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty(_ref2, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty(_ref2, "relatedproducts", relatedproducts), _defineProperty(_ref2, "getQuantityCondition", getQuantityCondition), _defineProperty(_ref2, "StoreInfoprops", StoreInfo), _ref2)
+    }, _defineProperty(_ref2, "returnpolicyobj", returnpolicyobj), _defineProperty(_ref2, "productinfo_cssstyles", productinfo_cssstyles), _defineProperty(_ref2, "addtocartfunc", addtocartfunc), _defineProperty(_ref2, "selectproductoptionvalue", selectproductoptionvalue), _defineProperty(_ref2, "clearchoosenvaluesbutkeepcurrentvalue", clearchoosenvaluesbutkeepcurrentvalue), _defineProperty(_ref2, "productimagesarray", productimagesarray), _defineProperty(_ref2, "fetchProductInfoQueryContext", fetchProductInfoQueryContext), _defineProperty(_ref2, "sectionproperties", sectionproperties), _defineProperty(_ref2, "addtocardpayloadobj", addtocardpayloadobj), _defineProperty(_ref2, "ProductInfoObj", ProductInfoObj), _defineProperty(_ref2, "setaddtocardpayloadobj", setaddtocardpayloadobj), _defineProperty(_ref2, "routingcountext", routingcountext), _defineProperty(_ref2, "AddtoCartMutationContext", AddtoCartMutationContext), _defineProperty(_ref2, "authdetailsContext", authdetailsContext), _defineProperty(_ref2, "addtofavoritescontext", addtofavoritescontext), _defineProperty(_ref2, "StaticPagesLinksContext", StaticPagesLinksContext), _defineProperty(_ref2, "variantindexcompleted", variantindexcompleted), _defineProperty(_ref2, "GeneralAPIMutationContext", GeneralAPIMutationContext), _defineProperty(_ref2, "NotificationManager", NotificationManager), _defineProperty(_ref2, "getprice_discountpriceprops", getprice_discountpriceprops), _defineProperty(_ref2, "quantityconditionfoundobjprops", quantityconditionfoundobj), _defineProperty(_ref2, "relatedproducts", relatedproducts), _defineProperty(_ref2, "getQuantityCondition", getQuantityCondition), _defineProperty(_ref2, "StoreInfoprops", StoreInfo), _ref2)
   }), /*#__PURE__*/React.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: {
@@ -10891,7 +10872,7 @@ var CardsSection = function CardsSection(props) {
           return /*#__PURE__*/React.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.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.createElement(ScrollMenu, {
             transitionBehavior: 'auto',
             wrapperClassName: '',
@@ -26440,7 +26421,7 @@ var googleplay = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjsAAAC8CAYAAACe
 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(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 = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     sectionproperties = _useState2[0],
@@ -26833,35 +26814,35 @@ var Allinonefooter = function Allinonefooter(props) {
     }
   }, langdetect == 'en' ? sectionproperties.otherinfotitle2en : sectionproperties.otherinfotitle2ar)), /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 p-0 d-flex align-items-center justify-content-start"
-  }, sectionproperties.fbbtn_show == 'Show' && /*#__PURE__*/React.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.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.createElement(FaFacebookF, {
     size: sectionproperties.facebkbtnniconfontsize
-  })), sectionproperties.instbtn_show == 'Show' && /*#__PURE__*/React.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.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.createElement(AiFillInstagram, {
     size: sectionproperties.instgrambtniconfontsize
-  })), sectionproperties.youtbtn_show == 'Show' && /*#__PURE__*/React.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.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.createElement(FaWhatsapp, {
@@ -27936,7 +27917,7 @@ var mastercard = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAATYAgMAAAD2
 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(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;
@@ -28274,39 +28255,39 @@ var Footer4 = function Footer4(props) {
       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.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.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.createElement("i", {
     className: "h-100 allcentered"
   }, /*#__PURE__*/React.createElement(FaFacebookF, {
     size: sectionproperties.facebkbtnniconfontsize
-  }))), sectionproperties.instbtn_show == 'Show' && /*#__PURE__*/React.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.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.createElement("i", {
     className: "h-100 allcentered"
   }, /*#__PURE__*/React.createElement(AiFillInstagram, {
     size: sectionproperties.instgrambtniconfontsize
-  }))), sectionproperties.youtbtn_show == 'Show' && /*#__PURE__*/React.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.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.createElement("i", {
@@ -28515,6 +28496,14 @@ var Footer5 = function Footer5(props) {
         top: 0,
         bottom: 0
       }
+    }),
+    apptore: css({
+      width: '100%',
+      objectFit: 'contain'
+    }),
+    googleplay: css({
+      width: '100%',
+      objectFit: 'contain'
     })
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -28554,7 +28543,10 @@ var Footer5 = function Footer5(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-lg-12 allcentered p-0"
   }, /*#__PURE__*/React.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.createElement(IKImage, {
     urlEndpoint: IKurlEndpoint,
     publicKey: IKpublicKey,
@@ -28688,7 +28680,10 @@ var Footer5 = function Footer5(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-lg-12 allcentered"
   }, /*#__PURE__*/React.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.createElement(IKImage, {
     urlEndpoint: IKurlEndpoint,
     publicKey: IKpublicKey,
@@ -28817,6 +28812,40 @@ var Footer5 = function Footer5(props) {
   }, /*#__PURE__*/React.createElement("img", {
     src: mastercard,
     className: "".concat(footerStyles.payimg)
+  })))), sectionproperties.showdownloadsection == 'Show' && /*#__PURE__*/React.createElement("div", {
+    className: "row m-0 w-100 mt-3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-lg-12 p-0 d-flex justify-content-md-center"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "".concat(footerStyles.footertitlestyles) + ' m-0 p-0 '
+  }, langdetect == 'en' ? sectionproperties.otherinfotitle1en : sectionproperties.otherinfotitle1ar)), /*#__PURE__*/React.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.createElement("div", {
+    "class": 'col-lg-6 col-md-4 col-sm-6 p-0 '
+  }, /*#__PURE__*/React.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.createElement("div", {
+    "class": 'col-lg-6 col-md-4 col-sm-6 p-0'
+  }, /*#__PURE__*/React.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%'
+    }
   }))))))));
 };
 
@@ -36594,11 +36623,11 @@ var VideosSection = function VideosSection(props) {
     }, sectionproperties.slideshowtext1_show == 'Show' && /*#__PURE__*/React.createElement("div", {
       className: bgcssstyles.text1styles + ' col-lg-12 p-0 w-100 d-flex align-items-center '
     }, /*#__PURE__*/React.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.createElement("div", {
       className: bgcssstyles.text2styles + ' col-lg-12 p-0 w-100 d-flex '
     }, /*#__PURE__*/React.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.createElement("div", {
@@ -41663,8 +41692,8 @@ var CardWithTextOnly = function CardWithTextOnly(props) {
   }, 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; }
@@ -42988,29 +43017,17 @@ var NewProductcard = function NewProductcard(props) {
   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;
   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]);
   useEffect(function () {
     setitem(props.cardinfoitemprops);
@@ -43021,7 +43038,15 @@ var NewProductcard = function NewProductcard(props) {
       height: sectionproperties.variantcontainer_height + 'vh',
       borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px'
     }),
-    productcard: css((_css = {
+    productcard: 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: css((_css = {
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
       opacity: sectionproperties.cardbg_opacity,
       borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
@@ -43045,7 +43070,6 @@ var NewProductcard = function NewProductcard(props) {
       opacity: 1
     }), _css)),
     productcard_imgcontainer: 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',
@@ -43186,164 +43210,182 @@ var NewProductcard = function NewProductcard(props) {
       zIndex: 10000
     })
   };
+  var ImageContent = function ImageContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      "class": "w-100"
+    }, /*#__PURE__*/React.createElement(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.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.createElement("i", {
+      "class": "h-100 d-flex align-items-center justify-content-center"
+    }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React.createElement(AiFillStar, {
+      size: sectionproperties.favBtnIconfontsize,
+      style: {
+        color: sectionproperties.activefaviconcolor
+      }
+    }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaHeart, {
+      size: sectionproperties.favBtnIconfontsize,
+      style: {
+        color: sectionproperties.activefaviconcolor
+      }
+    })), !item.IsFavExists && /*#__PURE__*/React.createElement("i", {
+      "class": "h-100 d-flex align-items-center justify-content-center"
+    }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React.createElement(AiOutlineStar, {
+      size: sectionproperties.favBtnIconfontsize
+    }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaRegHeart, {
+      size: sectionproperties.favBtnIconfontsize
+    }))), sectionproperties.showbadge == 'Show' && item.hassale == 1 && /*#__PURE__*/React.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.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.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.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.createElement("div", {
+      "class": "".concat(card_cssstyles.buttoncont) + ' buttoncont row w-100 m-0 d-flex justify-content-center align-items-center '
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-12 p-0 mb-2"
+    }, /*#__PURE__*/React.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.createElement("div", {
+      "class": "col-lg-12 p-0"
+    }, sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React.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.createElement("div", {
+      style: {
+        bottom: 0,
+        position: 'absolute',
+        width: '100%'
+      },
+      "class": "d-none d-md-flex d-sm-flex"
+    }, /*#__PURE__*/React.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.createElement(BsEye, {
+      size: sectionproperties.cartBtn_iconFontSize
+    })), /*#__PURE__*/React.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.createElement(FiShoppingBag, {
+      "class": "",
+      size: sectionproperties.cartBtn_iconFontSize
+    }), sectionproperties.carticonstyle == 'Shopping bag 2' && /*#__PURE__*/React.createElement(CgShoppingBag, {
+      "class": "",
+      size: sectionproperties.cartBtn_iconFontSize
+    }), sectionproperties.carticonstyle == 'Shopping bag 3' && /*#__PURE__*/React.createElement(BsBag, {
+      "class": "",
+      size: sectionproperties.cartBtn_iconFontSize
+    }), sectionproperties.carticonstyle == 'Shopping bag 4' && /*#__PURE__*/React.createElement(RiHandbagLine, {
+      size: sectionproperties.cartBtn_iconFontSize
+    }), sectionproperties.carticonstyle == 'Shopping cart 1' && /*#__PURE__*/React.createElement(FiShoppingCart, {
+      "class": "",
+      size: sectionproperties.cartBtn_iconFontSize
+    }), sectionproperties.carticonstyle == 'Shopping cart 2' && /*#__PURE__*/React.createElement(MdAddShoppingCart, {
+      size: sectionproperties.cartBtn_iconFontSize
+    }))));
+  };
   return /*#__PURE__*/React.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.createElement("div", {
-    "class": "".concat(card_cssstyles.productcard) + ' w-100 '
+    "class": "".concat(card_cssstyles.innerproductcard) + ' w-100 '
   }, /*#__PURE__*/React.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.createElement(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.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.createElement("i", {
-    "class": "h-100 d-flex align-items-center justify-content-center"
-  }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React.createElement(AiFillStar, {
-    size: sectionproperties.favBtnIconfontsize,
-    style: {
-      color: sectionproperties.activefaviconcolor
-    }
-  }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaHeart, {
-    size: sectionproperties.favBtnIconfontsize,
-    style: {
-      color: sectionproperties.activefaviconcolor
-    }
-  })), !item.IsFavExists && /*#__PURE__*/React.createElement("i", {
-    "class": "h-100 d-flex align-items-center justify-content-center"
-  }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React.createElement(AiOutlineStar, {
-    size: sectionproperties.favBtnIconfontsize
-  }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaRegHeart, {
-    size: sectionproperties.favBtnIconfontsize
-  }))), sectionproperties.showbadge == 'Show' && item.hassale == 1 && /*#__PURE__*/React.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.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.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.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.createElement("div", {
-    "class": "".concat(card_cssstyles.buttoncont) + ' buttoncont row w-100 m-0 d-flex justify-content-center align-items-center '
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 p-0 mb-2"
-  }, /*#__PURE__*/React.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.createElement("div", {
-    "class": "col-lg-12 p-0"
-  }, sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React.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.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.createElement("div", {
-    style: {
-      bottom: 0,
-      position: 'absolute',
-      width: '100%'
     },
-    "class": "d-none d-md-flex d-sm-flex"
-  }, /*#__PURE__*/React.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.createElement(BsEye, {
-    size: sectionproperties.cartBtn_iconFontSize
-  })), /*#__PURE__*/React.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.createElement(FiShoppingBag, {
-    "class": "",
-    size: sectionproperties.cartBtn_iconFontSize
-  }), sectionproperties.carticonstyle == 'Shopping bag 2' && /*#__PURE__*/React.createElement(CgShoppingBag, {
-    "class": "",
-    size: sectionproperties.cartBtn_iconFontSize
-  }), sectionproperties.carticonstyle == 'Shopping bag 3' && /*#__PURE__*/React.createElement(BsBag, {
-    "class": "",
-    size: sectionproperties.cartBtn_iconFontSize
-  }), sectionproperties.carticonstyle == 'Shopping bag 4' && /*#__PURE__*/React.createElement(RiHandbagLine, {
-    size: sectionproperties.cartBtn_iconFontSize
-  }), sectionproperties.carticonstyle == 'Shopping cart 1' && /*#__PURE__*/React.createElement(FiShoppingCart, {
-    "class": "",
-    size: sectionproperties.cartBtn_iconFontSize
-  }), sectionproperties.carticonstyle == 'Shopping cart 2' && /*#__PURE__*/React.createElement(MdAddShoppingCart, {
-    size: sectionproperties.cartBtn_iconFontSize
-  })))), /*#__PURE__*/React.createElement("div", {
+  }, ImageContent()), /*#__PURE__*/React.createElement("div", {
     "class": 'row m-0 w-100 text-start d-flex justify-content-start mt-2'
   }, sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 d-flex justify-content-start p-0"
@@ -43356,7 +43398,10 @@ var NewProductcard = function NewProductcard(props) {
       textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
     }
   }, item.name)), /*#__PURE__*/React.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.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.createElement("p", {
@@ -47193,7 +47238,7 @@ var Horizontalcard = function Horizontalcard(props) {
       fontSize: sectionproperties.badge_fontsize + 'px'
     }
   }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React.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 : '',