hemfixarna-web-components 1.7.4 → 1.8.2

package/dist/cjs/hemfixarna-address_15.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b83343b9.js');
 const index$1 = require('./index-6af772cf.js');
-const index$2 = require('./index-8054ce93.js');
+const index$2 = require('./index-739bf321.js');
 
 const hideField = (field) => {
   return field.split(' ').reduce((acc, curr) => {
@@ -128,29 +128,56 @@ const getPartPrice = (part, product, amount = 1) => {
   else if (product.rut && index$1.state.rut) {
     return getRutPrice(part.price * amount);
   }
+  else if (product.green && index$1.state.green) {
+    return getGreenPrice(part.price * amount);
+  }
   else {
     return part.price * amount;
   }
 };
-const getStartFee = () => {
-  if (!index$1.state.cart)
-    return { rut: 0, rot: 0, green: 0 };
-  const hasRut = index$1.state.cart.some(item => item.rut && item.start_fee);
-  const hasRot = index$1.state.cart.some(item => item.rot && item.start_fee);
-  const hasGreen = index$1.state.cart.some(item => item.green && item.start_fee);
-  const rutPrice = index$1.state.rut ? getRutPrice(index$1.state.options.start_fee) : index$1.state.options.start_fee * 1;
-  const rotPrice = index$1.state.rot ? getRotPrice(index$1.state.options.start_fee) : index$1.state.options.start_fee * 1;
-  const greenPrice = index$1.state.green ? getGreenPrice(index$1.state.options.start_fee) : index$1.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 groupCartItemsByStartFee = (cart) => {
+  return cart.reduce((groups, item) => {
+    var _a;
+    const startFeeID = ((_a = item.start_fee_obj) === null || _a === void 0 ? void 0 : _a.ID) || null;
+    if (!groups[startFeeID]) {
+      groups[startFeeID] = [];
+    }
+    groups[startFeeID].push(item);
+    return groups;
+  }, {});
+};
+const calculateStartFee = (cart = index$1.state.cart) => {
+  const uniqueStartFees = new Set();
+  let totalRut = 0;
+  let totalRot = 0;
+  let totalGreen = 0;
+  let totalDefault = 0;
+  cart.forEach(item => {
+    const startFee = item.start_fee_obj;
+    if (startFee && !uniqueStartFees.has(startFee.ID)) {
+      uniqueStartFees.add(startFee.ID);
+      if (item.rut) {
+        totalRut += index$1.state.rut ? getRutPrice(startFee.price) : startFee.price;
+      }
+      if (item.rot) {
+        totalRot += index$1.state.rot ? getRotPrice(startFee.price) : startFee.price;
+      }
+      if (item.green) {
+        totalGreen += index$1.state.green ? getGreenPrice(startFee.price) : startFee.price;
+      }
+      if (!item.rut && !item.rot && !item.green) {
+        totalDefault += startFee.price;
+      }
+    }
+  });
+  const appliedDiscounts = [totalRut > 0, totalRot > 0, totalGreen > 0];
+  return {
+    rut: totalRut,
+    rot: totalRot,
+    green: totalGreen,
+    default: totalDefault,
+    length: appliedDiscounts.filter(Boolean).length,
+  };
 };
 const getItemPrice = (item) => {
   const partsPrice = item.parts.reduce((acc, curr) => {
@@ -161,41 +188,74 @@ const getItemPrice = (item) => {
 const calculateRot = () => {
   const totalWithRot = index$1.state.cart.reduce((acc, curr) => {
     return curr.rot ? acc + getItemPrice(curr) : acc;
-  }, 0) + getStartFee().rot;
+  }, 0) + (index$1.state.cart.some(item => item.rot) ? calculateStartFee().rot : 0);
   const totalWithoutRot = index$1.state.cart.reduce((acc, curr) => {
-    const partsPrice = curr.parts.reduce((acc, curr) => {
-      return acc + curr.price * curr.amount;
+    var _a;
+    const partsPrice = curr.parts.reduce((acc, part) => {
+      return acc + part.price * part.amount;
     }, 0);
-    return curr.rot ? acc + curr.price * curr.amount + partsPrice : acc;
-  }, 0) + Number(index$1.state.options.start_fee);
+    const startFee = ((_a = curr.start_fee_obj) === null || _a === void 0 ? void 0 : _a.price) || 0;
+    if (curr.rot) {
+      if (!acc.startFeeApplied) {
+        acc.startFeeApplied = true;
+        acc.amount += curr.price * curr.amount + partsPrice + startFee;
+      }
+      else {
+        acc.amount += curr.price * curr.amount + partsPrice;
+      }
+    }
+    return acc;
+  }, { amount: 0, startFeeApplied: false }).amount;
   return totalWithoutRot - totalWithRot;
 };
-const calculateRut = () => {
-  const totalWithRut = index$1.state.cart.reduce((acc, curr) => {
-    return curr.rut ? acc + getItemPrice(curr) : acc;
-  }, 0) + getStartFee().rut;
-  const totalWithoutRut = index$1.state.cart.reduce((acc, curr) => {
-    const partsPrice = curr.parts.reduce((acc, curr) => {
-      return acc + curr.price * curr.amount;
-    }, 0);
-    return curr.rut ? acc + curr.price * curr.amount + partsPrice : acc;
-  }, 0) + Number(index$1.state.options.start_fee);
-  return totalWithoutRut - totalWithRut;
-};
 const calculateGreenDiscount = () => {
   const totalWithGreen = index$1.state.cart.reduce((acc, curr) => {
     return curr.green ? acc + getItemPrice(curr) : acc;
-  }, 0) + getStartFee().green;
+  }, 0) + (index$1.state.cart.some(item => item.green) ? calculateStartFee().green : 0);
   const totalWithoutGreen = index$1.state.cart.reduce((acc, curr) => {
-    const partsPrice = curr.parts.reduce((acc, curr) => {
-      return acc + curr.price * curr.amount;
+    var _a;
+    const partsPrice = curr.parts.reduce((acc, part) => {
+      return acc + part.price * part.amount;
     }, 0);
-    return curr.green ? acc + curr.price * curr.amount + partsPrice : acc;
-  }, 0) + Number(index$1.state.options.start_fee);
+    const startFee = ((_a = curr.start_fee_obj) === null || _a === void 0 ? void 0 : _a.price) || 0;
+    if (curr.green) {
+      if (!acc.startFeeApplied) {
+        acc.startFeeApplied = true;
+        acc.amount += curr.price * curr.amount + partsPrice + startFee;
+      }
+      else {
+        acc.amount += curr.price * curr.amount + partsPrice;
+      }
+    }
+    return acc;
+  }, { amount: 0, startFeeApplied: false }).amount;
   return totalWithoutGreen - totalWithGreen;
 };
+const calculateRut = () => {
+  const totalWithRut = index$1.state.cart.reduce((acc, curr) => {
+    return curr.rut ? acc + getItemPrice(curr) : acc;
+  }, 0) + (index$1.state.cart.some(item => item.rut) ? calculateStartFee().rut : 0);
+  const totalWithoutRut = index$1.state.cart.reduce((acc, curr) => {
+    var _a;
+    const partsPrice = curr.parts.reduce((acc, part) => {
+      return acc + part.price * part.amount;
+    }, 0);
+    const startFee = ((_a = curr.start_fee_obj) === null || _a === void 0 ? void 0 : _a.price) || 0;
+    if (curr.rut) {
+      if (!acc.startFeeApplied) {
+        acc.startFeeApplied = true;
+        acc.amount += curr.price * curr.amount + partsPrice + startFee;
+      }
+      else {
+        acc.amount += curr.price * curr.amount + partsPrice;
+      }
+    }
+    return acc;
+  }, { amount: 0, startFeeApplied: false }).amount;
+  return totalWithoutRut - totalWithRut;
+};
 const getTotalPrice = () => {
-  return index$1.state.cart.reduce((acc, curr) => acc + getItemPrice(curr), 0) + getStartFee().rot + getStartFee().rut;
+  return index$1.state.cart.reduce((acc, curr) => acc + getItemPrice(curr), 0) + calculateStartFee().rot + calculateStartFee().rut + calculateStartFee().green + calculateStartFee().default;
 };
 
 const isProduct = (category) => {
@@ -454,6 +514,19 @@ const HemfixarnaCheckout = class {
       if (this.loading)
         return;
       this.loading = true;
+      const startFees = index$1.state.cart
+        .filter(item => item.start_fee_obj)
+        .map(item => {
+        var _a, _b, _c;
+        return ({
+          ID: (_a = item.start_fee_obj) === null || _a === void 0 ? void 0 : _a.ID,
+          title: (_b = item.start_fee_obj) === null || _b === void 0 ? void 0 : _b.title,
+          price: (_c = item.start_fee_obj) === null || _c === void 0 ? void 0 : _c.price,
+          rut: item.rut ? 1 : 0,
+          rot: item.rot ? 1 : 0,
+          green: item.green ? 1 : 0,
+        });
+      });
       let order = {
         firstName: index$1.state.creditSafeUser.firstName,
         lastName: index$1.state.creditSafeUser.lastName,
@@ -473,6 +546,7 @@ const HemfixarnaCheckout = class {
               quantity: part.amount,
               rut: 0,
               rot: 0,
+              start_fee_id: item.start_fee_obj ? item.start_fee_obj.ID : null,
             }));
             return [
               {
@@ -481,11 +555,13 @@ const HemfixarnaCheckout = class {
                 quantity: item.amount,
                 rot: item.rot ? 1 : 0,
                 rut: item.rut ? 1 : 0,
+                start_fee_id: item.start_fee_obj ? item.start_fee_obj.ID : null,
               },
               ...parts,
             ];
           }),
         ].flat(),
+        start_fees: startFees,
         creditSafe: index$1.state.creditSafeUser,
         customer: index$1.state.business,
         id_source: index$1.state.customer.source ? index$1.state.customer.source.fieldData.So01_Name : '',
@@ -578,7 +654,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 input[type=text] {\n  padding: 16px;\n  width: 100%;\n  font-size: 16px;\n  border: 1px solid #fcd9c9;\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  position: relative;\n}\n:host form button {\n  position: absolute;\n  right: 0;\n  top: -1rem;\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 form select {\n  padding: 0.75rem 1rem;\n  width: 100%;\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_source {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n:host .hemfixarna_source img {\n  width: 20px;\n}\n:host .hemfixarna_source--pw {\n  max-width: 300px !important;\n}\n:host .hemfixarna_source--pw input[type=password] {\n  padding: 0.5rem;\n}\n:host .hemfixarna_source--pw form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n:host .hemfixarna_contact {\n  display: flex;\n  gap: 16px;\n}\n:host .hemfixarna_contact a {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #474444;\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 13px;\n}\n:host .hemfixarna_contact a:hover {\n  text-decoration: underline;\n}\n:host .hemfixarna_contact--horizontal span {\n  display: none;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_contact--horizontal span {\n    display: initial;\n  }\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: -6px;\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  -webkit-transform: translate3d(0, 0, 0);\n}\n:host .hemfixarna_crumbs .cart {\n  display: flex;\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: -6px;\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--right {\n  display: flex;\n  align-items: center;\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@media (max-width: 768px) {\n  :host .hemfixarna_crumbs button {\n    display: none;\n  }\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 img {\n  object-fit: contain;\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 input[type=text] {\n  padding: 16px;\n  width: 100%;\n  font-size: 16px;\n  border: 1px solid #fcd9c9;\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  position: relative;\n}\n:host form button {\n  position: absolute;\n  right: 0;\n  top: -1rem;\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, #faf1e8 50%, #fff 50%);\n}\n:host form select {\n  padding: 0.75rem 1rem;\n  width: 100%;\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_source {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n:host .hemfixarna_source img {\n  width: 20px;\n}\n:host .hemfixarna_source--pw {\n  max-width: 300px !important;\n}\n:host .hemfixarna_source--pw input[type=password] {\n  padding: 0.5rem;\n}\n:host .hemfixarna_source--pw form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n:host .hemfixarna_contact {\n  display: flex;\n  gap: 16px;\n}\n:host .hemfixarna_contact a {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #474444;\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 13px;\n}\n:host .hemfixarna_contact a:hover {\n  text-decoration: underline;\n}\n:host .hemfixarna_contact--horizontal span {\n  display: none;\n}\n@media (min-width: 769px) {\n  :host .hemfixarna_contact--horizontal span {\n    display: initial;\n  }\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%, #faf1e8);\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: -6px;\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: #faf1e8;\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  position: relative;\n}\n:host .hemfixarna_cart--additional p strong {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n:host .hemfixarna_cart--additional p img {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: -20px;\n  cursor: pointer;\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_cart--group {\n  border-radius: 16px;\n  background: #fefaf6;\n  margin-bottom: 16px;\n  padding: 10px 20px;\n}\n:host .hemfixarna_cart--group ul li:first-of-type {\n  border-top: 0;\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  -webkit-transform: translate3d(0, 0, 0);\n}\n:host .hemfixarna_crumbs .cart {\n  display: flex;\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: -6px;\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--right {\n  display: flex;\n  align-items: center;\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@media (max-width: 768px) {\n  :host .hemfixarna_crumbs button {\n    display: none;\n  }\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 img {\n  object-fit: contain;\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) {
@@ -680,6 +756,16 @@ const HemfixarnaComponent = class {
   }
   // Open close modal && click outside event
   openModal() {
+    if (this.id) {
+      if (this.id === 'maleri') {
+        index$1.state.maleri = true;
+        index$1.state.step = 4;
+      }
+      else {
+        index$1.state.maleri = false;
+        this.loadCategoryOrProduct(this.id);
+      }
+    }
     this.modal = true;
     setTimeout(() => {
       this.showModal = true;
@@ -733,7 +819,7 @@ const HemfixarnaComponent = class {
     return (index.h("div", { class: `hemfixarna hemfixarna-${this.business}` }, index.h("div", { class: `hemfixarna_box hemfixarna_box--${this.widgetStyle}` }, [index$2.WidgetStyle.alternative_2, index$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 ${[index$2.WidgetStyle.alternative_2, index$2.WidgetStyle.alternative_3].includes(this.widgetStyle) && index$1.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, !index$1.state.selectedCustomerCategory && !this.product && !this.proppedProduct ? (index.h(index.Fragment, null, ((_a = index$1.state.customer) === null || _a === void 0 ? void 0 : _a.widget_title) ? (index.h("span", null, index$1.state.customer.widget_title)) : (index.h("span", null, "Montering/Installation - ", index.h("strong", { class: "underline" }, "se priser h\u00E4r"))))) : (index.h(index.Fragment, null, ((_b = this.product) === null || _b === void 0 ? void 0 : _b.title) || ((_c = this.proppedProduct) === null || _c === void 0 ? void 0 : _c.title) || ((_d = index$1.state.selectedCustomerCategory) === null || _d === void 0 ? void 0 : _d.widget_title) || (index.h("span", null, "Montering", index.h("wbr", null), "/Installation ", (_f = (_e = index$1.state.selectedCustomerCategory) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : 'på plats', " - ", index.h("strong", { class: "underline" }, "se priser h\u00E4r"))), this.proppedProduct && !((_g = this.product) === null || _g === void 0 ? void 0 : _g.invoice) && !((_h = this.proppedProduct) === null || _h === void 0 ? void 0 : _h.invoice) ? (index.h("span", null, ' från', " ", index.h("strong", null, getProductPriceWithRotAndRut(this.proppedProduct || this.product), "kr"))) : null)))))), this.widgetStyle === index$2.WidgetStyle.standard ? index.h("img", { src: logo, width: 104 }) : null, this.widgetStyle === index$2.WidgetStyle.alternative ? (index.h("span", { class: "p-s" }, "Utf\u00F6rs av ", index.h("strong", null, "Hemfixarna"))) : null), [index$2.WidgetStyle.standard, index$2.WidgetStyle.alternative].includes(this.widgetStyle) ? (index.h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn", style: {
         color: ((_j = this.buttonColor) === null || _j === void 0 ? void 0 : _j.startsWith('#')) || !((_k = this.buttonColor) === null || _k === void 0 ? void 0 : _k.length) ? this.buttonColor : `#${this.buttonColor}`,
         backgroundColor: ((_l = this.buttonBg) === null || _l === void 0 ? void 0 : _l.startsWith('#')) || !((_m = this.buttonBg) === null || _m === void 0 ? void 0 : _m.length) ? this.buttonBg : `#${this.buttonBg}`,
-      } }, "Best\u00E4ll h\u00E4r", this.getCartLength() > 0 && index.h("span", null, this.getCartLength()))) : null, index$2.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), this.modal && (index.h("div", null, index.h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, index$1.state.modal && (index.h("div", { class: "hemfixarna_infomodal" }, index$1.state.modal.title && index.h("h2", null, index$1.state.modal.title), index$1.state.modal.text.map((t) => (index.h("p", { innerHTML: t }))), index.h("div", null, index.h("button", { onClick: () => (index$1.state.modal = null) }, "St\u00E4ng")))), index$1.state.showSourcePasswordPrompt ? (index.h("div", { class: "hemfixarna_source--pw hemfixarna_infomodal" }, index.h("form", { onSubmit: e => {
+      } }, "Best\u00E4ll h\u00E4r", this.getCartLength() > 0 && index.h("span", null, this.getCartLength()))) : null, index$2.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), this.modal && (index.h("div", null, index.h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, index$1.state.modal && (index.h("div", { class: "hemfixarna_infomodal" }, index$1.state.modal.title && index.h("h2", null, index$1.state.modal.title), index.h("p", { innerHTML: index$1.state.modal.text }), index.h("div", null, index.h("button", { onClick: () => (index$1.state.modal = null) }, "St\u00E4ng")))), index$1.state.showSourcePasswordPrompt ? (index.h("div", { class: "hemfixarna_source--pw hemfixarna_infomodal" }, index.h("form", { onSubmit: e => {
         e.preventDefault();
         this.handleLogin();
       } }, index.h("input", { type: "password", placeholder: "L\u00F6senord" }), index.h("input", { type: "submit", value: "Logga in" }), this.loginSourceError && index.h("span", null, "Fel l\u00F6senord")))) : null, index$1.state.customer && index.h("hemfixarna-breadcrumbs", { closeModal: () => this.closeModal() }), index.h("div", { class: `hemfixarna_content hemfixarna_content--${index$1.state.step} ${index$1.state.step === 4 && index$1.state.maleri ? 'hemfixarna_content--painting' : ''}` }, index$1.state.step < 4 && index.h("hemfixarna-start", null), index$1.state.step === 4 && index.h("hemfixarna-product", null), index$1.state.step === 5 && index.h("hemfixarna-cart", null), index$1.state.step === 6 && index.h("hemfixarna-order", null))), index.h("div", { class: `hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}` })))));
@@ -1800,8 +1886,9 @@ const HemfixarnaInvoice = class {
     this.formImages = this.formImages.filter((_, i) => i !== index);
   }
   render() {
+    var _a;
     const upload = index.getAssetPath(`./assets/drag-drop.svg`);
-    return (index.h("div", { class: "invoice" }, index.h("p", null, index$1.state.selectedProduct.invoice_description), index.h("form", { onSubmit: e => this.submit(e) }, index.h("textarea", { name: "descriptionInput", placeholder: "Beskriv ditt \u00E4rende" }), index.h("div", { role: "button", "aria-label": "upload image", onDragOver: e => this.preventDragOver(e), onDrop: e => this.handleImageDrop(e), onClick: () => this.handleImageClick() }, index.h("img", { src: upload, alt: "hemfixarna_logo", width: 24 }), index.h("div", null, index.h("p", null, "Bifoga ev bilder"), index.h("span", null, "(dra bilder hit)")), index.h("input", { onChange: e => this.handleFileInputChange(e), class: "hemfixarna-file-upload", accept: "image/*", type: "file", multiple: true, name: "fileInput" })), index.h("div", { class: "invoice-preview" }, this.displayImages.map((img, i) => (index.h("div", { key: i }, index.h("img", { src: img, alt: "uploaded image" }), index.h("button", { onClick: () => this.removeImage(i) }, index.h("img", { src: index.getAssetPath(`./assets/close.svg`), alt: "close" })))))), index.h("input", { placeholder: "E-post", type: "email", name: "emailInput" }), index.h("input", { placeholder: "Telefonnummer", type: "tel", name: "telInput" }), index$1.state.selectedProduct.terms_show_checkbox ? (index.h("label", null, index.h("input", { type: "checkbox", name: "termsInput" }), index$1.state.selectedProduct.terms)) : null, this.formError ? index.h("span", null, this.formError) : null, index.h("input", { type: "submit", value: this.formState === 'loading' ? 'Skickar' : 'Kontakta mig' }))));
+    return (index.h("div", { class: "invoice" }, ((_a = index$1.state.selectedProduct) === null || _a === void 0 ? void 0 : _a.invoice_description) ? index.h("p", null, index$1.state.selectedProduct.invoice_description) : null, index.h("form", { onSubmit: e => this.submit(e) }, index.h("textarea", { name: "descriptionInput", placeholder: "Beskriv ditt \u00E4rende" }), index.h("div", { role: "button", "aria-label": "upload image", onDragOver: e => this.preventDragOver(e), onDrop: e => this.handleImageDrop(e), onClick: () => this.handleImageClick() }, index.h("img", { src: upload, alt: "hemfixarna_logo", width: 24 }), index.h("div", null, index.h("p", null, "Bifoga ev bilder"), index.h("span", null, "(dra bilder hit)")), index.h("input", { onChange: e => this.handleFileInputChange(e), class: "hemfixarna-file-upload", accept: "image/*", type: "file", multiple: true, name: "fileInput" })), index.h("div", { class: "invoice-preview" }, this.displayImages.map((img, i) => (index.h("div", { key: i }, index.h("img", { src: img, alt: "uploaded image" }), index.h("button", { onClick: () => this.removeImage(i) }, index.h("img", { src: index.getAssetPath(`./assets/close.svg`), alt: "close" })))))), index.h("input", { placeholder: "E-post", type: "email", name: "emailInput" }), index.h("input", { placeholder: "Telefonnummer", type: "tel", name: "telInput" }), index$1.state.selectedProduct.terms_show_checkbox ? (index.h("label", null, index.h("input", { type: "checkbox", name: "termsInput" }), index$1.state.selectedProduct.terms)) : null, this.formError ? index.h("span", null, this.formError) : null, index.h("input", { type: "submit", value: this.formState === 'loading' ? 'Skickar' : 'Kontakta mig' }))));
   }
   get el() { return index.getElement(this); }
 };
@@ -1844,22 +1931,10 @@ const HemfixarnaOrderrows = class {
       index$1.state.step = 4;
     }
   }
-  openRot() {
-    index$1.state.modal = {
-      title: index$1.state.rotOptions.rot_start_fee_heading,
-      text: [index$1.state.rotOptions.rot_start_fee_text, index$1.state.rotOptions.rot_start_fee_text_secondary],
-    };
-  }
-  openRut() {
-    index$1.state.modal = {
-      title: index$1.state.rutOptions.rut_start_fee_heading,
-      text: [index$1.state.rutOptions.rut_start_fee_text, index$1.state.rutOptions.rut_start_fee_text_secondary],
-    };
-  }
-  openGreen() {
+  openModal(title, text) {
     index$1.state.modal = {
-      title: index$1.state.greenOptions.green_start_fee_heading,
-      text: [index$1.state.greenOptions.green_start_fee_text, index$1.state.greenOptions.green_start_fee_text_secondary],
+      title,
+      text,
     };
   }
   getDiscountedInfo(item) {
@@ -1876,12 +1951,34 @@ const HemfixarnaOrderrows = class {
       return '';
     }
   }
+  renderStartFees() {
+    const startFees = new Set();
+    const fees = [];
+    index$1.state.cart.forEach(item => {
+      const startFee = item.start_fee_obj;
+      if (startFee && !startFees.has(startFee.ID)) {
+        startFees.add(startFee.ID);
+        const rotStartFee = item.rot ? calculateStartFee().rot : 0;
+        const rutStartFee = item.rut ? calculateStartFee().rut : 0;
+        const greenStartFee = item.green ? calculateStartFee().green : 0;
+        fees.push({
+          id: startFee.ID,
+          name: startFee.title,
+          price: startFee.price,
+          text: startFee.pop_up,
+          rot: rotStartFee,
+          rut: rutStartFee,
+          green: greenStartFee,
+        });
+      }
+    });
+    return fees.map(fee => (index.h("div", { key: fee.id, class: "hemfixarna_cart--startfee" }, index.h("p", { onClick: () => this.openModal(fee.name, fee.text) }, index.h("strong", null, fee.name), index.h("img", { height: 16, src: index.getAssetPath('./assets/info.svg'), alt: "info monteringsavgift" })), index.h("p", null, !fee.rut && !fee.rot && !fee.green && index.h("span", null, fee.price, "kr"), fee.rut > 0 && index.h("span", null, fee.rut, "kr (RUT)"), fee.rot > 0 && index.h("span", null, fee.rot, "kr (ROT)"), fee.green > 0 && index.h("span", null, fee.green, "kr (Gr\u00F6n teknik)")))));
+  }
   render() {
-    const info = index.getAssetPath(`./assets/info.svg`);
-    return (index.h(index.Fragment, null, index.h("ul", { class: "hemfixarna_cart--items" }, index$1.state.cart.map(item => {
+    return (index.h(index.Fragment, null, index.h("ul", { class: "hemfixarna_cart--items" }, Object.entries(groupCartItemsByStartFee(index$1.state.cart)).map(([startFeeID, items]) => (index.h("li", { key: startFeeID, class: "hemfixarna_cart--group" }, index.h("ul", null, items.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"), 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() }, index$1.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() }, index$1.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() }, index$1.state.greenOptions.green_start_fee_heading, index.h("img", { height: 16, src: info, alt: "info monteringsavgift" }))), index.h("p", null, getStartFee().green, "kr")))), index$1.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: index$1.state.rot, onChange: () => (index$1.state.rot = !index$1.state.rot), type: "checkbox" }), index.h("span", { class: "slider" }))), index.h("p", null, "ROT-avdrag")), index.h("p", null, "(-", index$1.state.rot ? calculateRot() : 0, "kr)"))), index$1.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: () => (index$1.state.rut = !index$1.state.rut), checked: index$1.state.rut, type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "RUT-avdrag")), index.h("p", null, "(-", index$1.state.rut ? calculateRut() : 0, "kr)"))), index$1.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: () => (index$1.state.green = !index$1.state.green), checked: index$1.state.green, type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "Gr\u00F6n teknik avdrag")), index.h("p", null, "(-", index$1.state.green ? calculateGreenDiscount() : 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", key: item.id }, 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", { key: part.name }, 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" }, this.renderStartFees(), this.cart && index$1.state.cart.find((item) => item.rot) && (index.h("div", { class: "hemfixarna_cart--rutrot" }, index.h("div", null, index.h("label", { class: "switch" }, index.h("input", { checked: index$1.state.rot, onChange: () => (index$1.state.rot = !index$1.state.rot), type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "ROT-avdrag")), index.h("p", null, "(-", index$1.state.rot ? calculateRot() : 0, "kr)"))), this.cart && index$1.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: () => (index$1.state.rut = !index$1.state.rut), checked: index$1.state.rut, type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "RUT-avdrag")), index.h("p", null, "(-", index$1.state.rut ? calculateRut() : 0, "kr)"))), this.cart && index$1.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: () => (index$1.state.green = !index$1.state.green), checked: index$1.state.green, type: "checkbox" }), index.h("span", { class: "slider" })), index.h("p", null, "Gr\u00F6n teknik avdrag")), index.h("p", null, "(-", index$1.state.green ? calculateGreenDiscount() : 0, "kr)")))), index.h("div", { class: "hemfixarna_cart--price" }, index.h("h2", null, "Totalbelopp: "), index.h("h2", null, getTotalPrice(), "kr"))));
   }
 };
 
@@ -1914,6 +2011,7 @@ const HemfixarnaProduct = class {
           start_fee: !index$1.state.selectedProduct.hide_start_fee,
           terms_checkout: index$1.state.selectedProduct.terms_checkout,
           icon: index$1.state.selectedProduct.icon,
+          start_fee_obj: index$1.state.selectedProduct.start_fee_obj,
         },
       ];
     }
