hemfixarna-web-components 1.4.4 → 1.4.5

package/dist/cjs/{hemfixarna-address_30.cjs.entry.js → hemfixarna-address_32.cjs.entry.js}

@@ -207,11 +207,13 @@ const { state, onChange, } = createStore({
   options: null,
   rut: true,
   rot: true,
+  green: true,
   token: null,
   user: null,
   modal: null,
   rutOptions: null,
   rotOptions: null,
+  greenOptions: null,
   customer: null,
   selectedCustomerCategory: null,
   parentCategory: null,
@@ -339,6 +341,9 @@ const getRutPrice = (price) => {
 const getRotPrice = (price) => {
   return Math.ceil(price * 0.7);
 };
+const getGreenPrice = (price) => {
+  return Math.ceil(price * 0.5);
+};
 const getProductPrice = (product, price, amount = 1) => {
   if (product.rot && state.rot) {
     return getRotPrice((price || product.price) * amount);
@@ -346,6 +351,9 @@ const getProductPrice = (product, price, amount = 1) => {
   else if (product.rut && state.rut) {
     return getRutPrice((price || product.price) * amount);
   }
+  else if (product.green && state.green) {
+    return getGreenPrice((price || product.price) * amount);
+  }
   else {
     return (price || product.price) * amount;
   }
@@ -374,23 +382,23 @@ const getPartPrice = (part, product, amount = 1) => {
 };
 const getStartFee = () => {
   if (!state.cart)
-    return { rut: 0, rot: 0 };
+    return { rut: 0, rot: 0, green: 0 };
   const hasRut = state.cart.some(item => item.rut && item.start_fee);
   const hasRot = state.cart.some(item => item.rot && item.start_fee);
+  const hasGreen = state.cart.some(item => item.green && item.start_fee);
   const rutPrice = state.rut ? getRutPrice(state.options.start_fee) : state.options.start_fee * 1;
   const rotPrice = state.rot ? getRotPrice(state.options.start_fee) : state.options.start_fee * 1;
-  if (hasRut && hasRot) {
-    return { rut: rutPrice, rot: rotPrice, length: 2 };
-  }
-  else if (hasRut) {
-    return { rut: rutPrice, rot: 0, length: 1 };
-  }
-  else if (hasRot) {
-    return { rut: 0, rot: rotPrice, length: 1 };
-  }
-  else {
-    return { rut: 0, rot: 0, length: 0 };
-  }
+  const greenPrice = state.green ? getGreenPrice(state.options.start_fee) : state.options.start_fee * 1;
+  return { rut: hasRut ? rutPrice : 0, rot: hasRot ? rotPrice : 0, green: hasGreen ? greenPrice : 0, length: [hasRut, hasRot, hasGreen].filter(d => d).length };
+  // if (hasRut && hasRot) {
+  //   return { rut: rutPrice, rot: rotPrice, length: 2 };
+  // } else if (hasRut) {
+  //   return { rut: rutPrice, rot: 0, length: 1 };
+  // } else if (hasRot) {
+  //   return { rut: 0, rot: rotPrice, length: 1 };
+  // } else {
+  //   return { rut: 0, rot: 0, length: 0 };
+  // }
 };
 const getItemPrice = (item) => {
   const partsPrice = item.parts.reduce((acc, curr) => {
@@ -422,6 +430,18 @@ const calculateRut = () => {
   }, 0) + Number(state.options.start_fee);
   return totalWithoutRut - totalWithRut;
 };
+const calculateGreenDiscount = () => {
+  const totalWithGreen = state.cart.reduce((acc, curr) => {
+    return curr.green ? acc + getItemPrice(curr) : acc;
+  }, 0) + getStartFee().green;
+  const totalWithoutGreen = state.cart.reduce((acc, curr) => {
+    const partsPrice = curr.parts.reduce((acc, curr) => {
+      return acc + curr.price * curr.amount;
+    }, 0);
+    return curr.green ? acc + curr.price * curr.amount + partsPrice : acc;
+  }, 0) + Number(state.options.start_fee);
+  return totalWithoutGreen - totalWithGreen;
+};
 const getTotalPrice = () => {
   return state.cart.reduce((acc, curr) => acc + getItemPrice(curr), 0) + getStartFee().rot + getStartFee().rut;
 };
@@ -442,6 +462,9 @@ var Business;
   Business["zaptec"] = "zaptec";
   Business["tesla"] = "tesla";
   Business["klint"] = "klint";
+  Business["flyttsmart"] = "flyttsmart";
+  Business["lg"] = "lg";
+  Business["sparfonster"] = "sparfonster";
 })(Business || (Business = {}));
 var WidgetStyle;
 (function (WidgetStyle) {
@@ -554,7 +577,7 @@ const HemfixarnaBreadcrumbs = class {
 
 const hemfixarnaByggmaxCss = "";
 
-const MyComponent$e = class {
+const MyComponent$g = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.tree = null;
@@ -571,7 +594,7 @@ const MyComponent$e = class {
     return (index.h("hemfixarna-component", { forceOldTree: this.forceOldTree, id: this.id, slug: this.slug, business: Business.byggmax, topCategory: TopCategory.byggmax, loadFromQuery: Boolean(this.loadFromQuery), widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor }));
   }
 };
-MyComponent$e.style = hemfixarnaByggmaxCss;
+MyComponent$g.style = hemfixarnaByggmaxCss;
 
 const HemfixarnaCart = class {
   constructor(hostRef) {
@@ -662,6 +685,15 @@ const getRot = async () => {
     console.log(error);
   }
 };
+const getGreenDiscount = async () => {
+  try {
+    const res = await fetch(`${base$2}/green-discount`);
+    return await res.json();
+  }
+  catch (error) {
+    console.log(error);
+  }
+};
 // export interface PostOrderData {
 //   name: string;
 //   customer: Business;
@@ -825,7 +857,7 @@ const HemfixarnaCheckout = class {
   get el() { return index.getElement(this); }
 };
 
-const hemfixarnaCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\");\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  font-family: \"Inter\", sans-serif;\n}\n:host .mb-2 {\n  margin-bottom: 32px;\n}\n:host button {\n  color: #474444;\n}\n:host form {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n:host form img {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n:host form img:first-of-type {\n  left: 16px;\n}\n:host form img:last-of-type {\n  right: 16px;\n}\n:host form span {\n  margin-top: -8px;\n  color: #ec6632;\n}\n:host form p {\n  text-align: center;\n}\n:host form p {\n  margin: 0;\n}\n:host form div {\n  position: relative;\n}\n:host form div label {\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: #fff;\n  padding: 4px;\n  transition: 0.2s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host form div input {\n  padding: 16px;\n  width: 100%;\n  font-size: 16px;\n  border: 1px solid #fcd9c9;\n}\n:host form div input:focus ~ label,\n:host form div .input_active ~ label {\n  top: 0;\n  transform: translateY(-50%);\n  background: linear-gradient(180deg, #fffaf2 50%, #fff 50%);\n}\n:host h1 {\n  font-size: 24px;\n  font-weight: 400;\n  line-height: 32px;\n  letter-spacing: -3%;\n  text-align: left;\n  margin: 0 0 8px;\n}\n:host h2 {\n  margin: 0 0 24px;\n  font-weight: 700;\n  font-size: 20px;\n  line-height: 28px;\n  letter-spacing: -3%;\n}\n:host p {\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  letter-spacing: -3%;\n}\n:host .hemfixarna {\n  width: 100%;\n  /* Hide default HTML checkbox */\n  /* The slider */\n}\n:host .hemfixarna_painting {\n  opacity: 0;\n  padding: 0 1rem;\n  animation: fadeIn 0.5s forwards 0.3s;\n}\n:host .hemfixarna_painting > h2,\n:host .hemfixarna_painting p {\n  text-align: center;\n  padding: 0 16px;\n}\n:host .hemfixarna_painting > h2 {\n  margin: 0 0 8px;\n}\n:host .hemfixarna_partnerlogo {\n  max-height: 50px;\n  min-height: 45px;\n  object-fit: contain;\n  max-width: 150px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_partnerlogo {\n    max-width: 200px;\n  }\n}\n:host .hemfixarna_nav {\n  position: absolute;\n  top: 0;\n  width: 100dvw;\n  left: 0;\n  height: 80px;\n  z-index: 9999;\n}\n:host .hemfixarna_nav--links {\n  display: none !important;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_nav--links {\n    display: flex !important;\n  }\n}\n:host .hemfixarna_nav--links a {\n  color: #ec6632;\n  text-decoration: none;\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 56px;\n  padding: 8px 32px;\n  text-transform: capitalize;\n}\n:host .hemfixarna_nav > div {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 16px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_nav > div {\n    padding: 0 32px;\n  }\n}\n:host .hemfixarna_nav > div > div {\n  display: flex;\n  gap: 32px;\n  justify-content: space-between;\n}\n:host .hemfixarna_nav > div > img {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: -1;\n}\n:host .hemfixarna_nav a {\n  text-decoration: none;\n}\n:host .hemfixarna_nav p {\n  color: #474444;\n}\n:host .hemfixarna_nav p.with-bg {\n  color: #fff;\n}\n:host .hemfixarna_standalone .hemfixarna_backdrop {\n  background: #fffaf2;\n  opacity: 1;\n}\n:host .hemfixarna_standalone .hemfixarna_modal {\n  top: 80px;\n  transform: translateX(-50%);\n  border: none;\n  height: calc(100dvh - 80px);\n  opacity: 0;\n}\n:host .hemfixarna_standalone .hemfixarna_modal--open {\n  opacity: 1;\n}\n:host .hemfixarna .switch {\n  position: relative;\n  display: inline-block;\n  width: 40px;\n  height: 20px;\n}\n:host .hemfixarna .switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n:host .hemfixarna .slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  border-radius: 34px;\n}\n:host .hemfixarna .slider:before {\n  position: absolute;\n  content: \"\";\n  height: 18px;\n  width: 18px;\n  left: 2px;\n  bottom: 1px;\n  background-color: white;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  border-radius: 50%;\n}\n:host .hemfixarna input:checked + .slider {\n  background-color: #fcd9c9;\n}\n:host .hemfixarna input:focus + .slider {\n  box-shadow: 0 0 1px #fcd9c9;\n}\n:host .hemfixarna input:checked + .slider:before {\n  -webkit-transform: translateX(18px);\n  -ms-transform: translateX(18px);\n  transform: translateX(18px);\n  background: #ec6632;\n}\n:host .hemfixarna_maleribox {\n  background: #fff;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  width: 100%;\n  min-height: 132px;\n  padding: 24px;\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  text-align: left;\n}\n:host .hemfixarna_maleribox:hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_checkbox {\n  display: grid;\n  grid-template-columns: 40px auto;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  letter-spacing: -3%;\n}\n:host .hemfixarna_checkbox > span {\n  transform: translateY(6px);\n}\n:host .hemfixarna_checkbox span,\n:host .hemfixarna_checkbox span p {\n  color: #474444;\n  font-size: 14px;\n}\n:host .hemfixarna_checkbox p {\n  text-align: left;\n}\n:host .hemfixarna_info {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 32px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  border-radius: 4px;\n  border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_info h2 {\n  margin: 0;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_info {\n    position: sticky;\n    top: 0;\n  }\n}\n:host .hemfixarna_infomodal {\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  max-width: 80%;\n  background: #fffaf2;\n  border: 1px solid #fcd9c9;\n  padding: 32px;\n  z-index: 99;\n  border-radius: 4px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n:host .hemfixarna_infomodal p,\n:host .hemfixarna_infomodal h4 {\n  margin: 0;\n}\n:host .hemfixarna_infomodal button {\n  background: #ec6632;\n  color: #fff;\n  border-radius: 60px;\n  font-size: 16px;\n  padding: 8px 16px;\n}\n:host .hemfixarna_addressinfo {\n  padding: 16px 16px 64px;\n  border: 1px solid #fcd9c9;\n  position: relative;\n  margin-bottom: 32px;\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_addressinfo {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n:host .hemfixarna_addressinfo button {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  font-weight: 500;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n:host .hemfixarna_part {\n  background: #fff;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  display: grid;\n  padding: 16px;\n  grid-template-columns: auto 75px;\n}\n:host .hemfixarna_counter {\n  display: flex;\n  align-items: center;\n}\n:host .hemfixarna_counter span {\n  padding: 0 8px;\n}\n:host .hemfixarna_counter img {\n  cursor: pointer;\n}\n:host .hemfixarna_counter img:not(.disabled):hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_description {\n  display: grid;\n  gap: 16px;\n}\n:host .hemfixarna_description ul {\n  list-style: disc;\n  padding-right: 12px;\n  transform: translateX(12px);\n}\n:host .hemfixarna_description--hidden {\n  max-height: 140px;\n  overflow: hidden;\n  position: relative;\n  cursor: pointer;\n}\n:host .hemfixarna_description--hidden::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 128px;\n  background: linear-gradient(180deg, rgba(255, 253, 250, 0), rgba(255, 253, 250, 0.46) 50%, #fffaf2);\n}\n:host .hemfixarna_terms {\n  font-size: 14px;\n}\n:host .hemfixarna_terms a {\n  color: inherit;\n}\n:host .hemfixarna_logo {\n  height: 64px;\n}\n:host .hemfixarna_box {\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: 4px;\n  gap: 16px 8px;\n  border-radius: 4px;\n  gap: 16px 8px;\n}\n:host .hemfixarna_box p,\n:host .hemfixarna_box span {\n  font-size: 15px;\n}\n:host .hemfixarna_box .underline {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n:host .hemfixarna_box .pointer {\n  cursor: pointer;\n}\n:host .hemfixarna_box .p-s {\n  font-size: 12px;\n}\n:host .hemfixarna_box > div {\n  display: grid;\n  gap: 8px;\n}\n:host .hemfixarna_box--standard {\n  background: #fffaf2;\n  border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_box--alternative, :host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n  background: transparent;\n  border: 1px solid #e3e3e3;\n}\n:host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.0784313725);\n}\n:host .hemfixarna_box--alternative_3 {\n  justify-content: center;\n}\n:host .hemfixarna_altbtn {\n  display: flex !important;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  margin-left: auto;\n}\n:host .hemfixarna_btn {\n  margin-left: auto;\n}\n:host .hemfixarna_btn, :host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n  border: none;\n  border-radius: 60px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  line-height: 20px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_btn:not(.disabled):hover, :host .hemfixarna_buy:not(.disabled):hover,\n:host .hemfixarna input[type=submit]:not(.disabled):hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna div:has(> input[type=submit]) {\n  position: relative;\n}\n:host .hemfixarna div:has(> input[type=submit]) input {\n  cursor: pointer;\n}\n:host .hemfixarna div:has(> input[type=submit]) img {\n  display: none;\n}\n:host .hemfixarna .loading {\n  cursor: default;\n  opacity: 0.6;\n}\n:host .hemfixarna .loading > img {\n  display: initial !important;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n:host .hemfixarna_btn {\n  font-size: 14px;\n  background: #c84e18;\n  color: #fff;\n  padding: 16px 24px;\n  white-space: nowrap;\n  position: relative;\n}\n:host .hemfixarna_btn span {\n  position: absolute;\n  background: #fff;\n  border-radius: 100%;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 11px;\n  top: -8px;\n  right: -12px;\n}\n:host .hemfixarna_btn span {\n  background: #25a710;\n  color: #fff;\n  right: 0 !important;\n}\n:host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n  font-size: 21px;\n  background: #25a710;\n  color: #fff;\n  padding: 16px 24px;\n}\n:host .hemfixarna .disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n:host .hemfixarna_modal {\n  position: fixed;\n  background: #fffaf2;\n  border: 1px solid #fcd9c9;\n  border-radius: 4px;\n  top: 50%;\n  left: 50%;\n  z-index: 1000;\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  transform: translate(-50%, -50%) scale(0.7);\n  opacity: 0;\n  height: 92%;\n  width: 92%;\n  max-width: 920px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n:host .hemfixarna_modal--open {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n}\n:host .hemfixarna_backdrop {\n  z-index: 999;\n  position: fixed;\n  background: #474444;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  opacity: 0;\n  transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host .hemfixarna_backdrop--open {\n  opacity: 0.3;\n}\n:host .hemfixarna_order {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  background-repeat: no-repeat !important;\n  background-size: cover !important;\n  background-position: center !important;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  padding: 48px 32px 64px;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_order {\n    grid-template-columns: 1fr;\n    grid-template-rows: 0 auto;\n  }\n}\n:host .hemfixarna_order > div:last-of-type {\n  background: #fffaf2;\n  padding: 32px;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow: auto;\n}\n:host .hemfixarna_order img {\n  cursor: pointer;\n}\n:host .hemfixarna_order button {\n  margin: 16px 0;\n  padding: 0;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  font-size: 14px;\n  font-weight: 600;\n}\n:host .hemfixarna_cart {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_cart {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n}\n:host .hemfixarna_cart--right h2, :host .hemfixarna_cart--left h2 {\n  display: flex;\n  align-items: center;\n}\n:host .hemfixarna_cart--right h2 img, :host .hemfixarna_cart--left h2 img {\n  margin-top: 3.2px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_cart--left h2 button {\n    display: none;\n  }\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_cart--right h2 button {\n    display: none;\n  }\n}\n:host .hemfixarna_cart--startfee {\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot {\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot div {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n:host .hemfixarna_cart--additional {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--additional p {\n  font-size: 14px;\n}\n:host .hemfixarna_cart--additional strong {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n  position: relative;\n}\n:host .hemfixarna_cart--additional strong img {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: -24px;\n}\n:host .hemfixarna_cart--price {\n  border-top: 1px solid #fcd9c9;\n  padding: 16px;\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--price h3 {\n  margin: 0;\n}\n:host .hemfixarna_cart--item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px 0;\n  border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--item > div {\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--item > div > div {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n:host .hemfixarna_cart--item > div button {\n  color: #ec6632;\n}\n:host .hemfixarna_categories {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n:host .hemfixarna_categories--wrapper {\n  gap: 32px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_categories--wrapper {\n    grid-template-columns: 1fr;\n  }\n}\n:host .hemfixarna_categories li {\n  position: relative;\n  background: #fff;\n  border-radius: 4px;\n  min-height: 132px;\n  padding: 24px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  cursor: pointer;\n}\n:host .hemfixarna_categories li:hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_categories li > button {\n  height: 100%;\n  width: 100%;\n}\n:host .hemfixarna_categories li .price {\n  font-weight: 700;\n}\n:host .hemfixarna_content {\n  height: 100%;\n  overflow: auto;\n  padding: 0 32px 64px;\n}\n:host .hemfixarna_content--5 {\n  padding-top: 16px;\n}\n:host .hemfixarna_content--painting {\n  padding: 0;\n  overflow: initial;\n}\n:host .hemfixarna_crumbs {\n  position: relative;\n  padding: 16px 24px;\n  border-bottom: 1px solid #fcd9c9;\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_crumbs--back {\n  padding: 16px 24px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-shadow: none !important;\n}\n:host .hemfixarna_crumbs--back:hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs img {\n  cursor: pointer;\n}\n:host .hemfixarna_crumbs .close {\n  position: absolute;\n  right: -16px;\n  top: -16px;\n  z-index: 9;\n}\n:host .hemfixarna_crumbs .cart {\n  padding-left: 16px;\n  position: relative;\n}\n:host .hemfixarna_crumbs .cart img {\n  cursor: inherit;\n}\n:host .hemfixarna_crumbs .cart span {\n  position: absolute;\n  background: #fff;\n  border-radius: 100%;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 11px;\n  top: -8px;\n  right: -12px;\n}\n:host .hemfixarna_crumbs .cart_active {\n  cursor: pointer;\n}\n:host .hemfixarna_crumbs .cart_active span {\n  background: #25a710;\n  color: #fff;\n}\n:host .hemfixarna_crumbs--links {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  overflow: auto;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_crumbs--links {\n    -ms-overflow-style: none;\n  }\n  :host .hemfixarna_crumbs--links::-webkit-scrollbar {\n    display: none;\n  }\n  :host .hemfixarna_crumbs--links::-webkit-scrollbar-button {\n    display: none;\n  }\n}\n:host .hemfixarna_crumbs button {\n  white-space: nowrap;\n  background: #f1ded6;\n  border-radius: 64px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  box-shadow: none !important;\n}\n:host .hemfixarna_crumbs button:not(.active):hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs .active {\n  background: #fffaf2;\n  cursor: default;\n}\n:host .hemfixarna_features {\n  gap: 12px !important;\n}\n:host .hemfixarna_features li {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n:host .hemfixarna_address {\n  margin-bottom: 16px;\n}\n:host .hemfixarna_product {\n  display: grid;\n  gap: 16px;\n}\n:host .hemfixarna_product--link {\n  font-weight: 700;\n  color: #474444;\n  text-underline-offset: 4px;\n}\n:host .hemfixarna_product--left {\n  gap: 32px;\n}\n:host .hemfixarna_product--right {\n  gap: 32px;\n}\n:host .hemfixarna_product--price {\n  margin-top: 4px;\n  font-weight: 700;\n}\n:host .hemfixarna_product--total {\n  text-align: center;\n  margin: -16px 0;\n  font-size: 21px;\n  line-height: 28px;\n}\n:host .hemfixarna_product--item {\n  background: #fff;\n  padding: 16px;\n  display: grid;\n  grid-template-columns: auto 75px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_product--grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_product--grid {\n    grid-template-columns: 1fr;\n  }\n}\n:host .hemfixarna_product--grid > div {\n  display: flex;\n  flex-direction: column;\n}\n:host .hemfixarna_product--grid ul {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n:host .hemfixarna_product p {\n  margin: 0;\n}\n:host .hemfixarna_product--top {\n  display: flex;\n  gap: 32px;\n}\n:host .hemfixarna_product--top > div {\n  width: 100%;\n}\n:host .hemfixarna_product--top > div h1 {\n  max-width: 80%;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_product--top > div h1 {\n    max-width: 100%;\n  }\n}\n:host .hemfixarna_product--top h4 {\n  margin-bottom: 8px;\n}\n:host h5,\n:host p {\n  margin: 0;\n}\n:host input[type=submit] {\n  cursor: pointer;\n}\n:host input[type=date] ~ label {\n  left: 56px;\n}\n:host input[type=date] {\n  border: 1px solid #fcd9c9;\n  padding-left: 64px;\n}\n:host input[type=checkbox] {\n  height: 18px;\n  width: 18px;\n  border: 1px solid #fcd9c9;\n}\n:host input[type=checkbox]:checked {\n  background: red;\n}\n:host input[type=date]::-webkit-calendar-picker-indicator {\n  background: transparent;\n  bottom: 0;\n  color: transparent;\n  cursor: pointer;\n  height: auto;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: auto;\n}\n:host button,\n:host a {\n  cursor: pointer;\n  background: none;\n  border: none;\n}\n:host ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}";
+const hemfixarnaCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\");\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  font-family: \"Inter\", sans-serif;\n}\n:host .mb-2 {\n  margin-bottom: 32px;\n}\n:host button {\n  color: #474444;\n}\n:host form {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n:host form img {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n:host form img:first-of-type {\n  left: 16px;\n}\n:host form img:last-of-type {\n  right: 16px;\n}\n:host form span {\n  margin-top: -8px;\n  color: #ec6632;\n}\n:host form p {\n  text-align: center;\n}\n:host form p {\n  margin: 0;\n}\n:host form div {\n  position: relative;\n}\n:host form div label {\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: #fff;\n  padding: 4px;\n  transition: 0.2s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host form div input {\n  padding: 16px;\n  width: 100%;\n  font-size: 16px;\n  border: 1px solid #fcd9c9;\n}\n:host form div input:focus ~ label,\n:host form div .input_active ~ label {\n  top: 0;\n  transform: translateY(-50%);\n  background: linear-gradient(180deg, #fffaf2 50%, #fff 50%);\n}\n:host h1 {\n  font-size: 24px;\n  font-weight: 400;\n  line-height: 32px;\n  letter-spacing: -3%;\n  text-align: left;\n  margin: 0 0 8px;\n}\n:host h2 {\n  margin: 0 0 24px;\n  font-weight: 700;\n  font-size: 20px;\n  line-height: 28px;\n  letter-spacing: -3%;\n}\n:host p {\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  letter-spacing: -3%;\n}\n:host .hemfixarna {\n  width: 100%;\n  /* Hide default HTML checkbox */\n  /* The slider */\n}\n:host .hemfixarna_painting {\n  opacity: 0;\n  padding: 0 1rem;\n  animation: fadeIn 0.5s forwards 0.3s;\n}\n:host .hemfixarna_painting > h2,\n:host .hemfixarna_painting p {\n  text-align: center;\n  padding: 0 16px;\n}\n:host .hemfixarna_painting > h2 {\n  margin: 0 0 8px;\n}\n:host .hemfixarna_partnerlogo {\n  max-height: 50px;\n  min-height: 45px;\n  object-fit: contain;\n  max-width: 150px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_partnerlogo {\n    max-width: 200px;\n  }\n}\n:host .hemfixarna_nav {\n  position: absolute;\n  top: 0;\n  width: 100dvw;\n  left: 0;\n  height: 80px;\n  z-index: 9999;\n}\n:host .hemfixarna_nav--links {\n  display: none !important;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_nav--links {\n    display: flex !important;\n  }\n}\n:host .hemfixarna_nav--links a {\n  color: #ec6632;\n  text-decoration: none;\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 56px;\n  padding: 8px 32px;\n  text-transform: capitalize;\n}\n:host .hemfixarna_nav > div {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 16px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_nav > div {\n    padding: 0 32px;\n  }\n}\n:host .hemfixarna_nav > div > div {\n  display: flex;\n  gap: 32px;\n  justify-content: space-between;\n}\n:host .hemfixarna_nav > div > img {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: -1;\n}\n:host .hemfixarna_nav a {\n  text-decoration: none;\n}\n:host .hemfixarna_nav p {\n  color: #474444;\n}\n:host .hemfixarna_nav p.with-bg {\n  color: #fff;\n}\n:host .hemfixarna_standalone .hemfixarna_backdrop {\n  background: #fffaf2;\n  opacity: 1;\n}\n:host .hemfixarna_standalone .hemfixarna_modal {\n  top: 80px;\n  transform: translateX(-50%);\n  border: none;\n  height: calc(100dvh - 80px);\n  opacity: 0;\n}\n:host .hemfixarna_standalone .hemfixarna_modal--open {\n  opacity: 1;\n}\n:host .hemfixarna .switch {\n  position: relative;\n  display: inline-block;\n  width: 40px;\n  height: 20px;\n}\n:host .hemfixarna .switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n:host .hemfixarna .slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  border-radius: 34px;\n}\n:host .hemfixarna .slider:before {\n  position: absolute;\n  content: \"\";\n  height: 18px;\n  width: 18px;\n  left: 2px;\n  bottom: 1px;\n  background-color: white;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  border-radius: 50%;\n}\n:host .hemfixarna input:checked + .slider {\n  background-color: #fcd9c9;\n}\n:host .hemfixarna input:focus + .slider {\n  box-shadow: 0 0 1px #fcd9c9;\n}\n:host .hemfixarna input:checked + .slider:before {\n  -webkit-transform: translateX(18px);\n  -ms-transform: translateX(18px);\n  transform: translateX(18px);\n  background: #ec6632;\n}\n:host .hemfixarna_maleribox {\n  background: #fff;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  width: 100%;\n  min-height: 132px;\n  padding: 24px;\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  text-align: left;\n}\n:host .hemfixarna_maleribox:hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_checkbox {\n  display: grid;\n  grid-template-columns: 40px auto;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  letter-spacing: -3%;\n}\n:host .hemfixarna_checkbox > span {\n  transform: translateY(6px);\n}\n:host .hemfixarna_checkbox span,\n:host .hemfixarna_checkbox span p {\n  color: #474444;\n  font-size: 14px;\n}\n:host .hemfixarna_checkbox p {\n  text-align: left;\n}\n:host .hemfixarna_info {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 32px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  border-radius: 4px;\n  border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_info h2 {\n  margin: 0;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_info {\n    position: sticky;\n    top: 0;\n  }\n}\n:host .hemfixarna_infomodal {\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  max-width: 80%;\n  background: #fffaf2;\n  border: 1px solid #fcd9c9;\n  padding: 32px;\n  z-index: 99;\n  border-radius: 4px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n:host .hemfixarna_infomodal p,\n:host .hemfixarna_infomodal h4 {\n  margin: 0;\n}\n:host .hemfixarna_infomodal button {\n  background: #ec6632;\n  color: #fff;\n  border-radius: 60px;\n  font-size: 16px;\n  padding: 8px 16px;\n}\n:host .hemfixarna_addressinfo {\n  padding: 16px 16px 64px;\n  border: 1px solid #fcd9c9;\n  position: relative;\n  margin-bottom: 32px;\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_addressinfo {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n:host .hemfixarna_addressinfo button {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  font-weight: 500;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n:host .hemfixarna_part {\n  background: #fff;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  display: grid;\n  padding: 16px;\n  grid-template-columns: auto 75px;\n}\n:host .hemfixarna_counter {\n  display: flex;\n  align-items: center;\n}\n:host .hemfixarna_counter span {\n  padding: 0 8px;\n}\n:host .hemfixarna_counter img {\n  cursor: pointer;\n}\n:host .hemfixarna_counter img:not(.disabled):hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_description {\n  display: grid;\n  gap: 16px;\n}\n:host .hemfixarna_description ul {\n  list-style: disc;\n  padding-right: 12px;\n  transform: translateX(12px);\n}\n:host .hemfixarna_description--hidden {\n  max-height: 140px;\n  overflow: hidden;\n  position: relative;\n  cursor: pointer;\n}\n:host .hemfixarna_description--hidden::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 128px;\n  background: linear-gradient(180deg, rgba(255, 253, 250, 0), rgba(255, 253, 250, 0.46) 50%, #fffaf2);\n}\n:host .hemfixarna_terms {\n  font-size: 14px;\n}\n:host .hemfixarna_terms a {\n  color: inherit;\n}\n:host .hemfixarna_logo {\n  height: 64px;\n}\n:host .hemfixarna_box {\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: 4px;\n  gap: 16px 8px;\n  border-radius: 4px;\n  gap: 16px 8px;\n}\n:host .hemfixarna_box p,\n:host .hemfixarna_box span {\n  font-size: 15px;\n}\n:host .hemfixarna_box .underline {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n:host .hemfixarna_box .pointer {\n  cursor: pointer;\n}\n:host .hemfixarna_box .p-s {\n  font-size: 12px;\n}\n:host .hemfixarna_box > div {\n  display: grid;\n  gap: 8px;\n}\n:host .hemfixarna_box--standard {\n  background: #fffaf2;\n  border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_box--alternative, :host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n  background: transparent;\n  border: 1px solid #e3e3e3;\n}\n:host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.0784313725);\n}\n:host .hemfixarna_box--alternative_3 {\n  justify-content: center;\n}\n:host .hemfixarna_altbtn {\n  display: flex !important;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  margin-left: auto;\n}\n:host .hemfixarna_btn {\n  margin-left: auto;\n}\n:host .hemfixarna_btn, :host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n  border: none;\n  border-radius: 60px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  line-height: 20px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_btn:not(.disabled):hover, :host .hemfixarna_buy:not(.disabled):hover,\n:host .hemfixarna input[type=submit]:not(.disabled):hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna div:has(> input[type=submit]) {\n  position: relative;\n}\n:host .hemfixarna div:has(> input[type=submit]) input {\n  cursor: pointer;\n}\n:host .hemfixarna div:has(> input[type=submit]) img {\n  display: none;\n}\n:host .hemfixarna .loading {\n  cursor: default;\n  opacity: 0.6;\n}\n:host .hemfixarna .loading > img {\n  display: initial !important;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n:host .hemfixarna_btn {\n  font-size: 14px;\n  background: #c84e18;\n  color: #fff;\n  padding: 16px 24px;\n  white-space: nowrap;\n  position: relative;\n}\n:host .hemfixarna_btn span {\n  position: absolute;\n  background: #fff;\n  border-radius: 100%;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 11px;\n  top: -8px;\n  right: -12px;\n}\n:host .hemfixarna_btn span {\n  background: #25a710;\n  color: #fff;\n  right: 0 !important;\n}\n:host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n  font-size: 21px;\n  background: #25a710;\n  color: #fff;\n  padding: 16px 24px;\n}\n:host .hemfixarna .disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n:host .hemfixarna_modal {\n  position: fixed;\n  background: #fffaf2;\n  border: 1px solid #fcd9c9;\n  border-radius: 4px;\n  top: 50%;\n  left: 50%;\n  z-index: 1000;\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  transform: translate(-50%, -50%) scale(0.7);\n  opacity: 0;\n  height: 92%;\n  width: 92%;\n  max-width: 920px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n:host .hemfixarna_modal--open {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n}\n:host .hemfixarna_backdrop {\n  z-index: 999;\n  position: fixed;\n  background: #474444;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  opacity: 0;\n  transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host .hemfixarna_backdrop--open {\n  opacity: 0.3;\n}\n:host .hemfixarna_order {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  background-repeat: no-repeat !important;\n  background-size: cover !important;\n  background-position: center !important;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  padding: 48px 32px 64px;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_order {\n    grid-template-columns: 1fr;\n    grid-template-rows: 0 auto;\n  }\n}\n:host .hemfixarna_order > div:last-of-type {\n  background: #fffaf2;\n  padding: 32px;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow: auto;\n}\n:host .hemfixarna_order img {\n  cursor: pointer;\n}\n:host .hemfixarna_order button {\n  margin: 16px 0;\n  padding: 0;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  font-size: 14px;\n  font-weight: 600;\n}\n:host .hemfixarna_cart {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_cart {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n}\n:host .hemfixarna_cart--right h2, :host .hemfixarna_cart--left h2 {\n  display: flex;\n  align-items: center;\n}\n:host .hemfixarna_cart--right h2 img, :host .hemfixarna_cart--left h2 img {\n  margin-top: 3.2px;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_cart--left h2 button {\n    display: none;\n  }\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_cart--right h2 button {\n    display: none;\n  }\n}\n:host .hemfixarna_cart--startfee {\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot {\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot div {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n:host .hemfixarna_cart--additional {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--additional p {\n  font-size: 14px;\n}\n:host .hemfixarna_cart--additional strong {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n  position: relative;\n}\n:host .hemfixarna_cart--additional strong img {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: -24px;\n}\n:host .hemfixarna_cart--price {\n  border-top: 1px solid #fcd9c9;\n  padding: 16px;\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--price h3 {\n  margin: 0;\n}\n:host .hemfixarna_cart--item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px 0;\n  border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--item span {\n  font-size: 12px;\n}\n:host .hemfixarna_cart--item > div {\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_cart--item > div > div {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n:host .hemfixarna_cart--item > div button {\n  color: #ec6632;\n}\n:host .hemfixarna_categories {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n:host .hemfixarna_categories--wrapper {\n  gap: 32px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_categories--wrapper {\n    grid-template-columns: 1fr;\n  }\n}\n:host .hemfixarna_categories li {\n  position: relative;\n  background: #fff;\n  border-radius: 4px;\n  min-height: 132px;\n  padding: 24px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  cursor: pointer;\n}\n:host .hemfixarna_categories li:hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_categories li > button {\n  height: 100%;\n  width: 100%;\n}\n:host .hemfixarna_categories li .price {\n  font-weight: 700;\n}\n:host .hemfixarna_content {\n  height: 100%;\n  overflow: auto;\n  padding: 0 32px 64px;\n}\n:host .hemfixarna_content--5 {\n  padding-top: 16px;\n}\n:host .hemfixarna_content--painting {\n  padding: 0;\n  overflow: initial;\n}\n:host .hemfixarna_crumbs {\n  position: relative;\n  padding: 16px 24px;\n  border-bottom: 1px solid #fcd9c9;\n  display: flex;\n  justify-content: space-between;\n}\n:host .hemfixarna_crumbs--back {\n  padding: 16px 24px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-shadow: none !important;\n}\n:host .hemfixarna_crumbs--back:hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs img {\n  cursor: pointer;\n}\n:host .hemfixarna_crumbs .close {\n  position: absolute;\n  right: -16px;\n  top: -16px;\n  z-index: 9;\n}\n:host .hemfixarna_crumbs .cart {\n  padding-left: 16px;\n  position: relative;\n}\n:host .hemfixarna_crumbs .cart img {\n  cursor: inherit;\n}\n:host .hemfixarna_crumbs .cart span {\n  position: absolute;\n  background: #fff;\n  border-radius: 100%;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 11px;\n  top: -8px;\n  right: -12px;\n}\n:host .hemfixarna_crumbs .cart_active {\n  cursor: pointer;\n}\n:host .hemfixarna_crumbs .cart_active span {\n  background: #25a710;\n  color: #fff;\n}\n:host .hemfixarna_crumbs--links {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  overflow: auto;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_crumbs--links {\n    -ms-overflow-style: none;\n  }\n  :host .hemfixarna_crumbs--links::-webkit-scrollbar {\n    display: none;\n  }\n  :host .hemfixarna_crumbs--links::-webkit-scrollbar-button {\n    display: none;\n  }\n}\n:host .hemfixarna_crumbs button {\n  white-space: nowrap;\n  background: #f1ded6;\n  border-radius: 64px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  box-shadow: none !important;\n}\n:host .hemfixarna_crumbs button:not(.active):hover {\n  transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n  filter: brightness(1.02);\n  transform: scale(1.01);\n  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs .active {\n  background: #fffaf2;\n  cursor: default;\n}\n:host .hemfixarna_features {\n  gap: 12px !important;\n}\n:host .hemfixarna_features li {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n:host .hemfixarna_address {\n  margin-bottom: 16px;\n}\n:host .hemfixarna_product {\n  display: grid;\n  gap: 16px;\n}\n:host .hemfixarna_product--link {\n  font-weight: 700;\n  color: #474444;\n  text-underline-offset: 4px;\n}\n:host .hemfixarna_product--left {\n  gap: 32px;\n}\n:host .hemfixarna_product--right {\n  gap: 32px;\n}\n:host .hemfixarna_product--price {\n  margin-top: 4px;\n  font-weight: 700;\n}\n:host .hemfixarna_product--total {\n  text-align: center;\n  margin: -16px 0;\n  font-size: 21px;\n  line-height: 28px;\n}\n:host .hemfixarna_product--item {\n  background: #fff;\n  padding: 16px;\n  display: grid;\n  grid-template-columns: auto 75px;\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_product--grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_product--grid {\n    grid-template-columns: 1fr;\n  }\n}\n:host .hemfixarna_product--grid > div {\n  display: flex;\n  flex-direction: column;\n}\n:host .hemfixarna_product--grid ul {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n:host .hemfixarna_product p {\n  margin: 0;\n}\n:host .hemfixarna_product--top {\n  display: flex;\n  gap: 32px;\n}\n:host .hemfixarna_product--top > div {\n  width: 100%;\n}\n:host .hemfixarna_product--top > div h1 {\n  max-width: 80%;\n}\n@media (max-width: 768px) {\n  :host .hemfixarna_product--top > div h1 {\n    max-width: 100%;\n  }\n}\n:host .hemfixarna_product--top h4 {\n  margin-bottom: 8px;\n}\n:host h5,\n:host p {\n  margin: 0;\n}\n:host input[type=submit] {\n  cursor: pointer;\n}\n:host input[type=date] ~ label {\n  left: 56px;\n}\n:host input[type=date] {\n  border: 1px solid #fcd9c9;\n  padding-left: 64px;\n}\n:host input[type=checkbox] {\n  height: 18px;\n  width: 18px;\n  border: 1px solid #fcd9c9;\n}\n:host input[type=checkbox]:checked {\n  background: red;\n}\n:host input[type=date]::-webkit-calendar-picker-indicator {\n  background: transparent;\n  bottom: 0;\n  color: transparent;\n  cursor: pointer;\n  height: auto;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: auto;\n}\n:host button,\n:host a {\n  cursor: pointer;\n  background: none;\n  border: none;\n}\n:host ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}";
 
 const HemfixarnaComponent = class {
   constructor(hostRef) {
@@ -928,12 +960,13 @@ const HemfixarnaComponent = class {
     if (creditSafeUser) {
       state.creditSafeUser = JSON.parse(creditSafeUser);
     }
-    const [tree, res, options, rut, rot] = await Promise.all([
+    const [tree, res, options, rut, rot, greenDiscount] = await Promise.all([
       this.topCategory ? getTaxonomy(this.topCategory) : null,
       this.slug ? getTaxonomy(this.slug) : Promise.resolve(null),
       getOptions(),
       getRut(),
       getRot(),
+      getGreenDiscount(),
     ]);
     if ((!this.slug || !this.slugIsOldFormat(this.slug)) && !this.forceOldTree) {
       try {
@@ -983,6 +1016,7 @@ const HemfixarnaComponent = class {
     }
     state.rotOptions = rot;
     state.rutOptions = rut;
+    state.greenOptions = greenDiscount;
     state.options = options;
   }
   setTaxonomy(taxonomy) {
@@ -1045,7 +1079,7 @@ const HemfixarnaComponent = class {
     const monteringLogo = index.getAssetPath(`./assets/montering.svg`);
     const navBackground = ((_a = this.nav) === null || _a === void 0 ? void 0 : _a.background) ? index.getAssetPath(this.nav.background) : '';
     const navLogo = ((_b = this.nav) === null || _b === void 0 ? void 0 : _b.logo) ? index.getAssetPath(this.nav.logo) : '';
-    return (index.h("div", { class: `hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}` }, this.loadFromQuery && !this.isDemo && this.nav ? (index.h("nav", { class: "hemfixarna_nav", style: { backgroundColor: (_c = this.nav.backgroundColor) !== null && _c !== void 0 ? _c : '' } }, index.h("div", null, index.h("div", { class: "hemfixarna_nav--logos" }, index.h("a", { href: this.nav.url, target: "_blank" }, index.h("img", { class: "hemfixarna_partnerlogo", src: navLogo, alt: `${this.business} logo` })), index.h("a", { href: "https://hemfixarna.se/", target: "_blank" }, index.h("p", { class: navBackground || this.nav.backgroundColor ? 'with-bg' : '' }, "I samarbete med:"), index.h("img", { src: logo, alt: "hemfixarna_logo", width: 104 }))), index.h("div", { class: "hemfixarna_nav--links" }, index.h("a", { href: this.nav.url, target: "_blank" }, "Till ", this.business), index.h("a", { href: "https://www.hemfixarna.se/", target: "_blank" }, "Till Hemfixarna")), navBackground ? index.h("img", { src: navBackground, class: "nav_background", alt: "nav_background" }) : null))) : null, !this.loadFromQuery || this.isDemo ? (index.h("div", { class: `hemfixarna_box hemfixarna_box--${this.widgetStyle}` }, [WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (index.h("img", { src: this.id === 'maleri' ? pensel : monteringLogo, alt: "montering logo", width: 32, height: 32 })) : null, index.h("div", null, index.h("div", null, index.h("p", { onClick: () => this.openModal(), class: `pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}` }, this.id === 'maleri' ? (index.h("span", null, "Ber\u00E4kna fast pris p\u00E5 m\u00E5leri & tapetsering h\u00E4r")) : (index.h(index.Fragment, null, ((_d = this.product) === null || _d === void 0 ? void 0 : _d.post_title) || ((_e = this.proppedProduct) === null || _e === void 0 ? void 0 : _e.post_title) || (index.h("span", null, "Montering", index.h("wbr", null), "/Installation ", (_g = (_f = state.selectedCustomerCategory) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : 'på plats', " - ", index.h("strong", { class: "underline" }, "se priser h\u00E4r"))), (this.product && ((_h = this.slug) === null || _h === void 0 ? void 0 : _h.includes('product'))) || (this.proppedProduct && !((_j = this.product) === null || _j === void 0 ? void 0 : _j.invoice) && !((_k = this.proppedProduct) === null || _k === void 0 ? void 0 : _k.invoice)) ? (index.h("span", null, ' från', " ", index.h("strong", null, getProductPriceWithRotAndRut(this.proppedProduct || this.product), "kr"))) : null, ((_l = this.product) === null || _l === void 0 ? void 0 : _l.invoice) || ((_m = this.proppedProduct) === null || _m === void 0 ? void 0 : _m.invoice) ? (index.h("span", null, ' - ', index.h("strong", { class: "underling" }, "se priser h\u00E4r"))) : null)))), this.widgetStyle === WidgetStyle.standard ? index.h("img", { src: logo, width: 104 }) : null, this.widgetStyle === WidgetStyle.alternative ? (index.h("span", { class: "p-s" }, "Utf\u00F6rs av ", index.h("strong", null, "Hemfixarna"))) : null), [WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (index.h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn", style: {
+    return (index.h("div", { class: `hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}` }, this.loadFromQuery && !this.isDemo && this.nav ? (index.h("nav", { class: "hemfixarna_nav", style: { backgroundColor: (_c = this.nav.backgroundColor) !== null && _c !== void 0 ? _c : '' } }, index.h("div", null, index.h("div", { class: "hemfixarna_nav--logos" }, index.h("a", { href: this.nav.url, target: "_blank" }, index.h("img", { class: "hemfixarna_partnerlogo", src: navLogo, alt: `${this.business} logo` })), index.h("a", { href: "https://hemfixarna.se/", target: "_blank" }, index.h("p", { class: navBackground || this.nav.backgroundColor ? 'with-bg' : '' }, "I samarbete med:"), index.h("img", { src: logo, alt: "hemfixarna_logo", width: 104 }))), index.h("div", { class: "hemfixarna_nav--links" }, index.h("a", { href: this.nav.url, target: "_blank" }, "Till ", this.business), index.h("a", { href: "https://www.hemfixarna.se/", target: "_blank" }, "Till Hemfixarna")), navBackground ? index.h("img", { src: navBackground, class: "nav_background", alt: "nav_background" }) : null))) : null, !this.loadFromQuery || this.isDemo ? (index.h("div", { class: `hemfixarna_box hemfixarna_box--${this.widgetStyle}` }, [WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (index.h("img", { src: this.id === 'maleri' ? pensel : monteringLogo, alt: "montering logo", width: 32, height: 32 })) : null, index.h("div", null, index.h("div", null, index.h("p", { onClick: () => this.openModal(), class: `pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}` }, this.id === 'maleri' ? (index.h("span", null, "Ber\u00E4kna fast pris p\u00E5 m\u00E5leri & tapetsering h\u00E4r")) : (index.h(index.Fragment, null, ((_d = this.product) === null || _d === void 0 ? void 0 : _d.title) || ((_e = this.proppedProduct) === null || _e === void 0 ? void 0 : _e.title) || (index.h("span", null, "Montering", index.h("wbr", null), "/Installation ", (_g = (_f = state.selectedCustomerCategory) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : 'på plats', " - ", index.h("strong", { class: "underline" }, "se priser h\u00E4r"))), (this.product && ((_h = this.slug) === null || _h === void 0 ? void 0 : _h.includes('product'))) || (this.proppedProduct && !((_j = this.product) === null || _j === void 0 ? void 0 : _j.invoice) && !((_k = this.proppedProduct) === null || _k === void 0 ? void 0 : _k.invoice)) ? (index.h("span", null, ' från', " ", index.h("strong", null, getProductPriceWithRotAndRut(this.proppedProduct || this.product), "kr"))) : null, ((_l = this.product) === null || _l === void 0 ? void 0 : _l.invoice) || ((_m = this.proppedProduct) === null || _m === void 0 ? void 0 : _m.invoice) ? (index.h("span", null, ' - ', index.h("strong", { class: "underling" }, "se priser h\u00E4r"))) : null)))), this.widgetStyle === WidgetStyle.standard ? index.h("img", { src: logo, width: 104 }) : null, this.widgetStyle === WidgetStyle.alternative ? (index.h("span", { class: "p-s" }, "Utf\u00F6rs av ", index.h("strong", null, "Hemfixarna"))) : null), [WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (index.h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn", style: {
         color: ((_o = this.buttonColor) === null || _o === void 0 ? void 0 : _o.startsWith('#')) || !((_p = this.buttonColor) === null || _p === void 0 ? void 0 : _p.length) ? this.buttonColor : `#${this.buttonColor}`,
         backgroundColor: ((_q = this.buttonBg) === null || _q === void 0 ? void 0 : _q.startsWith('#')) || !((_r = this.buttonBg) === null || _r === void 0 ? void 0 : _r.length) ? this.buttonBg : `#${this.buttonBg}`,
       } }, "Best\u00E4ll h\u00E4r", this.getCartLength() > 0 && index.h("span", null, this.getCartLength()))) : null, WidgetStyle.alternative_2 === this.widgetStyle ? (index.h("div", { class: "hemfixarna_altbtn" }, index.h("strong", { class: "p-s" }, "Utf\u00F6rs av"), index.h("img", { src: logo, alt: "hemfixarna logo", width: 98 }))) : null)) : null, this.modal && (index.h("div", null, index.h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, state.modal && (index.h("div", { class: "hemfixarna_infomodal" }, state.modal.title && index.h("h2", null, state.modal.title), state.modal.text.map((t) => (index.h("p", { innerHTML: t }))), index.h("div", null, index.h("button", { onClick: () => (state.modal = null) }, "St\u00E4ng")))), (this.tree || state.customer) && (index.h("hemfixarna-breadcrumbs", { isDemo: this.isDemo, loadFromQuery: this.loadFromQuery, closeModal: () => this.closeModal(), tree: this.tree })), !state.customer || this.slugIsOldFormat(this.slug) ? (index.h("div", { class: `hemfixarna_content hemfixarna_content--${state.step}` }, state.step === 1 && this.tree && index.h("hemfixarna-start", { tree: this.tree }), state.step === 2 && state.selectedCategory && index.h("hemfixarna-category", null), state.step === 3 && state.selectedService && index.h("hemfixarna-service", null), state.step === 4 && state.selectedProduct && index.h("hemfixarna-product", null), state.step === 5 && index.h("hemfixarna-cart", { tree: this.tree }), state.step === 6 && index.h("hemfixarna-order", { tree: this.tree }))) : (index.h("div", { class: `hemfixarna_content hemfixarna_content--${state.step} ${state.step === 4 && state.maleri ? 'hemfixarna_content--painting' : ''}` }, state.step < 4 && index.h("hemfixarna-start", null), state.step === 4 && index.h("hemfixarna-product", null), state.step === 5 && index.h("hemfixarna-cart", { tree: this.tree }), state.step === 6 && index.h("hemfixarna-order", { tree: this.tree })))), !this.isDemo ? index.h("div", { class: `hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}` }) : null))));
@@ -1061,7 +1095,7 @@ HemfixarnaComponent.style = hemfixarnaCss;
 
 const hemfixarnaDemoCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\"); :host{font-family:\"Inter\", sans-serif}:host .hemfixarna_widgetstyles label{cursor:pointer}:host .hemfixarna_widgetstyles>div{display:flex;gap:1rem}:host .hemfixarna_widgetstyles h5{margin:1rem 0}:host .hemfixarna_example{margin-bottom:16px;background:#000;padding:16px;color:#fff;display:flex;justify-content:space-between;cursor:pointer;max-width:500px;box-sizing:border-box;position:relative}:host .hemfixarna_example--tooltip{background:#000;top:-48px;font-size:16px;left:40%;color:white;padding:8px;position:absolute;opacity:0}:host .hemfixarna_example--tooltip::after{content:\"\";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#000 transparent transparent transparent}:host .hemfixarna_example:hover .hemfixarna_example--tooltip{opacity:1}:host .hemfixarna_example p{font-size:14px}:host .hemfixarna_example img{filter:invert(1)}:host .hemfixarna_install{display:grid;gap:8px;margin-top:16px}:host .hemfixarna_product--label{background:#e1e0f5}:host .hemfixarna_categories{max-height:100%;overflow:auto;position:relative}:host .hemfixarna_categories--label{display:flex;align-items:center;justify-content:space-between;padding:8px}:host .hemfixarna_categories--label button{background:#3f3a92;border:none;font-weight:600;padding:3.2px 9.6px;border-radius:10px;margin-right:8px;color:#ece8e8}:host .hemfixarna_categories--label button:active{transform:scale(0.95)}:host .hemfixarna_categories--label--big{font-weight:600;border-bottom:1px solid black}:host p{margin:0}:host span{color:darkolivegreen;font-size:10px}:host button{cursor:pointer}:host>div{display:grid;gap:32px;width:100%;grid-template-columns:1fr 1fr;height:100vh;place-items:center;overflow:hidden;padding:16px 32px;box-sizing:border-box}:host>div>*{width:100%}:host>div>div{max-width:500px}:host>div ul{margin:0;padding:0;list-style:none}:host>div ul ul{gap:1px;display:grid}:host>div ul li{padding-left:16px;background:#fff}";
 
-const MyComponent$d = class {
+const MyComponent$f = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.debounce = null;
@@ -1106,7 +1140,7 @@ const MyComponent$d = class {
     // Your color accessibility logic here
   }
   getTopLevelCategory() {
-    switch ("kund") {
+    switch ("flyttsmart") {
       case Business.byggmax:
         return TopCategory.byggmax;
       default:
@@ -1138,7 +1172,7 @@ const MyComponent$d = class {
     }
     else {
       const partner = window.location.pathname.replace('/', '');
-      this.partner = isBusiness(partner) ? partner : (_a = "kund") !== null && _a !== void 0 ? _a : Business.kund;
+      this.partner = isBusiness(partner) ? partner : (_a = "flyttsmart") !== null && _a !== void 0 ? _a : Business.kund;
       const customer = await getCustomer(this.partner);
       if (customer.code !== 'not_found' && customer) {
         this.customer = customer;
@@ -1176,19 +1210,19 @@ const MyComponent$d = class {
   }
   render() {
     const copy = index.getAssetPath(`./assets/copy.png`);
-    return (index.h("div", null, index.h("div", null, index.h("div", { onClick: () => this.copyExample(), class: "hemfixarna_example" }, index.h("p", null, this.getExample()), index.h("img", { src: copy, height: 20 }), index.h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText)), this.partner === Business.byggmax && (index.h("hemfixarna-byggmax", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, forceOldTree: Boolean(process.env.FORCE_OLD_TREE), slug: this.selectedSlug, id: this.selectedID })), this.partner === Business.skanska && index.h("hemfixarna-skanska", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.string && (index.h("hemfixarna-string-furniture", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.hornbach && (index.h("hemfixarna-hornbach", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.zaptec && (index.h("hemfixarna-zaptec", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.tesla && (index.h("hemfixarna-tesla", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.forebygg && (index.h("hemfixarna-forebygg", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.doro && index.h("hemfixarna-doro", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.elfa && index.h("hemfixarna-elfa", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.kbygg && (index.h("hemfixarna-kbygg", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.fargvaruhuset && (index.h("hemfixarna-fargvaruhuset", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.norrgavel && (index.h("hemfixarna-norrgavel", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.klint && index.h("hemfixarna-klint", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.kund && index.h("hemfixarna-kund", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), index.h("div", { class: "hemfixarna_install" }, index.h("div", { onClick: () => this.copyCdn(), class: "hemfixarna_example" }, index.h("p", null, this.cdnLink), index.h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText), index.h("img", { src: copy, height: 20 }))), index.h("div", { class: "hemfixarna_widgetstyles" }, index.h("h5", null, "Widget styles"), index.h("div", null, Object.values(WidgetStyle).map(style => (index.h("label", { key: style }, index.h("input", { type: "radio", value: style, checked: this.widgetStyle === style, onChange: () => (this.widgetStyle = style) }), style)))), index.h("div", null, index.h("div", null, index.h("h5", null, "Button background color"), index.h("input", { type: "text", value: this.buttonBg, onInput: e => (this.buttonBg = e.target.value) })), index.h("div", null, index.h("h5", null, "Button text color"), index.h("input", { type: "text", value: this.buttonColor, onInput: e => (this.buttonColor = e.target.value) })))), index.h("span", null, "Write an hexa code no # needed"), this.colorAccessibility ? (index.h("div", null, index.h("h5", null, "Tillg\u00E4nglighetsrapport"), index.h("div", null, index.h("strong", null, "Liten text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.small) } }, this.colorAccessibility.small), index.h("br", null), index.h("strong", null, "Fet text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.bold) } }, this.colorAccessibility.bold), index.h("br", null), index.h("strong", null, "Stor text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.large) } }, this.colorAccessibility.large), index.h("br", null), index.h("strong", null, "Kontrastf\u00F6rh\u00E5llande:"), " ", this.colorAccessibility.contrast))) : null), index.h("ul", { class: "hemfixarna_categories" }, this.customer ? (index.h("div", null, this.showMaleri() ? (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, "M\u00E5leriverktyget"), index.h("span", null, "maleri")), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText('maleri') }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedID = 'maleri') }, "Ladda m\u00E5leri"))))) : null, this.customer.categories.map(c => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, c.name), index.h("span", null, `c-${c.id}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`c-${c.id}`) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = `c-${c.id}`) }, "Ladda kategori"))), c.show_products && c.products ? (index.h("ul", null, c.products.map(p => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, index.h("div", null, index.h("p", null, p.fields.post_title), index.h("span", null, p.fields.ID)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt")))))))) : (index.h("ul", null, c.sub_categories &&
-      c.sub_categories.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.name), index.h("span", null, `c-${sc.id}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`c-${sc.id}`) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = `c-${sc.id}`) }, "Ladda kategori"))), index.h("ul", null, sc.products.map(p => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, index.h("div", null, index.h("p", null, p.fields.post_title), index.h("span", null, p.fields.ID)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt"))))))))))))))))) : this.tree ? (index.h("div", null, this.tree.sub_cats.map(c => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, c.name), index.h("span", null, `category/${c.slug}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`category/${c.slug}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `category/${c.slug}`) }, "Ladda kategori"))), index.h("ul", null, c.services.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.post_title), index.h("span", null, `service/${sc.post_name}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`service/${sc.post_name}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `service/${sc.post_name}`) }, "Ladda kategori"))), index.h("ul", null, sc.products.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.post_title), index.h("span", null, `product/${sc.post_name}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`product/${sc.post_name}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `product/${sc.post_name}`) }, "Ladda produkt")))))))))))))))) : null)));
+    return (index.h("div", null, index.h("div", null, index.h("div", { onClick: () => this.copyExample(), class: "hemfixarna_example" }, index.h("p", null, this.getExample()), index.h("img", { src: copy, height: 20 }), index.h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText)), this.partner === Business.byggmax && (index.h("hemfixarna-byggmax", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, forceOldTree: Boolean(process.env.FORCE_OLD_TREE), slug: this.selectedSlug, id: this.selectedID })), this.partner === Business.skanska && index.h("hemfixarna-skanska", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.sparfonster && (index.h("hemfixarna-sparfonster", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.string && (index.h("hemfixarna-string-furniture", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.hornbach && (index.h("hemfixarna-hornbach", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.zaptec && (index.h("hemfixarna-zaptec", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.tesla && (index.h("hemfixarna-tesla", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.forebygg && (index.h("hemfixarna-forebygg", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.doro && index.h("hemfixarna-doro", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.elfa && index.h("hemfixarna-elfa", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.kbygg && (index.h("hemfixarna-kbygg", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.fargvaruhuset && (index.h("hemfixarna-fargvaruhuset", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.norrgavel && (index.h("hemfixarna-norrgavel", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.klint && index.h("hemfixarna-klint", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), this.partner === Business.flyttsmart && (index.h("hemfixarna-flyttsmart", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), this.partner === Business.kund && index.h("hemfixarna-kund", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID }), index.h("div", { class: "hemfixarna_install" }, index.h("div", { onClick: () => this.copyCdn(), class: "hemfixarna_example" }, index.h("p", null, this.cdnLink), index.h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText), index.h("img", { src: copy, height: 20 }))), index.h("div", { class: "hemfixarna_widgetstyles" }, index.h("h5", null, "Widget styles"), index.h("div", null, Object.values(WidgetStyle).map(style => (index.h("label", { key: style }, index.h("input", { type: "radio", value: style, checked: this.widgetStyle === style, onChange: () => (this.widgetStyle = style) }), style)))), index.h("div", null, index.h("div", null, index.h("h5", null, "Button background color"), index.h("input", { type: "text", value: this.buttonBg, onInput: e => (this.buttonBg = e.target.value) })), index.h("div", null, index.h("h5", null, "Button text color"), index.h("input", { type: "text", value: this.buttonColor, onInput: e => (this.buttonColor = e.target.value) })))), index.h("span", null, "Write an hexa code no # needed"), this.colorAccessibility ? (index.h("div", null, index.h("h5", null, "Tillg\u00E4nglighetsrapport"), index.h("div", null, index.h("strong", null, "Liten text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.small) } }, this.colorAccessibility.small), index.h("br", null), index.h("strong", null, "Fet text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.bold) } }, this.colorAccessibility.bold), index.h("br", null), index.h("strong", null, "Stor text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.large) } }, this.colorAccessibility.large), index.h("br", null), index.h("strong", null, "Kontrastf\u00F6rh\u00E5llande:"), " ", this.colorAccessibility.contrast))) : null), index.h("ul", { class: "hemfixarna_categories" }, this.customer ? (index.h("div", null, this.showMaleri() ? (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, "M\u00E5leriverktyget"), index.h("span", null, "maleri")), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText('maleri') }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedID = 'maleri') }, "Ladda m\u00E5leri"))))) : null, this.customer.categories.map(c => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, c.name), index.h("span", null, `c-${c.id}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`c-${c.id}`) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = `c-${c.id}`) }, "Ladda kategori"))), c.show_products && c.products ? (index.h("ul", null, c.products.map(p => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, index.h("div", null, index.h("p", null, p.fields.title), index.h("span", null, p.fields.ID)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt")))))))) : (index.h("ul", null, c.sub_categories &&
+      c.sub_categories.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.name), index.h("span", null, `c-${sc.id}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`c-${sc.id}`) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = `c-${sc.id}`) }, "Ladda kategori"))), index.h("ul", null, sc.products.map(p => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, index.h("div", null, index.h("p", null, p.fields.title), index.h("span", null, p.fields.ID)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt"))))))))))))))))) : this.tree ? (index.h("div", null, this.tree.sub_cats.map(c => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, c.name), index.h("span", null, `category/${c.slug}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`category/${c.slug}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `category/${c.slug}`) }, "Ladda kategori"))), index.h("ul", null, c.services.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.post_title), index.h("span", null, `service/${sc.post_name}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`service/${sc.post_name}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `service/${sc.post_name}`) }, "Ladda kategori"))), index.h("ul", null, sc.products.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.post_title), index.h("span", null, `product/${sc.post_name}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`product/${sc.post_name}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `product/${sc.post_name}`) }, "Ladda produkt")))))))))))))))) : null)));
   }
   static get watchers() { return {
     "buttonBg": ["debouncedFunction"],
     "buttonColor": ["debouncedFunction"]
   }; }
 };
-MyComponent$d.style = hemfixarnaDemoCss;
+MyComponent$f.style = hemfixarnaDemoCss;
 
 const hemfixarnaDoroCss = "";
 
-const MyComponent$c = class {
+const MyComponent$e = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -1201,11 +1235,11 @@ const MyComponent$c = class {
     return (index.h("hemfixarna-component", { widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor, loadFromQuery: Boolean(this.loadFromQuery), id: this.id, business: Business.doro }));
   }
 };
-MyComponent$c.style = hemfixarnaDoroCss;
+MyComponent$e.style = hemfixarnaDoroCss;
 
 const hemfixarnaElfaCss = "";
 
-const MyComponent$b = class {
+const MyComponent$d = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -1219,9 +1253,9 @@ const MyComponent$b = class {
     return (index.h("hemfixarna-component", { widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor, nav: { url: 'https://elfa.com', logo: 'assets/elfa.png' }, loadFromQuery: Boolean(this.loadFromQuery), id: this.id, business: Business.elfa, isDemo: this.isDemo }));
   }
 };
-MyComponent$b.style = hemfixarnaElfaCss;
+MyComponent$d.style = hemfixarnaElfaCss;
 
-const MyComponent$a = class {
+const MyComponent$c = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -1236,9 +1270,24 @@ const MyComponent$a = class {
   }
 };
 
+const MyComponent$b = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.id = undefined;
+    this.loadFromQuery = undefined;
+    this.widgetStyle = WidgetStyle.standard;
+    this.buttonColor = undefined;
+    this.buttonBg = undefined;
+    this.isDemo = false;
+  }
+  render() {
+    return (index.h("hemfixarna-component", { widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor, loadFromQuery: Boolean(this.loadFromQuery), id: this.id, business: Business.flyttsmart, isDemo: this.isDemo }));
+  }
+};
+
 const hemfixarnaForebyggCss = "";
 
-const MyComponent$9 = class {
+const MyComponent$a = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -1251,7 +1300,7 @@ const MyComponent$9 = class {
     return (index.h("hemfixarna-component", { widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor, loadFromQuery: Boolean(this.loadFromQuery), id: this.id, business: Business.forebygg }));
   }
 };
-MyComponent$9.style = hemfixarnaForebyggCss;
+MyComponent$a.style = hemfixarnaForebyggCss;
 
 // src/errors.ts
 var PersonnummerError = class extends Error {
@@ -1980,7 +2029,7 @@ const HemfixarnaGetuser = class {
 
 const hemfixarnaHornbachCss = "";
 
-const MyComponent$8 = class {
+const MyComponent$9 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -1994,7 +2043,7 @@ const MyComponent$8 = class {
     return (index.h("hemfixarna-component", { widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor, nav: { url: 'https://www.hornbach.se/', logo: 'assets/hornbach/logo.svg', background: './assets/hornbach/nav.jpg' }, isDemo: this.isDemo, loadFromQuery: Boolean(this.loadFromQuery), id: this.id, business: Business.hornbach }));
   }
 };
-MyComponent$8.style = hemfixarnaHornbachCss;
+MyComponent$9.style = hemfixarnaHornbachCss;
 
 const HemfixarnaInfo = class {
   constructor(hostRef) {
@@ -2002,7 +2051,7 @@ const HemfixarnaInfo = class {
     this.logo = index.getAssetPath(`./assets/hemfixarna.svg`);
     this.checkoutList = [
       { trust_badge: 'Efter att du fyllt i formuläret blir du kontaktad av en Hemfixare för bokning av tid.' },
-      { trust_badge: 'När jobbet är klart kommer du få en faktura med RUT/ROT-avdrag.' },
+      { trust_badge: 'När jobbet är klart kommer du få en faktura med RUT/ROT/Grön teknik avdrag.' },
     ];
     this.list = null;
   }
@@ -2087,10 +2136,11 @@ const HemfixarnaInvoice = class {
       formData.append('images[]', file);
     });
     formData.append('product', JSON.stringify({
-      title: state.selectedProduct.post_title,
+      title: state.selectedProduct.title,
       amount: 1,
       has_rut: state.selectedProduct.rut,
       has_rot: state.selectedProduct.rot,
+      has_green: state.selectedProduct.green,
       ID: state.selectedProduct.ID,
       parts: [],
     }));
@@ -2162,7 +2212,7 @@ const HemfixarnaInvoice = class {
 };
 HemfixarnaInvoice.style = hemfixarnaInvoiceCss;
 
-const MyComponent$7 = class {
+const MyComponent$8 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -2177,7 +2227,7 @@ const MyComponent$7 = class {
   }
 };
 
-const MyComponent$6 = class {
+const MyComponent$7 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -2191,7 +2241,7 @@ const MyComponent$6 = class {
   }
 };
 
-const MyComponent$5 = class {
+const MyComponent$6 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -2205,7 +2255,7 @@ const MyComponent$5 = class {
   }
 };
 
-const MyComponent$4 = class {
+const MyComponent$5 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -2226,7 +2276,7 @@ const HemfixarnaOrder = class {
     this.render = () => {
       return (index.h("div", { style: { background: `url(${state.options.thank_you_image})` }, class: "hemfixarna_order" }, index.h("div", null), index.h("div", null, index.h("h2", null, state.checkoutInvoice ? 'Tack för din förfrågan' : 'Tack för din bokning'), state.checkoutInvoice ? index.h("p", null, "Vi \u00E5terkommer inom kort till dig p\u00E5 angivet telefonnummer eller epost") : null, state.checkoutInvoice ? index.h("div", null) : index.h("hemfixarna-orderrows", { tree: this.tree, cart: false }), index.h("span", { onClick: () => this.resetShop() }, index.h("button", null, "G\u00F6r en ny bokning")), index.h("hemfixarna-info", { list: [
           { trust_badge: 'Du kommer bli kontaktad av en Hemfixare för bokning av tid.' },
-          { trust_badge: 'När jobbet är klart kommer du få en faktura med RUT/ROT-avdrag.' },
+          { trust_badge: 'När jobbet är klart kommer du få en faktura med RUT/ROT/Grön teknik-avdrag.' },
         ] }))));
     };
     this.tree = undefined;
@@ -2287,12 +2337,32 @@ const HemfixarnaOrderrows = class {
       text: [state.rutOptions.rut_start_fee_text, state.rutOptions.rut_start_fee_text_secondary],
     };
   }
+  openGreen() {
+    state.modal = {
+      title: state.greenOptions.green_start_fee_heading,
+      text: [state.greenOptions.green_start_fee_text, state.greenOptions.green_start_fee_text_secondary],
+    };
+  }
+  getDiscountedInfo(item) {
+    if (item.rut && state.rut) {
+      return ' (efter RUT-avdrag)';
+    }
+    else if (item.rot && state.rot) {
+      return ' (efter ROT-avdrag)';
+    }
+    else if (item.green && state.green) {
+      return ' (efter Grön teknik avdrag)';
+    }
+    else {
+      return '';
+    }
+  }
   render() {
     const info = index.getAssetPath(`./assets/info.svg`);
     return (index.h(index.Fragment, null, index.h("ul", { class: "hemfixarna_cart--items" }, state.cart.map(item => {
       var _a;
-      return (index.h("li", { class: "hemfixarna_cart--item" }, index.h("div", null, index.h("div", null, item.icon && index.h("img", { width: 30, src: (_a = item.icon.url) !== null && _a !== void 0 ? _a : item.icon, alt: item.name }), index.h("p", null, index.h("strong", null, item.amount, "x "), item.name)), this.cart && index.h("button", { onClick: () => this.goToProduct(item.id) }, "\u00C4ndra")), index.h("p", null, index.h("strong", null, getProductPrice(item, item.price, item.amount), "kr")), item.parts.length > 0 && (index.h("ul", null, item.parts.map(part => (index.h("li", null, index.h("p", null, index.h("strong", null, part.amount, "x "), part.name), index.h("p", null, index.h("strong", null, getPartPrice(part, item, part.amount), "kr")))))))));
-    })), index.h("div", { class: "hemfixarna_cart--additional" }, getStartFee().rot > 0 && (index.h("div", { class: "hemfixarna_cart--startfee" }, index.h("p", null, index.h("strong", { onClick: () => this.openRot() }, state.rotOptions.rot_start_fee_heading, index.h("img", { height: 16, src: info, alt: "info monteringsavgift" }))), index.h("p", null, getStartFee().rot, "kr"))), getStartFee().rut > 0 && (index.h("div", { class: "hemfixarna_cart--startfee" }, index.h("p", null, index.h("strong", { onClick: () => this.openRut() }, state.rutOptions.rut_start_fee_heading, index.h("img", { height: 16, src: info, alt: "info monteringsavgift" }))), index.h("p", null, getStartFee().rut, "kr"))), state.cart.find((item) => item.rot) && (index.h("div", { class: "hemfixarna_cart--rutrot" }, index.h("div", null, this.cart && (index.h("label", { class: "switch" }, index.h("input", { checked: state.rot, onChange: () => (state.rot = !state.rot), type: "checkbox" }), index.h("span", { class: "slider" }))), index.h("p", null, "ROT-avdrag")), index.h("p", null, "(-", state.rot ? calculateRot() : 0, "kr)"))), state.cart.find((item) => item.rut) && (index.h("div", { class: "hemfixarna_cart--rutrot" }, index.h("div", null, index.h("label", { class: "switch" }, index.h("input", { onChange: () => (state.rut = !state.rut), checked: state.rut, type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "RUT-avdrag")), index.h("p", null, "(-", state.rut ? calculateRut() : 0, "kr)")))), index.h("div", { class: "hemfixarna_cart--price" }, index.h("h2", null, "Totalbelopp: "), index.h("h2", null, getTotalPrice(), "kr"))));
+      return (index.h("li", { class: "hemfixarna_cart--item" }, index.h("div", null, index.h("div", null, item.icon && index.h("img", { width: 30, src: (_a = item.icon.url) !== null && _a !== void 0 ? _a : item.icon, alt: item.name }), index.h("p", null, index.h("strong", null, item.amount, "x "), item.name)), this.cart && index.h("button", { onClick: () => this.goToProduct(item.id) }, "\u00C4ndra")), index.h("p", null, index.h("strong", null, getProductPrice(item, item.price, item.amount), "kr"), index.h("span", null, this.getDiscountedInfo(item))), item.parts.length > 0 && (index.h("ul", null, item.parts.map(part => (index.h("li", null, index.h("p", null, index.h("strong", null, part.amount, "x "), part.name), index.h("p", null, index.h("strong", null, getPartPrice(part, item, part.amount), "kr")))))))));
+    })), index.h("div", { class: "hemfixarna_cart--additional" }, index.h("div", null, getStartFee().rot > 0 && (index.h("div", { class: "hemfixarna_cart--startfee" }, index.h("p", null, index.h("strong", { onClick: () => this.openRot() }, state.rotOptions.rot_start_fee_heading, index.h("img", { height: 16, src: info, alt: "info monteringsavgift" }))), index.h("p", null, getStartFee().rot, "kr"))), getStartFee().rut > 0 && (index.h("div", { class: "hemfixarna_cart--startfee" }, index.h("p", null, index.h("strong", { onClick: () => this.openRut() }, state.rutOptions.rut_start_fee_heading, index.h("img", { height: 16, src: info, alt: "info monteringsavgift" }))), index.h("p", null, getStartFee().rut, "kr"))), getStartFee().green > 0 && (index.h("div", { class: "hemfixarna_cart--startfee" }, index.h("p", null, index.h("strong", { onClick: () => this.openGreen() }, state.greenOptions.green_start_fee_heading, index.h("img", { height: 16, src: info, alt: "info monteringsavgift" }))), index.h("p", null, getStartFee().green, "kr")))), state.cart.find((item) => item.rot) && (index.h("div", { class: "hemfixarna_cart--rutrot" }, index.h("div", null, this.cart && (index.h("label", { class: "switch" }, index.h("input", { checked: state.rot, onChange: () => (state.rot = !state.rot), type: "checkbox" }), index.h("span", { class: "slider" }))), index.h("p", null, "ROT-avdrag")), index.h("p", null, "(-", state.rot ? calculateRot() : 0, "kr)"))), state.cart.find((item) => item.rut) && (index.h("div", { class: "hemfixarna_cart--rutrot" }, index.h("div", null, index.h("label", { class: "switch" }, index.h("input", { onChange: () => (state.rut = !state.rut), checked: state.rut, type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "RUT-avdrag")), index.h("p", null, "(-", state.rut ? calculateRut() : 0, "kr)"))), state.cart.find((item) => item.green) && (index.h("div", { class: "hemfixarna_cart--rutrot" }, index.h("div", null, index.h("label", { class: "switch" }, index.h("input", { onChange: () => (state.green = !state.green), checked: state.green, type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "Gr\u00F6n teknik avdrag")), index.h("p", null, "(-", state.green ? calculateGreenDiscount() : 0, "kr)")))), index.h("div", { class: "hemfixarna_cart--price" }, index.h("h2", null, "Totalbelopp: "), index.h("h2", null, getTotalPrice(), "kr"))));
   }
 };
 
@@ -2317,10 +2387,11 @@ const HemfixarnaProduct = class {
           id: state.selectedProduct.ID,
           rut: state.selectedProduct.rut,
           rot: state.selectedProduct.rot,
+          green: state.selectedProduct.green,
           amount: 1,
           parts: [],
           price: state.selectedProduct.price,
-          name: state.selectedProduct.post_title,
+          name: state.selectedProduct.title,
           start_fee: !state.selectedProduct.hide_start_fee,
           terms_checkout: state.selectedProduct.terms_checkout,
           icon: state.selectedProduct.icon,
@@ -2349,7 +2420,7 @@ const HemfixarnaProduct = class {
         productInCart.parts = [...productInCart.parts];
       }
       else {
-        productInCart.parts = [...productInCart.parts, { id: part.ID, amount: 1, price: part.price, name: (_a = part.title) !== null && _a !== void 0 ? _a : part.post_title }];
+        productInCart.parts = [...productInCart.parts, { id: part.ID, amount: 1, price: part.price, name: (_a = part.title) !== null && _a !== void 0 ? _a : part.title }];
       }
       state.cart = [...state.cart.filter(p => p.id !== productInCart.id), productInCart];
     }
@@ -2432,10 +2503,10 @@ const HemfixarnaProduct = class {
           ? 'https://painting-dev.vercel.app/static/js/main.js'
           : 'https://painting-frontend.vercel.app/static/js/main.js', defer: true, async: true }), index.h("hemfixare-calculator", { title: state.options.maleri_title, subtitle: state.options.maleri_text, modal: "true", customer: state.business === Business.string ? 'string' : state.business })));
     }
-    return state.selectedProduct ? (index.h("div", { class: "hemfixarna_product" }, index.h("div", { class: "hemfixarna_product--top" }, state.selectedProduct.icon && (index.h("img", { width: 80, src: (_a = state.selectedProduct.icon.url) !== null && _a !== void 0 ? _a : state.selectedProduct.icon, alt: state.selectedProduct.post_title })), index.h("div", null, index.h("h1", null, state.selectedProduct.post_title), !state.selectedProduct.invoice ? index.h("h2", null, getProductPrice(state.selectedProduct), " kr/st") : index.h("h2", null, state.selectedProduct.invoice_price))), index.h("div", { class: "hemfixarna_product--grid" }, index.h("div", { class: "hemfixarna_product--left" }, ((_b = state.selectedProduct.list) === null || _b === void 0 ? void 0 : _b.length) && (index.h("ul", { class: "hemfixarna_features" }, state.selectedProduct.list.map(l => (index.h("li", { key: l.bullet }, index.h("img", { src: checked, alt: "checked" }), index.h("p", null, l.bullet)))))), state.selectedProduct.description && (index.h("p", { onClick: () => (this.hideDescription = false), class: `hemfixarna_description ${this.hideDescription ? 'hemfixarna_description--hidden' : ''}`, innerHTML: state.selectedProduct.description }))), index.h("div", { class: "hemfixarna_product--right" }, state.selectedProduct.invoice ? (index.h("hemfixarna-invoice", null)) : (index.h(index.Fragment, null, index.h("ul", null, index.h("li", { class: "hemfixarna_product--item" }, index.h("div", null, index.h("p", null, "Antal ", state.selectedProduct.post_title), index.h("p", { class: "hemfixarna_product--price" }, getProductPrice(state.selectedProduct), "kr/st")), index.h("div", { class: "hemfixarna_counter" }, index.h("img", { class: `${this.getAmount() === 0 ? 'disabled' : ''}`, src: minus, onClick: () => this.removeProduct() }), index.h("span", null, this.getAmount()), index.h("img", { src: plus, onClick: () => this.addProduct() }))), ((_c = state.selectedProduct.parts) === null || _c === void 0 ? void 0 : _c.length) &&
+    return state.selectedProduct ? (index.h("div", { class: "hemfixarna_product" }, index.h("div", { class: "hemfixarna_product--top" }, state.selectedProduct.icon && (index.h("img", { width: 80, src: (_a = state.selectedProduct.icon.url) !== null && _a !== void 0 ? _a : state.selectedProduct.icon, alt: state.selectedProduct.title })), index.h("div", null, index.h("h1", null, state.selectedProduct.title), !state.selectedProduct.invoice ? index.h("h2", null, getProductPrice(state.selectedProduct), " kr/st") : index.h("h2", null, state.selectedProduct.invoice_price))), index.h("div", { class: "hemfixarna_product--grid" }, index.h("div", { class: "hemfixarna_product--left" }, ((_b = state.selectedProduct.list) === null || _b === void 0 ? void 0 : _b.length) && (index.h("ul", { class: "hemfixarna_features" }, state.selectedProduct.list.map(l => (index.h("li", { key: l.bullet }, index.h("img", { src: checked, alt: "checked" }), index.h("p", null, l.bullet)))))), state.selectedProduct.description && (index.h("p", { onClick: () => (this.hideDescription = false), class: `hemfixarna_description ${this.hideDescription ? 'hemfixarna_description--hidden' : ''}`, innerHTML: state.selectedProduct.description }))), index.h("div", { class: "hemfixarna_product--right" }, state.selectedProduct.invoice ? (index.h("hemfixarna-invoice", null)) : (index.h(index.Fragment, null, index.h("ul", null, index.h("li", { class: "hemfixarna_product--item" }, index.h("div", null, index.h("p", null, "Antal ", state.selectedProduct.title), index.h("p", { class: "hemfixarna_product--price" }, getProductPrice(state.selectedProduct), "kr/st")), index.h("div", { class: "hemfixarna_counter" }, index.h("img", { class: `${this.getAmount() === 0 ? 'disabled' : ''}`, src: minus, onClick: () => this.removeProduct() }), index.h("span", null, this.getAmount()), index.h("img", { src: plus, onClick: () => this.addProduct() }))), ((_c = state.selectedProduct.parts) === null || _c === void 0 ? void 0 : _c.length) &&
       state.selectedProduct.parts.map(p => {
         var _a;
-        return (index.h("li", { class: "hemfixarna_part" }, index.h("div", null, index.h("p", null, (_a = p.title) !== null && _a !== void 0 ? _a : p.post_title), index.h("p", { class: "hemfixarna_product--price" }, getPartPrice(p, state.selectedProduct), "kr/st")), index.h("div", { class: "hemfixarna_counter" }, index.h("img", { class: `${this.getPartAmount(p.ID) === 0 ? 'disabled' : ''}`, src: minus, onClick: () => this.removePart(p) }), index.h("span", null, this.getPartAmount(p.ID)), index.h("img", { class: `${this.getAmount() === 0 ? 'disabled' : ''}`, src: plus, onClick: () => this.addPart(p) }))));
+        return (index.h("li", { class: "hemfixarna_part" }, index.h("div", null, index.h("p", null, (_a = p.title) !== null && _a !== void 0 ? _a : p.title), index.h("p", { class: "hemfixarna_product--price" }, getPartPrice(p, state.selectedProduct), "kr/st")), index.h("div", { class: "hemfixarna_counter" }, index.h("img", { class: `${this.getPartAmount(p.ID) === 0 ? 'disabled' : ''}`, src: minus, onClick: () => this.removePart(p) }), index.h("span", null, this.getPartAmount(p.ID)), index.h("img", { class: `${this.getAmount() === 0 ? 'disabled' : ''}`, src: plus, onClick: () => this.addPart(p) }))));
       })), index.h("h4", { class: "hemfixarna_product--total" }, "Totalt ", this.getTotalPrice(), " kr"), index.h("button", { onClick: () => this.goToCart(), class: `hemfixarna_buy ${this.getAmount() === 0 ? 'disabled' : ''}` }, "Forts\u00E4tt"))), !state.selectedProduct.hide_start_fee && (state.selectedProduct.rot || state.selectedProduct.rut) && state.rutOptions && state.rotOptions && (index.h("p", { class: "hemfixarna_terms" }, index.h("strong", null, state.selectedProduct.rot ? state.rotOptions.rot_start_fee_heading : state.rutOptions.rut_start_fee_heading), index.h("br", null), index.h("span", { innerHTML: state.selectedProduct.rot ? state.rotOptions.rot_start_fee_text : state.rutOptions.rut_start_fee_text }))), state.options && index.h("hemfixarna-info", { list: state.options.trust }))))) : null;
   }
   get el() { return index.getElement(this); }
@@ -2458,7 +2529,7 @@ const HemfixarnaService = class {
 
 const hemfixarnaSkanskaCss = "";
 
-const MyComponent$3 = class {
+const MyComponent$4 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = undefined;
@@ -2472,7 +2543,22 @@ const MyComponent$3 = class {
     return (index.h("hemfixarna-component", { widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor, loadFromQuery: Boolean(this.loadFromQuery), id: this.id, business: Business.skanska }));
   }
 };
-MyComponent$3.style = hemfixarnaSkanskaCss;
+MyComponent$4.style = hemfixarnaSkanskaCss;
+
+const MyComponent$3 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.id = undefined;
+    this.customer = undefined;
+    this.loadFromQuery = undefined;
+    this.widgetStyle = WidgetStyle.standard;
+    this.buttonColor = undefined;
+    this.buttonBg = undefined;
+  }
+  render() {
+    return (index.h("hemfixarna-component", { widgetStyle: this.widgetStyle, buttonBg: this.buttonBg, buttonColor: this.buttonColor, loadFromQuery: Boolean(this.loadFromQuery), id: this.id, business: Business.sparfonster }));
+  }
+};
 
 const HemfixarnaGrid = class {
   constructor(hostRef) {
@@ -2555,32 +2641,34 @@ const MyComponent = class {
 exports.hemfixarna_address = HemfixarnaAddress;
 exports.hemfixarna_box = HemfixarnaBox;
 exports.hemfixarna_breadcrumbs = HemfixarnaBreadcrumbs;
-exports.hemfixarna_byggmax = MyComponent$e;
+exports.hemfixarna_byggmax = MyComponent$g;
 exports.hemfixarna_cart = HemfixarnaCart;
 exports.hemfixarna_category = HemfixarnaCategory;
 exports.hemfixarna_checkout = HemfixarnaCheckout;
 exports.hemfixarna_component = HemfixarnaComponent;
-exports.hemfixarna_demo = MyComponent$d;
-exports.hemfixarna_doro = MyComponent$c;
-exports.hemfixarna_elfa = MyComponent$b;
-exports.hemfixarna_fargvaruhuset = MyComponent$a;
-exports.hemfixarna_forebygg = MyComponent$9;
+exports.hemfixarna_demo = MyComponent$f;
+exports.hemfixarna_doro = MyComponent$e;
+exports.hemfixarna_elfa = MyComponent$d;
+exports.hemfixarna_fargvaruhuset = MyComponent$c;
+exports.hemfixarna_flyttsmart = MyComponent$b;
+exports.hemfixarna_forebygg = MyComponent$a;
 exports.hemfixarna_getuser = HemfixarnaGetuser;
-exports.hemfixarna_hornbach = MyComponent$8;
+exports.hemfixarna_hornbach = MyComponent$9;
 exports.hemfixarna_info = HemfixarnaInfo;
 exports.hemfixarna_invoice = HemfixarnaInvoice;
-exports.hemfixarna_kbygg = MyComponent$7;
-exports.hemfixarna_klint = MyComponent$6;
-exports.hemfixarna_kund = MyComponent$5;
-exports.hemfixarna_norrgavel = MyComponent$4;
+exports.hemfixarna_kbygg = MyComponent$8;
+exports.hemfixarna_klint = MyComponent$7;
+exports.hemfixarna_kund = MyComponent$6;
+exports.hemfixarna_norrgavel = MyComponent$5;
 exports.hemfixarna_order = HemfixarnaOrder;
 exports.hemfixarna_orderrows = HemfixarnaOrderrows;
 exports.hemfixarna_product = HemfixarnaProduct;
 exports.hemfixarna_service = HemfixarnaService;
-exports.hemfixarna_skanska = MyComponent$3;
+exports.hemfixarna_skanska = MyComponent$4;
+exports.hemfixarna_sparfonster = MyComponent$3;
 exports.hemfixarna_start = HemfixarnaGrid;
 exports.hemfixarna_string_furniture = MyComponent$2;
 exports.hemfixarna_tesla = MyComponent$1;
 exports.hemfixarna_zaptec = MyComponent;
 
-//# sourceMappingURL=hemfixarna-address_30.cjs.entry.js.map
+//# sourceMappingURL=hemfixarna-address_32.cjs.entry.js.map