@covet-pics/covet-pics-widget 0.150.2 → 0.150.3

package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js

@@ -3559,7 +3559,7 @@ const CovetPicsHotspots = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '1409bc69c4011a8bdced1a508a76b4a5c2ed169c', class: { "show-hotspot-numbers": this.showNumbers }, style: this.getItemCSSVariables() }, this.links.map(link => index.h("a", { class: "hotspot", tabindex: "0", href: link.link, target: "_top", style: this.getPositionForLink(link), "data-link-id": link.id, "data-tippy-content": `<span class="product-title">${link.title}</span><span class="price">${link.prices ? link.prices.price_label : ""} &gt;</span>`, "aria-label": `Hotspot link to '${link.title}'` }, index.h("span", { class: "pulse" })))));
+        return (index.h(index.Host, { key: '18ee0b7da4e738087623364c379503938cc8e7d0', class: { "show-hotspot-numbers": this.showNumbers }, style: this.getItemCSSVariables() }, this.links.map(link => index.h("a", { class: "hotspot", tabindex: "0", href: link.link, target: "_top", style: this.getPositionForLink(link), "data-link-id": link.id, "data-tippy-content": `<span class="product-title">${link.title}</span><span class="price">${link.prices ? link.prices.price_label : ""} &gt;</span>`, "aria-label": `Hotspot link to '${link.title}'` }, index.h("span", { class: "pulse" })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -3661,7 +3661,7 @@ const CovetPicsPopupLinks = class {
         // TODO: check buttonStyle this old todo (style-3 -> not implanted yet)
         const buttonStyle = this.settings.popup_buy_button_style.replace("buy_btn_", "").replace("_", "-");
         const linkStyle = this.settings.popup_products_view_type.replace("_view", "");
-        return (index.h("ul", { key: '1f5d7e94e5d505bc36b2e419c92c2d6171332f00', class: `links ${linkStyle} ${this.greyBorderClass} links-${this.links.length.toString()}`, style: this.getItemCSSVariables(), role: "list" }, this.links.map((link, idx) => index.h("li", { class: "product", "data-link-id": link.id, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, role: "listitem" }, index.h("a", { class: "product-link", target: link.new_tab ? "_blank" : "_top", "data-ga-campaign": link.title, href: link.link, "aria-label": this.getProductLinkLabel(link), role: "link" }, index.h("div", { class: "img-wrap" }, this.renderLinkImage(link, idx, this.links.length)), index.h("div", { class: "product-details" }, index.h("span", { class: "product-title" }, link.title), this.settings.show_price_in_popup && link.prices &&
+        return (index.h("ul", { key: '62fc273a38ca39732809ae29dca7602aeb49dbf0', class: `links ${linkStyle} ${this.greyBorderClass} links-${this.links.length.toString()}`, style: this.getItemCSSVariables(), role: "list" }, this.links.map((link, idx) => index.h("li", { class: "product", "data-link-id": link.id, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, role: "listitem" }, index.h("a", { class: "product-link", target: link.new_tab ? "_blank" : "_top", "data-ga-campaign": link.title, href: link.link, "aria-label": this.getProductLinkLabel(link), role: "link" }, index.h("div", { class: "img-wrap" }, this.renderLinkImage(link, idx, this.links.length)), index.h("div", { class: "product-details" }, index.h("span", { class: "product-title" }, link.title), this.settings.show_price_in_popup && link.prices &&
             index.h("span", { class: "product-price", innerHTML: link.prices.price_label }), this.settings.show_price_in_popup && link.prices && link.prices.is_on_sale &&
             index.h("span", { class: "product-price product-sale", innerHTML: link.prices.sale_price }))), index.h("a", { class: `btn-buy ${buttonStyle}`, href: link.link, target: link.new_tab ? "_blank" : "_top", "data-ga-campaign": link.title, onClick: this.buyButtonClickHandler, "data-product-id": link.shopify_product_id, "aria-label": "Link to direct buy", role: "link" }, buttonStyle === "style-5" &&
             index.h("svg", { class: "icon-buy", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { d: "M0 0h14v14H0z" }), index.h("path", { class: "dynamic-fill", d: "M6.855 1.575c1.323 0 2.405 1.03 2.405 2.315v.352h1.57l.95 8.24H1.896l.95-8.24H4.45V3.89c0-1.23.994-2.229 2.241-2.31zM9.94 5.242h-.68l.001.262a.5.5 0 01-.41.492l-.09.008a.5.5 0 01-.5-.5v-.262H5.45v.262a.5.5 0 01-.41.492l-.09.008a.5.5 0 01-.5-.5v-.262h-.714l-.72 6.24h7.643l-.72-6.24zM6.855 2.575c-.781 0-1.405.594-1.405 1.315v.352h2.81V3.89c0-.679-.552-1.245-1.269-1.31z", fill: "#FFF", "fill-rule": "nonzero" }))), index.h("span", { class: "btn-title" }, this.getLinkLabel(link)))))));
@@ -3718,7 +3718,7 @@ const CovetPicsPopupReviewElement = class {
         const starOnlyClass = this.caption === null ? "star-only" : "";
         const starOnly = this.caption === null && this.itemType === "text";
         const verifiedClass = this.verified ? "verified" : "";
-        return (index.h(index.Host, { key: '77dc73df66c7e00b75eccfc86f2b26f75bb35fa1', class: `popup-review ${starOnlyClass}`, style: this.reviewCSS }, index.h(popupFuncComponents.StarRatingPopupRewiw, { key: '925ab385e2f81d073bf0519030f24e4913afd147', rating: this.rating, starOnlyClass: starOnlyClass }), index.h("p", { key: 'b45fc17c939a91b98b41aeb5694d14b3d3a1ab71', class: `review-caption ${starOnlyClass} ${verifiedClass}`, innerHTML: this.caption }, this.verified && starOnly && this.renderVerified()), index.h("div", { key: 'eec8c0b7aa7e154d1e77fba1230e00b8e84be0ad', class: `review-bottom  ${starOnlyClass}` }, index.h("p", { key: '30ce3c7bba20b89cae9792a625e5519698fcc849', class: "username" }, this.username), this.createdTime && index.h("span", { class: "slash" }, "/"), index.h("span", { key: 'cf5b25fbfb72a5cec0719bd59706816c6ec8f3cc', class: "created-time" }, index$1.format(this.createdTime)), this.verified && !starOnly && this.renderVerified())));
+        return (index.h(index.Host, { key: '2ee04975c073c0ff0584abef9ca44409f9713017', class: `popup-review ${starOnlyClass}`, style: this.reviewCSS }, index.h(popupFuncComponents.StarRatingPopupRewiw, { key: '2355b9b2a1d8b3feb0a72a07b3daed891ce99b11', rating: this.rating, starOnlyClass: starOnlyClass }), index.h("p", { key: '821484bd300c5666cf5222bdb38601fd8dbe8ceb', class: `review-caption ${starOnlyClass} ${verifiedClass}`, innerHTML: this.caption }, this.verified && starOnly && this.renderVerified()), index.h("div", { key: '8de32de32071b4c761354da672058ada4735d860', class: `review-bottom  ${starOnlyClass}` }, index.h("p", { key: '47f87a891f2223e7a732d536fb354feb15b4ca57', class: "username" }, this.username), this.createdTime && index.h("span", { class: "slash" }, "/"), index.h("span", { key: 'a7d695d0f2cbd48572ee000ea262e93fc2f2893f', class: "created-time" }, index$1.format(this.createdTime)), this.verified && !starOnly && this.renderVerified())));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -3764,8 +3764,8 @@ const CovetPicsPopupSharedLinks = class {
         return currentUrl.replace(/(\/)?(\?.*)?$/, newQuery);
     }
     render() {
-        return (index.h("div", { key: '1e8ef70380a0fc4ca0d1d50b3fe80f5af8025816', class: "share links-built" }, index.h("hr", { key: 'd277457eae0b13ba2016bf7b6e440e6a3f9cae82' }), this.showShareLink &&
-            index.h("div", { class: "direct-link-wrapper" }, index.h("input", { class: "direct-link-input", type: "text", value: this.postLink, "aria-label": "Share link" }), index.h("button", { onClick: this.copyLinkClickHandler, class: "btn btn-light", title: !this.copyLinkCopied ? "Copy share link" : "Link has been copied", disabled: this.copyLinkCopied, type: "button" }, this.copyLinkCopied ? index.h(popupFuncComponents.Icon, { iconName: "checked" }) : index.h(popupFuncComponents.Icon, { iconName: "copy" }))), index.h("ul", { key: 'ccf7413c6405fbf0068f2607dce88de981064a45' }, index.h("li", { key: '8b1c6cccfa4455347a63cc0adb0b6fd47c3ebed3', class: "fb" }, index.h("a", { key: 'ca891bdeacbd5b32e94f36502c8dbde18000cb6a', href: `http://www.facebook.com/sharer/sharer.php?picture=${encodeURIComponent(this.imageForSocialShare)}&u=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Facebook" }, index.h(popupFuncComponents.Icon, { key: 'a33b3cef22c0c4426624c95a701eedd0dbac40f0', iconName: "facebook" }))), index.h("li", { key: '46031ace07aac93ac14ba5b034bf800d79e25b35', class: "tw" }, index.h("a", { key: '8319c95ef2816c5b1671dde18a822aa2236faf3b', href: `http://www.twitter.com/share?text=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Twitter" }, index.h(popupFuncComponents.Icon, { key: '4432906b14f03b799f6349761cdd0af12979c218', iconName: "twitter" }))), index.h("li", { key: '701ca2bf733118f7fa02cd1d31a67ddbcc8b344a', class: "pin" }, index.h("a", { key: '4c926456bc961693e4de401b7da08dc42e37e039', href: `http://www.pinterest.com/pin/create/button/?media=${encodeURIComponent(this.imageForSocialShare)}&description=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Pinterest" }, index.h(popupFuncComponents.Icon, { key: 'dbfac12de58e6c1286c06d6f0f96d7881495a049', iconName: "pinterest" }))), index.h("li", { key: '50998428e157e0fabf2920c745655d13739efda0', class: "eml" }, index.h("a", { key: 'd36558c1a80cafa22b28816256232ab4da323101', href: `mailto:?subject=Check%20this%20out&body=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share via E-mail" }, index.h(popupFuncComponents.Icon, { key: '78e1aa51134338bdba0d529dc1ced6302cfb6bb2', iconName: "email" }))), index.h("li", { key: 'cab753e8ec06207c810d169b2642b9cc53515384', class: "lnk" }, index.h("button", { key: '21d882270d6c65e7bd3018ff49f1f89c610218dd', title: "Share Link", onClick: this.showShareLinkHandler, type: "button" }, index.h(popupFuncComponents.Icon, { key: 'd0d2c5adc14b015738f917a9c2e39f59239a8508', iconName: "shareLink" }))))));
+        return (index.h("div", { key: '5f9a01f81a82f21a2f2e3abab5e979a3681e44e9', class: "share links-built" }, index.h("hr", { key: 'cba8c66d5c4ec3e8a016f8592de5c45954e374e8' }), this.showShareLink &&
+            index.h("div", { class: "direct-link-wrapper" }, index.h("input", { class: "direct-link-input", type: "text", value: this.postLink, "aria-label": "Share link" }), index.h("button", { onClick: this.copyLinkClickHandler, class: "btn btn-light", title: !this.copyLinkCopied ? "Copy share link" : "Link has been copied", disabled: this.copyLinkCopied, type: "button" }, this.copyLinkCopied ? index.h(popupFuncComponents.Icon, { iconName: "checked" }) : index.h(popupFuncComponents.Icon, { iconName: "copy" }))), index.h("ul", { key: '5966470cae359cda6683d1222f84e5a5a2d1ef03' }, index.h("li", { key: '35df64f0df5ab22d8a87fa0b69eb1d17ae8fcbe5', class: "fb" }, index.h("a", { key: '194e60c8caf7ec5cc3ecdc980f8553f57c6dba60', href: `http://www.facebook.com/sharer/sharer.php?picture=${encodeURIComponent(this.imageForSocialShare)}&u=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Facebook" }, index.h(popupFuncComponents.Icon, { key: 'c770c33e78328e8de2afb01f2af79e9d17c252a5', iconName: "facebook" }))), index.h("li", { key: 'a84009c780d5ba96f5e4a50223326f86ffd3a988', class: "tw" }, index.h("a", { key: '6e6b91d0bf3acd0abe43f0e53a96a490f7170df2', href: `http://www.twitter.com/share?text=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Twitter" }, index.h(popupFuncComponents.Icon, { key: 'c7eaaa284123a35faeec04f74e1108d7e4950f9b', iconName: "twitter" }))), index.h("li", { key: '7a68317f47f37bfb17f6c4fddc9ef00082d52273', class: "pin" }, index.h("a", { key: '33c6271558e45d4525d8ee79a53d668c53b7eb42', href: `http://www.pinterest.com/pin/create/button/?media=${encodeURIComponent(this.imageForSocialShare)}&description=${this.item.caption}&url=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share on Pinterest" }, index.h(popupFuncComponents.Icon, { key: '3a9601803df216dadee675d9ceaaa5e4c3fc6d93', iconName: "pinterest" }))), index.h("li", { key: '86887632badfe15d6805b017dda4801525fca1fb', class: "eml" }, index.h("a", { key: '903da6fb3ff2a8057c14e42ac2063a5ed4393597', href: `mailto:?subject=Check%20this%20out&body=${encodeURIComponent(this.postLink)}`, target: "_blank", title: "Share via E-mail" }, index.h(popupFuncComponents.Icon, { key: '65d2c89fc9a75f075c249ca7e21fa45a0a55a99a', iconName: "email" }))), index.h("li", { key: '3349d702e55cffb48e048ac10c6d4c8f5a1e7541', class: "lnk" }, index.h("button", { key: '30013c425c12459fa6fe0e5366b7a1615a4098a4', title: "Share Link", onClick: this.showShareLinkHandler, type: "button" }, index.h(popupFuncComponents.Icon, { key: '05e16c383d4e9dd279deb4ef0b67b5cc787df60d', iconName: "shareLink" }))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -3893,9 +3893,9 @@ const CovetPicsPopupSlider = class {
             : `post image, created ${utils.getDateFromTimestamp(createdTime)}${carouselAlt}`;
     }
     render() {
-        return (index.h("div", { key: '5dc70dc0dc05358248bd3812f2c4498f4c20bf56', id: "covet-popup-content-image-carousel", class: "carousel-media swiper" }, index.h("section", { key: '3febda40d6774cb2d93cef0ac6ba1ffbfa34f940', class: "swiper-wrapper" }, this.item.carousel_media.map((media_item, idx) => index.h("div", { class: "carousel-cell swiper-slide" }, media_item.type === "image" &&
+        return (index.h("div", { key: '35a225cd2766db9df8210fe5b358cab193e064ed', id: "covet-popup-content-image-carousel", class: "carousel-media swiper" }, index.h("section", { key: '59475b88489948c52b6bb0338f2c77f86b26ecd8', class: "swiper-wrapper" }, this.item.carousel_media.map((media_item, idx) => index.h("div", { class: "carousel-cell swiper-slide" }, media_item.type === "image" &&
             index.h("img", { src: media_item.standard_resolution, alt: this.imgAltTag(media_item.alt_tag, this.item.caption, idx, this.item.carousel_media.length, this.item.created_time) }), media_item.type === "video" &&
-            index.h("div", { class: "post-video-element" }, index.h("video", { playsinline: true, loop: true, poster: (idx === 0) ? this.item.cover_images.high_resolution : null, key: media_item.standard_resolution }, index.h("source", { src: media_item.standard_resolution, type: "video/mp4" })), index.h("button", { type: "button", class: "post-video-play", "aria-label": "Play video", onClick: this.playPauseVideoClickHandler }), index.h("button", { type: "button", class: "post-video-pause", "aria-label": "Pause video", onClick: this.playPauseVideoClickHandler }))))), index.h("div", { key: '35907df425e9927d612425fb0b29a69498400823', class: "swiper-pagination swiper-pagination-white" }), index.h("button", { key: '69b797bdd3bda239cbaa2adc57fe63228cb45ab8', class: "swiper-button-next", type: "button" }, index.h(popupFuncComponents.IconArrowPrev, { key: '72c2f4348a89e6b391493641c1a1855d9973e28b' })), index.h("button", { key: 'acace804c53f9e4b7a05e6382fe2f3bc1f9e3eba', class: "swiper-button-prev", type: "button" }, index.h(popupFuncComponents.IconArrowNext, { key: 'f69f5696cf89163d3b19eb74215a71378af37df1' }))));
+            index.h("div", { class: "post-video-element" }, index.h("video", { playsinline: true, loop: true, poster: (idx === 0) ? this.item.cover_images.high_resolution : null, key: media_item.standard_resolution }, index.h("source", { src: media_item.standard_resolution, type: "video/mp4" })), index.h("button", { type: "button", class: "post-video-play", "aria-label": "Play video", onClick: this.playPauseVideoClickHandler }), index.h("button", { type: "button", class: "post-video-pause", "aria-label": "Pause video", onClick: this.playPauseVideoClickHandler }))))), index.h("div", { key: '50dab41fb9d4516b571cce26d48a78b0b69b39b7', class: "swiper-pagination swiper-pagination-white" }), index.h("button", { key: '94680e0ce9b4ebdbd60c1f26150095bc51e1e5e9', class: "swiper-button-next", type: "button" }, index.h(popupFuncComponents.IconArrowPrev, { key: '02b5c75ccb882f30588d9f680f36468d10fcf5a1' })), index.h("button", { key: '61f634727f53f8aedf85e56f71ed8552390a4d36', class: "swiper-button-prev", type: "button" }, index.h(popupFuncComponents.IconArrowNext, { key: '5b6ce0e9b6dc3debd2eb621d8e603914b081ea2c' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js

@@ -3630,6 +3630,267 @@ const CovetPicsGalleryGrid = class {
 };
 CovetPicsGalleryGrid.style = CovetPicsGalleryGridStyle0;
 
+if (typeof window !== "undefined" && window.SwiperElementRegisterParams) {
+    window.SwiperElementRegisterParams(["materialEffect"]);
+}
+function elementTransitionEnd(el, callback) {
+    function fireCallBack(e) {
+        if (e.target !== el)
+            return;
+        callback.call(el, e);
+        // prevent bug disable gallery item hover animation
+        if (el.classList.contains("hover-active")) {
+            const materialImage = el.querySelector(".material-image");
+            if (materialImage !== null) {
+                materialImage.style.removeProperty("transition-duration");
+            }
+        }
+        el.removeEventListener("transitionend", fireCallBack);
+    }
+    if (callback) {
+        el.addEventListener("transitionend", fireCallBack);
+    }
+}
+function effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides }) {
+    const { activeIndex } = swiper;
+    const getSlide = (el) => {
+        if (!el.parentElement) {
+            // assume shadow root
+            const slide = swiper.slides.filter((slideEl) => slideEl.shadowRoot && slideEl.shadowRoot === el.parentNode)[0];
+            return slide;
+        }
+        return el.parentElement;
+    };
+    if (swiper.params.virtualTranslate && duration !== 0) {
+        let eventTriggered = false;
+        let transitionEndTarget;
+        if (allSlides) {
+            transitionEndTarget = transformElements;
+        }
+        else {
+            transitionEndTarget = transformElements.filter((transformEl) => {
+                const el = transformEl.classList.contains("swiper-slide-transform")
+                    ? getSlide(transformEl)
+                    : transformEl;
+                return swiper.getSlideIndex(el) === activeIndex;
+            });
+        }
+        transitionEndTarget.forEach((el) => {
+            elementTransitionEnd(el, () => {
+                if (eventTriggered)
+                    return;
+                if (!swiper || swiper.destroyed)
+                    return;
+                eventTriggered = true;
+                swiper.animating = false;
+                const evt = new window.CustomEvent("transitionend", {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                swiper.wrapperEl.dispatchEvent(evt);
+            });
+        });
+    }
+}
+function EffectMaterial({ swiper, on }) {
+    const slideSplitRatio = 0.65;
+    const elementScale = 1.25;
+    const setTransition = (duration) => {
+        const { slides } = swiper;
+        const transformElements = [];
+        for (let i = 0; i < slides.length; i += 1) {
+            const slideEl = slides[i];
+            const materialEl = slideEl.querySelector(".material-wrapper");
+            const scaleEls = slideEl.querySelectorAll(".material-image");
+            [materialEl, ...scaleEls].forEach((opacityEl) => {
+                opacityEl.style.transitionDuration = `${duration}ms`;
+            });
+            transformElements.push(materialEl);
+        }
+        effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides: true });
+    };
+    const setTranslate = () => {
+        const { slides, slidesSizesGrid, params, size: swiperSize } = swiper;
+        const { slidesPerView, spaceBetween, cssMode, centeredSlides } = params;
+        const largeSlideRatio = centeredSlides
+            ? 0.5
+            : Math.min(Math.max(slideSplitRatio, 0), 1);
+        const smallSlideRatio = centeredSlides
+            ? 0.5
+            : 1 - Math.min(Math.max(slideSplitRatio, 0), 1);
+        for (let i = 0; i < slides.length; i += 1) {
+            const slideEl = slides[i];
+            const materialEl = slideEl.querySelector(".material-wrapper");
+            const scaleEl = slideEl.querySelector(".material-image");
+            const progress = -slideEl.progress;
+            const offset = slideEl.swiperSlideOffset;
+            const swiperTranslate = swiper.translate;
+            let scale;
+            let translate = 0;
+            const currentSlideSize = slidesSizesGrid[i];
+            const scaleDiff = smallSlideRatio === 0 && !centeredSlides
+                ? 0
+                : spaceBetween / 2 / currentSlideSize;
+            const cssModeTranslateOffset = cssMode ? swiperTranslate : 0;
+            const isCenteredOdd = centeredSlides && slidesPerView % 2 === 1;
+            const isCenteredEven = centeredSlides && slidesPerView % 2 === 0;
+            // if (i === 0) {
+            //   console.log("progress: ", progress);
+            // }
+            // for slides go outside to left <- (negative progress)
+            if (progress <= 0) {
+                // console.log("if progress <= 0 i: ", i);
+                // SLIDES BEFORE ACTIVE SLIDE / PREVIOUS
+                if (centeredSlides && slidesPerView > 1) {
+                    // CENTERED/ACTIVE SLIDES
+                    if (progress <= 0 && progress >= -(slidesPerView - 2)) {
+                        translate = swiperTranslate;
+                        scale = 1;
+                    }
+                    // current to zero
+                    if (isCenteredOdd && progress < -(slidesPerView - Math.ceil(slidesPerView / 2))) {
+                        const currentProgress = Math.ceil(slidesPerView / 2) - Math.abs(progress);
+                        scale = currentProgress;
+                        translate = swiperTranslate + currentSlideSize * (1 - currentProgress) * (1 + scaleDiff * 2);
+                    }
+                    // current to large
+                    if (isCenteredEven && progress < -(slidesPerView / 2 - 1) && progress >= -(slidesPerView / 2)) {
+                        const currentProgress = slidesPerView / 2 - Math.abs(progress);
+                        scale = largeSlideRatio - scaleDiff + (smallSlideRatio + scaleDiff * 2) * (slidesPerView / 2 - Math.abs(progress));
+                        translate = swiperTranslate + currentSlideSize * (smallSlideRatio + scaleDiff) * (1 - currentProgress);
+                    }
+                    // large to zero
+                    if (isCenteredEven && progress < -slidesPerView / 2) {
+                        let currentProgress = slidesPerView / 2 + 1 - Math.abs(progress);
+                        // let translateAdd = 0;
+                        scale = 0;
+                        if (currentProgress >= 0) {
+                            currentProgress = -scaleDiff * 2 + currentProgress * (1 + scaleDiff * 2);
+                            currentProgress = Math.max(Math.min(currentProgress, 1), 0);
+                            scale = (smallSlideRatio - scaleDiff) * currentProgress;
+                        }
+                        translate = swiperTranslate + currentSlideSize * (smallSlideRatio + scaleDiff) * (2 - currentProgress) + currentSlideSize * (smallSlideRatio - scaleDiff) * (1 - currentProgress);
+                    }
+                }
+                else {
+                    // NOT CENTERED SLIDES
+                    scale = 1 + progress;
+                    translate = -offset;
+                }
+            }
+            // for slides go outside to left <- (negative progress) END
+            // for mobile view, TODO return default settings (slidesPerView === 1)
+            if (slidesPerView === 1) {
+                if (progress > 0) {
+                    scale = 1 - progress;
+                    translate = -offset + swiperSize * Math.min(progress, 1);
+                }
+            }
+            // for desktop view
+            if (slidesPerView !== 1) {
+                const visibleActiveSlides = progress > 0 && progress <= slidesPerView - 2;
+                const firstAfterActiveSlides = isCenteredEven
+                    ? progress > slidesPerView / 2 - 1 && progress <= slidesPerView / 2
+                    : progress > slidesPerView - 2 && progress <= slidesPerView - 1;
+                const secondAfterActiveSlides = progress > slidesPerView - 1 && progress <= slidesPerView && !centeredSlides;
+                const thirdAfterActiveSlides = progress > (centeredSlides ? slidesPerView / 2 : slidesPerView) && !isCenteredOdd;
+                // visible active slides (not for slide going outside, inside)
+                if (visibleActiveSlides) {
+                    translate = swiperTranslate;
+                    scale = 1;
+                }
+                // 0.65 -> 1
+                if (firstAfterActiveSlides) {
+                    const minus = isCenteredEven ? Math.floor(slidesPerView / 2) : 1;
+                    scale = largeSlideRatio - scaleDiff + (smallSlideRatio + scaleDiff * 2) * (slidesPerView - minus - Math.abs(progress));
+                    translate = swiperTranslate;
+                }
+                // 0.35 -> 0.65
+                if (secondAfterActiveSlides) {
+                    const currentProgress = slidesPerView - Math.abs(progress);
+                    const largeWithDiff = largeSlideRatio - scaleDiff;
+                    const smallWithDiff = smallSlideRatio - scaleDiff;
+                    scale = smallWithDiff + (largeWithDiff - smallWithDiff) * currentProgress;
+                    translate = swiperTranslate - currentSlideSize * (smallSlideRatio + scaleDiff) * (1 - currentProgress);
+                }
+                // 0 -> 0.35
+                if (thirdAfterActiveSlides) {
+                    let currentProgress = (centeredSlides ? slidesPerView / 2 + 1 : slidesPerView + 1) - Math.abs(progress);
+                    let translateAdd = 0;
+                    scale = 0;
+                    if (currentProgress >= 0) {
+                        currentProgress = -scaleDiff * 2 + currentProgress * (1 + scaleDiff * 2);
+                        currentProgress = Math.max(Math.min(currentProgress, 1), 0);
+                        scale = (smallSlideRatio - scaleDiff) * currentProgress;
+                        translateAdd = -currentProgress * (smallSlideRatio + scaleDiff) * currentSlideSize + currentProgress * spaceBetween;
+                    }
+                    translate = -offset + swiperSize * Math.min(progress, 1) + translateAdd;
+                }
+            }
+            if (scale < 0) {
+                scale = 0;
+            }
+            if (scale > 1) {
+                scale = 1;
+            }
+            // if (scale === 0) {
+            //   scale = 0.0001;
+            // }
+            // prevent round problem
+            if ((scale < 1 && scale > 0.9) || (scale > 1 && scale < 1.1)) {
+                scale = 1;
+            }
+            slideEl.style.setProperty("--covet-material-scale", scale);
+            if (scaleEl !== null) {
+                // TODO check is it possible to refactor this
+                if (scaleEl.classList.contains("material-image-translate")) {
+                    scaleEl.style.transform = `translate(-50%, -50%) scale(${1 + (elementScale - 1) * (1 - scale)})`;
+                }
+                else {
+                    scaleEl.style.transform = `scale(${1 + (elementScale - 1) * (1 - scale)})`;
+                }
+            }
+            if (scale === 1) {
+                materialEl.classList.add("hover-active");
+                if (scaleEl !== null) {
+                    scaleEl.style.removeProperty("transform");
+                    // scaleEl.style.removeProperty("transition-duration"); // TODO temp disable, for enter scale in animation
+                }
+            }
+            else {
+                materialEl.classList.remove("hover-active");
+            }
+            materialEl.style.width = `${100 * scale}%`;
+            materialEl.style.transform = `translate3d(${translate - cssModeTranslateOffset}px, 0, 0)`;
+        }
+    };
+    on("setTranslate", () => {
+        if (swiper.params.effect !== "material")
+            return;
+        setTranslate();
+    });
+    on("setTransition", (_s, duration) => {
+        setTransition(duration);
+    });
+    on("slidesUpdated", () => {
+        // add additional slide
+        if (swiper.params.slidesPerView > 1) {
+            const lastItem = swiper.snapGrid[swiper.snapGrid.length - 1];
+            swiper.snapGrid.push(lastItem + swiper.slidesSizesGrid[0] + swiper.params.spaceBetween);
+        }
+        // TODO test solution basic-1,2,3,4,5,6 height issue
+        if (swiper.el.classList.contains("extra-height")) {
+            const descriptions = Array.from(swiper.el.querySelectorAll(".swiper-wrapper .swiper-slide .material-wrapper .description"));
+            const descriptionMaxHeight = descriptions.reduce((maxElem, currentElem) => {
+                return maxElem.offsetHeight > currentElem.offsetHeight ? maxElem : currentElem;
+            });
+            swiper.el.style.setProperty("--material-slide-extra-height", `${descriptionMaxHeight.offsetHeight}px`);
+        }
+        // TODO test solution basic-1,2,3,4,5,6 height issue END
+        swiper.el.style.setProperty("--material-slide-size", `${swiper.slidesSizesGrid[0]}px`);
+    });
+}
+
 /* eslint no-underscore-dangle: "off" */
 /* eslint no-use-before-define: "off" */
 function Autoplay(_ref) {
@@ -3929,7 +4190,7 @@ function Autoplay(_ref) {
   });
 }
 
-const covetPicsGallerySliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.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-css-mode.swiper-horizontal>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{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, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-box-sizing:border-box;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{-webkit-animation:swiper-preloader-spin 1s infinite linear;animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@-webkit-keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:root{--swiper-navigation-size:44px;}.swiper-button-prev,.swiper-button-next{position:absolute;top:var(--swiper-navigation-top-offset, 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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none !important}.swiper-button-prev svg,.swiper-button-next svg{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-webkit-transform-origin:center;transform-origin:center}.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-lock{display:none}.swiper-button-prev:after,.swiper-button-next: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:after,.swiper-rtl .swiper-button-next:after{content:\"prev\"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:\"next\"}:root{}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0, 0, 0);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-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(0.33);transform:scale(0.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:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-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-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;-webkit-transform:translate3d(0px, -50%, 0);transform:translate3d(0px, -50%, 0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top, 200ms -webkit-transform;transition:200ms top, 200ms -webkit-transform;transition:200ms transform, 200ms top;transition:200ms transform, 200ms top, 200ms -webkit-transform}.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%;-webkit-transform:translateX(-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{-webkit-transition:200ms left, 200ms -webkit-transform;transition:200ms left, 200ms -webkit-transform;transition:200ms transform, 200ms left;transition:200ms transform, 200ms left, 200ms -webkit-transform}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right, 200ms -webkit-transform;transition:200ms right, 200ms -webkit-transform;transition:200ms transform, 200ms right;transition:200ms transform, 200ms right, 200ms -webkit-transform}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 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%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}:host{display:block}.swiper-wrapper{height:auto}.swiper-slide{height:auto}.swiper-button-next,.swiper-button-prev{top:calc(50% - (44px / 2));width:44px;height:44px;border-radius:50%;background-color:transparent;border:none;padding:0;outline:none !important}.swiper-button-next:focus svg,.swiper-button-next:active svg,.swiper-button-prev:focus svg,.swiper-button-prev:active svg{opacity:1}@media only screen and (max-width: 799.98px){.swiper-button-next,.swiper-button-prev{display:none}}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{display:none;visibility:hidden}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;border-radius:50%;opacity:0;background:#101010;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}.swiper-button-next svg path,.swiper-button-prev svg path{fill:#FFFFFF}.swiper-button-next::after,.swiper-button-prev::after{display:none}.swiper:hover .swiper-button-next svg,.swiper:hover .swiper-button-prev svg{opacity:0.5}.swiper:hover .swiper-button-next:hover svg,.swiper:hover .swiper-button-next:active svg,.swiper:hover .swiper-button-next:focus svg,.swiper:hover .swiper-button-prev:hover svg,.swiper:hover .swiper-button-prev:active svg,.swiper:hover .swiper-button-prev:focus svg{opacity:1}.swiper-button-prev svg{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.swiper-pagination-bullets{display:none}@media only screen and (max-width: 799.98px){.swiper-pagination-bullets{margin:10px auto 10px auto;display:block}.swiper-pagination-bullets.swiper-pagination-horizontal{left:0;-webkit-transform:none;transform:none;position:relative;bottom:0}.swiper-pagination-bullets .swiper-pagination-bullet{display:inline-block;background:black;opacity:0.2}.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;background:black}}@media only screen and (max-width: 799.98px){.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:0;-webkit-transform:none;transform:none}}";
+const covetPicsGallerySliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.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-css-mode.swiper-horizontal>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{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, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-box-sizing:border-box;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{-webkit-animation:swiper-preloader-spin 1s infinite linear;animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@-webkit-keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:root{--swiper-navigation-size:44px;}.swiper-button-prev,.swiper-button-next{position:absolute;top:var(--swiper-navigation-top-offset, 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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none !important}.swiper-button-prev svg,.swiper-button-next svg{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-webkit-transform-origin:center;transform-origin:center}.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-lock{display:none}.swiper-button-prev:after,.swiper-button-next: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:after,.swiper-rtl .swiper-button-next:after{content:\"prev\"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:\"next\"}:root{}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0, 0, 0);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-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(0.33);transform:scale(0.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:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-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-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;-webkit-transform:translate3d(0px, -50%, 0);transform:translate3d(0px, -50%, 0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top, 200ms -webkit-transform;transition:200ms top, 200ms -webkit-transform;transition:200ms transform, 200ms top;transition:200ms transform, 200ms top, 200ms -webkit-transform}.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%;-webkit-transform:translateX(-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{-webkit-transition:200ms left, 200ms -webkit-transform;transition:200ms left, 200ms -webkit-transform;transition:200ms transform, 200ms left;transition:200ms transform, 200ms left, 200ms -webkit-transform}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right, 200ms -webkit-transform;transition:200ms right, 200ms -webkit-transform;transition:200ms transform, 200ms right;transition:200ms transform, 200ms right, 200ms -webkit-transform}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 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%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}:host{display:block}.swiper-wrapper{height:auto}.swiper-slide{height:auto}.swiper-button-next,.swiper-button-prev{top:calc(50% - (44px / 2));width:44px;height:44px;border-radius:50%;background-color:transparent;border:none;padding:0;outline:none !important}.swiper-button-next:focus svg,.swiper-button-next:active svg,.swiper-button-prev:focus svg,.swiper-button-prev:active svg{opacity:1}@media only screen and (max-width: 799.98px){.swiper-button-next,.swiper-button-prev{display:none}}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{display:none;visibility:hidden}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;border-radius:50%;opacity:0;background:#101010;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}.swiper-button-next svg path,.swiper-button-prev svg path{fill:#FFFFFF}.swiper-button-next::after,.swiper-button-prev::after{display:none}.swiper:hover .swiper-button-next svg,.swiper:hover .swiper-button-prev svg{opacity:0.5}.swiper:hover .swiper-button-next:hover svg,.swiper:hover .swiper-button-next:active svg,.swiper:hover .swiper-button-next:focus svg,.swiper:hover .swiper-button-prev:hover svg,.swiper:hover .swiper-button-prev:active svg,.swiper:hover .swiper-button-prev:focus svg{opacity:1}.swiper-button-prev svg{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.swiper-pagination-bullets{display:none}@media only screen and (max-width: 799.98px){.swiper-pagination-bullets{margin:10px auto 10px auto;display:block}.swiper-pagination-bullets.swiper-pagination-horizontal{left:0;-webkit-transform:none;transform:none;position:relative;bottom:0}.swiper-pagination-bullets .swiper-pagination-bullet{display:inline-block;background:black;opacity:0.2}.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;background:black}}@media only screen and (max-width: 799.98px){.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:0;-webkit-transform:none;transform:none}}.swiper-material .swiper-slide .material-wrapper:not(.hover-active){pointer-events:none}.swiper-material .swiper-wrapper{height:100%}.material-wrapper{border-radius:var(--covet-pics-material-border-radius);overflow:hidden;position:absolute;width:100%;height:100%;left:0;top:0;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:auto}.material-content{position:absolute;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);font-size:18px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.swiper-horizontal .material-content{height:100%;width:var(--material-slide-size);left:calc(50% - var(--material-slide-size) / 2);top:0}.swiper-material{height:var(--material-slide-size);width:100%;max-width:100%}.swiper-material.extra-height{height:calc(var(--material-slide-size) + var(--material-slide-extra-height))}.material-image{border-radius:var(--covet-pics-material-border-radius);display:block;-o-object-fit:cover;object-fit:cover;position:absolute;left:0%;top:0;width:100%;height:100%}.material-wrapper:not(.hover-active) .description.modern-1.modern-1.text-review,.material-wrapper:not(.hover-active) .description.modern-1.modern-1.star-only{border:none}.material-wrapper:not(.hover-active) .description.modern-2.modern-2.text-review,.material-wrapper:not(.hover-active) .description.modern-2.modern-2.star-only{border:none}.material-wrapper:not(.hover-active) covet-pics-gallery-item-detail.modern-3{border:none}.material-wrapper:not(.hover-active) covet-pics-gallery-item-detail.modern-4{border:1px solid transparent}.material-wrapper:not(.hover-active) covet-pics-gallery-item-detail.modern-5{border:1px solid transparent}.material-wrapper .modern-3.img-wrap.text-review::before,.material-wrapper .modern-3.img-wrap.star-only::before{display:none}.material-wrapper.basic-1{border:1px solid #F0F0F0}.material-wrapper.basic-1 covet-pics-gallery-item-detail{border:none}.material-wrapper.basic-1 covet-pics-gallery-item-detail:hover,.material-wrapper.basic-1 covet-pics-gallery-item-detail:active,.material-wrapper.basic-1 covet-pics-gallery-item-detail:focus{border:none}.material-wrapper.basic-1 .material-image{border-radius:0}.material-wrapper.basic-1.hover-active:hover,.material-wrapper.basic-1.hover-active:active,.material-wrapper.basic-1.hover-active:focus{border:1px solid rgba(0, 0, 0, 0.3)}.material-wrapper.basic-2{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}.material-wrapper.basic-2 covet-pics-gallery-item-detail{-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-2 covet-pics-gallery-item-detail:hover,.material-wrapper.basic-2 covet-pics-gallery-item-detail:active,.material-wrapper.basic-2 covet-pics-gallery-item-detail:focus{-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-2 .material-image{border-radius:0}.material-wrapper.basic-2.basic-2.hover-active:hover,.material-wrapper.basic-2.basic-2.hover-active:active,.material-wrapper.basic-2.basic-2.hover-active:focus{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1)}.material-wrapper.basic-3{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}.material-wrapper.basic-3 covet-pics-gallery-item-detail{-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-3 covet-pics-gallery-item-detail:hover,.material-wrapper.basic-3 covet-pics-gallery-item-detail:active,.material-wrapper.basic-3 covet-pics-gallery-item-detail:focus{-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-3 .material-image{border-radius:0}.material-wrapper.basic-3.basic-3.hover-active:hover,.material-wrapper.basic-3.basic-3.hover-active:active,.material-wrapper.basic-3.basic-3.hover-active:focus{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1)}.material-wrapper.basic-4{-webkit-box-shadow:0 16px 24px 0 rgba(0, 0, 0, 0.05);box-shadow:0 16px 24px 0 rgba(0, 0, 0, 0.05)}.material-wrapper.basic-4 covet-pics-gallery-item-detail{-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-4 covet-pics-gallery-item-detail:hover,.material-wrapper.basic-4 covet-pics-gallery-item-detail:active,.material-wrapper.basic-4 covet-pics-gallery-item-detail:focus{-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-4 .material-image{border-radius:0}.material-wrapper.basic-4.basic-4.hover-active:hover,.material-wrapper.basic-4.basic-4.hover-active:active,.material-wrapper.basic-4.basic-4.hover-active:focus{-webkit-box-shadow:0 16px 24px 0 rgba(0, 0, 0, 0.15);box-shadow:0 16px 24px 0 rgba(0, 0, 0, 0.15)}.material-wrapper.basic-5{border:1px solid #000000;-webkit-box-shadow:0 0 0 0 #000000;box-shadow:0 0 0 0 #000000}.material-wrapper.basic-5 covet-pics-gallery-item-detail{border:none;-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-5 covet-pics-gallery-item-detail:hover,.material-wrapper.basic-5 covet-pics-gallery-item-detail:active,.material-wrapper.basic-5 covet-pics-gallery-item-detail:focus{border:none;-webkit-box-shadow:0;box-shadow:0}.material-wrapper.basic-5 .material-image{border-radius:0}.material-wrapper.basic-5.basic-5.hover-active:hover,.material-wrapper.basic-5.basic-5.hover-active:active,.material-wrapper.basic-5.basic-5.hover-active:focus{-webkit-box-shadow:0 0 0 0.7px #000000;box-shadow:0 0 0 0.7px #000000}.material-wrapper.basic-6 .material-image{border-radius:0}";
 const CovetPicsGallerySliderStyle0 = covetPicsGallerySliderCss;
 
 const CovetPicsGallerySlider = class {
@@ -3941,8 +4202,8 @@ const CovetPicsGallerySlider = class {
         this.sliderIndexChange = index.createEvent(this, "sliderIndexChange:covetPics", 7);
         this.items = undefined;
         this.sharedItemId = undefined;
+        this.sliderStyle = "regular";
         this.appStore = undefined;
-        this.isDesktopScreen = undefined;
         this.itemSize = "size-md";
     }
     /**
@@ -4011,11 +4272,9 @@ const CovetPicsGallerySlider = class {
     }
     initStore() {
         this.appState = this.appStore.getState();
-        this.isDesktopScreen = this.appState.size.isDesktopScreen;
         this.itemSize = getters.getItemSize(this.appState);
         this.unsubscribe = this.appStore.subscribe(() => {
             this.appState = this.appStore.getState();
-            this.isDesktopScreen = this.appState.size.isDesktopScreen;
             // use native tabindex instead of @state to prevent rerender component
             this.setEnableControls(getters.isWidgetDisabled(this.appState));
             this.itemSize = getters.getItemSize(this.appState);
@@ -4056,8 +4315,18 @@ const CovetPicsGallerySlider = class {
         const mobileItemPaddingPX = (this.appState.settings.item_mobile_padding / 100) * galleryEl.offsetWidth;
         const desktopItemPaddingPX = (this.appState.settings.item_padding / 100) * galleryEl.offsetWidth;
         const paginationEl = this.el.querySelector(".gallery .swiper-pagination");
-        this.swiper = new a11y.Swiper(galleryEl, {
+        const params = {
             modules: [Autoplay, a11y.Navigation, a11y.Pagination, a11y.A11y],
+            a11y: {
+                enabled: true,
+                prevSlideMessage: "Previous item",
+                nextSlideMessage: "Next item",
+                containerMessage: "Gallery slider",
+                containerRoleDescriptionMessage: `Gallery slider ${this.items.length} items`,
+                paginationBulletMessage: "Goto item #{{index}}",
+                slideRole: "group",
+                slideLabelMessage: "" // used custom aria-label
+            },
             on: {
                 init: (e) => {
                     this.sliderInit.emit(e);
@@ -4081,20 +4350,6 @@ const CovetPicsGallerySlider = class {
                     }
                 }
             },
-            a11y: {
-                enabled: true,
-                prevSlideMessage: "Previous item",
-                nextSlideMessage: "Next item",
-                containerMessage: "Gallery slider",
-                containerRoleDescriptionMessage: `Gallery slider ${this.items.length} items`,
-                paginationBulletMessage: "Goto item #{{index}}",
-                slideRole: "group",
-                slideLabelMessage: "" // used custom aria-label
-            },
-            slidesPerView: this.appState.settings.slideshow_mobile_photos_per_row,
-            spaceBetween: mobileItemPaddingPX,
-            autoplay: this.getAutoplay(),
-            centerInsufficientSlides: true,
             navigation: {
                 nextEl: nextEl,
                 prevEl: prevEl,
@@ -4111,8 +4366,26 @@ const CovetPicsGallerySlider = class {
                     spaceBetween: desktopItemPaddingPX,
                     pagination: false
                 }
-            }
-        });
+            },
+            autoplay: this.getAutoplay(),
+            slidesPerView: this.appState.settings.slideshow_mobile_photos_per_row,
+            spaceBetween: mobileItemPaddingPX,
+        };
+        if (this.sliderStyle === "regular") {
+            params["centerInsufficientSlides"] = true;
+        }
+        if (this.sliderStyle === "material") {
+            params.modules.push(EffectMaterial);
+            params["effect"] = "material";
+            params["grabCursor"] = true;
+            params["speed"] = 600;
+            params["loopAdditionalSlides"] = 1;
+            params["watchSlidesProgress"] = true;
+            params["virtualTranslate"] = true;
+            params["loop"] = false;
+            params["centeredSlides"] = false;
+        }
+        this.swiper = new a11y.Swiper(galleryEl, params);
         if (this.appState.settings.slideshow_load_more) {
             // Load new Cells only if autoload enabled
             this.swiper.on("reachEnd", () => {
@@ -4165,24 +4438,45 @@ const CovetPicsGallerySlider = class {
             : `slide ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`;
     }
     renderStandardUploadItem(item, idx, itemsLength) {
-        return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "image-url": item.imageUrl, "item-index": idx, "item-size": this.itemSize, "aria-label": `click on for upload image in slider, slide ${idx + 1}/${itemsLength},`, appStore: this.appStore }));
+        return (index.h("covet-pics-gallery-item", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "item-source": item.source, "image-url": item.imageUrl, "item-index": idx, "item-size": this.itemSize, "aria-label": `click on for upload image in slider, slide ${idx + 1}/${itemsLength},`, appStore: this.appStore }));
     }
     renderDetailUploadItem(item, idx, itemsLength) {
-        return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "image-url": item.imageUrl, "item-index": idx, "item-size": this.itemSize, "aria-label": `click on for upload image in slider, slide ${idx + 1}/${itemsLength},`, appStore: this.appStore }));
+        return (index.h("covet-pics-gallery-item", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "item-source": item.source, "image-url": item.imageUrl, "item-index": idx, "item-size": this.itemSize, "aria-label": `click on for upload image in slider, slide ${idx + 1}/${itemsLength},`, appStore: this.appStore }));
     }
     renderStandardItem(item, idx, itemsLength) {
-        return (index.h("covet-pics-gallery-item", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-size": this.itemSize, links: item.links, url: item.url, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, "item-type": item.data_type, caption: item.caption, "item-index": idx, appStore: this.appStore }));
+        return (index.h("covet-pics-gallery-item", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-size": this.itemSize, links: item.links, url: item.url, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, "item-type": item.data_type, caption: item.caption, "item-index": idx, appStore: this.appStore }));
     }
     renderDetailItem(item, idx, itemsLength) {
-        return (index.h("covet-pics-gallery-item-detail", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-type": item.data_type, "item-size": this.itemSize, "lazy-load": true, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in main slider`, appStore: this.appStore, "item-index": idx }));
+        return (index.h("covet-pics-gallery-item-detail", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-type": item.data_type, "item-size": this.itemSize, "lazy-load": true, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in main slider`, appStore: this.appStore, "item-index": idx }));
+    }
+    getCSSVariables() {
+        const cssVars = {};
+        if (this.sliderStyle === "material") {
+            cssVars["--covet-pics-material-border-radius"] = "32px";
+            cssVars["--covet-material-scale"] = "1";
+        }
+        return cssVars;
     }
     render() {
+        const isMaterial = this.sliderStyle === "material";
+        const isDetailBasic = ["basic-1", "basic-2", "basic-3", "basic-4", "basic-5", "basic-6"].includes(this.appState.settings.item_style);
+        // TODO temp
+        let materialClass = isMaterial ? "swiper-material" : "";
+        if (isMaterial && isDetailBasic) {
+            materialClass = `swiper-material extra-height ${this.itemSize}`;
+        }
         if (this.items !== undefined) {
-            return (index.h("section", { key: 'a895c194022b9923dbbe3d9557138aec14ff3d70', class: "gallery swiper" }, index.h("button", { key: 'b764c00b1fe7c68dc4a9656dc026265421bfe4aa', class: `swiper-button-prev ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: 'b60152abfd3b925dba38553179f1fe5938e5e6ed', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '6f079b09c489c1212cd340a10c37402539d11826', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " }))), index.h("div", { key: '47fc5366af957d21cf26514f9cb4997292b7b3c3', class: "swiper-wrapper" }, this.appState.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
-                ? this.renderStandardUploadItem(item, idx, this.items.length)
-                : this.renderStandardItem(item, idx, this.items.length)), this.appState.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
-                ? this.renderDetailUploadItem(item, idx, this.items.length)
-                : this.renderDetailItem(item, idx, this.items.length))), index.h("div", { key: '8a91b6276dc47a4216a581f85109f43de5b8f50e', class: "swiper-pagination" }), index.h("button", { key: 'f4340fffbd6cfc89c03dea81fe7b86f44a303283', class: `swiper-button-next ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: 'c0115314f59ec8af331837576bc298600d3ebf88', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '54b438fe03d03cbdfa9e8ecff69b5c41d762acf5', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " })))));
+            return (index.h("section", { key: '086dd0a4b62e4c1349bf757be581e13edff58548', class: `gallery swiper ${materialClass}`, style: this.getCSSVariables() }, index.h("button", { key: '047911c23232436309360c9ff31780df3f3c6033', class: `swiper-button-prev ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: '6ad9713d74624f3ef3339f61640d2383c86fc869', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: 'ada7cda9b00a402a8a73f94adec685f850eee8a1', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " }))), this.sliderStyle === "regular" &&
+                index.h("div", { class: "swiper-wrapper" }, this.appState.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+                    ? this.renderStandardUploadItem(item, idx, this.items.length)
+                    : this.renderStandardItem(item, idx, this.items.length)), this.appState.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+                    ? this.renderDetailUploadItem(item, idx, this.items.length)
+                    : this.renderDetailItem(item, idx, this.items.length))), this.sliderStyle === "material" &&
+                index.h("div", { class: "swiper-wrapper" }, this.appState.settings.item_style === "standard" && this.items.map((item, idx) => index.h("div", { class: "swiper-slide" }, index.h("div", { class: "material-wrapper" }, item.source === "upload_widget"
+                    ? this.renderStandardUploadItem(item, idx, this.items.length)
+                    : this.renderStandardItem(item, idx, this.items.length)))), this.appState.settings.item_style !== "standard" && this.items.map((item, idx) => index.h("div", { class: "swiper-slide" }, index.h("div", { class: `material-wrapper ${this.appState.settings.item_style}` }, item.source === "upload_widget"
+                    ? this.renderDetailUploadItem(item, idx, this.items.length)
+                    : this.renderDetailItem(item, idx, this.items.length))))), index.h("div", { key: 'cf686e80d05aabb7a87d9cd82b049b3090418d31', class: "swiper-pagination" }), index.h("button", { key: 'abc0bca3b2f8682cc657204ab19e1ee406bbb03d', class: `swiper-button-next ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: '674c751639043651174580184c17622da23daeaf', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '4f9ae62198968ed17586a6c75c5c14a7053cdc44', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " })))));
         }
     }
     get el() { return index.getElement(this); }
@@ -4425,7 +4719,7 @@ const CovetPicsHighlighted = class {
     render() {
         const showPagination = ((this.layout === "slider" && !this.isDesktopScreen) || this.layout === "spotlight")
             && this.items && this.items.length > 1;
-        return (index.h(index.Host, { key: '045b350464f4c498aeddb4d0a0a325e2061e6e04', class: this.layout, style: this.setCSSVariables(), onClick: (e) => !this.isDesktopScreen && this.layout === "row" ? this.isClickOutsideHotspot(e) : null, role: "region", "aria-label": "Page gallery", "aria-roledescription": `Gallery ${this.items.length} posts` }, this.renderMainLayout(), showPagination &&
+        return (index.h(index.Host, { key: '64a464505b108cdca57056e6cad6ecaac98ff484', class: this.layout, style: this.setCSSVariables(), onClick: (e) => !this.isDesktopScreen && this.layout === "row" ? this.isClickOutsideHotspot(e) : null, role: "region", "aria-label": "Page gallery", "aria-roledescription": `Gallery ${this.items.length} posts` }, this.renderMainLayout(), showPagination &&
             index.h("span", { class: "page-pagination" }, `${this.mainSliderIndex + 1}/${this.items.length}`)));
     }
     get el() { return index.getElement(this); }