@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.60

package/dist/repeater.scss

@@ -9,29 +9,23 @@ $adSlotSliderSelector: ".repeater-ad-slot__inner";
 $sliderControlDragging: "[flex-slider-control-moving='true']";
 $rai: "repeater-advertise-item";
 $listViewSlector: '.lst_vw[data-element-type="repeater"]';
+
 [data-div-type="element"] {
   &[data-element-type="repeater"] {
     // width: var(--_sf-con-nw-wh);
     // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: calc(
-      1% *
-        var(
-          --_ctm-mob-rep-ele-nw-wh-vl,
-          var(--_ctm-tab-rep-ele-nw-wh-vl, var(--_ctm-rep-ele-nw-wh-vl, auto))
-        )
-    );
+    width: calc(1% * var(--_ctm-mob-rep-ele-nw-wh-vl,
+          var(--_ctm-tab-rep-ele-nw-wh-vl, var(--_ctm-rep-ele-nw-wh-vl, auto))));
+
     // width: 100%;
     &:not([data-view-state="full"]) {
-      min-height: var(
-        --_ctm-mob-rep-lt-ht,
-        var(--_ctm-tab-rep-lt-ht, var(--_ctm-rep-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht))))
-      );
+      min-height: var(--_ctm-mob-rep-lt-ht,
+          var(--_ctm-tab-rep-lt-ht, var(--_ctm-rep-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))));
     }
+
     min-height: var();
-    margin: var(
-      --_ctm-mob-rep-lt-mn,
-      var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
-    );
+    margin: var(--_ctm-mob-rep-lt-mn,
+      var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn)))));
 
     &[data-background-type="color"] {
       background-color: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-cr);
@@ -40,753 +34,650 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
     &[data-background-type="gradient"] {
       --_sf-rep-gradient-angle: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ae, 90)} * 1deg);
       --_sf-rep-gradient-start-color: #{prepareMediaVariable(
-          --_ctm-rep-dn-rr-wt-gt-st-cr,
-          transparent
-        )};
-      --_sf-rep-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-st-pn, 0)} * 1%
-      );
-      --_sf-rep-gradient-end-color: #{prepareMediaVariable(
-          --_ctm-rep-dn-rr-wt-gt-ed-cr,
-          transparent
-        )};
-      --_sf-rep-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ed-pn, 100)} * 1%
-      );
-      --_sf-rep-gradient-position: #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-pn, center)};
-
-      &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-rep-gradient-angle),
-          var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
-          var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
-        );
-      }
+ --_ctm-rep-dn-rr-wt-gt-st-cr,
+      transparent)
+    }
+
+    ;
+    --_sf-rep-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-st-pn, 0)} * 1%);
+    --_sf-rep-gradient-end-color: #{prepareMediaVariable(
+ --_ctm-rep-dn-rr-wt-gt-ed-cr,
+    transparent)
+  }
+
+  ;
+  --_sf-rep-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ed-pn, 100)} * 1%);
+  --_sf-rep-gradient-position: #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-pn, center)};
+
+  &[data-gradient-type="Linear Gradient"] {
+    background-image: linear-gradient(var(--_sf-rep-gradient-angle),
+        var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
+        var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position));
+  }
+
+  &[data-gradient-type="Radial Gradient"] {
+    background-image: radial-gradient(circle at var(--_sf-rep-gradient-position),
+        var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
+        var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position));
+  }
+}
+
+&[data-background-type="image"] {
+  background-image: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-ie);
+  background-attachment: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-at);
+  background-position: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn);
+  background-position-y: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn-y);
+  background-repeat: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-rt);
+  background-size: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-se);
+}
+
+// background-color: var(
+//   --_ctm-mob-rep-dn-rr-wt-bd-cr,
+//   var(--_ctm-tab-rep-dn-rr-wt-bd-cr, var(--_ctm-rep-dn-rr-wt-bd-cr))
+// );
+// background-image: var(
+//   --_ctm-mob-rep-dn-rr-wt-bd-ie,
+//   var(--_ctm-tab-rep-dn-rr-wt-bd-ie, var(--_ctm-rep-dn-rr-wt-bd-ie))
+// );
+// background-attachment: var(
+//   --_ctm-mob-rep-dn-rr-wt-bd-at,
+//   var(--_ctm-tab-rep-dn-rr-wt-bd-at, var(--_ctm-rep-dn-rr-wt-bd-at))
+// );
+// background-position: var(
+//   --_ctm-mob-rep-dn-rr-wt-bd-pn,
+//   var(--_ctm-tab-rep-dn-rr-wt-bd-pn, var(--_ctm-rep-dn-rr-wt-bd-pn))
+// );
+// background-repeat: var(
+//   --_ctm-mob-rep-dn-rr-wt-bd-rt,
+//   var(--_ctm-tab-rep-dn-rr-wt-bd-rt, var(--_ctm-rep-dn-rr-wt-bd-rt))
+// );
+// background-size: var(
+//   --_ctm-mob-rep-dn-rr-wt-bd-se,
+//   var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
+// );
+&[data-show-border="true"] {
+  border-color: var(--_ctm-mob-rep-dn-rr-wt-br-cr,
+      var(--_ctm-tab-rep-dn-rr-wt-br-cr, var(--_ctm-rep-dn-rr-wt-br-cr)));
+  border-style: var(--_ctm-mob-rep-dn-rr-wt-br-se,
+      var(--_ctm-tab-rep-dn-rr-wt-br-se, var(--_ctm-rep-dn-rr-wt-br-se)));
+  border-width: var(--_ctm-mob-rep-dn-rr-wt-br-wh,
+      var(--_ctm-tab-rep-dn-rr-wt-br-wh, var(--_ctm-rep-dn-rr-wt-br-wh)));
+}
+
+border-radius: var(--_ctm-mob-rep-dn-rr-wt-br-rs,
+  var(--_ctm-tab-rep-dn-rr-wt-br-rs, var(--_ctm-rep-dn-rr-wt-br-rs)));
+
+// The shadow is configured under the Repeater Widget accordion, so its variables
+// carry that accordion's `rr-wt` segment — without it nothing the builder writes
+// was ever read back. The Show Shadow switch arrives as `data-show-shadow`.
+&[data-show-shadow="false"] {
+  --_show-shadow: none;
+}
+
+box-shadow: var(--_show-shadow,
+  var(--_ctm-mob-rep-dn-rr-wt-sw-ae,
+    var(--_ctm-tab-rep-dn-rr-wt-sw-ae, var(--_ctm-rep-dn-rr-wt-sw-ae, 0))) var(--_ctm-mob-rep-dn-rr-wt-sw-br,
+    var(--_ctm-tab-rep-dn-rr-wt-sw-br, var(--_ctm-rep-dn-rr-wt-sw-br, 0))) var(--_ctm-mob-rep-dn-rr-wt-sw-sd,
+    var(--_ctm-tab-rep-dn-rr-wt-sw-sd, var(--_ctm-rep-dn-rr-wt-sw-sd, 0))) var(--_ctm-mob-rep-dn-rr-wt-sw-cr,
+    var(--_ctm-tab-rep-dn-rr-wt-sw-cr, var(--_ctm-rep-dn-rr-wt-sw-cr, transparent))));
+padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
+
+--_sf-ic-sz-nn: var(--_ctm-mob-rep-lt-aw-in-se,
+  var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px)));
 
