@ppg_pl/pallete 2.0.26 → 2.0.27

package/dist/collection/components/my-slider/index.js

@@ -18,22 +18,30 @@ export class JcSwiper {
     this.color = undefined;
   }
   initSwiper() {
-    this.thumbs = new Swiper('.mySwiper', {
-      modules: [Navigation, Controller],
-      slideToClickedSlide: true,
-      loop: true,
-      freeMode: true,
-      spaceBetween: 5,
-      slidesPerView: 3,
-      direction: 'vertical',
-      touchRatio: 0.2,
-    });
-    this.swiper2 = new Swiper('.mySwiper2', {
+    const root = this.modalEl.shadowRoot;
+    if (!root)
+      return;
+    const thumbsEl = root.querySelector('.mySwiper');
+    const sliderEl = root.querySelector('.mySwiper2');
+    const nextEl = root.querySelector('.swiper-button-next');
+    const prevEl = root.querySelector('.swiper-button-prev');
+    if (thumbsEl) {
+      this.thumbs = new Swiper(thumbsEl, {
+        modules: [Navigation, Controller],
+        slideToClickedSlide: true,
+        loop: true,
+        freeMode: true,
+        spaceBetween: 5,
+        slidesPerView: 3,
+        direction: 'vertical',
+        touchRatio: 0.2,
+      });
+    }
+    if (!sliderEl)
+      return;
+    this.swiper2 = new Swiper(sliderEl, {
       modules: [Navigation, Controller],
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
+      navigation: nextEl && prevEl ? { nextEl, prevEl } : undefined,
       // loop: true,
       // loopedSlides: 3,
       slideToClickedSlide: true,
@@ -42,15 +50,18 @@ export class JcSwiper {
       slidesPerView: 1,
     });
     // this.swiper2.controller.control = this.thumbs;
-    this.swiper2.controller.control = this.swiper2;
+    if (this.swiper2) {
+      this.swiper2.controller.control = this.swiper2;
+    }
     // this.thumbs.controller.control = this.swiper2;
   }
   componentDidLoad() {
     this.initSwiper();
   }
   update() {
-    this.thumbs.update();
-    this.swiper2.update();
+    var _a, _b;
+    (_a = this.thumbs) === null || _a === void 0 ? void 0 : _a.update();
+    (_b = this.swiper2) === null || _b === void 0 ? void 0 : _b.update();
   }
   render() {
     return (h("div", { class: "slider-wrapper" }, h("div", { class: "swiper mySwiper2" }, h("div", { class: "swiper-wrapper" }, this.slides &&
@@ -58,6 +69,7 @@ export class JcSwiper {
       this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))), this.slides && this.slides.length >= 2 && (h("div", null, h("div", { onClick: this.colorInteraction, class: "swiper-button-next" }), h("div", { onClick: this.colorInteraction, class: "swiper-button-prev" }))))));
   }
   static get is() { return "my-slider"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["my-slider.scss"]

package/dist/collection/components/my-slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/my-slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAM7C,MAAM,OAAO,QAAQ;;IAmDnB,qBAAgB,GAAG,GAAG,EAAE;MACtB,YAAY,CAAC;QACX,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;;;;;;EAhDF,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,EAAE;MACpC,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,mBAAmB,EAAE,IAAI;MACzB,IAAI,EAAE,IAAI;MACV,QAAQ,EAAE,IAAI;MACd,YAAY,EAAE,CAAC;MACf,aAAa,EAAE,CAAC;MAChB,SAAS,EAAE,UAAU;MACrB,UAAU,EAAE,GAAG;KAChB,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,YAAY,EAAE;MACtC,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,UAAU,EAAE;QACV,MAAM,EAAE,qBAAqB;QAC7B,MAAM,EAAE,qBAAqB;OAC9B;MACD,cAAc;MACd,mBAAmB;MACnB,mBAAmB,EAAE,IAAI;MACzB,IAAI,EAAE,IAAI;MACV,QAAQ,EAAE,IAAI;MAEd,aAAa,EAAE,CAAC;KACjB,CAAC,CAAC;IAEH,iDAAiD;IACjD,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC/C,iDAAiD;EACnD,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAED,MAAM;IACJ,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;EACxB,CAAC;EAWD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;MACzB,WAAK,KAAK,EAAC,kBAAkB;QAC3B,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,MAAM;UACV,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;UACtB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,EAAE,CAAC,CAChC,WAAK,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAC,cAAc;YACtC,WAAK,GAAG,EAAE,GAAG,MAAM,WAAW,KAAK,CAAC,iBAAiB,iBAAiB,WAAW,EAAE,EAAE,GAAG,EAAC,YAAY,GAAG,CACpG,CACP,CAAC,CACA;QACL,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,CACzC;UACE,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,oBAAoB,GAAO;UACtE,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,oBAAoB,GAAO,CAClE,CACP,CACG,CAYF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Element, h } from '@stencil/core';\nimport Swiper, { Navigation, Controller } from 'swiper';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Image } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-slider',\n  styleUrl: 'my-slider.scss',\n})\nexport class JcSwiper {\n  @Element() modalEl: HTMLElement;\n  @Prop() slides: Image[];\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() color: string;\n\n  private thumbs: any;\n  private swiper2: any;\n\n  initSwiper() {\n    this.thumbs = new Swiper('.mySwiper', {\n      modules: [Navigation, Controller],\n      slideToClickedSlide: true,\n      loop: true,\n      freeMode: true,\n      spaceBetween: 5,\n      slidesPerView: 3,\n      direction: 'vertical',\n      touchRatio: 0.2,\n    });\n\n    this.swiper2 = new Swiper('.mySwiper2', {\n      modules: [Navigation, Controller],\n      navigation: {\n        nextEl: '.swiper-button-next',\n        prevEl: '.swiper-button-prev',\n      },\n      // loop: true,\n      // loopedSlides: 3,\n      slideToClickedSlide: true,\n      loop: true,\n      freeMode: true,\n\n      slidesPerView: 1,\n    });\n\n    // this.swiper2.controller.control = this.thumbs;\n    this.swiper2.controller.control = this.swiper2;\n    // this.thumbs.controller.control = this.swiper2;\n  }\n\n  componentDidLoad() {\n    this.initSwiper();\n  }\n\n  update() {\n    this.thumbs.update();\n    this.swiper2.update();\n  }\n\n  colorInteraction = () => {\n    setDataLayer({\n      event: 'ColorInteraction',\n      shop: this.shop,\n      product: this.product,\n      color: this.color,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"slider-wrapper\">\n        <div class=\"swiper mySwiper2\">\n          <div class=\"swiper-wrapper\">\n            {this.slides &&\n              this.slides.length > 0 &&\n              this.slides.map((slide: Image) => (\n                <div key={slide.id} class=\"swiper-slide\">\n                  <img src={`${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`} alt=\"room_image\" />\n                </div>\n              ))}\n          </div>\n          {this.slides && this.slides.length >= 2 && (\n            <div>\n              <div onClick={this.colorInteraction} class=\"swiper-button-next\"></div>\n              <div onClick={this.colorInteraction} class=\"swiper-button-prev\"></div>\n            </div>\n          )}\n        </div>\n        {/* <div class=\"swiper mySwiper\">\n          <div class=\"swiper-wrapper\">\n            {this.slides &&\n              this.slides.length > 0 &&\n              this.slides.map((slide: Image) => (\n                <div key={slide.id} class=\"swiper-slide\">\n                  <img src={`${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`} alt=\"room_image\" />\n                </div>\n              ))}\n          </div>\n        </div> */}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/my-slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAO7C,MAAM,OAAO,QAAQ;;IA8DnB,qBAAgB,GAAG,GAAG,EAAE;MACtB,YAAY,CAAC;QACX,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;;;;;;EA3DF,UAAU;IACR,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;IACrC,IAAI,CAAC,IAAI;MAAE,OAAO;IAElB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAuB,CAAC;IACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAuB,CAAC;IACxE,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAuB,CAAC;IAC/E,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAuB,CAAC;IAE/E,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE;QACjC,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;QACjC,mBAAmB,EAAE,IAAI;QACzB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,CAAC;QACf,aAAa,EAAE,CAAC;QAChB,SAAS,EAAE,UAAU;QACrB,UAAU,EAAE,GAAG;OAChB,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,QAAQ;MAAE,OAAO;IAEtB,IAAI,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE;MAClC,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,UAAU,EAAE,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS;MAC7D,cAAc;MACd,mBAAmB;MACnB,mBAAmB,EAAE,IAAI;MACzB,IAAI,EAAE,IAAI;MACV,QAAQ,EAAE,IAAI;MAEd,aAAa,EAAE,CAAC;KACjB,CAAC,CAAC;IAEH,iDAAiD;IACjD,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;KAChD;IACD,iDAAiD;EACnD,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAED,MAAM;;IACJ,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;IACtB,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;EACzB,CAAC;EAWD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;MACzB,WAAK,KAAK,EAAC,kBAAkB;QAC3B,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,MAAM;UACV,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;UACtB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,EAAE,CAAC,CAChC,WAAK,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAC,cAAc;YACtC,WAAK,GAAG,EAAE,GAAG,MAAM,WAAW,KAAK,CAAC,iBAAiB,iBAAiB,WAAW,EAAE,EAAE,GAAG,EAAC,YAAY,GAAG,CACpG,CACP,CAAC,CACA;QACL,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,CACzC;UACE,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,oBAAoB,GAAO;UACtE,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAC,oBAAoB,GAAO,CAClE,CACP,CACG,CAYF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Element, h } from '@stencil/core';\nimport Swiper, { Navigation, Controller } from 'swiper';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Image } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-slider',\n  styleUrl: 'my-slider.scss',\n  shadow: true,\n})\nexport class JcSwiper {\n  @Element() modalEl: HTMLElement;\n  @Prop() slides: Image[];\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() color: string;\n\n  private thumbs: any;\n  private swiper2: any;\n\n  initSwiper() {\n    const root = this.modalEl.shadowRoot;\n    if (!root) return;\n\n    const thumbsEl = root.querySelector('.mySwiper') as HTMLElement | null;\n    const sliderEl = root.querySelector('.mySwiper2') as HTMLElement | null;\n    const nextEl = root.querySelector('.swiper-button-next') as HTMLElement | null;\n    const prevEl = root.querySelector('.swiper-button-prev') as HTMLElement | null;\n\n    if (thumbsEl) {\n      this.thumbs = new Swiper(thumbsEl, {\n        modules: [Navigation, Controller],\n        slideToClickedSlide: true,\n        loop: true,\n        freeMode: true,\n        spaceBetween: 5,\n        slidesPerView: 3,\n        direction: 'vertical',\n        touchRatio: 0.2,\n      });\n    }\n\n    if (!sliderEl) return;\n\n    this.swiper2 = new Swiper(sliderEl, {\n      modules: [Navigation, Controller],\n      navigation: nextEl && prevEl ? { nextEl, prevEl } : undefined,\n      // loop: true,\n      // loopedSlides: 3,\n      slideToClickedSlide: true,\n      loop: true,\n      freeMode: true,\n\n      slidesPerView: 1,\n    });\n\n    // this.swiper2.controller.control = this.thumbs;\n    if (this.swiper2) {\n      this.swiper2.controller.control = this.swiper2;\n    }\n    // this.thumbs.controller.control = this.swiper2;\n  }\n\n  componentDidLoad() {\n    this.initSwiper();\n  }\n\n  update() {\n    this.thumbs?.update();\n    this.swiper2?.update();\n  }\n\n  colorInteraction = () => {\n    setDataLayer({\n      event: 'ColorInteraction',\n      shop: this.shop,\n      product: this.product,\n      color: this.color,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"slider-wrapper\">\n        <div class=\"swiper mySwiper2\">\n          <div class=\"swiper-wrapper\">\n            {this.slides &&\n              this.slides.length > 0 &&\n              this.slides.map((slide: Image) => (\n                <div key={slide.id} class=\"swiper-slide\">\n                  <img src={`${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`} alt=\"room_image\" />\n                </div>\n              ))}\n          </div>\n          {this.slides && this.slides.length >= 2 && (\n            <div>\n              <div onClick={this.colorInteraction} class=\"swiper-button-next\"></div>\n              <div onClick={this.colorInteraction} class=\"swiper-button-prev\"></div>\n            </div>\n          )}\n        </div>\n        {/* <div class=\"swiper mySwiper\">\n          <div class=\"swiper-wrapper\">\n            {this.slides &&\n              this.slides.length > 0 &&\n              this.slides.map((slide: Image) => (\n                <div key={slide.id} class=\"swiper-slide\">\n                  <img src={`${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`} alt=\"room_image\" />\n                </div>\n              ))}\n          </div>\n        </div> */}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-slider/my-slider.css

@@ -18,10 +18,26 @@
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: swiper-icons;
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
 .pallete-wrapper * {
   font-family: "Galatea", sans-serif;
 }
 
+:host,
+:host * {
+  font-family: "Galatea", sans-serif;
+}
+
+:host {
+  --swiper-theme-color: #007aff;
+  --swiper-navigation-size: 44px;
+}
+
 .slider-wrapper {
   width: 100%;
   position: relative;
@@ -68,16 +84,27 @@
 }
 .slider-wrapper .mySwiper2 .swiper-button-prev::after,
 .slider-wrapper .mySwiper2 .swiper-button-next::after {
-  font-size: 11px;
-  color: #232323;
-  font-weight: bold;
+  content: "" !important;
+  font-family: initial !important;
+  font-size: 0 !important;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid #232323;
+  border-bottom: 2px solid #232323;
+  display: block;
 }
 .slider-wrapper .mySwiper2 .swiper-button-next {
   right: 45%;
 }
+.slider-wrapper .mySwiper2 .swiper-button-next::after {
+  transform: rotate(-45deg);
+}
 .slider-wrapper .mySwiper2 .swiper-button-prev {
   left: 45%;
 }
+.slider-wrapper .mySwiper2 .swiper-button-prev::after {
+  transform: rotate(135deg);
+}
 .slider-wrapper .mySwiper {
   width: 20%;
   height: 100%;

package/dist/components/index3.js

@@ -5223,12 +5223,13 @@ function Controller({
   });
 }
 
-const mySliderCss = "@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;font-style:normal;font-display:swap}.pallete-wrapper *{font-family:\"Galatea\", sans-serif}.slider-wrapper{width:100%;position:relative;height:100%;display:flex;max-width:1100px;flex-direction:row;align-items:center;justify-content:space-between}@media (max-width: 1024px){.slider-wrapper{height:220px}}.slider-wrapper .swiper{margin:0}.slider-wrapper .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.slider-wrapper .mySwiper2{height:100%;width:100%;position:relative}@media (max-width: 1024px){.slider-wrapper .mySwiper2{width:100%}}.slider-wrapper .mySwiper2 .swiper-button-prev,.slider-wrapper .mySwiper2 .swiper-button-next{z-index:20;position:absolute;bottom:15px;width:23px;top:inherit;height:23px;background-color:#fff}.slider-wrapper .mySwiper2 .swiper-button-prev::after,.slider-wrapper .mySwiper2 .swiper-button-next::after{font-size:11px;color:#232323;font-weight:bold}.slider-wrapper .mySwiper2 .swiper-button-next{right:45%}.slider-wrapper .mySwiper2 .swiper-button-prev{left:45%}.slider-wrapper .mySwiper{width:20%;height:100%;box-sizing:border-box}@media (max-width: 1024px){.slider-wrapper .mySwiper{display:none}}.slider-wrapper .mySwiper .swiper-slide{height:100%;cursor:pointer}.slider-wrapper .mySwiper .swiper-slide-thumb-active{opacity:1}";
+const mySliderCss = "@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}@font-face{font-family:\"Galatea\";src:url(\"/assets/fonts/Galatea-Regular.woff2\") format(\"woff2\"), url(\"/assets/fonts/Galatea-Regular.woff\") format(\"woff\"), url(\"/assets/fonts/Galatea-Regular.ttf\") format(\"truetype\");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:swiper-icons;src:url(\"data:application/font-woff;charset=utf-8;base64, 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\");font-weight:400;font-style:normal}.pallete-wrapper *{font-family:\"Galatea\", sans-serif}:host,:host *{font-family:\"Galatea\", sans-serif}:host{--swiper-theme-color:#007aff;--swiper-navigation-size:44px}.slider-wrapper{width:100%;position:relative;height:100%;display:flex;max-width:1100px;flex-direction:row;align-items:center;justify-content:space-between}@media (max-width: 1024px){.slider-wrapper{height:220px}}.slider-wrapper .swiper{margin:0}.slider-wrapper .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.slider-wrapper .mySwiper2{height:100%;width:100%;position:relative}@media (max-width: 1024px){.slider-wrapper .mySwiper2{width:100%}}.slider-wrapper .mySwiper2 .swiper-button-prev,.slider-wrapper .mySwiper2 .swiper-button-next{z-index:20;position:absolute;bottom:15px;width:23px;top:inherit;height:23px;background-color:#fff}.slider-wrapper .mySwiper2 .swiper-button-prev::after,.slider-wrapper .mySwiper2 .swiper-button-next::after{content:\"\" !important;font-family:initial !important;font-size:0 !important;width:8px;height:8px;border-right:2px solid #232323;border-bottom:2px solid #232323;display:block}.slider-wrapper .mySwiper2 .swiper-button-next{right:45%}.slider-wrapper .mySwiper2 .swiper-button-next::after{transform:rotate(-45deg)}.slider-wrapper .mySwiper2 .swiper-button-prev{left:45%}.slider-wrapper .mySwiper2 .swiper-button-prev::after{transform:rotate(135deg)}.slider-wrapper .mySwiper{width:20%;height:100%;box-sizing:border-box}@media (max-width: 1024px){.slider-wrapper .mySwiper{display:none}}.slider-wrapper .mySwiper .swiper-slide{height:100%;cursor:pointer}.slider-wrapper .mySwiper .swiper-slide-thumb-active{opacity:1}";
 
 const JcSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.colorInteraction = () => {
       setDataLayer({
         event: 'ColorInteraction',
@@ -5243,22 +5244,30 @@ const JcSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.color = undefined;
   }
   initSwiper() {
-    this.thumbs = new Swiper('.mySwiper', {
-      modules: [Navigation, Controller],
-      slideToClickedSlide: true,
-      loop: true,
-      freeMode: true,
-      spaceBetween: 5,
-      slidesPerView: 3,
-      direction: 'vertical',
-      touchRatio: 0.2,
-    });
-    this.swiper2 = new Swiper('.mySwiper2', {
+    const root = this.modalEl.shadowRoot;
+    if (!root)
+      return;
+    const thumbsEl = root.querySelector('.mySwiper');
+    const sliderEl = root.querySelector('.mySwiper2');
+    const nextEl = root.querySelector('.swiper-button-next');
+    const prevEl = root.querySelector('.swiper-button-prev');
+    if (thumbsEl) {
+      this.thumbs = new Swiper(thumbsEl, {
+        modules: [Navigation, Controller],
+        slideToClickedSlide: true,
+        loop: true,
+        freeMode: true,
+        spaceBetween: 5,
+        slidesPerView: 3,
+        direction: 'vertical',
+        touchRatio: 0.2,
+      });
+    }
+    if (!sliderEl)
+      return;
+    this.swiper2 = new Swiper(sliderEl, {
       modules: [Navigation, Controller],
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
+      navigation: nextEl && prevEl ? { nextEl, prevEl } : undefined,
       // loop: true,
       // loopedSlides: 3,
       slideToClickedSlide: true,
@@ -5267,15 +5276,18 @@ const JcSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       slidesPerView: 1,
     });
     // this.swiper2.controller.control = this.thumbs;
-    this.swiper2.controller.control = this.swiper2;
+    if (this.swiper2) {
+      this.swiper2.controller.control = this.swiper2;
+    }
     // this.thumbs.controller.control = this.swiper2;
   }
   componentDidLoad() {
     this.initSwiper();
   }
   update() {
-    this.thumbs.update();
-    this.swiper2.update();
+    var _a, _b;
+    (_a = this.thumbs) === null || _a === void 0 ? void 0 : _a.update();
+    (_b = this.swiper2) === null || _b === void 0 ? void 0 : _b.update();
   }
   render() {
     return (h("div", { class: "slider-wrapper" }, h("div", { class: "swiper mySwiper2" }, h("div", { class: "swiper-wrapper" }, this.slides &&
@@ -5284,7 +5296,7 @@ const JcSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   }
   get modalEl() { return this; }
   static get style() { return mySliderCss; }
-}, [0, "my-slider", {
+}, [1, "my-slider", {
     "slides": [16],
     "shop": [1],
     "product": [1],