@bonlineza/luxity-lib 2.32.6 → 2.32.8

package/LuxityMobileHeader.js

@@ -107,6 +107,133 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
+  var cssUnit = {
+      cm: true,
+      mm: true,
+      in: true,
+      px: true,
+      pt: true,
+      pc: true,
+      em: true,
+      ex: true,
+      ch: true,
+      rem: true,
+      vw: true,
+      vh: true,
+      vmin: true,
+      vmax: true,
+      "%": true,
+  };
+  /**
+   * If size is a number, append px to the value as default unit.
+   * If size is a string, validate against list of valid units.
+   * If unit is valid, return size as is.
+   * If unit is invalid, console warn issue, replace with px as the unit.
+   *
+   * @param {(number | string)} size
+   * @return {LengthObject} LengthObject
+   */
+  function parseLengthAndUnit(size) {
+      if (typeof size === "number") {
+          return {
+              value: size,
+              unit: "px",
+          };
+      }
+      var value;
+      var valueString = (size.match(/^[0-9.]*/) || "").toString();
+      if (valueString.includes(".")) {
+          value = parseFloat(valueString);
+      }
+      else {
+          value = parseInt(valueString, 10);
+      }
+      var unit = (size.match(/[^0-9]*$/) || "").toString();
+      if (cssUnit[unit]) {
+          return {
+              value: value,
+              unit: unit,
+          };
+      }
+      console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
+      return {
+          value: value,
+          unit: "px",
+      };
+  }
+  /**
+   * Take value as an input and return valid css value
+   *
+   * @param {(number | string)} value
+   * @return {string} valid css value
+   */
+  function cssValue(value) {
+      var lengthWithunit = parseLengthAndUnit(value);
+      return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
+  }
+
+  var createAnimation = function (loaderName, frames, suffix) {
+      var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
+      if (typeof window == "undefined" || !window.document) {
+          return animationName;
+      }
+      var styleEl = document.createElement("style");
+      document.head.appendChild(styleEl);
+      var styleSheet = styleEl.sheet;
+      var keyFrames = "\n    @keyframes ".concat(animationName, " {\n      ").concat(frames, "\n    }\n  ");
+      if (styleSheet) {
+          styleSheet.insertRule(keyFrames, 0);
+      }
+      return animationName;
+  };
+
+  var __assign = (undefined && undefined.__assign) || function () {
+      __assign = Object.assign || function(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                  t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+  var __rest = (undefined && undefined.__rest) || function (s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  };
+  var beat = createAnimation("BeatLoader", "50% {transform: scale(0.75);opacity: 0.2} 100% {transform: scale(1);opacity: 1}", "beat");
+  function BeatLoader(_a) {
+      var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? "#000000" : _c, _d = _a.speedMultiplier, speedMultiplier = _d === void 0 ? 1 : _d, _e = _a.cssOverride, cssOverride = _e === void 0 ? {} : _e, _f = _a.size, size = _f === void 0 ? 15 : _f, _g = _a.margin, margin = _g === void 0 ? 2 : _g, additionalprops = __rest(_a, ["loading", "color", "speedMultiplier", "cssOverride", "size", "margin"]);
+      var wrapper = __assign({ display: "inherit" }, cssOverride);
+      var style = function (i) {
+          return {
+              display: "inline-block",
+              backgroundColor: color,
+              width: cssValue(size),
+              height: cssValue(size),
+              margin: cssValue(margin),
+              borderRadius: "100%",
+              animation: "".concat(beat, " ").concat(0.7 / speedMultiplier, "s ").concat(i % 2 ? "0s" : "".concat(0.35 / speedMultiplier, "s"), " infinite linear"),
+              animationFillMode: "both",
+          };
+      };
+      if (!loading) {
+          return null;
+      }
+      return (React.createElement("span", __assign({ style: wrapper }, additionalprops),
+          React.createElement("span", { style: style(1) }),
+          React.createElement("span", { style: style(2) }),
+          React.createElement("span", { style: style(3) })));
+  }
+
   var LuxityAppSideNav = function LuxityAppSideNav(_ref) {
     var closeIcon = _ref.closeIcon,
         accountIcon = _ref.accountIcon,
@@ -362,7 +489,7 @@
       className: "side-nav__elements"
     }, categoryElements.map(function (category) {
       return /*#__PURE__*/React__default.createElement("a", {
-        href: "".concat(productUrl, "/").concat(category.slug),
+        href: "".concat(productUrl, "/").concat(['new', 'apparel', 'accessories'].includes(categorySlug) ? category.slug : "".concat(categorySlug, "/").concat(category.slug)),
         className: "side-nav__element"
       }, category.name.toLowerCase());
     })), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
@@ -370,11 +497,11 @@
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__sub-menu-title"
     }, subMenuBrandsTitle), /*#__PURE__*/React__default.createElement("a", {
-      href: "".concat(productUrl, "/brands"),
+      href: "".concat(productUrl, "/").concat(categorySlug),
       className: "side-nav__element"
     }, "All Brands"), !!brandsList.length && brandsList.map(function (brand) {
       return /*#__PURE__*/React__default.createElement("a", {
-        href: "".concat(productUrl, "/").concat(categorySlug, "/").concat(brand.slug),
+        href: "".concat(productUrl, "/").concat(categorySlug === 'new' ? 'brands' : categorySlug, "/").concat(brand.slug),
         className: "side-nav__element"
       }, brand.name);
     })))));