-      &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-rep-gradient-position),
-          var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
-          var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
-        );
+--_sf-ed-vl-sz: var(--_ctm-mob-rep-lt-dt-se,
+  var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px)));
+
+&[data-grid-toggle="enable"] {
+  position: var(--_p-relative);
+  @include FlexRepeaterGridToggleCSS();
+}
+
+&.lst_vw {
+  &>div {
+    &.wrapper {
+      display: var(--_d-grid);
+      row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt, 0px);
+      grid-template-columns: 100%;
+      // grid-template-rows: repeat(
+      //   auto-fit,
+      //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+      // );
+      // grid-template-rows: repeat(
+      //   1,
+      //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+      // );
+      grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
+      width: 100%;
+
+      &>div {
+
+        &#{$childItemSelector},
+        &#{$adSlotElementSelector} {
+          width: 100%;
+        }
       }
     }
+  }
+}
 
-    &[data-background-type="image"] {
-      background-image: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-at);
-      background-position: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-se);
+&:not(.lst_vw) {
+  &.grd {
+    &>div {
+      &.wrapper {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fit,
+            minmax(var(--_ctm-mob-rep-lt-mn-cn-wh,
+                var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))),
+              1fr));
+        grid-template-rows: repeat(auto-fit,
+            minmax(var(--_ctm-mob-rep-lt-mn-rw-ht,
+                var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))),
+              1fr));
+
+        div {
+
+          &#{$childItemSelector},
+          &#{$adSlotElementSelector},
+          &.#{$rai} {
+            width: 100%;
+          }
+        }
+      }
     }
+  }
 
