@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

package/dist/spotlight.scss

@@ -1,1706 +1,1706 @@
-@use "sass:map";
-@use "sass:list";
-[data-div-type="element"] {
-  &[data-element-type="spotlight"] {
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-    &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-    }
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    --_aspect-ratio: calc(
-      1 *
-        (
-          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
-            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
-        )
-    );
-    &[data-view-state="full"] {
-      // aspect-ratio: 1/0.01;
-      & > .wrapper {
-        & > div {
-          height: 100%;
-        }
-      }
-      img {
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    // &[data-view-state="full"] {
-    //   width: auto;
-    //   // height: 100%;
-    //   margin: 0;
-    //   justify-self: stretch !important;
-    //   align-self: stretch !important;
-    //   cursor: auto;
-    // }
-
-    & > .wrapper {
-      width: 100%;
-      height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    .spotlight-element {
-      --text-high-contrast-rgb-value: 49, 49, 49;
-      --detail-medium-contrast: rgb(234, 234, 234);
-      --text-body: rgb(54, 49, 61);
-
-      position: relative;
-      background-color: var(
-        --_ctm-mob-dn-gy-wt-se-bd-cr,
-        var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr))
-      );
-
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-
-      display: flex;
-      flex-direction: column;
-
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-
-      gap: var(
-        --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
-        var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
-      );
-
-      width: 100%;
-      height: 100%;
-
-      border-color: var(
-        --_ctm-mob-dn-gy-wt-se-br-cr,
-        var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-gy-wt-se-br-se,
-        var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-gy-wt-se-br-wh,
-        var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-gy-wt-se-br-rs,
-        var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(
-            --_ctm-mob-dn-gy-wt-se-sw-ae,
-            var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
-          )
-          var(
-            --_ctm-mob-dn-gy-wt-se-sw-br,
-            var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
-          )
-          var(
-            --_ctm-mob-dn-gy-wt-se-sw-sd,
-            var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
-          )
-          var(
-            --_ctm-mob-dn-gy-wt-se-sw-cr,
-            var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
-          )
-      );
-
-      .spotlight-header {
-        // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
-        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
-        display: flex;
-        flex-direction: column;
-
-        gap: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
-        );
-
-        padding-block: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
-        );
-
-        padding-inline: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
-        );
-
-        background-color: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
-        );
-
-        width: 100%;
-
-        border-color: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
-        );
-
-        border-style: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
-        );
-
-        border-width: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
-        );
-
-        border-radius: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
-        );
-
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
-            )
-        );
-
-        & h3 {
-          color: var(
-            --_ctm-mob-dn-gy-wt-se-cr,
-            var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
-          );
-          font-family: var(
-            --_ctm-mob-dn-gy-wt-se-ft-fy,
-            var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-gy-wt-se-tt-tm,
-            var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-gy-wt-se-wd-wp,
-            var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp))
-          );
-          word-break: var(
-            --_ctm-mob-dn-gy-wt-se-wd-bk,
-            var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk))
-          );
-          font-size: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-gy-wt-se-ft-wt,
-            var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
-          );
-          font-style: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se-ic,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-gy-wt-se-tt-an,
-            var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-gy-wt-se-lr-sg,
-            var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
-          );
-          line-height: var(
-            --_ctm-mob-dn-gy-wt-se-le-ht,
-            var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-gy-wt-se-ue,
-            var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
-          );
-        }
-
-        & p {
-          color: var(
-            --_ctm-mob-dn-gy-wt-se-cr-dc,
-            var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
-          );
-          font-family: var(
-            --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-gy-wt-se-tt-tm-dc,
-            var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-gy-wt-se-wd-wp-dc,
-            var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc))
-          );
-          word-break: var(
-            --_ctm-mob-dn-gy-wt-se-wd-bk-dc,
-            var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc))
-          );
-          font-size: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
-          );
-          font-style: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
-          );
-          text-align: var(
-            --_ctm-mob-dn-gy-wt-se-tt-an-dc,
-            var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
-            var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
-          );
-          line-height: var(
-            --_ctm-mob-dn-gy-wt-se-le-ht-dc,
-            var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-gy-wt-se-ue-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
-          );
-        }
-
-        // h3 {
-        //   margin-bottom: var(--_mb-4);
-        // }
-      }
-    }
-
-    &[data-text-position="top"] {
-      .spotlight-element {
-        flex-direction: column;
-      }
-    }
-
-    &[data-text-position="bottom"] {
-      .spotlight-element {
-        flex-direction: column-reverse;
-      }
-    }
-    &[data-text-position="left"] {
-      .spotlight-element {
-        flex-direction: row;
-      }
-      .spotlight-header {
-        // width: fit-content;
-        height: 100%;
-      }
-      &[data-widget-alignment="top"] {
-        .spotlight-element {
-          align-items: flex-start;
-        }
-        .spotlight-header {
-          justify-content: flex-start;
-        }
-      }
-      &[data-widget-alignment="center"] {
-        .spotlight-element {
-          align-items: center;
-        }
-        .spotlight-header {
-          justify-content: center;
-        }
-      }
-      &[data-widget-alignment="bottom"] {
-        .spotlight-element {
-          align-items: flex-end;
-        }
-        .spotlight-header {
-          justify-content: flex-end;
-        }
-      }
-    }
-    &[data-text-position="right"] {
-      .spotlight-header {
-        // width: fit-content;
-        height: 100%;
-      }
-      .spotlight-element {
-        flex-direction: row-reverse;
-      }
-
-      &[data-widget-alignment="top"] {
-        .spotlight-element {
-          align-items: flex-start;
-        }
-        .spotlight-header {
-          justify-content: flex-start;
-        }
-      }
-      &[data-widget-alignment="center"] {
-        .spotlight-element {
-          align-items: center;
-        }
-        .spotlight-header {
-          justify-content: center;
-        }
-      }
-      &[data-widget-alignment="bottom"] {
-        .spotlight-element {
-          align-items: flex-end;
-        }
-        .spotlight-header {
-          justify-content: flex-end;
-        }
-      }
-    }
-    .embla {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      // overflow: hidden;
-
-      .embla__viewport {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-
-        .embla__container {
-          width: 100%;
-          height: 100%;
-          display: grid;
-          grid-template-rows: 100%;
-
-          grid-template-columns: repeat(
-            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
-            calc(
-              100% /
-                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-            )
-          );
-
-          grid-auto-flow: column;
-          gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
-
-          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-as-aw-se,
-                      var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-                    ) +
-                    10px
-                )
-            );
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-spo-lt-pn-ds-se,
-                      var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Dots"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-spo-lt-pn-ds-se,
-                      var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          .embla__slide {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-      &:not([data-display-style="Column"]) {
-        .embla__container {
-          grid-auto-columns: calc(
-            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, 1))
-          );
-        }
-      }
-
-      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: unset;
-          height: 80%;
-          flex-grow: 1;
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-          }
-
-          .embla__container {
-            overflow: unset;
-            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-
-            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
-            grid-template-rows: unset;
-
-            grid-auto-flow: row;
-
-            &[data-overflow-hidden="true"] {
-              overflow: hidden;
-            }
-          }
-        }
-      }
-
-      &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
-        .embla__viewport {
-          .embla__container {
-            grid-template-rows: repeat(
-              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
-              calc(
-                100% /
-                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
-              )
-            );
-          }
-        }
-      }
-
-      &[data-display-style="Rows"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: unset;
-          height: 80%;
-          flex-grow: 1;
-
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-height);
-          }
-
-          .embla__container {
-            overflow: hidden;
-            height: var(--_ctm-height);
-            // min-height: var(--_ctm-height);
-
-            grid-template-columns: repeat(
-              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-              1fr
-            );
-            grid-template-rows: unset;
-            grid-auto-flow: row;
-          }
-        }
-      }
-
-      &[data-display-style="Column"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          .embla__container {
-            display: flex;
-            .embla__slide {
-              width: unset;
-              height: 100%;
-              aspect-ratio: 1 / 2;
-            }
-          }
-        }
-      }
-      &[data-display-style="Masonry"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: hidden;
-          height: 80%;
-          flex-grow: 1;
-
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-height);
-          }
-
-          .embla__container {
-            overflow: unset;
-            display: block;
-
-            column-count: var(
-              --_ctm-mob-lt-is-pr-rw,
-              var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
-            );
-            gap: unset;
-
-            column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
-
-            height: auto;
-
-            .embla__slide {
-              margin-bottom: var(
-                --_ctm-mob-lt-im-gp,
-                var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
-              );
-              height: unset;
-
-              .spotlight__slide {
-                height: unset;
-              }
-            }
-          }
-        }
-      }
-
-      .arrow-navigation {
-        display: flex;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 100%;
-        justify-content: space-between;
-        transform: translate(-50%, -50%);
-        //   padding-left: 20px;
-        &[data-control-type="Side"] {
-          .left-button,
-          .right-button {
-            background-color: transparent;
-          }
-        }
-        &[data-background-shape="Round"] {
-          .left-button,
-          .right-button {
-            background-color: #f2f5f5;
-            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
-          }
-        }
-        &[data-control-type="Bottom-Overflow"] {
-          transform: translateX(-50%);
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-          top: unset;
-          bottom: 6px;
-        }
-        &[data-control-type="Bottom"] {
-          transform: unset;
-          position: static;
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-          margin-top: 10px;
-        }
-        .left-button {
-          padding: 10px;
-          border-radius: 50%;
-          border: none;
-          width: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-left: 12px;
-          &:disabled {
-            & svg {
-              path {
-                stroke: rgb(192, 192, 192);
-              }
-            }
-          }
-        }
-        .right-button {
-          border-radius: 50%;
-          border: none;
-          width: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-right: 12px;
-          padding: 10px;
-
-          &:disabled {
-            & svg {
-              path {
-                stroke: rgb(192, 192, 192);
-              }
-            }
-          }
-        }
-        .icon {
-          display: flex;
-
-          svg {
-            width: calc(
-              var(
-                  --_ctm-mob-spo-lt-sr-nn-cs-se,
-                  var(--_ctm-tab-spo-lt-sr-nn-cs-se, var(--_ctm-spo-lt-sr-nn-cs-se))
-                ) *
-                0.5
-            );
-            height: calc(
-              var(
-                  --_ctm-mob-spo-lt-sr-nn-cs-se,
-                  var(--_ctm-tab-spo-lt-sr-nn-cs-se, var(--_ctm-spo-lt-sr-nn-cs-se))
-                ) *
-                0.5
-            );
-
-            path {
-              stroke: var(--_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, blue));
-            }
-          }
-        }
-      }
-
-      &[data-control-type="Side"] {
-        .embla__viewport {
-          width: calc(100% - 120px);
-          margin-inline: auto;
-        }
-        .left-button {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-        .right-button {
-          position: absolute;
-
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      &[data-thumbnail-placement="top"] {
-        flex-direction: column-reverse;
-      }
-      &[data-thumbnail-placement="bottom"] {
-        flex-direction: column;
-      }
-      &[data-thumbnail-placement="left"] {
-        flex-direction: row-reverse;
-
-        .embla__thumbs {
-          width: var(--_ctm-lt-tl-se);
-          height: 100%;
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-          }
-        }
-      }
-      &[data-thumbnail-placement="right"] {
-        flex-direction: row;
-        .embla__thumbs {
-          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-          height: 100%;
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-          }
-        }
-      }
-      .embla__dots {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
-        gap: 6px;
-        margin-top: 16px;
-
-        &[data-control-type="Bottom-Overflow"] {
-          position: absolute;
-          bottom: 10px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 75%;
-        }
-        .embla__dot {
-          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-          -webkit-appearance: none;
-          appearance: none;
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-or-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
-          );
-
-          touch-action: manipulation;
-          display: inline-flex;
-          text-decoration: none;
-          cursor: pointer;
-          border: 0;
-          padding: 0;
-          margin: 0;
-          // width: 0.6rem;
-          // height: 0.6rem;
-          width: var(
-            --_ctm-mob-spo-lt-pn-ds-se,
-            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-          );
-          height: var(
-            --_ctm-mob-spo-lt-pn-ds-se,
-            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-        }
-        .embla__dot:after {
-          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-          width: var(
-            --_ctm-mob-spo-lt-pn-ds-se,
-            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-          );
-          height: var(
-            --_ctm-mob-spo-lt-pn-ds-se,
-            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-          );
-
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          content: "";
-        }
-        .embla__dot--selected:after {
-          box-shadow: inset 0 0 0 1px var(--text-body);
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-ct-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
-          );
-        }
-        &[data-slider-control="Pagination Line"] {
-          .embla__dot {
-            width: var(
-              --_ctm-mob-spo-lt-pn-ds-se,
-              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-            );
-            height: var(
-              --_ctm-mob-spo-lt-pn-ds-se,
-              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-or-le-cr,
-              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
-            );
-            border-radius: 6px;
-          }
-
-          .embla__dot--selected:after {
-            box-shadow: inset 0 0 0 1px var(--text-body);
-            border-radius: 6px;
-            width: var(
-              --_ctm-mob-spo-lt-pn-ds-se,
-              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-            );
-            height: var(
-              --_ctm-mob-spo-lt-pn-ds-se,
-              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-ct-le-cr,
-              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
-            );
-          }
-        }
-      }
-
-      .embla__thumbs {
-        width: 100%;
-        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-        position: relative;
-        display: grid;
-        grid-template-columns: 1fr;
-        overflow: hidden;
-        // margin: 10px;
-        padding: 10px;
-
-        .embla__thumbs__viewport {
-          width: 100%;
-          height: 100%;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-        }
-        .embla__thumbs__container {
-          display: flex;
-          flex-direction: row;
-          margin-left: calc(var(--thumbs-slide-spacing) * -1);
-          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
-
-          width: 100%;
-          // justify-content: center;
-          // height: 200px;
-
-          .embla__thumbs__slide {
-            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-            & img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-    }
-
-    .spotlight__slide {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      // flex-direction: column;
-
-      background-color: var(
-        --_ctm-mob-dn-im-se-bd-cr,
-        var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
-      );
-
-      border-color: var(
-        --_ctm-mob-dn-im-se-br-cr,
-        var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-im-se-br-se,
-        var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-im-se-br-wh,
-        var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-im-se-br-rs,
-        var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
-          var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
-          var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
-          var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
-      );
-
-      gap: var(
-        --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
-        var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
-      );
-
-      .spotlight-header {
-        // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
-        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
-        display: flex;
-        flex-direction: column;
-
-        gap: var(
-          --_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
-          var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
-        );
-
-        padding-block: var(
-          --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
-          var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
-        );
-
-        padding-inline: var(
-          --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
-          var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
-        );
-
-        background-color: var(
-          --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
-          var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
-        );
-
-        width: 100%;
-
-        border-color: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-cr,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
-        );
-
-        border-style: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-se,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
-        );
-
-        border-width: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-wh,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
-        );
-
-        border-radius: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-rs,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
-        );
-
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-br,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
-            )
-        );
-
-        & h3 {
-          color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
-
-          font-family: var(
-            --_ctm-mob-dn-im-se-ft-fy,
-            var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-im-se-tt-tm,
-            var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-im-se-wd-wp,
-            var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
-          );
-          word-break: var(
-            --_ctm-mob-dn-im-se-wd-bk,
-            var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
-          );
-
-          font-size: var(
-            --_ctm-mob-dn-im-se-ft-se,
-            var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
-          );
-
-          font-weight: var(
-            --_ctm-mob-dn-im-se-ft-wt,
-            var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
-          );
-
-          font-style: var(
-            --_ctm-mob-dn-im-se-ft-se-ic,
-            var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
-          );
-
-          text-align: var(
-            --_ctm-mob-dn-im-se-tt-an,
-            var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
-          );
-
-          letter-spacing: var(
-            --_ctm-mob-dn-im-se-lr-sg,
-            var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
-          );
-
-          line-height: var(
-            --_ctm-mob-dn-im-se-le-ht,
-            var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
-          );
-
-          text-decoration: var(
-            --_ctm-mob-dn-im-se-ue,
-            var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
-          );
-        }
-
-        & p {
-          color: var(
-            --_ctm-mob-dn-im-se-cr-dc,
-            var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
-          );
-
-          font-family: var(
-            --_ctm-mob-dn-im-se-ft-fy-dc,
-            var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-im-se-tt-tm-dc,
-            var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-im-se-wd-wp-dc,
-            var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))
-          );
-          word-break: var(
-            --_ctm-mob-dn-im-se-wd-bk-dc,
-            var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
-          );
-
-          font-size: var(
-            --_ctm-mob-dn-im-se-ft-se-dc,
-            var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
-          );
-
-          font-weight: var(
-            --_ctm-mob-dn-im-se-ft-wt-dc,
-            var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
-          );
-
-          font-style: var(
-            --_ctm-mob-dn-im-se-ft-se-ic-dc,
-            var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
-          );
-
-          text-align: var(
-            --_ctm-mob-dn-im-se-tt-an-dc,
-            var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
-          );
-
-          letter-spacing: var(
-            --_ctm-mob-dn-im-se-lr-sg-dc,
-            var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
-          );
-
-          line-height: var(
-            --_ctm-mob-dn-im-se-le-ht-dc,
-            var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
-          );
-
-          text-decoration: var(
-            --_ctm-mob-dn-im-se-ue-dc,
-            var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
-          );
-        }
-
-        // h3 {
-        //   margin-bottom: var(--_mb-4);
-        // }
-      }
-      > img {
-        object-fit: cover;
-      }
-      &[data-text-position="On Image"] {
-        .spotlight-header {
-          width: 100%;
-          // height: 100%;
-          position: absolute;
-        }
-
-        &[data-widget-alignment="top"] {
-          // align-items: flex-start;
-
-          .spotlight-header {
-            top: 0;
-
-            justify-content: flex-start;
-          }
-        }
-        &[data-widget-alignment="center"] {
-          // align-items: center;
-
-          .spotlight-header {
-            top: 50%;
-            transform: translateY(-50%);
-            justify-content: center;
-          }
-        }
-        &[data-widget-alignment="bottom"] {
-          // align-items: flex-end;
-          .spotlight-header {
-            bottom: 0;
-
-            justify-content: flex-end;
-          }
-        }
-      }
-
-      &[data-text-position="top"] {
-        flex-direction: column;
-      }
-
-      &[data-text-position="bottom"] {
-        flex-direction: column-reverse;
-      }
-      &[data-text-position="left"] {
-        flex-direction: row;
-
-        .spotlight-header {
-          width: fit-content;
-          height: 100%;
-        }
-        &[data-widget-alignment="top"] {
-          align-items: flex-start;
-
-          .spotlight-header {
-            justify-content: flex-start;
-          }
-        }
-        &[data-widget-alignment="center"] {
-          align-items: center;
-
-          .spotlight-header {
-            justify-content: center;
-          }
-        }
-        &[data-widget-alignment="bottom"] {
-          align-items: flex-end;
-
-          .spotlight-header {
-            justify-content: flex-end;
-          }
-        }
-      }
-      &[data-text-position="right"] {
-        flex-direction: row-reverse;
-        .spotlight-header {
-          width: fit-content;
-          height: 100%;
-        }
-
-        &[data-widget-alignment="top"] {
-          align-items: flex-start;
-
-          .spotlight-header {
-            justify-content: flex-start;
-          }
-        }
-        &[data-widget-alignment="center"] {
-          align-items: center;
-
-          .spotlight-header {
-            justify-content: center;
-          }
-        }
-        &[data-widget-alignment="bottom"] {
-          align-items: flex-end;
-
-          .spotlight-header {
-            justify-content: flex-end;
-          }
-        }
-      }
-      & > img {
-        width: 100%;
-        height: 100%;
-        //   object-fit: cover;
-
-        // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
-        // object-fit: cover;
-
-        &[data-has-title="true"] {
-          height: 85%;
-        }
-
-        /* display: block; */
-      }
-    }
-
-    .load__more__div {
-      display: flex;
-      justify-content: center;
-      margin-block: 12px;
-      & > button {
-        padding-inline: 24px;
-        border: 1px solid gray;
-        padding-block: 12px;
-        border-radius: 6px;
-      }
-    }
-    .embla__slide {
-      flex: 0 0 100%;
-    }
-
-    .spotlight__container {
-      display: flex;
-      width: 80%;
-      margin: 0 auto;
-      justify-content: center;
-      padding: 30px 24px;
-
-      .spotlight__leftsection {
-        background: linear-gradient(90deg, #ffffff 0.05%, #f5f5f5 99.95%);
-        align-self: center;
-        padding: 30px 24px;
-      }
-
-      .spotlight__title {
-        font-weight: 600;
-        font-size: 20px;
-        line-height: 125%;
-        color: #000000;
-      }
-
-      .spotlight__start {
-        font-weight: 500;
-        font-size: 12px;
-        line-height: 150%;
-        letter-spacing: -0.02em;
-        color: #303234;
-        padding-top: 16px;
-      }
-
-      .spotlight__price {
-        font-style: normal;
-        font-weight: 800;
-        font-size: 24px;
-        line-height: 150%;
-        letter-spacing: -0.02em;
-        color: #303234;
-        padding-top: 4px;
-      }
-
-      .spotlight__deal {
-        font-style: italic;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 20px;
-        letter-spacing: -0.02em;
-        color: #303234;
-
-        span {
-          font-weight: 700;
-        }
-      }
-
-      .spotlight__swatchimages {
-        padding-top: 24px;
-        display: flex;
-        gap: 6px;
-
-        li {
-          width: 24px;
-          height: 24px;
-          border-radius: 50%;
-          background: #c2a893;
-          list-style: none;
-        }
-
-        .active {
-          border: 2px solid #fff;
-          width: 28px;
-          border-radius: 100px;
-          height: 20px;
-          outline: 2px solid #626262;
-        }
-      }
-
-      .spotlight__cart {
-        cursor: pointer;
-        font-style: normal;
-        font-weight: 600;
-        font-size: 18px;
-        text-align: center;
-        letter-spacing: -0.02em;
-        color: #ffffff;
-        padding: 12px 24px;
-        background: #243dc6;
-        border: 0;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-top: 24px;
-
-        span {
-          svg {
-            vertical-align: middle;
-          }
-        }
-      }
-    }
-
-    .connector__wrapper[data-line-style="dotted"] .line-horizontal {
-      border-top-style: dotted !important;
-    }
-    .connector__wrapper[data-line-style="dashed"] .line-horizontal {
-      border-top-style: dashed !important;
-    }
-
-    .connector__wrapper[data-line-style="dashed"] .line-vertical {
-      border-right-style: dashed !important;
-    }
-
-    .connector__wrapper[data-line-style="dotted"] .line-vertical {
-      border-right-style: dotted !important;
-    }
-
-    .connector__wrapper[data-line-type="straight"] .line-vertical {
-      transform: rotate(0deg) !important;
-    }
-
-    .connector__wrapper[data-line-bend="Straight"] .line-vertical {
-      transform: rotate(0deg) !important;
-    }
-    .connector__wrapper[data-line-bend="UP"] .line-vertical {
-      top: -16px !important;
-      left: -10px !important;
-      transform: rotate(-27deg) !important;
-    }
-
-    .spotlight__img__container {
-      position: relative;
-      width: 400px;
-      margin: 0 auto;
-      // border: 1px solid #333;
-      background-image: url("https://sellerscommerce.sirv.com/00000000-0000-0000-0000-000000000000/media/spotlight_element.png");
-      height: 500px;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-
-    // Top Left point container
-    .spotlight__pointTopLeft {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-
-      .spotlight__points {
-        display: flex;
-        align-items: center;
-        z-index: 2;
-
-        .label__box {
-          position: absolute;
-          left: -68px;
-          top: 54px;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-          width: 77.82px;
-          height: auto;
-          background: #ffffff;
-          border: 0.659236px solid #243dc6;
-          border-radius: 2.63694px;
-          padding: var(--_ctm-spo-lt-st-bx-pg, var(--_ctm-spo-lt-st-tt-pg));
-          font-weight: 400;
-          font-size: var(--_ctm-spo-lt-st-tt-ft-se);
-          line-height: var(--_ctm-spo-lt-st-tt-le-ht);
-          letter-spacing: var(--_ctm-spo-lt-st-tt-lr-sg, var(--_ctm-spo-lt-st-im-sg));
-          text-align: center;
-          color: #667085;
-
-          svg {
-            width: var(--_ctm-spo-lt-st-in-se);
-            height: var(--_ctm-spo-lt-st-in-se);
-            padding: var(--_ctm-spo-lt-st-in-pg);
-          }
-        }
-
-        .connector__wrapper {
-          .line-horizontal {
-            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
-            height: 1px;
-            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            top: -18px;
-            position: relative;
-            right: 0px;
-          }
-
-          &[data-line-style="dotted"] {
-            .line-horizontal {
-              border-top-style: dotted;
-            }
-          }
-
-          .line-vertical {
-            width: 1px;
-            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
-            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            position: relative;
-            top: 18px;
-            left: -10px;
-            transform: rotate(27deg);
-            border-radius: 31px;
-          }
-        }
-
-        .circle-marker {
-          background-color: white;
-          border: 4px solid #0000001a;
-          border-radius: 50%;
-          width: var(
-            --_ctm-mob-spo-lt-ht-in-se,
-            var(--_ctm-tab-spo-lt-ht-in-se, var(--_ctm-spo-lt-ht-in-se))
-          );
-          height: var(
-            --_ctm-mob-spo-lt-ht-in-se,
-            var(--_ctm-tab-spo-lt-ht-in-se, var(--_ctm-spo-lt-ht-in-se))
-          );
-        }
-      }
-    }
-
-    // Top Right point container
-    .spotlight__pointTopRight {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-
-      .spotlight__points {
-        display: flex;
-        align-items: center;
-        flex-direction: row-reverse;
-        z-index: 2;
-
-        .label__box {
-          position: absolute;
-          right: -68px;
-          top: 54px;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-          width: 77.82px;
-          height: auto;
-          background: #ffffff;
-          border: 0.659236px solid #243dc6;
-          border-radius: 2.63694px;
-          padding: 8px 14px 6px 14px;
-          font-weight: 400;
-          font-size: 10.5478px;
-          text-align: center;
-          color: #667085;
-        }
-
-        .connector__wrapper {
-          .line-horizontal {
-            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
-            height: 1px;
-            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            top: -18px;
-            position: relative;
-            right: 0px;
-          }
-
-          .line-vertical {
-            width: 1px;
-            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
-            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            position: relative;
-            top: 18px;
-            right: -92px;
-            transform: rotate(-27deg);
-            border-radius: 31px;
-          }
-        }
-
-        .circle-marker {
-          background-color: white;
-          border: 4px solid #0000001a;
-          border-radius: 50%;
-          width: 18px;
-          height: 18px;
-        }
-      }
-    }
-
-    // Bottom Left point container
-    .spotlight__pointBottomLeft {
-      position: absolute;
-      bottom: 0px;
-      left: 0px;
-
-      .spotlight__points {
-        display: flex;
-        align-items: center;
-        z-index: 2;
-
-        .label__box {
-          position: absolute;
-          left: -68px;
-          top: -44px;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-          width: 77.82px;
-          height: auto;
-          background: #ffffff;
-          border: 0.659236px solid #243dc6;
-          border-radius: 2.63694px;
-          padding: 8px 14px 6px 14px;
-          font-weight: 400;
-          font-size: 10.5478px;
-          text-align: center;
-          color: #667085;
-        }
-
-        .connector__wrapper {
-          .line-horizontal {
-            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
-            height: 1px;
-            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            top: -18px;
-            position: relative;
-            right: 0px;
-          }
-
-          .line-vertical {
-            width: 1px;
-            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
-            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            position: relative;
-            top: -16px;
-            left: -10px;
-            transform: rotate(-27deg);
-            border-radius: 31px;
-          }
-        }
-
-        .circle-marker {
-          background-color: white;
-          border: 4px solid #0000001a;
-          border-radius: 50%;
-          width: 18px;
-          height: 18px;
-        }
-      }
-    }
-
-    // Bottom Right point container
-    .spotlight__pointBottomRight {
-      position: absolute;
-      bottom: 0px;
-      right: 0px;
-
-      .spotlight__points {
-        display: flex;
-        align-items: center;
-        flex-direction: row-reverse;
-        z-index: 2;
-
-        .label__box {
-          position: absolute;
-          right: -68px;
-          top: -44px;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-          width: 77.82px;
-          height: auto;
-          background: #ffffff;
-          border: 0.659236px solid #243dc6;
-          border-radius: 2.63694px;
-          padding: 8px 14px 6px 14px;
-          font-weight: 400;
-          font-size: 10.5478px;
-          text-align: center;
-          color: #667085;
-        }
-
-        .connector__wrapper {
-          .line-horizontal {
-            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
-            height: 1px;
-            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            top: -18px;
-            position: relative;
-            right: 0px;
-          }
-
-          .line-vertical {
-            width: 1px;
-            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
-            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
-            position: relative;
-            top: -15.3px;
-            right: -92px;
-            transform: rotate(-153deg);
-            border-radius: 31px;
-          }
-        }
-
-        .circle-marker {
-          background-color: white;
-          border: 4px solid #0000001a;
-          border-radius: 50%;
-          width: 18px;
-          height: 18px;
-        }
-      }
-    }
-
-    .embla__customControls {
-      // position: absolute;
-      .custom__arrowsPosition {
-        .embla__button--prev {
-          position: absolute !important;
-          left: 0 !important;
-          top: 50% !important;
-          transform: translateY(-50%) !important;
-        }
-
-        .embla__button--next {
-          position: absolute !important;
-          right: 0 !important;
-          top: 50% !important;
-          transform: translateY(-50%) !important;
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+[data-div-type="element"] {
+  &[data-element-type="spotlight"] {
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+    &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+    }
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    --_aspect-ratio: calc(
+      1 *
+        (
+          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
+            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
+        )
+    );
+    &[data-view-state="full"] {
+      // aspect-ratio: 1/0.01;
+      & > .wrapper {
+        & > div {
+          height: 100%;
+        }
+      }
+      img {
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   // height: 100%;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+    // }
+
+    & > .wrapper {
+      width: 100%;
+      height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .spotlight-element {
+      --text-high-contrast-rgb-value: 49, 49, 49;
+      --detail-medium-contrast: rgb(234, 234, 234);
+      --text-body: rgb(54, 49, 61);
+
+      position: relative;
+      background-color: var(
+        --_ctm-mob-dn-gy-wt-se-bd-cr,
+        var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr))
+      );
+
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
+      display: flex;
+      flex-direction: column;
+
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+
+      gap: var(
+        --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
+        var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
+      );
+
+      width: 100%;
+      height: 100%;
+
+      border-color: var(
+        --_ctm-mob-dn-gy-wt-se-br-cr,
+        var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-gy-wt-se-br-se,
+        var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-gy-wt-se-br-wh,
+        var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-gy-wt-se-br-rs,
+        var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(
+            --_ctm-mob-dn-gy-wt-se-sw-ae,
+            var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
+          )
+          var(
+            --_ctm-mob-dn-gy-wt-se-sw-br,
+            var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
+          )
+          var(
+            --_ctm-mob-dn-gy-wt-se-sw-sd,
+            var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
+          )
+          var(
+            --_ctm-mob-dn-gy-wt-se-sw-cr,
+            var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
+          )
+      );
+
+      .spotlight-header {
+        // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
+        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
+        display: flex;
+        flex-direction: column;
+
+        gap: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
+        );
+
+        padding-block: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
+        );
+
+        padding-inline: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
+        );
+
+        background-color: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
+        );
+
+        width: 100%;
+
+        border-color: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
+        );
+
+        border-style: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
+        );
+
+        border-width: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
+        );
+
+        border-radius: var(
+          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
+          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
+        );
+
+        box-shadow: var(
+          --_show-shadow,
+          var(
+              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
+            )
+            var(
+              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
+            )
+        );
+
+        & h3 {
+          color: var(
+            --_ctm-mob-dn-gy-wt-se-cr,
+            var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
+          );
+          font-family: var(
+            --_ctm-mob-dn-gy-wt-se-ft-fy,
+            var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-gy-wt-se-tt-tm,
+            var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-gy-wt-se-wd-wp,
+            var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-gy-wt-se-wd-bk,
+            var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk))
+          );
+          font-size: var(
+            --_ctm-mob-dn-gy-wt-se-ft-se,
+            var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-gy-wt-se-ft-wt,
+            var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-gy-wt-se-ft-se-ic,
+            var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-gy-wt-se-tt-an,
+            var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-gy-wt-se-lr-sg,
+            var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-gy-wt-se-le-ht,
+            var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-gy-wt-se-ue,
+            var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
+          );
+        }
+
+        & p {
+          color: var(
+            --_ctm-mob-dn-gy-wt-se-cr-dc,
+            var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
+          );
+          font-family: var(
+            --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
+            var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-gy-wt-se-tt-tm-dc,
+            var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-gy-wt-se-wd-wp-dc,
+            var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc))
+          );
+          word-break: var(
+            --_ctm-mob-dn-gy-wt-se-wd-bk-dc,
+            var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc))
+          );
+          font-size: var(
+            --_ctm-mob-dn-gy-wt-se-ft-se-dc,
+            var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
+            var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
+          );
+          font-style: var(
+            --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
+            var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
+          );
+          text-align: var(
+            --_ctm-mob-dn-gy-wt-se-tt-an-dc,
+            var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
+            var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
+          );
+          line-height: var(
+            --_ctm-mob-dn-gy-wt-se-le-ht-dc,
+            var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-gy-wt-se-ue-dc,
+            var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
+          );
+        }
+
+        // h3 {
+        //   margin-bottom: var(--_mb-4);
+        // }
+      }
+    }
+
+    &[data-text-position="top"] {
+      .spotlight-element {
+        flex-direction: column;
+      }
+    }
+
+    &[data-text-position="bottom"] {
+      .spotlight-element {
+        flex-direction: column-reverse;
+      }
+    }
+    &[data-text-position="left"] {
+      .spotlight-element {
+        flex-direction: row;
+      }
+      .spotlight-header {
+        // width: fit-content;
+        height: 100%;
+      }
+      &[data-widget-alignment="top"] {
+        .spotlight-element {
+          align-items: flex-start;
+        }
+        .spotlight-header {
+          justify-content: flex-start;
+        }
+      }
+      &[data-widget-alignment="center"] {
+        .spotlight-element {
+          align-items: center;
+        }
+        .spotlight-header {
+          justify-content: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        .spotlight-element {
+          align-items: flex-end;
+        }
+        .spotlight-header {
+          justify-content: flex-end;
+        }
+      }
+    }
+    &[data-text-position="right"] {
+      .spotlight-header {
+        // width: fit-content;
+        height: 100%;
+      }
+      .spotlight-element {
+        flex-direction: row-reverse;
+      }
+
+      &[data-widget-alignment="top"] {
+        .spotlight-element {
+          align-items: flex-start;
+        }
+        .spotlight-header {
+          justify-content: flex-start;
+        }
+      }
+      &[data-widget-alignment="center"] {
+        .spotlight-element {
+          align-items: center;
+        }
+        .spotlight-header {
+          justify-content: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        .spotlight-element {
+          align-items: flex-end;
+        }
+        .spotlight-header {
+          justify-content: flex-end;
+        }
+      }
+    }
+    .embla {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      // overflow: hidden;
+
+      .embla__viewport {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+
+        .embla__container {
+          width: 100%;
+          height: 100%;
+          display: grid;
+          grid-template-rows: 100%;
+
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+            calc(
+              100% /
+                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
+            )
+          );
+
+          grid-auto-flow: column;
+          gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-dn-pn-as-aw-se,
+                      var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                    ) +
+                    10px
+                )
+            );
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-spo-lt-pn-ds-se,
+                      var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+                    ) +
+                    20px
+                )
+            );
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Dots"] {
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-spo-lt-pn-ds-se,
+                      var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+                    ) +
+                    20px
+                )
+            );
+          }
+
+          .embla__slide {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      &:not([data-display-style="Column"]) {
+        .embla__container {
+          grid-auto-columns: calc(
+            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, 1))
+          );
+        }
+      }
+
+      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+          }
+
+          .embla__container {
+            overflow: unset;
+            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+
+            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+            grid-template-rows: unset;
+
+            grid-auto-flow: row;
+
+            &[data-overflow-hidden="true"] {
+              overflow: hidden;
+            }
+          }
+        }
+      }
+
+      &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
+        .embla__viewport {
+          .embla__container {
+            grid-template-rows: repeat(
+              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
+              calc(
+                100% /
+                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
+              )
+            );
+          }
+        }
+      }
+
+      &[data-display-style="Rows"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
+
+          .embla__container {
+            overflow: hidden;
+            height: var(--_ctm-height);
+            // min-height: var(--_ctm-height);
+
+            grid-template-columns: repeat(
+              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+              1fr
+            );
+            grid-template-rows: unset;
+            grid-auto-flow: row;
+          }
+        }
+      }
+
+      &[data-display-style="Column"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          .embla__container {
+            display: flex;
+            .embla__slide {
+              width: unset;
+              height: 100%;
+              aspect-ratio: 1 / 2;
+            }
+          }
+        }
+      }
+      &[data-display-style="Masonry"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: hidden;
+          height: 80%;
+          flex-grow: 1;
+
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
+
+          .embla__container {
+            overflow: unset;
+            display: block;
+
+            column-count: var(
+              --_ctm-mob-lt-is-pr-rw,
+              var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
+            );
+            gap: unset;
+
+            column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+            height: auto;
+
+            .embla__slide {
+              margin-bottom: var(
+                --_ctm-mob-lt-im-gp,
+                var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
+              );
+              height: unset;
+
+              .spotlight__slide {
+                height: unset;
+              }
+            }
+          }
+        }
+      }
+
+      .arrow-navigation {
+        display: flex;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        justify-content: space-between;
+        transform: translate(-50%, -50%);
+        //   padding-left: 20px;
+        &[data-control-type="Side"] {
+          .left-button,
+          .right-button {
+            background-color: transparent;
+          }
+        }
+        &[data-background-shape="Round"] {
+          .left-button,
+          .right-button {
+            background-color: #f2f5f5;
+            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+          }
+        }
+        &[data-control-type="Bottom-Overflow"] {
+          transform: translateX(-50%);
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          top: unset;
+          bottom: 6px;
+        }
+        &[data-control-type="Bottom"] {
+          transform: unset;
+          position: static;
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          margin-top: 10px;
+        }
+        .left-button {
+          padding: 10px;
+          border-radius: 50%;
+          border: none;
+          width: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-left: 12px;
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .right-button {
+          border-radius: 50%;
+          border: none;
+          width: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-right: 12px;
+          padding: 10px;
+
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .icon {
+          display: flex;
+
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-spo-lt-sr-nn-cs-se,
+                  var(--_ctm-tab-spo-lt-sr-nn-cs-se, var(--_ctm-spo-lt-sr-nn-cs-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-spo-lt-sr-nn-cs-se,
+                  var(--_ctm-tab-spo-lt-sr-nn-cs-se, var(--_ctm-spo-lt-sr-nn-cs-se))
+                ) *
+                0.5
+            );
+
+            path {
+              stroke: var(--_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, blue));
+            }
+          }
+        }
+      }
+
+      &[data-control-type="Side"] {
+        .embla__viewport {
+          width: calc(100% - 120px);
+          margin-inline: auto;
+        }
+        .left-button {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+        .right-button {
+          position: absolute;
+
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      &[data-thumbnail-placement="top"] {
+        flex-direction: column-reverse;
+      }
+      &[data-thumbnail-placement="bottom"] {
+        flex-direction: column;
+      }
+      &[data-thumbnail-placement="left"] {
+        flex-direction: row-reverse;
+
+        .embla__thumbs {
+          width: var(--_ctm-lt-tl-se);
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      &[data-thumbnail-placement="right"] {
+        flex-direction: row;
+        .embla__thumbs {
+          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      .embla__dots {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+        gap: 6px;
+        margin-top: 16px;
+
+        &[data-control-type="Bottom-Overflow"] {
+          position: absolute;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 75%;
+        }
+        .embla__dot {
+          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-or-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
+          );
+
+          touch-action: manipulation;
+          display: inline-flex;
+          text-decoration: none;
+          cursor: pointer;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          // width: 0.6rem;
+          // height: 0.6rem;
+          width: var(
+            --_ctm-mob-spo-lt-pn-ds-se,
+            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+          );
+          height: var(
+            --_ctm-mob-spo-lt-pn-ds-se,
+            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+        }
+        .embla__dot:after {
+          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+          width: var(
+            --_ctm-mob-spo-lt-pn-ds-se,
+            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+          );
+          height: var(
+            --_ctm-mob-spo-lt-pn-ds-se,
+            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+          );
+
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          content: "";
+        }
+        .embla__dot--selected:after {
+          box-shadow: inset 0 0 0 1px var(--text-body);
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-ct-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
+          );
+        }
+        &[data-slider-control="Pagination Line"] {
+          .embla__dot {
+            width: var(
+              --_ctm-mob-spo-lt-pn-ds-se,
+              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+            );
+            height: var(
+              --_ctm-mob-spo-lt-pn-ds-se,
+              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-or-le-cr,
+              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
+            );
+            border-radius: 6px;
+          }
+
+          .embla__dot--selected:after {
+            box-shadow: inset 0 0 0 1px var(--text-body);
+            border-radius: 6px;
+            width: var(
+              --_ctm-mob-spo-lt-pn-ds-se,
+              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+            );
+            height: var(
+              --_ctm-mob-spo-lt-pn-ds-se,
+              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-ct-le-cr,
+              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
+            );
+          }
+        }
+      }
+
+      .embla__thumbs {
+        width: 100%;
+        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
+        overflow: hidden;
+        // margin: 10px;
+        padding: 10px;
+
+        .embla__thumbs__viewport {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+        .embla__thumbs__container {
+          display: flex;
+          flex-direction: row;
+          margin-left: calc(var(--thumbs-slide-spacing) * -1);
+          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
+
+          width: 100%;
+          // justify-content: center;
+          // height: 200px;
+
+          .embla__thumbs__slide {
+            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+            & img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .spotlight__slide {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      // flex-direction: column;
+
+      background-color: var(
+        --_ctm-mob-dn-im-se-bd-cr,
+        var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
+      );
+
+      border-color: var(
+        --_ctm-mob-dn-im-se-br-cr,
+        var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-im-se-br-se,
+        var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-im-se-br-wh,
+        var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-im-se-br-rs,
+        var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
+          var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
+          var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
+          var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
+      );
+
+      gap: var(
+        --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
+        var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
+      );
+
+      .spotlight-header {
+        // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
+        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
+        display: flex;
+        flex-direction: column;
+
+        gap: var(
+          --_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
+          var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
+        );
+
+        padding-block: var(
+          --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
+          var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
+        );
+
+        padding-inline: var(
+          --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
+          var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
+        );
+
+        background-color: var(
+          --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
+          var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
+        );
+
+        width: 100%;
+
+        border-color: var(
+          --_ctm-mob-dn-im-tt-cr-dn-br-cr,
+          var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
+        );
+
+        border-style: var(
+          --_ctm-mob-dn-im-tt-cr-dn-br-se,
+          var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
+        );
+
+        border-width: var(
+          --_ctm-mob-dn-im-tt-cr-dn-br-wh,
+          var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
+        );
+
+        border-radius: var(
+          --_ctm-mob-dn-im-tt-cr-dn-br-rs,
+          var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
+        );
+
+        box-shadow: var(
+          --_show-shadow,
+          var(
+              --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
+            )
+            var(
+              --_ctm-mob-dn-im-tt-cr-dn-sw-br,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
+            )
+        );
+
+        & h3 {
+          color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
+
+          font-family: var(
+            --_ctm-mob-dn-im-se-ft-fy,
+            var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-im-se-tt-tm,
+            var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-im-se-wd-wp,
+            var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-im-se-wd-bk,
+            var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
+          );
+
+          font-size: var(
+            --_ctm-mob-dn-im-se-ft-se,
+            var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
+          );
+
+          font-weight: var(
+            --_ctm-mob-dn-im-se-ft-wt,
+            var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
+          );
+
+          font-style: var(
+            --_ctm-mob-dn-im-se-ft-se-ic,
+            var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
+          );
+
+          text-align: var(
+            --_ctm-mob-dn-im-se-tt-an,
+            var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
+          );
+
+          letter-spacing: var(
+            --_ctm-mob-dn-im-se-lr-sg,
+            var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
+          );
+
+          line-height: var(
+            --_ctm-mob-dn-im-se-le-ht,
+            var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
+          );
+
+          text-decoration: var(
+            --_ctm-mob-dn-im-se-ue,
+            var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
+          );
+        }
+
+        & p {
+          color: var(
+            --_ctm-mob-dn-im-se-cr-dc,
+            var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
+          );
+
+          font-family: var(
+            --_ctm-mob-dn-im-se-ft-fy-dc,
+            var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-im-se-tt-tm-dc,
+            var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-im-se-wd-wp-dc,
+            var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))
+          );
+          word-break: var(
+            --_ctm-mob-dn-im-se-wd-bk-dc,
+            var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
+          );
+
+          font-size: var(
+            --_ctm-mob-dn-im-se-ft-se-dc,
+            var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
+          );
+
+          font-weight: var(
+            --_ctm-mob-dn-im-se-ft-wt-dc,
+            var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
+          );
+
+          font-style: var(
+            --_ctm-mob-dn-im-se-ft-se-ic-dc,
+            var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
+          );
+
+          text-align: var(
+            --_ctm-mob-dn-im-se-tt-an-dc,
+            var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
+          );
+
+          letter-spacing: var(
+            --_ctm-mob-dn-im-se-lr-sg-dc,
+            var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
+          );
+
+          line-height: var(
+            --_ctm-mob-dn-im-se-le-ht-dc,
+            var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
+          );
+
+          text-decoration: var(
+            --_ctm-mob-dn-im-se-ue-dc,
+            var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
+          );
+        }
+
+        // h3 {
+        //   margin-bottom: var(--_mb-4);
+        // }
+      }
+      > img {
+        object-fit: cover;
+      }
+      &[data-text-position="On Image"] {
+        .spotlight-header {
+          width: 100%;
+          // height: 100%;
+          position: absolute;
+        }
+
+        &[data-widget-alignment="top"] {
+          // align-items: flex-start;
+
+          .spotlight-header {
+            top: 0;
+
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          // align-items: center;
+
+          .spotlight-header {
+            top: 50%;
+            transform: translateY(-50%);
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          // align-items: flex-end;
+          .spotlight-header {
+            bottom: 0;
+
+            justify-content: flex-end;
+          }
+        }
+      }
+
+      &[data-text-position="top"] {
+        flex-direction: column;
+      }
+
+      &[data-text-position="bottom"] {
+        flex-direction: column-reverse;
+      }
+      &[data-text-position="left"] {
+        flex-direction: row;
+
+        .spotlight-header {
+          width: fit-content;
+          height: 100%;
+        }
+        &[data-widget-alignment="top"] {
+          align-items: flex-start;
+
+          .spotlight-header {
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          align-items: center;
+
+          .spotlight-header {
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          align-items: flex-end;
+
+          .spotlight-header {
+            justify-content: flex-end;
+          }
+        }
+      }
+      &[data-text-position="right"] {
+        flex-direction: row-reverse;
+        .spotlight-header {
+          width: fit-content;
+          height: 100%;
+        }
+
+        &[data-widget-alignment="top"] {
+          align-items: flex-start;
+
+          .spotlight-header {
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          align-items: center;
+
+          .spotlight-header {
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          align-items: flex-end;
+
+          .spotlight-header {
+            justify-content: flex-end;
+          }
+        }
+      }
+      & > img {
+        width: 100%;
+        height: 100%;
+        //   object-fit: cover;
+
+        // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
+        // object-fit: cover;
+
+        &[data-has-title="true"] {
+          height: 85%;
+        }
+
+        /* display: block; */
+      }
+    }
+
+    .load__more__div {
+      display: flex;
+      justify-content: center;
+      margin-block: 12px;
+      & > button {
+        padding-inline: 24px;
+        border: 1px solid gray;
+        padding-block: 12px;
+        border-radius: 6px;
+      }
+    }
+    .embla__slide {
+      flex: 0 0 100%;
+    }
+
+    .spotlight__container {
+      display: flex;
+      width: 80%;
+      margin: 0 auto;
+      justify-content: center;
+      padding: 30px 24px;
+
+      .spotlight__leftsection {
+        background: linear-gradient(90deg, #ffffff 0.05%, #f5f5f5 99.95%);
+        align-self: center;
+        padding: 30px 24px;
+      }
+
+      .spotlight__title {
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 125%;
+        color: #000000;
+      }
+
+      .spotlight__start {
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 150%;
+        letter-spacing: -0.02em;
+        color: #303234;
+        padding-top: 16px;
+      }
+
+      .spotlight__price {
+        font-style: normal;
+        font-weight: 800;
+        font-size: 24px;
+        line-height: 150%;
+        letter-spacing: -0.02em;
+        color: #303234;
+        padding-top: 4px;
+      }
+
+      .spotlight__deal {
+        font-style: italic;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        letter-spacing: -0.02em;
+        color: #303234;
+
+        span {
+          font-weight: 700;
+        }
+      }
+
+      .spotlight__swatchimages {
+        padding-top: 24px;
+        display: flex;
+        gap: 6px;
+
+        li {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          background: #c2a893;
+          list-style: none;
+        }
+
+        .active {
+          border: 2px solid #fff;
+          width: 28px;
+          border-radius: 100px;
+          height: 20px;
+          outline: 2px solid #626262;
+        }
+      }
+
+      .spotlight__cart {
+        cursor: pointer;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+        text-align: center;
+        letter-spacing: -0.02em;
+        color: #ffffff;
+        padding: 12px 24px;
+        background: #243dc6;
+        border: 0;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-top: 24px;
+
+        span {
+          svg {
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+
+    .connector__wrapper[data-line-style="dotted"] .line-horizontal {
+      border-top-style: dotted !important;
+    }
+    .connector__wrapper[data-line-style="dashed"] .line-horizontal {
+      border-top-style: dashed !important;
+    }
+
+    .connector__wrapper[data-line-style="dashed"] .line-vertical {
+      border-right-style: dashed !important;
+    }
+
+    .connector__wrapper[data-line-style="dotted"] .line-vertical {
+      border-right-style: dotted !important;
+    }
+
+    .connector__wrapper[data-line-type="straight"] .line-vertical {
+      transform: rotate(0deg) !important;
+    }
+
+    .connector__wrapper[data-line-bend="Straight"] .line-vertical {
+      transform: rotate(0deg) !important;
+    }
+    .connector__wrapper[data-line-bend="UP"] .line-vertical {
+      top: -16px !important;
+      left: -10px !important;
+      transform: rotate(-27deg) !important;
+    }
+
+    .spotlight__img__container {
+      position: relative;
+      width: 400px;
+      margin: 0 auto;
+      // border: 1px solid #333;
+      background-image: url("https://sellerscommerce.sirv.com/00000000-0000-0000-0000-000000000000/media/spotlight_element.png");
+      height: 500px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+
+    // Top Left point container
+    .spotlight__pointTopLeft {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+
+      .spotlight__points {
+        display: flex;
+        align-items: center;
+        z-index: 2;
+
+        .label__box {
+          position: absolute;
+          left: -68px;
+          top: 54px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          width: 77.82px;
+          height: auto;
+          background: #ffffff;
+          border: 0.659236px solid #243dc6;
+          border-radius: 2.63694px;
+          padding: var(--_ctm-spo-lt-st-bx-pg, var(--_ctm-spo-lt-st-tt-pg));
+          font-weight: 400;
+          font-size: var(--_ctm-spo-lt-st-tt-ft-se);
+          line-height: var(--_ctm-spo-lt-st-tt-le-ht);
+          letter-spacing: var(--_ctm-spo-lt-st-tt-lr-sg, var(--_ctm-spo-lt-st-im-sg));
+          text-align: center;
+          color: #667085;
+
+          svg {
+            width: var(--_ctm-spo-lt-st-in-se);
+            height: var(--_ctm-spo-lt-st-in-se);
+            padding: var(--_ctm-spo-lt-st-in-pg);
+          }
+        }
+
+        .connector__wrapper {
+          .line-horizontal {
+            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
+            height: 1px;
+            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            top: -18px;
+            position: relative;
+            right: 0px;
+          }
+
+          &[data-line-style="dotted"] {
+            .line-horizontal {
+              border-top-style: dotted;
+            }
+          }
+
+          .line-vertical {
+            width: 1px;
+            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
+            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            position: relative;
+            top: 18px;
+            left: -10px;
+            transform: rotate(27deg);
+            border-radius: 31px;
+          }
+        }
+
+        .circle-marker {
+          background-color: white;
+          border: 4px solid #0000001a;
+          border-radius: 50%;
+          width: var(
+            --_ctm-mob-spo-lt-ht-in-se,
+            var(--_ctm-tab-spo-lt-ht-in-se, var(--_ctm-spo-lt-ht-in-se))
+          );
+          height: var(
+            --_ctm-mob-spo-lt-ht-in-se,
+            var(--_ctm-tab-spo-lt-ht-in-se, var(--_ctm-spo-lt-ht-in-se))
+          );
+        }
+      }
+    }
+
+    // Top Right point container
+    .spotlight__pointTopRight {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+
+      .spotlight__points {
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        z-index: 2;
+
+        .label__box {
+          position: absolute;
+          right: -68px;
+          top: 54px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          width: 77.82px;
+          height: auto;
+          background: #ffffff;
+          border: 0.659236px solid #243dc6;
+          border-radius: 2.63694px;
+          padding: 8px 14px 6px 14px;
+          font-weight: 400;
+          font-size: 10.5478px;
+          text-align: center;
+          color: #667085;
+        }
+
+        .connector__wrapper {
+          .line-horizontal {
+            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
+            height: 1px;
+            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            top: -18px;
+            position: relative;
+            right: 0px;
+          }
+
+          .line-vertical {
+            width: 1px;
+            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
+            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            position: relative;
+            top: 18px;
+            right: -92px;
+            transform: rotate(-27deg);
+            border-radius: 31px;
+          }
+        }
+
+        .circle-marker {
+          background-color: white;
+          border: 4px solid #0000001a;
+          border-radius: 50%;
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+
+    // Bottom Left point container
+    .spotlight__pointBottomLeft {
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+
+      .spotlight__points {
+        display: flex;
+        align-items: center;
+        z-index: 2;
+
+        .label__box {
+          position: absolute;
+          left: -68px;
+          top: -44px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          width: 77.82px;
+          height: auto;
+          background: #ffffff;
+          border: 0.659236px solid #243dc6;
+          border-radius: 2.63694px;
+          padding: 8px 14px 6px 14px;
+          font-weight: 400;
+          font-size: 10.5478px;
+          text-align: center;
+          color: #667085;
+        }
+
+        .connector__wrapper {
+          .line-horizontal {
+            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
+            height: 1px;
+            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            top: -18px;
+            position: relative;
+            right: 0px;
+          }
+
+          .line-vertical {
+            width: 1px;
+            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
+            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            position: relative;
+            top: -16px;
+            left: -10px;
+            transform: rotate(-27deg);
+            border-radius: 31px;
+          }
+        }
+
+        .circle-marker {
+          background-color: white;
+          border: 4px solid #0000001a;
+          border-radius: 50%;
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+
+    // Bottom Right point container
+    .spotlight__pointBottomRight {
+      position: absolute;
+      bottom: 0px;
+      right: 0px;
+
+      .spotlight__points {
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        z-index: 2;
+
+        .label__box {
+          position: absolute;
+          right: -68px;
+          top: -44px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          width: 77.82px;
+          height: auto;
+          background: #ffffff;
+          border: 0.659236px solid #243dc6;
+          border-radius: 2.63694px;
+          padding: 8px 14px 6px 14px;
+          font-weight: 400;
+          font-size: 10.5478px;
+          text-align: center;
+          color: #667085;
+        }
+
+        .connector__wrapper {
+          .line-horizontal {
+            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
+            height: 1px;
+            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            top: -18px;
+            position: relative;
+            right: 0px;
+          }
+
+          .line-vertical {
+            width: 1px;
+            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
+            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
+            position: relative;
+            top: -15.3px;
+            right: -92px;
+            transform: rotate(-153deg);
+            border-radius: 31px;
+          }
+        }
+
+        .circle-marker {
+          background-color: white;
+          border: 4px solid #0000001a;
+          border-radius: 50%;
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+
+    .embla__customControls {
+      // position: absolute;
+      .custom__arrowsPosition {
+        .embla__button--prev {
+          position: absolute !important;
+          left: 0 !important;
+          top: 50% !important;
+          transform: translateY(-50%) !important;
+        }
+
+        .embla__button--next {
+          position: absolute !important;
+          right: 0 !important;
+          top: 50% !important;
+          transform: translateY(-50%) !important;
+        }
+      }
+    }
+  }
+}