@@ -439,7 +566,7 @@
       latestArrivals: [],
       bags: [],
       shoes: [],
-      clothing: [],
+      apparel: [],
       accessories: [],
       watches: [],
       accessoriesCategories: [],
@@ -568,7 +695,7 @@
       type: "button",
       className: "side-nav__menu-title-wrapper",
       onClick: function onClick() {
-        return onSubMenuClick('clothing');
+        return onSubMenuClick('apparel');
       }
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "side-nav__menu-title"
@@ -686,14 +813,14 @@
       isLoading: loading,
       hasError: hasError
     }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'clothing',
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'apparel',
       onBackClick: onBackClick,
       backIcon: backIcon,
       subMenuCategoryTitle: "Department",
       productUrl: productUrl,
       categoryElements: dropdownData.apparelStyles,
       subMenuBrandsTitle: "Clothing Brands",
-      brandsList: dropdownData.clothing,
+      brandsList: dropdownData.apparel,
       categorySlug: displayedSubMenu,
       isLoading: loading,
       hasError: hasError
@@ -733,22 +860,21 @@
 
   var SearchResults = function SearchResults(_ref) {
     var searchValue = _ref.searchValue,
-        searchLoading = _ref.searchLoading,
         searchResults = _ref.searchResults,
         onViewAll = _ref.onViewAll,
         searchResultsRef = _ref.searchResultsRef,
         onSearchSubmit = _ref.onSearchSubmit,
         setSearchValue = _ref.setSearchValue;
 
-    if (searchValue.trim() !== '') {
+    if (searchValue.trim().length >= 3) {
+      if (searchResults.brands.length === 0 && searchResults.products.length === 0) {
+        return null;
+      }
+
       return /*#__PURE__*/React__default.createElement("div", {
         className: "z-50 absolute md:top-14 font-body bg-white w-full lg:w-1/2 flex flex-col md:flex-row md:divide-x divide-black lg:mt-1 shadow-md",
         ref: searchResultsRef
-      }, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full py-20 flex items-center justify-center"
-      }, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full py-20 flex items-center justify-center"
-      }, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
         className: "w-full lg:w-1/3"
       }, /*#__PURE__*/React__default.createElement("p", {
         className: "font-bold p-2 px-4"
@@ -779,7 +905,7 @@
           setSearchValue('');
         },
         className: "bottom-0 mt-5 py-3 w-full font-body text-center text-white uppercase bg-black hover:bg-gray-950 border border-black transition-all ease-in-out duration-300 cursor-pointer"
-      }, "View all")))));
+      }, "View all"))));
     }
 
     return null;
@@ -789,7 +915,6 @@
     var logoSrc = _ref.logoSrc,
         menuIcon = _ref.menuIcon,
         inputSearchIcon = _ref.inputSearchIcon,
-        onSearch = _ref.onSearch,
         onCartClick = _ref.onCartClick,
         cartIcon = _ref.cartIcon,
         cartCount = _ref.cartCount,
@@ -841,7 +966,7 @@
         showSideNav = _useState6[0],
         setShowSideNav = _useState6[1];
 
-    var _useState7 = React.useState(true),
+    var _useState7 = React.useState(false),
         _useState8 = _slicedToArray(_useState7, 2),
         searchLoading = _useState8[0],
         setSearchLoading = _useState8[1];