-    // background-color: var(
-    //   --_ctm-mob-rep-dn-rr-wt-bd-cr,
-    //   var(--_ctm-tab-rep-dn-rr-wt-bd-cr, var(--_ctm-rep-dn-rr-wt-bd-cr))
-    // );
-    // background-image: var(
-    //   --_ctm-mob-rep-dn-rr-wt-bd-ie,
-    //   var(--_ctm-tab-rep-dn-rr-wt-bd-ie, var(--_ctm-rep-dn-rr-wt-bd-ie))
-    // );
-    // background-attachment: var(
-    //   --_ctm-mob-rep-dn-rr-wt-bd-at,
-    //   var(--_ctm-tab-rep-dn-rr-wt-bd-at, var(--_ctm-rep-dn-rr-wt-bd-at))
-    // );
-    // background-position: var(
-    //   --_ctm-mob-rep-dn-rr-wt-bd-pn,
-    //   var(--_ctm-tab-rep-dn-rr-wt-bd-pn, var(--_ctm-rep-dn-rr-wt-bd-pn))
-    // );
-    // background-repeat: var(
-    //   --_ctm-mob-rep-dn-rr-wt-bd-rt,
-    //   var(--_ctm-tab-rep-dn-rr-wt-bd-rt, var(--_ctm-rep-dn-rr-wt-bd-rt))
-    // );
-    // background-size: var(
-    //   --_ctm-mob-rep-dn-rr-wt-bd-se,
-    //   var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
-    // );
-    &[data-show-border="true"] {
-      border-color: var(
-        --_ctm-mob-rep-dn-rr-wt-br-cr,
-        var(--_ctm-tab-rep-dn-rr-wt-br-cr, var(--_ctm-rep-dn-rr-wt-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-rep-dn-rr-wt-br-se,
-        var(--_ctm-tab-rep-dn-rr-wt-br-se, var(--_ctm-rep-dn-rr-wt-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-rep-dn-rr-wt-br-wh,
-        var(--_ctm-tab-rep-dn-rr-wt-br-wh, var(--_ctm-rep-dn-rr-wt-br-wh))
-      );
-    }
-    border-radius: var(
-      --_ctm-mob-rep-dn-rr-wt-br-rs,
-      var(--_ctm-tab-rep-dn-rr-wt-br-rs, var(--_ctm-rep-dn-rr-wt-br-rs))
-    );
-
-    // The shadow is configured under the Repeater Widget accordion, so its variables
-    // carry that accordion's `rr-wt` segment — without it nothing the builder writes
-    // was ever read back. The Show Shadow switch arrives as `data-show-shadow`.
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    box-shadow: var(
-      --_show-shadow,
-      var(
-          --_ctm-mob-rep-dn-rr-wt-sw-ae,
-          var(--_ctm-tab-rep-dn-rr-wt-sw-ae, var(--_ctm-rep-dn-rr-wt-sw-ae, 0))
-        )
-        var(
-          --_ctm-mob-rep-dn-rr-wt-sw-br,
-          var(--_ctm-tab-rep-dn-rr-wt-sw-br, var(--_ctm-rep-dn-rr-wt-sw-br, 0))
-        )
-        var(
-          --_ctm-mob-rep-dn-rr-wt-sw-sd,
-          var(--_ctm-tab-rep-dn-rr-wt-sw-sd, var(--_ctm-rep-dn-rr-wt-sw-sd, 0))
-        )
-        var(
-          --_ctm-mob-rep-dn-rr-wt-sw-cr,
-          var(--_ctm-tab-rep-dn-rr-wt-sw-cr, var(--_ctm-rep-dn-rr-wt-sw-cr, transparent))
-        )
-    );
-    padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
-
-    --_sf-ic-sz-nn: var(
-      --_ctm-mob-rep-lt-aw-in-se,
-      var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
-    );
-
-    --_sf-ed-vl-sz: var(
-      --_ctm-mob-rep-lt-dt-se,
-      var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
-    );
-
-    &[data-grid-toggle="enable"] {
-      position: var(--_p-relative);
-      @include FlexRepeaterGridToggleCSS();
+  &.crds {
+    &>div {
+      &.wrapper {
+        display: flex !important;
+        flex-wrap: wrap;
+        width: 100%;
+        height: auto !important;
+        // min-height: 100px !important;
+      }
     }
 
-    &.lst_vw {
-      & > div {
+    &:not(.stimsfrRws) {
+
+      // we are not using
+      &>div {
         &.wrapper {
-          display: var(--_d-grid);
-          row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt, 0px);
-          grid-template-columns: 100%;
-          // grid-template-rows: repeat(
-          //   auto-fit,
-          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
-          // );
-          // grid-template-rows: repeat(
-          //   1,
-          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
-          // );
-          grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
-          width: 100%;
+          justify-content: center;
+
+          &>div {
 
-          & > div {
             &#{$childItemSelector},
-            &#{$adSlotElementSelector} {
-              width: 100%;
+            &#{$adSlotElementSelector},
+            &.#{$rai} {
+              // width: var(--_ctm-rep-lt-wh);
+              --_col-count: var(--_sf-gd-ct, 3);
+              --_col-gap: 0px;
+              width: 163px;
+              height: 100px;
+              // grid-template-rows: minmax(
+              //   max(
+              //     0.5px,
+              //     0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+              //   ),
+              //   auto
+              // );
+              // grid-template-rows: ;
             }
           }
         }
       }
     }
-    &:not(.lst_vw) {
-      &.grd {
-        & > div {
-          &.wrapper {
-            width: 100%;
-            display: grid;
-            grid-template-columns: repeat(
-              auto-fit,
-              minmax(
-                var(
-                  --_ctm-mob-rep-lt-mn-cn-wh,
-                  var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))
-                ),
-                1fr
-              )
-            );
-            grid-template-rows: repeat(
-              auto-fit,
-              minmax(
-                var(
-                  --_ctm-mob-rep-lt-mn-rw-ht,
-                  var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))
-                ),
-                1fr
-              )
-            );
-
-            div {
-              &#{$childItemSelector},
-              &#{$adSlotElementSelector},
-              &.#{$rai} {
-                width: 100%;
-              }
+
+    &.stimsfrRws {
+      &>div {
+        &.wrapper {
+          align-self: prepareMediaVariable(--_ctm-rep-lt-an-is) !important;
+
+          &>div {
+
+            &#{$childItemSelector},
+            &#{$adSlotElementSelector},
+            &.#{$rai} {
+              // --_col-count: var(--_sf-gd-ct, 3);
+              --_col-count: var(--_ctm-mob-rep-lt-st-is-pr-rw,
+                  var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3)));
+              // --_col-gap: var(
+              //   --_ctm-mob-rep-lt-im-gp,
+              //   var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
+              // );
+              --_col-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
+              width: calc((100% / var(--_col-count)) - (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count))));
+              flex: 0 0 calc((100% / var(--_col-count)) - (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count))));
+              // align-self: stretch;
+              // height: 100px;
+              grid-template-rows: minmax(max(0.5px,
+                    0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+                  auto);
+              grid-template-columns: minmax(0px, 1fr);
+              // min-height: 50px !important;
+              grid-template-rows:
+                minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
+                  auto) minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
+                  auto);
             }
           }
         }
       }
