@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.51

package/dist/product-image-bundles.scss

@@ -0,0 +1,1512 @@
+.product__image_element {
+  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+  width: var(
+    --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-wh,
+    var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-wh))
+  );
+  // height: var(--_ctm-mob-dn-pt-pl-dn-pt-ie-lt-ht, var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-ht, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-ht)));
+
+  &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
+    height: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-ht,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-ht, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-ht))
+    );
+  }
+
+  // &[data-view-state="full"] {
+  //   width: auto;
+  //   // height: 100%;
+  //   margin: 0;
+  //   justify-self: stretch !important;
+  //   align-self: stretch !important;
+  //   cursor: auto;
+  // }
+
+  // &[data-view-state="full"] {
+  //   aspect-ratio: 1/0.01;
+  //   & > .wrapper {
+  //     & > div {
+  //       height: 100%;
+  //     }
+  //   }
+  //   img {
+  //     height: 100%;
+  //     object-fit: cover;
+  //   }
+  // }
+
+  &[data-show-shadow="false"] {
+    --_show-shadow: none;
+  }
+  .product_image {
+    height: 100%;
+    object-fit: contain;
+  }
+  .product__image__wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .main-image {
+    position: relative;
+    flex: 1;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+    background: white;
+    cursor: zoom-in;
+
+    img {
+      width: 100%;
+      height: auto;
+      object-fit: contain;
+      display: block;
+    }
+
+    // .lens-overlay {
+    //   position: absolute;
+    //   width: 100px;
+    //   height: 100px;
+    //   pointer-events: none;
+    //   border-radius: 50%;
+    //   border: 1px solid rgba(0, 0, 0, 0.2);
+    //   box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+    //   background-repeat: no-repeat;
+    //   backdrop-filter: brightness(1.1);
+    //   z-index: 5;
+    // }
+
+    .lens-overlay {
+      position: absolute;
+      pointer-events: none;
+      border: 1px solid rgba(0, 0, 0, 0.3);
+      z-index: 10;
+      background-color: rgba(255, 255, 255, 0.3);
+      pointer-events: none;
+      z-index: 10;
+    }
+  }
+
+  // .magnifier-box {
+  //   position: absolute;
+  //   top: 0;
+  //   right: -102%;
+  //   z-index: 10;
+  //   // width: 70vw;
+  //   // height: 95vh;
+  //   width: 600px;
+  //   height: 600px;
+  //   background: white;
+  //   border: 1px solid #ccc;
+  //   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+
+  //   .magnifier {
+  //     width: 100%;
+  //     height: 100%;
+  //     background-repeat: no-repeat;
+  //     background-position: center;
+  //     border-radius: 4px;
+  //   }
+
+  //   .magnifier-placeholder {
+  //     text-align: center;
+  //     padding: 1rem;
+  //   }
+  // }
+
+  .magnifier-box {
+    position: absolute;
+    right: -70%;
+    top: 0;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background: #fff;
+    z-index: 9;
+    img {
+      position: absolute;
+      will-change: transform;
+    }
+  }
+
+  a:has(> img.text-element) {
+    // max-height: 100%;
+  }
+
+  .text-element {
+    width: 100%;
+    height: 100%;
+    // background: #6d96e4;
+    // padding: 10px;
+    // font-weight: 600;
+    // color: rgba(75, 69, 70, 1);
+    // max-width: 100%;
+    // max-height: 100%;
+    // object-fit: contain;
+  }
+  .gallery-slider-element {
+    --text-high-contrast-rgb-value: 49, 49, 49;
+    --detail-medium-contrast: rgb(234, 234, 234);
+    --text-body: rgb(54, 49, 61);
+    overflow: hidden;
+
+    position: relative;
+    background-color: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-bd-cr,
+      var(
+        --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-bd-cr,
+        var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-bd-cr, var(--_tst-dn-pt-pl-dn-pt-ie-gy-wt-se-bd-cr))
+      )
+    );
+
+    padding: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-pg,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-pg, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-pg))
+    );
+
+    display: flex;
+    flex-direction: column;
+    --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+
+    gap: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-lt-gy-tt-ad-im-sg,
+      var(
+        --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-lt-gy-tt-ad-im-sg,
+        var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-lt-gy-tt-ad-im-sg)
+      )
+    );
+
+    width: 100%;
+    height: 100%;
+    border-color: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr))
+    );
+
+    border-style: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se))
+    );
+
+    border-width: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh))
+    );
+
+    border-radius: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-rs,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-rs, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-rs))
+    );
+
+    box-shadow: var(
+      --_show-shadow,
+      var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-ae,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-ae,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-ae)
+          )
+        )
+        var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-br,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-br,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-br)
+          )
+        )
+        var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-sd,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-sd,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-sd)
+          )
+        )
+        var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-cr,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-cr,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-cr)
+          )
+        )
+    );
+  }
+
+  .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: 100%;
+        grid-template-columns: repeat(
+          var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-se,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-is-pr-se))
+          ),
+          calc(
+            100% /
+              var(
+                --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-se,
+                var(
+                  --_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-se,
+                  var(--_ctm-dn-pt-pl-dn-pt-ie-lt-is-pr-se)
+                )
+              )
+          )
+        );
+
+        grid-auto-flow: column;
+        gap: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-im-gp,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-im-gp, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-im-gp))
+        );
+
+        &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+          height: calc(
+            100% - calc(
+                var(
+                    --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                    var(
+                      --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                      var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se)
+                    )
+                  ) +
+                  10px
+              )
+          );
+        }
+
+        &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+          height: calc(
+            100% - calc(
+                var(
+                    --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-le-le-ht,
+                    var(
+                      --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-le-le-ht,
+                      var(--_ctm-dn-pt-pl-dn-pt-ie-pn-le-le-ht)
+                    )
+                  ) +
+                  20px
+              )
+          );
+        }
+
+        &[data-control-type="Bottom"][data-slider-control="Dots"] {
+          height: calc(
+            100% - calc(
+                var(
+                    --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-ds-dt-se,
+                    var(
+                      --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-ds-dt-se,
+                      var(--_ctm-dn-pt-pl-dn-pt-ie-pn-ds-dt-se)
+                    )
+                  ) +
+                  20px
+              )
+          );
+        }
+
+        .embla__slide {
+          flex: 0 0 auto;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    &:not([data-display-style="Column"]) {
+      .embla__container {
+        grid-auto-columns: calc(
+          100% /
+            var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-se,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-se,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-lt-is-pr-se)
+              )
+            )
+        );
+      }
+    }
+
+    &[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-height);
+
+          grid-template-columns: repeat(
+            var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-rw,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-rw,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-lt-is-pr-rw)
+              )
+            ),
+            1fr
+          );
+
+          grid-template-rows: unset;
+
+          grid-auto-flow: row;
+          &[data-overflow-hidden="true"] {
+            overflow: hidden;
+          }
+          .embla__slide {
+            aspect-ratio: 1/1.1;
+          }
+        }
+      }
+    }
+
+    &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
+      .embla__viewport {
+        .embla__container {
+          grid-template-rows: repeat(
+            var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-cn,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-cn,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-lt-is-pr-cn)
+              )
+            ),
+            calc(
+              100% /
+                var(
+                  --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-cn,
+                  var(
+                    --_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-cn,
+                    var(--_ctm-dn-pt-pl-dn-pt-ie-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-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+        }
+
+        .embla__container {
+          overflow: hidden;
+          height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+
+          // min-height: var(--_ctm-height);
+
+          grid-template-columns: repeat(
+            var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-rw,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-rw,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-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-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+        }
+        .embla__container {
+          overflow: unset;
+
+          display: block;
+          column-count: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-is-pr-rw,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-is-pr-rw, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-is-pr-rw))
+          );
+          gap: unset;
+          column-gap: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-im-gp,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-im-gp, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-im-gp))
+          );
+
+          // height: auto;
+
+          height: auto;
+
+          .embla__slide {
+            // break-inside: avoid;
+            margin-bottom: var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-im-gp,
+              var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-im-gp, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-im-gp))
+            );
+
+            height: unset;
+            .gallery__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="Bottom-Overflow"] {
+        transform: translateX(-50%);
+        width: 100%;
+        justify-content: center;
+        gap: 12px;
+        // top: unset;
+        // bottom: 6px;
+        bottom: 10px;
+        top: unset;
+      }
+      &[data-control-type="Bottom"] {
+        transform: unset;
+        position: static;
+        width: 100%;
+        justify-content: center;
+        gap: 12px;
+        margin-top: 10px;
+      }
+    }
+    &[data-control-type="Side"] {
+      .left-button,
+      .right-button {
+        background-color: transparent;
+      }
+    }
+    &[data-background-shape="Round"] {
+      .left-button,
+      .right-button {
+        // background-color: var(
+        //   --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-bd-cr,
+        //   var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-bd-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-bd-cr))
+        // );
+        &:not(:disabled):hover {
+          @include BgColorLighter(var(--_thm-py-bs-hr-se-bd-cr), 5%);
+        }
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .left-button {
+      padding: 10px;
+      border-radius: 50%;
+      border: none;
+      width: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se))
+      );
+      height: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se))
+      );
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      outline: none;
+      margin-left: 12px;
+      span {
+        display: flex;
+        svg {
+          width: calc(
+            var(
+                --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                var(
+                  --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                  var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se)
+                )
+              ) *
+              0.5
+          );
+          height: calc(
+            var(
+                --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                var(
+                  --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                  var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se)
+                )
+              ) *
+              0.5
+          );
+
+          path {
+            stroke: var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-cr,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-cr,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-cr)
+              )
+            );
+          }
+        }
+      }
+      &:disabled {
+        & svg {
+          path {
+            stroke: rgb(192, 192, 192);
+          }
+        }
+      }
+    }
+    .right-button {
+      border-radius: 50%;
+      border: none;
+      width: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se))
+      );
+      height: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se))
+      );
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      outline: none;
+      margin-right: 12px;
+      padding: 10px;
+      span {
+        display: flex;
+        svg {
+          width: calc(
+            var(
+                --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                var(
+                  --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                  var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se)
+                )
+              ) *
+              0.5
+          );
+          height: calc(
+            var(
+                --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                var(
+                  --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                  var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se)
+                )
+              ) *
+              0.5
+          );
+
+          path {
+            stroke: var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-cr,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-cr,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-cr)
+              )
+            );
+          }
+        }
+      }
+      &:disabled {
+        & svg {
+          path {
+            stroke: rgb(192, 192, 192);
+          }
+        }
+      }
+    }
+    .icon {
+      display: flex;
+      svg {
+        width: calc(
+          var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se)
+              )
+            ) *
+            0.5
+        );
+        height: calc(
+          var(
+              --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+              var(
+                --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-se,
+                var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-se)
+              )
+            ) *
+            0.5
+        );
+
+        path {
+          stroke: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-aw-cr,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-aw-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-aw-cr))
+          );
+        }
+      }
+    }
+
+    &[data-control-type="Side"] {
+      .embla__viewport {
+        width: calc(100% - 120px);
+        margin-inline: auto;
+      }
+    }
+
+    &[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-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-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-dn-pt-pl-dn-pt-ie-lt-tl-se,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
+        );
+
+        height: 100%;
+
+        & .embla__thumbs__container {
+          flex-direction: column;
+          height: 100%;
+        }
+      }
+    }
+    &[data-control-type="Side"] {
+      flex-direction: row;
+      align-items: center;
+    }
+    .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-pt-pl-dn-pt-ie-pn-ds-or-dt-cr,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-ds-or-dt-cr,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-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-dn-pt-pl-dn-pt-ie-pn-ds-dt-se,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-ds-dt-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-ds-dt-se))
+        );
+        height: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-ds-dt-se,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-ds-dt-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-ds-dt-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-dn-pt-pl-dn-pt-ie-pn-ds-dt-se,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-ds-dt-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-ds-dt-se))
+        );
+        height: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-ds-dt-se,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-ds-dt-se, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-ds-dt-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-pt-pl-dn-pt-ie-pn-ds-ct-dt-cr,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-ds-ct-dt-cr,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-pn-ds-ct-dt-cr)
+          )
+        );
+      }
+      &[data-slider-control="Pagination Line"] {
+        .embla__dot {
+          width: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-le-le-wh,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-le-le-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-le-le-wh))
+          );
+
+          height: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-le-le-ht,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-le-le-ht, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-le-le-ht))
+          );
+
+          background-color: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-le-or-le-cr,
+            var(
+              --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-le-or-le-cr,
+              var(--_ctm-dn-pt-pl-dn-pt-ie-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-dn-pt-pl-dn-pt-ie-pn-le-le-wh,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-le-le-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-le-le-wh))
+          );
+
+          height: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-le-le-ht,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-le-le-ht, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-le-le-ht))
+          );
+
+          // background-color: #fff;
+          background-color: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-le-ct-le-cr,
+            var(
+              --_ctm-tab-dn-pt-pl-dn-pt-ie-pn-le-ct-le-cr,
+              var(--_ctm-dn-pt-pl-dn-pt-ie-pn-le-ct-le-cr)
+            )
+          );
+        }
+      }
+    }
+
+    .embla__thumbs {
+      width: 100%;
+      height: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-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-dn-pt-pl-dn-pt-ie-lt-tl-sg,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-sg, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-sg))
+        );
+
+        width: 100%;
+        justify-content: center;
+        // height: 200px;
+
+        .embla__thumbs__slide {
+          // min-width: var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se);
+          max-width: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
+          );
+
+          height: var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-tl-se,
+            var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-tl-se, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-tl-se))
+          );
+
+          & img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+    }
+  }
+
+  .gallery__slide {
+    img[data-has-link="true"] {
+      cursor: pointer;
+    }
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    display: flex;
+    flex: 0 0 auto;
+    div {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+
+    // flex-direction: column;
+
+    background-color: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-bd-cr,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-bd-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-bd-cr))
+    );
+    border-color: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-cr,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-cr))
+    );
+    border-style: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-se,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-se))
+    );
+    border-width: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-wh,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-wh))
+    );
+    border-radius: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-rs,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-rs, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-rs))
+    );
+
+    box-shadow: var(
+      --_show-shadow,
+      var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-sw-ae,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-sw-ae, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-sw-ae))
+        )
+        var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-sw-br,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-sw-br, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-sw-br))
+        )
+        var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-sw-sd,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-sw-sd, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-sw-sd))
+        )
+        var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-sw-cr,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-sw-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-sw-cr))
+        )
+    );
+
+    gap: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-lt-gy-tt-ad-im-sg,
+      var(
+        --_ctm-tab-dn-pt-pl-dn-pt-ie-im-lt-gy-tt-ad-im-sg,
+        var(--_ctm-dn-pt-pl-dn-pt-ie-im-lt-gy-tt-ad-im-sg)
+      )
+    );
+
+    .gallery-header {
+      display: flex;
+      flex-direction: column;
+      gap: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-te-ad-dn-pt-pl-dn-pt-ie-sg,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-te-ad-dn-pt-pl-dn-pt-ie-sg,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-te-ad-dn-pt-pl-dn-pt-ie-sg)
+        )
+      );
+      padding-block: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-tt-vl-pg,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-tt-vl-pg,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-tt-vl-pg)
+        )
+      );
+      padding-inline: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-tt-hl-pg,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-tt-hl-pg,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-lt-tt-hl-pg)
+        )
+      );
+      background-color: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-bd-cr,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-bd-cr,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-bd-cr)
+        )
+      );
+      width: 100%;
+      border-color: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-cr,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-cr,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-cr)
+        )
+      );
+      border-style: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-se,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-se,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-se)
+        )
+      );
+      border-width: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-wh,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-wh,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-wh)
+        )
+      );
+      border-radius: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-rs,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-rs,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-br-rs)
+        )
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-ae,
+            var(
+              --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-ae,
+              var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-ae)
+            )
+          )
+          var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-br,
+            var(
+              --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-br,
+              var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-br)
+            )
+          )
+          var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-sd,
+            var(
+              --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-sd,
+              var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-sd)
+            )
+          )
+          var(
+            --_ctm-mob-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-cr,
+            var(
+              --_ctm-tab-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-cr,
+              var(--_ctm-dn-pt-pl-dn-pt-ie-im-tt-cr-dn-pt-pl-dn-pt-ie-sw-cr)
+            )
+          )
+      );
+
+      & h3 {
+        color: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-cr,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-cr))
+        );
+        font-family: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-fy,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-fy, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-fy))
+        );
+        font-size: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-se,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-se, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-se))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-wt,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-wt, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-wt))
+        );
+        font-style: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-se-ic,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-se-ic,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-se-ic)
+          )
+        );
+        text-align: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-tt-an,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-tt-an, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-tt-an))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-lr-sg,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-lr-sg, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-le-ht,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-le-ht, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-le-ht))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ue,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ue, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ue))
+        );
+      }
+
+      & p {
+        color: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-cr-dc,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-cr-dc, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-cr-dc))
+        );
+        font-family: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-fy-dc,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-fy-dc,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-fy-dc)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-se-dc,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-se-dc,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-se-dc)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-wt-dc,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-wt-dc,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-wt-dc)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ft-se-ic-dc,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ft-se-ic-dc,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ft-se-ic-dc)
+          )
+        );
+        text-align: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-tt-an-dc,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-tt-an-dc,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-tt-an-dc)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-lr-sg-dc,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-lr-sg-dc,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-lr-sg-dc)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-le-ht-dc,
+          var(
+            --_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-le-ht-dc,
+            var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-le-ht-dc)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-ue-dc,
+          var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-ue-dc, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ue-dc))
+        );
+      }
+    }
+
+    img {
+      object-fit: contain;
+    }
+    &[data-text-position="On Image"] {
+      .gallery-header {
+        width: 100%;
+        // height: 100%;
+        position: absolute;
+      }
+      a:has(img) {
+        width: 100%;
+      }
+
+      &[data-widget-alignment="top"] {
+        // align-items: flex-start;
+
+        .gallery-header {
+          top: 0;
+
+          justify-content: flex-start;
+        }
+      }
+      &[data-widget-alignment="center"] {
+        // align-items: center;
+
+        .gallery-header {
+          top: 50%;
+          transform: translateY(-50%);
+          justify-content: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        // align-items: flex-end;
+        .gallery-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;
+
+      .gallery-header {
+        width: fit-content;
+        height: 100%;
+      }
+      &[data-widget-alignment="top"] {
+        align-items: flex-start;
+
+        .gallery-header {
+          justify-content: flex-start;
+        }
+      }
+      &[data-widget-alignment="center"] {
+        align-items: center;
+
+        .gallery-header {
+          justify-content: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        align-items: flex-end;
+
+        .gallery-header {
+          justify-content: flex-end;
+        }
+      }
+    }
+    &[data-text-position="right"] {
+      flex-direction: row-reverse;
+      .gallery-header {
+        width: fit-content;
+        height: 100%;
+      }
+
+      &[data-widget-alignment="top"] {
+        align-items: flex-start;
+
+        .gallery-header {
+          justify-content: flex-start;
+        }
+      }
+      &[data-widget-alignment="center"] {
+        align-items: center;
+
+        .gallery-header {
+          justify-content: center;
+        }
+      }
+      &[data-widget-alignment="bottom"] {
+        align-items: flex-end;
+
+        .gallery-header {
+          justify-content: flex-end;
+        }
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-rs,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-rs, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-rs))
+      );
+      //   object-fit: cover;
+
+      // object-fit: var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-ot-ft, var(--_tst-dn-pt-pl-dn-pt-ie-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;
+    }
+  }
+}
+
+.product-grid {
+  .tiles-grid-view {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_ctm-dn-te-cd-lt-im-sg);
+    width: 100%;
+
+    .tiles-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: var(--_ctm-dn-te-cd-lt-im-sg);
+      width: 100%;
+
+      .tile {
+        // width: 350px !important;
+        width: 100%;
+        overflow: hidden;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--_ctm-dn-te-cd-lt-im-gp);
+        justify-content: space-between;
+
+        .tile-content {
+          display: flex;
+          flex-direction: column;
+          gap: var(--_ctm-dn-te-cd-lt-ig-tt-sg);
+          align-items: flex-start;
+          height: 100%;
+          width: 100%;
+          .tile_bundle_name {
+            display: flex;
+            align-items: flex-start;
+            justify-content: flex-start;
+            font-family: var(--_ctm-dn-be-ne-ft-fy);
+            font-size: var(--_ctm-dn-be-ne-ft-se);
+            color: var(--_ctm-dn-be-ne-cr);
+            font-weight: var(--_ctm-dn-be-ne-ft-wt);
+            font-style: var(--_ctm-dn-be-ne-ft-se-ic);
+            text-decoration: var(--_ctm-dn-be-ne-ue);
+            text-align: var(--_ctm-dn-be-ne-tt-an);
+            letter-spacing: var(--_ctm-dn-be-ne-lr-sg);
+            line-height: var(--_ctm-dn-be-ne-le-ht);
+            background-color: var(--_ctm-dn-be-ne-bd-cr);
+            border-width: var(--_ctm-dn-be-ne-br-wh);
+            border-color: var(--_ctm-dn-be-ne-br-cr);
+            border-style: var(--_ctm-dn-be-ne-br-se);
+            border-radius: var(--_ctm-dn-be-ne-br-rs);
+            box-shadow: var(--_ctm-dn-be-ne-sw-ae) var(--_ctm-dn-be-ne-sw-br)
+              var(--_ctm-dn-be-ne-sw-sd) var(--_ctm-dn-be-ne-sw-cr);
+          }
+          .tile_category_name {
+            display: flex;
+            align-items: flex-start;
+            justify-content: flex-start;
+            font-family: var(--_ctm-dn-cy-ne-ft-fy);
+            font-size: var(--_ctm-dn-cy-ne-ft-se);
+            color: var(--_ctm-dn-cy-ne-cr);
+            font-weight: var(--_ctm-dn-cy-ne-ft-wt);
+            font-style: var(--_ctm-dn-cy-ne-ft-se-ic);
+            text-decoration: var(--_ctm-dn-cy-ne-ue);
+            text-align: var(--_ctm-dn-cy-ne-tt-an);
+            letter-spacing: var(--_ctm-dn-cy-ne-lr-sg);
+            line-height: var(--_ctm-dn-cy-ne-le-ht);
+            background-color: var(--_ctm-dn-cy-ne-bd-cr);
+            border-width: var(--_ctm-dn-cy-ne-br-wh);
+            border-color: var(--_ctm-dn-cy-ne-br-cr);
+            border-style: var(--_ctm-dn-cy-ne-br-se);
+            border-radius: var(--_ctm-dn-cy-ne-br-rs);
+            box-shadow: var(--_ctm-dn-cy-ne-sw-ae) var(--_ctm-dn-cy-ne-sw-br)
+              var(--_ctm-dn-cy-ne-sw-sd) var(--_ctm-dn-cy-ne-sw-cr);
+          }
+
+          .brand-tile {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: -webkit-fill-available;
+
+            img {
+              width: 100%;
+              height: 100%;
+              // object-fit: fill;
+            }
+          }
+
+          .product-tile {
+            display: grid;
+            flex: 1 1 auto;
+            row-gap: var(--_ctm-dn-te-cd-lt-te-rw-gp);
+            column-gap: var(--_ctm-dn-te-cd-lt-te-cn-gp);
+            padding: 10px;
+            box-sizing: border-box;
+            width: 100%;
+            // i want height to be mutiple of 2 with --_ctm-dn-te-cd-lt-ie-ht\
+
+            height: calc(var(--_ctm-dn-te-cd-lt-ie-ht) * 2);
+
+            &.images-1 {
+              grid-template-columns: 1fr;
+              grid-template-rows: 1fr;
+            }
+
+            &.images-2 {
+              grid-template-columns: 1fr 1fr;
+              grid-template-rows: 1fr;
+            }
+
+            &.images-3 {
+              grid-template-columns: 1fr 1fr;
+              grid-template-rows: 1fr 1fr;
+
+              .product-image-wrapper:last-child {
+                grid-column: 1 / -1; // span both columns
+              }
+            }
+
+            &.images-4 {
+              grid-template-columns: 1fr 1fr;
+              grid-template-rows: 1fr 1fr;
+            }
+
+            &.animate-flip {
+              .product-image-wrapper {
+                animation: flip 0.6s ease-in-out;
+              }
+
+              @keyframes flip {
+                0% {
+                  transform: rotateY(0deg);
+                }
+                100% {
+                  transform: rotateY(180deg);
+                }
+              }
+            }
+
+            .product-image-wrapper {
+              width: 100%;
+              height: 100%;
+              overflow: hidden;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background-color: var(--_ctm-dn-te-cd-ie-dn-bd-cr);
+              border-width: var(--_ctm-dn-te-cd-ie-dn-br-wh);
+              border-color: var(--_ctm-dn-te-cd-ie-dn-br-cr);
+              border-style: var(--_ctm-dn-te-cd-ie-dn-br-se);
+              border-radius: var(--_ctm-dn-te-cd-ie-dn-br-rs);
+              box-shadow: var(--_ctm-dn-te-cd-ie-dn-sw-ae) var(--_ctm-dn-te-cd-ie-dn-sw-br)
+                var(--_ctm-dn-te-cd-ie-dn-sw-sd) var(--_ctm-dn-te-cd-ie-dn-sw-cr);
+
+              img {
+                // max-height: 135px;
+                height: 100%;
+                width: 100%;
+                // object-fit: fill;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}