@@ -854,21 +979,41 @@
         searchResults = _useState10[0],
         setSearchResults = _useState10[1];
 
+    var debounce = function debounce(func, wait) {
+      var timeout;
+      return function executedFunction() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        var later = function later() {
+          clearTimeout(timeout);
+          func.apply(void 0, args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    };
+
+    var debouncedSearch = React.useCallback(debounce(function (nextValue) {
+      setSearchLoading(true);
+      axios.post(endpoint, searchProducts(nextValue, 6)).then(function (response) {
+        setSearchResults(response.data.data.luxity_products_serach_results);
+        var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
+        onProductIdsReceived(ids);
+        setSearchLoading(false);
+      }).catch(function () {
+        setSearchLoading(false);
+      });
+    }, 500), [endpoint]);
+
     var handleChange = function handleChange(event) {
       var value = event.target.value;
       setSearchValue(value);
-      onSearch(value);
-
-      if (value.trim() !== '') {
-        setSearchLoading(true);
-        axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
-          setSearchResults(response.data.data.luxity_products_serach_results);
-          var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
-          onProductIdsReceived(ids);
-          setSearchLoading(false);
-        }).catch(function () {
-          setSearchLoading(false);
-        });
+
+      if (value.trim().length >= 3) {
+        debouncedSearch(value);
       } else {
         setSearchResults({
           brands: [],
@@ -1012,6 +1157,12 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown
+    }), searchLoading && /*#__PURE__*/React__default.createElement(BeatLoader, {
+      color: "#000000",
+      loading: searchLoading,
+      size: 5,
+      "aria-label": "Loading Spinner",
+      "data-testid": "loader"
     })), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       onClick: onSearchClick

package/LuxitySideNav.js

@@ -187,7 +187,7 @@
       className: "side-nav__elements"
     }, categoryElements.map(function (category) {
       return /*#__PURE__*/React__default.createElement("a", {
-        href: "".concat(productUrl, "/").concat(category.slug),
+        href: "".concat(productUrl, "/").concat(['new', 'apparel', 'accessories'].includes(categorySlug) ? category.slug : "".concat(categorySlug, "/").concat(category.slug)),
         className: "side-nav__element"
       }, category.name.toLowerCase());
     })), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
@@ -195,11 +195,11 @@
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__sub-menu-title"
     }, subMenuBrandsTitle), /*#__PURE__*/React__default.createElement("a", {
-      href: "".concat(productUrl, "/brands"),
+      href: "".concat(productUrl, "/").concat(categorySlug),
       className: "side-nav__element"
     }, "All Brands"), !!brandsList.length && brandsList.map(function (brand) {
       return /*#__PURE__*/React__default.createElement("a", {
-        href: "".concat(productUrl, "/").concat(categorySlug, "/").concat(brand.slug),
+        href: "".concat(productUrl, "/").concat(categorySlug === 'new' ? 'brands' : categorySlug, "/").concat(brand.slug),
         className: "side-nav__element"
       }, brand.name);
     })))));
@@ -255,7 +255,7 @@
       latestArrivals: [],
       bags: [],
       shoes: [],
-      clothing: [],
+      apparel: [],
       accessories: [],
       watches: [],
       accessoriesCategories: [],
@@ -384,7 +384,7 @@
       type: "button",
       className: "side-nav__menu-title-wrapper",
       onClick: function onClick() {
-        return onSubMenuClick('clothing');
+        return onSubMenuClick('apparel');
       }
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "side-nav__menu-title"
@@ -502,14 +502,14 @@
       isLoading: loading,
       hasError: hasError
     }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'clothing',
+      subMenuOpen: subMenuOpen && displayedSubMenu === 'apparel',
       onBackClick: onBackClick,
       backIcon: backIcon,
       subMenuCategoryTitle: "Department",
       productUrl: productUrl,
       categoryElements: dropdownData.apparelStyles,
       subMenuBrandsTitle: "Clothing Brands",
-      brandsList: dropdownData.clothing,
+      brandsList: dropdownData.apparel,
       categorySlug: displayedSubMenu,
       isLoading: loading,
       hasError: hasError

package/build/bundle.css

@@ -1 +1 @@
-.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:13px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}
+.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:13px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}