+    }
+  }
 
-      &.crds {
-        & > div {
-          &.wrapper {
-            display: flex !important;
-            flex-wrap: wrap;
-            width: 100%;
-            height: auto !important;
-            // min-height: 100px !important;
-          }
-        }
-        &:not(.stimsfrRws) {
-          // we are not using
-          & > div {
-            &.wrapper {
-              justify-content: center;
-              & > div {
-                &#{$childItemSelector},
-                &#{$adSlotElementSelector},
-                &.#{$rai} {
-                  // width: var(--_ctm-rep-lt-wh);
-                  --_col-count: var(--_sf-gd-ct, 3);
-                  --_col-gap: 0px;
-                  width: 163px;
-                  height: 100px;
-                  // grid-template-rows: minmax(
-                  //   max(
-                  //     0.5px,
-                  //     0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-                  //   ),
-                  //   auto
-                  // );
-                  // grid-template-rows: ;
-                }
-              }
-            }
-          }
-        }
+  &.sld {
+    &:is(:not(#{$sliderControlDragging} *)) {
+      overflow: clip;
+    }
 
-        &.stimsfrRws {
-          & > div {
-            &.wrapper {
-              align-self: prepareMediaVariable(--_ctm-rep-lt-an-is) !important;
-              & > div {
-                &#{$childItemSelector},
-                &#{$adSlotElementSelector},
-                &.#{$rai} {
-                  // --_col-count: var(--_sf-gd-ct, 3);
-                  --_col-count: var(
-                    --_ctm-mob-rep-lt-st-is-pr-rw,
-                    var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3))
-                  );
-                  // --_col-gap: var(
-                  //   --_ctm-mob-rep-lt-im-gp,
-                  //   var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
-                  // );
-                  --_col-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
-                  width: calc(
-                    (100% / var(--_col-count)) -
-                      (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
-                  );
-                  flex: 0 0
-                    calc(
-                      (100% / var(--_col-count)) -
-                        (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
-                    );
-                  // align-self: stretch;
-                  // height: 100px;
-                  grid-template-rows: minmax(
-                    max(
-                      0.5px,
-                      0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-                    ),
-                    auto
-                  );
-                  grid-template-columns: minmax(0px, 1fr);
-                  // min-height: 50px !important;
-                  grid-template-rows:
-                    minmax(
-                      max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
-                      auto
-                    )
-                    minmax(
-                      max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
-                      auto
-                    );
-                }
-              }
-            }
-          }
+    height: auto;
+    --_sf-sl-ct-ic-dt-at-cl: var(--_ctm-mob-rep-lt-cl-ae-cr,
+      var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr)));
+    // Resting arrow colour (Layout > Slider Settings > Arrow Icon Color). Fallback is
+    // the colour baked into the chevron icons, so untouched repeaters look the same.
+    --_sf-sl-ct-aw-in-cl: var(--_ctm-mob-rep-lt-aw-in-cr,
+      var(--_ctm-tab-rep-lt-aw-in-cr, var(--_ctm-rep-lt-aw-in-cr, #667085)));
+
+    // &:is([data-control-type="1"]) {
+    //   @include CMSRepeaterEmblaControlStyles(1);
+    // }
+    @for $i from 1 through 3 {
+      &:is([data-control-type="#{$i}"]) {
+        @if ($i ==3) {
+          overflow-y: visible;
         }
+
+        @include CMSRepeaterEmblaControlStyles($i);
       }
-      &.sld {
-        &:is(:not(#{$sliderControlDragging} *)) {
-          overflow: clip;
-        }
-        height: auto;
-        --_sf-sl-ct-ic-dt-at-cl: var(
-          --_ctm-mob-rep-lt-cl-ae-cr,
-          var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr))
-        );
-        // Resting arrow colour (Layout > Slider Settings > Arrow Icon Color). Fallback is
-        // the colour baked into the chevron icons, so untouched repeaters look the same.
-        --_sf-sl-ct-aw-in-cl: var(
-          --_ctm-mob-rep-lt-aw-in-cr,
-          var(--_ctm-tab-rep-lt-aw-in-cr, var(--_ctm-rep-lt-aw-in-cr, #667085))
-        );
-        // &:is([data-control-type="1"]) {
-        //   @include CMSRepeaterEmblaControlStyles(1);
-        // }
-        @for $i from 1 through 3 {
-          &:is([data-control-type="#{$i}"]) {
-            @if ($i == 3) {
-              overflow-y: visible;
-            }
-            @include CMSRepeaterEmblaControlStyles($i);
-          }
-        }
+    }
 
-        & > div {
-          &.wrapper {
-            &.embla__container {
-              display: flex !important;
-              --_embla-slide-space: var(
-                --_ctm-mob-rep-lt-im-gp,
-                var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
-              );
-              min-height: 100px !important;
-              --_embla-col-count: var(
-                --_ctm-mob-rep-lt-st-is-pr-se,
-                var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-lt-st-is-pr-se, 3))
-              );
-              // gap: 0px !important;
-              // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
+    &>div {
+      &.wrapper {
+        &.embla__container {
+          display: flex !important;
+          --_embla-slide-space: var(--_ctm-mob-rep-lt-im-gp,
+              var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px)));
+          min-height: 100px !important;
+          --_embla-col-count: var(--_ctm-mob-rep-lt-st-is-pr-se,
+              var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-lt-st-is-pr-se, 3)));
+          // gap: 0px !important;
+          // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
+          width: 100%;
+          height: 100%;
+
+          &>.embla__slide {
+            --_sf-cl-vl: calc((100% / var(--_embla-col-count, 3)) - (((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) / (var(--_embla-col-count, 3))));
+            // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
+            // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
+            flex: 0 0 var(--_sf-cl-vl);
+            width: var(--_sf-cl-vl);
+            // grid-template-rows: minmax(
+            //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+            //   auto
+            // );
+            grid-template-rows: minmax(50px, auto);
+            grid-template-columns: minmax(0px, 1fr);
+            // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
+            // padding-left: 0px !important;
+
+            img {
               width: 100%;
-              height: 100%;
-              & > .embla__slide {
-                --_sf-cl-vl: calc(
-                  (100% / var(--_embla-col-count, 3)) -
-                    (
-                      ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
-                        (var(--_embla-col-count, 3))
-                    )
-                );
-                // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
-                // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
-                flex: 0 0 var(--_sf-cl-vl);
-                width: var(--_sf-cl-vl);
-                // grid-template-rows: minmax(
-                //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
-                //   auto
-                // );
-                grid-template-rows: minmax(50px, auto);
-                grid-template-columns: minmax(0px, 1fr);
-                // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
-                // padding-left: 0px !important;
-
-                img {
-                  width: 100%;
-                }
-              }
             }
           }
         }
       }
-      & > div {
-        &.wrapper {
-          &:is(.sld > *) {
-            gap: #{prepareMediaVariable(--_ctm-rep-lt-im-gp, 0px)};
-          }
-          &:is(:not(.sld > *)) {
-            column-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
-            row-gap: #{prepareMediaVariable(--_ctm-rep-lt-rw-gp, 0px)};
-          }
+    }
+  }
 
-          justify-content: prepareMediaVariable(--_ctm-rep-lt-jy-ct);
-          align-items: prepareMediaVariable(--_ctm-rep-lt-an-is);
-          // width: 100%;
-          // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
-          // grid-auto-rows: minmax(100px, 1fr);
-        }
+  &>div {
+    &.wrapper {
+      &:is(.sld > *) {
+        gap: #{prepareMediaVariable(--_ctm-rep-lt-im-gp, 0px)};
       }
-    }
-    .repeater-advertise-item {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      img {
-        // width: 100%;
-        // height: 100%;
-        object-fit: cover;
-        object-position: center center;
-        max-width: 100%;
-        max-height: 100%;
+
+      &:is(:not(.sld > *)) {
+        column-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
+        row-gap: #{prepareMediaVariable(--_ctm-rep-lt-rw-gp, 0px)};
       }
+
+      justify-content: prepareMediaVariable(--_ctm-rep-lt-jy-ct);
+      align-items: prepareMediaVariable(--_ctm-rep-lt-an-is);
+      // width: 100%;
+      // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+      // grid-auto-rows: minmax(100px, 1fr);
     }
+  }
+}
 
-    #{$adSlotElementSelector} {
-      // The Ad Style > Image Controls schema was dropped, so these are plain values
-      // rather than custom properties — they reproduce what that schema defaulted to
-      // (full-bleed, centred, no border or shadow).
-      a {
-        width: 100%;
-        display: var(--_d-flex);
-        height: 100%;
-        justify-content: center;
-        align-items: center;
-      }
-      img {
-        max-width: 100%;
-        max-height: 100%;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center top;
-      }
+.repeater-advertise-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-      #{$adSlotSliderSelector} {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        & > button {
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          border-radius: 50%;
-          border: none;
-          cursor: var(--_sf-cursor-vl-v2, pointer);
-          opacity: var(--_sf-opacity-vl-v2, 1);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 0;
-          z-index: 2;
-          // The Ad Style > Slider Controls schema was dropped, so the custom properties
-          // only resolve on pages saved before that. The fallbacks reproduce what that
-          // schema defaulted to (32px arrows, black).
-          --_sf-wdt-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-aw-in-se, 32px)};
-          --_sf-bgr-clr-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-cl-ae-cr, #000)};
-          width: var(--_sf-wdt-vl-v2, 32px);
-          height: var(--_sf-wdt-vl-v2, 32px);
-          background: color-mix(in srgb, var(--_sf-bgr-clr-vl-v2) 10%, transparent);
-
-          svg {
-            --_perc: 0.5;
-            width: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
-            height: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
-
-            path {
-              stroke: var(--_sf-bgr-clr-vl-v2);
-            }
-          }
+  img {
+    // width: 100%;
+    // height: 100%;
+    object-fit: cover;
+    object-position: center center;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
 
-          &.repeater-ad-slot__nav-btn--next {
-            right: 8px;
-          }
+#{$adSlotElementSelector} {
+
+  // The Ad Style > Image Controls schema was dropped, so these are plain values
+  // rather than custom properties — they reproduce what that schema defaulted to
+  // (full-bleed, centred, no border or shadow).
+  a {
+    width: 100%;
+    display: var(--_d-flex);
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
 
-          &.repeater-ad-slot__nav-btn--prev {
-            left: 8px;
-          }
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+  }
 
-          &:disabled {
-            --_sf-cursor-vl-v2: not-allowed;
-            --_sf-opacity-vl-v2: 0.4;
-          }
+  #{$adSlotSliderSelector} {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &>button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      border-radius: 50%;
+      border: none;
+      cursor: var(--_sf-cursor-vl-v2, pointer);
+      opacity: var(--_sf-opacity-vl-v2, 1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      z-index: 2;
+      // The Ad Style > Slider Controls schema was dropped, so the custom properties
+      // only resolve on pages saved before that. The fallbacks reproduce what that
+      // schema defaulted to (32px arrows, black).
+      --_sf-wdt-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-aw-in-se, 32px)};
+      --_sf-bgr-clr-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-cl-ae-cr, #000)};
+      width: var(--_sf-wdt-vl-v2, 32px);
+      height: var(--_sf-wdt-vl-v2, 32px);
+      background: color-mix(in srgb, var(--_sf-bgr-clr-vl-v2) 10%, transparent);
+
+      svg {
+        --_perc: 0.5;
+        width: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
+        height: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
+
+        path {
+          stroke: var(--_sf-bgr-clr-vl-v2);
         }
       }
-    }
 