@@ -2013,7 +2111,7 @@ const HemfixarnaProduct = class {
     checkAndInjectCSS();
   }
   render() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const checked = index.getAssetPath(`./assets/checked.svg`);
     const plus = index.getAssetPath(`./assets/plus.svg`);
     const minus = index.getAssetPath(`./assets/minus.svg`);
@@ -2026,7 +2124,7 @@ const HemfixarnaProduct = class {
       index$1.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.title), index.h("p", { class: "hemfixarna_product--price" }, getPartPrice(p, index$1.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"))), !index$1.state.selectedProduct.hide_start_fee && (index$1.state.selectedProduct.rot || index$1.state.selectedProduct.rut) && index$1.state.rutOptions && index$1.state.rotOptions && (index.h("p", { class: "hemfixarna_terms" }, index.h("strong", null, index$1.state.selectedProduct.rot ? index$1.state.rotOptions.rot_start_fee_heading : index$1.state.rutOptions.rut_start_fee_heading), index.h("br", null), index.h("span", { innerHTML: index$1.state.selectedProduct.rot ? index$1.state.rotOptions.rot_start_fee_text : index$1.state.rutOptions.rut_start_fee_text }))), index$1.state.options && index.h("hemfixarna-info", null))))) : null;
+      })), 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"))), !index$1.state.selectedProduct.hide_start_fee && ((_d = index$1.state.selectedProduct.start_fee_obj) === null || _d === void 0 ? void 0 : _d.title) && (index.h("p", { class: "hemfixarna_terms" }, index.h("strong", null, index$1.state.selectedProduct.start_fee_obj.title), index.h("br", null), index.h("span", { innerHTML: index$1.state.selectedProduct.start_fee_obj.description }))), index$1.state.options && index.h("hemfixarna-info", null))))) : null;
   }
   get el() { return index.getElement(this); }
 };