-    .repeater__button__container {
-      display: flex;
-
-      &[data-button-alignment-default-state="flex-start"] {
-        justify-content: flex-start;
+      &.repeater-ad-slot__nav-btn--next {
+        right: 8px;
       }
 
-      &[data-button-alignment-default-state="center"] {
-        justify-content: center;
+      &.repeater-ad-slot__nav-btn--prev {
+        left: 8px;
       }
 
-      &[data-button-alignment-default-state="flex-end"] {
-        justify-content: flex-end;
+      &:disabled {
+        --_sf-cursor-vl-v2: not-allowed;
+        --_sf-opacity-vl-v2: 0.4;
       }
+    }
+  }
+}
 
-      &[data-button-alignment-hover-state="flex-start"]:hover {
-        justify-content: flex-start;
-      }
-      &[data-button-alignment-hover-state="center"]:hover {
-        justify-content: center;
-      }
-      &[data-button-alignment-hover-state="flex-end"]:hover {
-        justify-content: flex-end;
-      }
+.repeater__button__container {
+  display: flex;
+
+  &[data-button-alignment-default-state="flex-start"] {
+    justify-content: flex-start;
+  }
+
+  &[data-button-alignment-default-state="center"] {
+    justify-content: center;
+  }
+
+  &[data-button-alignment-default-state="flex-end"] {
+    justify-content: flex-end;
+  }
+
+  &[data-button-alignment-hover-state="flex-start"]:hover {
+    justify-content: flex-start;
+  }
+
+  &[data-button-alignment-hover-state="center"]:hover {
+    justify-content: center;
+  }
+
+  &[data-button-alignment-hover-state="flex-end"]:hover {
+    justify-content: flex-end;
+  }
+}
+
+.btn__with__text[data-btn-name="loadmoreButton"] {
+  justify-content: center;
+
+  &[data-show-shadow="false"] {
+    --_show-shadow: none;
+  }
+
+  &[data-icon-position="left"] {
+    --_sf-fd-bn: row;
+  }
+
+  &[data-icon-position="right"] {
+    --_sf-fd-bn: row-reverse;
+  }
+
+  &[data-icon-position="center"] {
+    --_sf-fd-bn: row;
+  }
+
+  // &:has(p) {
+  //   width: auto;
+  // }
+
+  &:hover {
+    --_sf-hr-bd-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-bd-cr,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr)));
+    --_sf-hr-br-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-cr,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr)));
+    --_sf-hr-br-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-se,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se)));
+    --_sf-hr-br-wh: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-wh,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh)));
+    --_sf-hr-br-rs: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-rs,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs)));
+    --_sf-hr-at: var(--_ctm-rep-mob-dn-bn-se-hr-se-at,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at)));
+    --_sf-hr-gp: var(--_ctm-rep-mob-dn-bn-se-hr-se-gp,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-gp, var(--_ctm-rep-dn-bn-se-hr-se-gp)));
+
+    // for shadow
+    --_sf-hr-sw-ae: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-ae,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-ae, var(--_ctm-rep-dn-bn-se-hr-se-sw-ae)));
+    --_sf-hr-sw-br: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-br,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-br, var(--_ctm-rep-dn-bn-se-hr-se-sw-br)));
+    --_sf-hr-sw-hr: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-hr,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-hr, var(--_ctm-rep-dn-bn-se-hr-se-sw-hr)));
+    --_sf-hr-sw-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-cr,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-cr, var(--_ctm-rep-dn-bn-se-hr-se-sw-cr)));
+
+    // for font
+
+    --_sf-hr-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-cr,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr)));
+    --_sf-hr-ft-fy: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-fy,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy)));
+    --_sf-hr-tt-tm: var(--_ctm-rep-mob-dn-bn-se-hr-se-tt-tm,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-tm, var(--_ctm-rep-dn-bn-se-hr-se-tt-tm)));
+    --_sf-hr-wd-wp: var(--_ctm-rep-mob-dn-bn-se-hr-se-wd-wp,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-wp, var(--_ctm-rep-dn-bn-se-hr-se-wd-wp)));
+    --_sf-hr-wd-bk: var(--_ctm-rep-mob-dn-bn-se-hr-se-wd-bk,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-bk, var(--_ctm-rep-dn-bn-se-hr-se-wd-bk)));
+    --_sf-hr-ft-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-se,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se)));
+    --_sf-hr-ft-wt: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-wt,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt)));
+    --_sf-hr-ft-se-ic: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-se-ic,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic)));
+    --_sf-hr-tt-an: var(--_ctm-rep-mob-dn-bn-se-hr-se-tt-an,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an)));
+    --_sf-hr-lr-sg: var(--_ctm-rep-mob-dn-bn-se-hr-se-lr-sg,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg)));
+    --_sf-hr-le-ht: var(--_ctm-rep-mob-dn-bn-se-hr-se-le-ht,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht)));
+
+    --_sf-hr-in-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-in-se,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se)));
+    --_sf-hr-in-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-in-se,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se)));
+    --_sf-hr-in-c1: var(--_ctm-rep-mob-dn-bn-se-hr-se-in-c1,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1)));
+    --_sf-hr-ue: var(--_ctm-rep-mob-dn-bn-se-hr-se-ue,
+        var(--_ctm-rep-tab-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue)));
+
+    // for pading and width
+    --_sf-hr-pg: var(--_ctm-rep-mob-dn-bn-se-hr-pg,
+        var(--_ctm-rep-tab-dn-bn-se-hr-pg, var(--_ctm-rep-dn-bn-se-hr-pg)));
+    --_sf-hr-wh: var(--_ctm-rep-mob-dn-bn-se-hr-wh,
+        var(--_ctm-rep-tab-dn-bn-se-hr-wh, var(--_ctm-rep-dn-bn-se-hr-wh)));
+
+    &[data-hover-show-shadow="false"] {
+      --_hover-show-shadow: none;
     }
 
-    .btn__with__text[data-btn-name="loadmoreButton"] {
-      justify-content: center;
-      &[data-show-shadow="false"] {
-        --_show-shadow: none;
-      }
-      &[data-icon-position="left"] {
-        --_sf-fd-bn: row;
-      }
-      &[data-icon-position="right"] {
-        --_sf-fd-bn: row-reverse;
-      }
-      &[data-icon-position="center"] {
-        --_sf-fd-bn: row;
-      }
-      // &:has(p) {
-      //   width: auto;
-      // }
-
-      &:hover {
-        --_sf-hr-bd-cr: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-bd-cr,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr))
-        );
-        --_sf-hr-br-cr: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-br-cr,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr))
-        );
-        --_sf-hr-br-se: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-br-se,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se))
-        );
-        --_sf-hr-br-wh: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-br-wh,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh))
-        );
-        --_sf-hr-br-rs: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-br-rs,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs))
-        );
-        --_sf-hr-at: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-at,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at))
-        );
-        --_sf-hr-gp: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-gp,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-gp, var(--_ctm-rep-dn-bn-se-hr-se-gp))
-        );
-
-        // for shadow
-        --_sf-hr-sw-ae: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-sw-ae,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-ae, var(--_ctm-rep-dn-bn-se-hr-se-sw-ae))
-        );
-        --_sf-hr-sw-br: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-sw-br,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-br, var(--_ctm-rep-dn-bn-se-hr-se-sw-br))
-        );
-        --_sf-hr-sw-hr: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-sw-hr,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-hr, var(--_ctm-rep-dn-bn-se-hr-se-sw-hr))
-        );
-        --_sf-hr-sw-cr: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-sw-cr,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-cr, var(--_ctm-rep-dn-bn-se-hr-se-sw-cr))
-        );
-
-        // for font
-
-        --_sf-hr-cr: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-cr,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr))
-        );
-        --_sf-hr-ft-fy: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-ft-fy,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy))
-        );
-        --_sf-hr-tt-tm: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-tt-tm,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-tm, var(--_ctm-rep-dn-bn-se-hr-se-tt-tm))
-        );
-        --_sf-hr-wd-wp: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-wd-wp,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-wp, var(--_ctm-rep-dn-bn-se-hr-se-wd-wp))
-        );
-        --_sf-hr-wd-bk: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-wd-bk,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-bk, var(--_ctm-rep-dn-bn-se-hr-se-wd-bk))
-        );
-        --_sf-hr-ft-se: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-ft-se,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se))
-        );
-        --_sf-hr-ft-wt: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-ft-wt,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt))
-        );
-        --_sf-hr-ft-se-ic: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-ft-se-ic,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic))
-        );
-        --_sf-hr-tt-an: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-tt-an,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an))
-        );
-        --_sf-hr-lr-sg: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-lr-sg,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg))
-        );
-        --_sf-hr-le-ht: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-le-ht,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht))
-        );
-
-        --_sf-hr-in-se: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
-        );
-        --_sf-hr-in-se: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
-        );
-        --_sf-hr-in-c1: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-in-c1,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1))
-        );
-        --_sf-hr-ue: var(
-          --_ctm-rep-mob-dn-bn-se-hr-se-ue,
-          var(--_ctm-rep-tab-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue))
-        );
-
-        // for pading and width
-        --_sf-hr-pg: var(
-          --_ctm-rep-mob-dn-bn-se-hr-pg,
-          var(--_ctm-rep-tab-dn-bn-se-hr-pg, var(--_ctm-rep-dn-bn-se-hr-pg))
-        );
-        --_sf-hr-wh: var(
-          --_ctm-rep-mob-dn-bn-se-hr-wh,
-          var(--_ctm-rep-tab-dn-bn-se-hr-wh, var(--_ctm-rep-dn-bn-se-hr-wh))
-        );
-
-        &[data-hover-show-shadow="false"] {
-          --_hover-show-shadow: none;
-        }
-        &[data-hover-show-icon="false"] {
-          --_hover-show-icon: none;
-        }
-      }
-      background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-bd-cr));
+    &[data-hover-show-icon="false"] {
+      --_hover-show-icon: none;
+    }
+  }
 
-      padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-pg));
-      width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wh));
-      display: flex;
-      flex-direction: var(--_sf-fd-bn);
-      align-items: center;
+  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-bd-cr));
 
-      justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-at));
-      gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-gp));
+  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-pg));
+  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wh));
+  display: flex;
+  flex-direction: var(--_sf-fd-bn);
+  align-items: center;
 
-      border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-rs));
+  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-at));
+  gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-gp));
 
-      // Routed through the two gate variables the Show Shadow switches set above,
-      // otherwise turning the switch off left the shadow on screen.
-      box-shadow: var(
-        --_hover-show-shadow,
-        var(
-          --_show-shadow,
-          var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae, 0))
-            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br, 0))
-            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd, 0))
-            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr, transparent))
-        )
-      );
+  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-rs));
 
-      &[data-show-border="true"] {
-        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-cr));
+  // Routed through the two gate variables the Show Shadow switches set above,
+  // otherwise turning the switch off left the shadow on screen.
+  box-shadow: var(--_hover-show-shadow,
+    var(--_show-shadow,
+      var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae, 0)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br, 0)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd, 0)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr, transparent))));
 
-        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-se));
+  &[data-show-border="true"] {
+    border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-cr));
 
-        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-wh));
-      }
+    border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-se));
 
-      .txt {
-        display: flex;
+    border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-wh));
+  }
 
-        color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-cr));
+  .txt {
+    display: flex;
 
-        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-fy));
-        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-tm));
-        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-wp));
-        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-bk));
-        &.flex__overflow {
-          white-space: normal;
-          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-        }
+    color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-cr));
 
-        font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se));
+    font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-fy));
+    text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-tm));
+    word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-wp));
+    word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-bk));
 
-        font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-wt));
+    &.flex__overflow {
+      white-space: normal;
+      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+    }
 
-        font-style: var(
-          --_sf-hr-ft-se-ic,
-          prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic)
-        );
+    font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se));
 
-        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-an));
+    font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-wt));
 
-        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-lr-sg));
+    font-style: var(--_sf-hr-ft-se-ic,
+      prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic));
 
-        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-le-ht));
+    text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-an));
 
-        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-rep-dn-dt-ue));
-      }
+    letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-lr-sg));
 
-      .icon {
-        display: var(--_hover-show-icon, var(--_show-icon, flex));
-        svg {
-          width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
-          height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
+    line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-le-ht));
 
-          path {
-            stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-c1));
-            // Overrides the stroke-width presentation attribute baked into the icon markup.
-            stroke-width: prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-se-wh, 1.25);
-          }
-        }
-      }
-      [data-element-style="Text"] {
-        display: inline-block;
-        width: 100%;
-      }
+    text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-rep-dn-dt-ue));
+  }
 
-      .icon--hover {
-        // position: absolute;
-        // inset: 0;
-        // opacity: 0;
-        display: none;
-        transition: opacity 0.2s ease;
-      }
+  .icon {
+    display: var(--_hover-show-icon, var(--_show-icon, flex));
 
-      &:hover .icon--hover {
-        // opacity: 1;
-        display: flex;
-      }
+    svg {
+      width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
+      height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
 
-      &:hover .icon--default {
-        // opacity: 0;
-        display: none;
+      path {
+        stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-c1));
+        // Overrides the stroke-width presentation attribute baked into the icon markup.
+        stroke-width: prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-se-wh, 1.25);
       }
     }
+  }
 
-    // &[data-view-state="full"] {
-    //   width: auto;
-    //   margin: 0;
-    //   justify-self: stretch !important;
-    //   align-self: stretch !important;
-    //   cursor: auto;
-
-    //   & > div {
-    //     &[data-div-type="wrapper__layer"] {
-    //       --_sf-vt-zz: visible;
-    //       --_sf-op-zz: 1;
-    //     }
-    //   }
-    // }
+  [data-element-style="Text"] {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .icon--hover {
+    // position: absolute;
+    // inset: 0;
+    // opacity: 0;
+    display: none;
+    transition: opacity 0.2s ease;
+  }
+
+  &:hover .icon--hover {
+    // opacity: 1;
+    display: flex;
+  }
+
+  &:hover .icon--default {
+    // opacity: 0;
+    display: none;
   }
 }
+
+// &[data-view-state="full"] {
+//   width: auto;
+//   margin: 0;
+//   justify-self: stretch !important;
+//   align-self: stretch !important;
+//   cursor: auto;
+
+//   & > div {
+//     &[data-div-type="wrapper__layer"] {
+//       --_sf-vt-zz: visible;
+//       --_sf-op-zz: 1;
+//     }
+//   }
+// }
+}
+}