@sc-360-v2/storefront-cms-library 0.5.71 → 0.5.73

package/dist/layouter.scss

@@ -4,488 +4,426 @@
 @use "./repeater-embla-controls.scss" as *;
 $childItemSelector: '[data-element-type="layouter-item"]';
 $sliderControlDragging: "[flex-slider-control-moving='true']";
+
 [data-div-type="element"] {
   &[data-element-type="layouter"] {
     // 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-lay-ele-nw-wh-vl,
-          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
-        )
-    );
+    width: calc(1% * var(--_ctm-mob-lay-ele-nw-wh-vl,
+          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))));
     // width: 100%;
     // height: var(--_ctm-con-lt-ht);
-    margin: var(
-      --_ctm-mob-lay-lt-mn,
-      var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
-    );
+    margin: var(--_ctm-mob-lay-lt-mn,
+        var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn)))));
 
     // Widget Style (design.widgetStyle). The `wt-se` segment arrived when these moved
     // off the Design tab root into their own accordion; the plain `dn-` name is kept as
     // the fallback so pages published before the move keep their background, border,
     // radius and shadow.
     &[data-background-type="color"] {
-      background-color: prepareMediaVariable(
-        --_ctm-lay-dn-wt-se-bd-cr,
-        prepareMediaVariable(--_ctm-lay-dn-bd-cr)
-      );
+      background-color: prepareMediaVariable(--_ctm-lay-dn-wt-se-bd-cr,
+          prepareMediaVariable(--_ctm-lay-dn-bd-cr));
     }
 
     &[data-background-type="gradient"] {
-      --_sf-lay-gradient-angle: calc(
-        #{prepareMediaVariable(
-            --_ctm-lay-dn-wt-se-gt-ae,
-            prepareMediaVariable(--_ctm-lay-dn-gt-ae, 90)
-          )} *
-          1deg
-      );
-      --_sf-lay-gradient-start-color: #{prepareMediaVariable(
-          --_ctm-lay-dn-wt-se-gt-st-cr,
-          prepareMediaVariable(--_ctm-lay-dn-gt-st-cr, transparent)
-        )};
-      --_sf-lay-gradient-start-position: calc(
-        #{prepareMediaVariable(
-            --_ctm-lay-dn-wt-se-gt-st-pn,
-            prepareMediaVariable(--_ctm-lay-dn-gt-st-pn, 0)
-          )} *
-          1%
-      );
-      --_sf-lay-gradient-end-color: #{prepareMediaVariable(
-          --_ctm-lay-dn-wt-se-gt-ed-cr,
-          prepareMediaVariable(--_ctm-lay-dn-gt-ed-cr, transparent)
-        )};
-      --_sf-lay-gradient-end-position: calc(
-        #{prepareMediaVariable(
-            --_ctm-lay-dn-wt-se-gt-ed-pn,
-            prepareMediaVariable(--_ctm-lay-dn-gt-ed-pn, 100)
-          )} *
-          1%
-      );
-      --_sf-lay-gradient-position: #{prepareMediaVariable(
-          --_ctm-lay-dn-wt-se-gt-pn,
-          prepareMediaVariable(--_ctm-lay-dn-gt-pn, center)
-        )};
-
-      &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-lay-gradient-angle),
-          var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
-          var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
-        );
+      --_sf-lay-gradient-angle: calc(#{prepareMediaVariable(
+ --_ctm-lay-dn-wt-se-gt-ae,
+        prepareMediaVariable(--_ctm-lay-dn-gt-ae, 90))
+    }
+
+    * 1deg);
+    --_sf-lay-gradient-start-color: #{prepareMediaVariable(
+ --_ctm-lay-dn-wt-se-gt-st-cr,
+    prepareMediaVariable(--_ctm-lay-dn-gt-st-cr, transparent))
+  }
+
+  ;
+  --_sf-lay-gradient-start-position: calc(#{prepareMediaVariable(
+ --_ctm-lay-dn-wt-se-gt-st-pn,
+    prepareMediaVariable(--_ctm-lay-dn-gt-st-pn, 0))
+}
+
+* 1%);
+--_sf-lay-gradient-end-color: #{prepareMediaVariable(
+ --_ctm-lay-dn-wt-se-gt-ed-cr,
+prepareMediaVariable(--_ctm-lay-dn-gt-ed-cr, transparent))
+}
+
+;
+--_sf-lay-gradient-end-position: calc(#{prepareMediaVariable(
+ --_ctm-lay-dn-wt-se-gt-ed-pn,
+  prepareMediaVariable(--_ctm-lay-dn-gt-ed-pn, 100))
+}
+
+* 1%);
+--_sf-lay-gradient-position: #{prepareMediaVariable(
+ --_ctm-lay-dn-wt-se-gt-pn,
+prepareMediaVariable(--_ctm-lay-dn-gt-pn, center))
+}
+
+;
+
+&[data-gradient-type="Linear Gradient"] {
+  background-image: linear-gradient(var(--_sf-lay-gradient-angle),
+      var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
+      var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position));
+}
+
+&[data-gradient-type="Radial Gradient"] {
+  background-image: radial-gradient(circle at var(--_sf-lay-gradient-position),
+      var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
+      var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position));
+}
+}
+
+&[data-background-type="image"] {
+  background-image: prepareMediaVariable(--_ctm-lay-dn-wt-se-bd-ie,
+      prepareMediaVariable(--_ctm-lay-dn-bd-ie));
+  background-attachment: prepareMediaVariable(--_ctm-lay-dn-wt-se-bd-at,
+      prepareMediaVariable(--_ctm-lay-dn-bd-at));
+  background-position: prepareMediaVariable(--_ctm-lay-dn-wt-se-bd-pn,
+      prepareMediaVariable(--_ctm-lay-dn-bd-pn));
+  background-position-y: prepareMediaVariable(--_ctm-lay-dn-wt-se-bd-pn-y,
+      prepareMediaVariable(--_ctm-lay-dn-bd-pn-y));
+  background-repeat: prepareMediaVariable(--_ctm-lay-dn-wt-se-bd-rt,
+      prepareMediaVariable(--_ctm-lay-dn-bd-rt));
+  background-size: prepareMediaVariable(--_ctm-lay-dn-wt-se-bd-se,
+      prepareMediaVariable(--_ctm-lay-dn-bd-se));
+}
+
+// background-color: var(
+//   --_ctm-mob-lay-dn-bd-cr,
+//   var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
+// );
+// background-image: var(
+//   --_ctm-mob-lay-dn-bd-ie,
+//   var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
+// );
+// background-attachment: var(
+//   --_ctm-mob-lay-dn-bd-at,
+//   var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
+// );
+// background-position: var(
+//   --_ctm-mob-lay-dn-bd-pn,
+//   var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
+// );
+// background-repeat: var(
+//   --_ctm-mob-lay-dn-bd-rt,
+//   var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
+// );
+// background-size: var(
+//   --_ctm-mob-lay-dn-bd-se,
+//   var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
+// );
+border-radius: prepareMediaVariable(--_ctm-lay-dn-wt-se-br-rs,
+  prepareMediaVariable(--_ctm-lay-dn-br-rs));
+border-color: prepareMediaVariable(--_ctm-lay-dn-wt-se-br-cr,
+  prepareMediaVariable(--_ctm-lay-dn-br-cr));
+border-style: prepareMediaVariable(--_ctm-lay-dn-wt-se-br-se,
+  prepareMediaVariable(--_ctm-lay-dn-br-se));
+border-width: prepareMediaVariable(--_ctm-lay-dn-wt-se-br-wh,
+  prepareMediaVariable(--_ctm-lay-dn-br-wh));
+box-shadow: var(--_hover-show-shadow,
+  var(--_sf-hr-bx-sw,
+    var(--_show-shadow,
+      prepareMediaVariable(--_ctm-lay-dn-wt-se-sw-ae, prepareMediaVariable(--_ctm-lay-dn-sw-ae)) prepareMediaVariable(--_ctm-lay-dn-wt-se-sw-br,
+        prepareMediaVariable(--_ctm-lay-dn-sw-br)) prepareMediaVariable(--_ctm-lay-dn-wt-se-sw-sd,
+        prepareMediaVariable(--_ctm-lay-dn-sw-sd)) prepareMediaVariable(--_ctm-lay-dn-wt-se-sw-cr,
+        prepareMediaVariable(--_ctm-lay-dn-sw-cr)))));
+padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
+
+--_sf-ic-sz-nn: var(--_ctm-mob-lay-lt-aw-in-se,
+  var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px)));
+
+--_sf-ed-vl-sz: var(--_ctm-mob-lay-lt-dt-se,
+  var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px)));
+
+&.grd {
+  &>div {
+    &.wrapper {
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(auto-fit,
+          minmax(var(--_ctm-mob-lay-lt-mn-cn-wh,
+              var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))),
+            1fr));
+      grid-template-rows: repeat(auto-fit,
+          minmax(var(--_ctm-mob-lay-lt-mn-rw-ht,
+              var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))),
+            1fr));
+
+      justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
+      align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
+
+      div {
+        &#{$childItemSelector} {
+          width: 100%;
+        }
       }
 
-      &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-lay-gradient-position),
-          var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
-          var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
-        );
+      @media only screen and (max-width: 767px) {
+        grid-template-rows: auto;
       }
     }
+  }
+}
+
+&.sld {
+  &:is(:not(#{$sliderControlDragging} *)) {
+    overflow: clip;
+  }
+
+  // overflow: clip;
+  height: auto;
+  min-height: 50px !important;
+  --_sf-sl-ct-ic-dt-at-cl: var(--_ctm-mob-lay-lt-cl-ae-cr,
+    var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr)));
+
+  // Design > Pagination Dots. Dot Size replaces the layout tab's Dot Size the
+  // same way Arrow Size replaces Arrow Icon Size, with the old var as fallback
+  // for elements saved before the section existed. The two colours had no layout
+  // equivalent: the selected dot used to follow Control Active Color, which still
+  // colours the arrow hover and the unselected dot border.
+  --_sf-ed-vl-sz: #{prepareMediaVariable(
+ --_ctm-lay-dn-pn-ds-dt-se,
+  var(--_ctm-mob-lay-lt-dt-se, var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px))))
+}
+
+;
+--_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-ct-dt-cr, #162578)};
+--_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-or-dt-cr, #fff)};
+
+// Design > Pagination Arrows.
+//
+// Arrow Size and the layout tab's Arrow Icon Size drive the same button box, so
+// the design value wins and the layout value is the fallback — an element saved
+// before this section existed has no `dn-pn-as-aw-se` var and keeps its
+// `lt-aw-in-se` size. Both schema defaults are 40px.
+--_sf-ic-sz-nn: #{prepareMediaVariable(
+ --_ctm-lay-dn-pn-as-aw-se,
+var(--_ctm-mob-lay-lt-aw-in-se,
+  var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px))))
+}
+
+;
+// Resting stroke of the chevrons; hover still switches to Control Active Color.
+--_sf-sl-ct-aw-in-cl: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-aw-cr, #667085)};
+// Background Color, as the gallery slider uses it: the button is a 10% tint of
+// the chosen colour and 20% on hover (see the hover rule further down), not the
+// flat colour. Kept in its own variable so both tints read the same source.
+--_sf-lay-as-bg-cr: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-bd-cr, #fff)};
+--_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-lay-as-bg-cr) 10%, transparent);
+
+// Background Shape of the arrow buttons, matching the gallery slider's mapping:
+// Round is the mixin's own 50% default, None squares the button off and Square
+// rounds the corners slightly. Elements without this section have no attribute
+// at all and stay round.
+button.embla__btn {
+  &[data-background-shape="None"] {
+    --_sf-nv-ic-br: 0px;
+  }
+
+  &[data-background-shape="Square"] {
+    --_sf-nv-ic-br: 4px;
+  }
+}
 
-    &[data-background-type="image"] {
-      background-image: prepareMediaVariable(
-        --_ctm-lay-dn-wt-se-bd-ie,
-        prepareMediaVariable(--_ctm-lay-dn-bd-ie)
-      );
-      background-attachment: prepareMediaVariable(
-        --_ctm-lay-dn-wt-se-bd-at,
-        prepareMediaVariable(--_ctm-lay-dn-bd-at)
-      );
-      background-position: prepareMediaVariable(
-        --_ctm-lay-dn-wt-se-bd-pn,
-        prepareMediaVariable(--_ctm-lay-dn-bd-pn)
-      );
-      background-position-y: prepareMediaVariable(
-        --_ctm-lay-dn-wt-se-bd-pn-y,
-        prepareMediaVariable(--_ctm-lay-dn-bd-pn-y)
-      );
-      background-repeat: prepareMediaVariable(
-        --_ctm-lay-dn-wt-se-bd-rt,
-        prepareMediaVariable(--_ctm-lay-dn-bd-rt)
-      );
-      background-size: prepareMediaVariable(
-        --_ctm-lay-dn-wt-se-bd-se,
-        prepareMediaVariable(--_ctm-lay-dn-bd-se)
-      );
+// &: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;
     }
 
-    // background-color: var(
-    //   --_ctm-mob-lay-dn-bd-cr,
-    //   var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
-    // );
-    // background-image: var(
-    //   --_ctm-mob-lay-dn-bd-ie,
-    //   var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
-    // );
-    // background-attachment: var(
-    //   --_ctm-mob-lay-dn-bd-at,
-    //   var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
-    // );
-    // background-position: var(
-    //   --_ctm-mob-lay-dn-bd-pn,
-    //   var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
-    // );
-    // background-repeat: var(
-    //   --_ctm-mob-lay-dn-bd-rt,
-    //   var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
-    // );
-    // background-size: var(
-    //   --_ctm-mob-lay-dn-bd-se,
-    //   var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
-    // );
-    border-radius: prepareMediaVariable(
-      --_ctm-lay-dn-wt-se-br-rs,
-      prepareMediaVariable(--_ctm-lay-dn-br-rs)
-    );
-    border-color: prepareMediaVariable(
-      --_ctm-lay-dn-wt-se-br-cr,
-      prepareMediaVariable(--_ctm-lay-dn-br-cr)
-    );
-    border-style: prepareMediaVariable(
-      --_ctm-lay-dn-wt-se-br-se,
-      prepareMediaVariable(--_ctm-lay-dn-br-se)
-    );
-    border-width: prepareMediaVariable(
-      --_ctm-lay-dn-wt-se-br-wh,
-      prepareMediaVariable(--_ctm-lay-dn-br-wh)
-    );
-    box-shadow: var(
-      --_hover-show-shadow,
-      var(
-        --_sf-hr-bx-sw,
-        var(
-          --_show-shadow,
-          prepareMediaVariable(--_ctm-lay-dn-wt-se-sw-ae, prepareMediaVariable(--_ctm-lay-dn-sw-ae))
-            prepareMediaVariable(
-              --_ctm-lay-dn-wt-se-sw-br,
-              prepareMediaVariable(--_ctm-lay-dn-sw-br)
-            )
-            prepareMediaVariable(
-              --_ctm-lay-dn-wt-se-sw-sd,
-              prepareMediaVariable(--_ctm-lay-dn-sw-sd)
-            )
-            prepareMediaVariable(
-              --_ctm-lay-dn-wt-se-sw-cr,
-              prepareMediaVariable(--_ctm-lay-dn-sw-cr)
-            )
-        )
-      )
-    );
-    padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
-
-    --_sf-ic-sz-nn: var(
-      --_ctm-mob-lay-lt-aw-in-se,
-      var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px))
-    );
-
-    --_sf-ed-vl-sz: var(
-      --_ctm-mob-lay-lt-dt-se,
-      var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px))
-    );
-
-    &.grd {
-      & > div {
-        &.wrapper {
+    @include CMSRepeaterEmblaControlStyles($i);
+  }
+}
+
+// Overrides of the shared control mixin. `:is([data-control-type])` matches the
+// specificity of the rules being replaced, and this block comes after the
+// @include, so on the tie these win.
+&:is([data-control-type]) {
+
+  // Hover of the arrow buttons. The mixin tints them with Control Active Color,
+  // which ignores the Background Color the Pagination Arrows section sets; the
+  // gallery slider instead deepens that same colour from 10% to 20%. The icon
+  // stroke still switches to Control Active Color — the mixin's own rule.
+  button.embla__btn:hover:not(:disabled) {
+    @include BgColorLighter(var(--_sf-lay-as-bg-cr), 20%);
+  }
+
+  // Design > Pagination Dots > Border and Shadow.
+  //
+  // Both are gated on the container attributes the control components publish
+  // from the Show Border / Show Shadow toggles: with the border off the dots keep
+  // the hairline the mixin derives from Control Active Color, and with it on
+  // these longhands take over.
+  .pagination__v1[data-show-border="true"]>button.embla__dot {
+    border-width: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-wh, 0px)};
+    border-style: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-se, solid)};
+    border-color: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-cr, transparent)};
+  }
+
+  .pagination__v1[data-show-shadow="true"]>button.embla__dot {
+    box-shadow: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-ae, 0px 0px)} #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-br, 0px)} #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-sd, 0px)} #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-cr, transparent)};
+  }
+}
+
+&>div {
+  &.wrapper {
+    justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
+    align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
+
+    &.embla__container {
+      display: flex !important;
+      --_embla-slide-space: var(--_ctm-mob-lay-lt-im-gp,
+          var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px)));
+      --_embla-col-count: var(--_ctm-mob-lay-lt-st-is-pr-se,
+          var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-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%;
-          display: grid;
-          grid-template-columns: repeat(
-            auto-fit,
-            minmax(
-              var(
-                --_ctm-mob-lay-lt-mn-cn-wh,
-                var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))
-              ),
-              1fr
-            )
-          );
-          grid-template-rows: repeat(
-            auto-fit,
-            minmax(
-              var(
-                --_ctm-mob-lay-lt-mn-rw-ht,
-                var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))
-              ),
-              1fr
-            )
-          );
-
-          justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
-          align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
-
-          div {
-            &#{$childItemSelector} {
-              width: 100%;
-            }
-          }
-
-          @media only screen and (max-width: 767px) {
-            grid-template-rows: auto;
-          }
         }
       }
     }
+  }
+}
+}
 
-    &.sld {
-      &:is(:not(#{$sliderControlDragging} *)) {
-        overflow: clip;
-      }
-      // overflow: clip;
-      height: auto;
-      min-height: 50px !important;
-      --_sf-sl-ct-ic-dt-at-cl: var(
-        --_ctm-mob-lay-lt-cl-ae-cr,
-        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
-      );
-
-      // Design > Pagination Dots. Dot Size replaces the layout tab's Dot Size the
-      // same way Arrow Size replaces Arrow Icon Size, with the old var as fallback
-      // for elements saved before the section existed. The two colours had no layout
-      // equivalent: the selected dot used to follow Control Active Color, which still
-      // colours the arrow hover and the unselected dot border.
-      --_sf-ed-vl-sz: #{prepareMediaVariable(
-          --_ctm-lay-dn-pn-ds-dt-se,
-          var(--_ctm-mob-lay-lt-dt-se, var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px)))
-        )};
-      --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-ct-dt-cr, #162578)};
-      --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-or-dt-cr, #fff)};
-
-      // Design > Pagination Arrows.
-      //
-      // Arrow Size and the layout tab's Arrow Icon Size drive the same button box, so
-      // the design value wins and the layout value is the fallback — an element saved
-      // before this section existed has no `dn-pn-as-aw-se` var and keeps its
-      // `lt-aw-in-se` size. Both schema defaults are 40px.
-      --_sf-ic-sz-nn: #{prepareMediaVariable(
-          --_ctm-lay-dn-pn-as-aw-se,
-          var(
-            --_ctm-mob-lay-lt-aw-in-se,
-            var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px))
-          )
-        )};
-      // Resting stroke of the chevrons; hover still switches to Control Active Color.
-      --_sf-sl-ct-aw-in-cl: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-aw-cr, #667085)};
-      // Background Color, as the gallery slider uses it: the button is a 10% tint of
-      // the chosen colour and 20% on hover (see the hover rule further down), not the
-      // flat colour. Kept in its own variable so both tints read the same source.
-      --_sf-lay-as-bg-cr: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-bd-cr, #fff)};
-      --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-lay-as-bg-cr) 10%, transparent);
-
-      // Background Shape of the arrow buttons, matching the gallery slider's mapping:
-      // Round is the mixin's own 50% default, None squares the button off and Square
-      // rounds the corners slightly. Elements without this section have no attribute
-      // at all and stay round.
-      button.embla__btn {
-        &[data-background-shape="None"] {
-          --_sf-nv-ic-br: 0px;
-        }
-        &[data-background-shape="Square"] {
-          --_sf-nv-ic-br: 4px;
-        }
-      }
-      // &: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 {
+    width: 100%;
+    gap: var(--_ctm-mob-lay-lt-im-gp,
+        var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px)));
 
-      // Overrides of the shared control mixin. `:is([data-control-type])` matches the
-      // specificity of the rules being replaced, and this block comes after the
-      // @include, so on the tie these win.
-      &:is([data-control-type]) {
-        // Hover of the arrow buttons. The mixin tints them with Control Active Color,
-        // which ignores the Background Color the Pagination Arrows section sets; the
-        // gallery slider instead deepens that same colour from 10% to 20%. The icon
-        // stroke still switches to Control Active Color — the mixin's own rule.
-        button.embla__btn:hover:not(:disabled) {
-          @include BgColorLighter(var(--_sf-lay-as-bg-cr), 20%);
-        }
+    &:is(.sld > *, .rws > *, .cln > *) {
+      // gap: var(
+      //   --_ctm-mob-lay-lt-im-gp,
+      //   var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
+      // );
+      gap: #{prepareMediaVariable(--_ctm-lay-lt-im-gp, 0px)};
+    }
 
-        // Design > Pagination Dots > Border and Shadow.
-        //
-        // Both are gated on the container attributes the control components publish
-        // from the Show Border / Show Shadow toggles: with the border off the dots keep
-        // the hairline the mixin derives from Control Active Color, and with it on
-        // these longhands take over.
-        .pagination__v1[data-show-border="true"] > button.embla__dot {
-          border-width: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-wh, 0px)};
-          border-style: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-se, solid)};
-          border-color: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-cr, transparent)};
-        }
+    &:is(.grd > *) {
+      column-gap: #{prepareMediaVariable(--_ctm-lay-lt-cn-gp, 0px)};
+      row-gap: #{prepareMediaVariable(--_ctm-lay-lt-rw-gp, 0px)};
+    }
 
-        .pagination__v1[data-show-shadow="true"] > button.embla__dot {
-          box-shadow: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-ae, 0px 0px)}
-            #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-br, 0px)}
-            #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-sd, 0px)}
-            #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-cr, transparent)};
-        }
-      }
+    // width: 100%;
+    // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+    // grid-auto-rows: minmax(100px, 1fr);
+  }
+}
 
-      & > div {
-        &.wrapper {
-          justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
-          align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
-          &.embla__container {
-            display: flex !important;
-            --_embla-slide-space: var(
-              --_ctm-mob-lay-lt-im-gp,
-              var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
-            );
-            --_embla-col-count: var(
-              --_ctm-mob-lay-lt-st-is-pr-se,
-              var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-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%;
-              }
-            }
-          }
-        }
-      }
-    }
-    & > div {
-      &.wrapper {
+&.rws {
+  &>.wrapper {
+
+    // grid-template-columns: 100%;
+    // grid-template-rows:
+    //   minmax(
+    //     clamp(
+    //       0.5px,
+    //       calc(
+    //         (18.918014128728416 * var(--_cms-playground-unit)) -
+    //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+    //       ),
+    //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+    //     ),
+    //     auto
+    //   )
+    //   minmax(
+    //     clamp(
+    //       0.5px,
+    //       calc(
+    //         (18.918014128728416 * var(--_cms-playground-unit)) -
+    //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+    //       ),
+    //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+    //     ),
+    //     auto
+    //   )
+    //   minmax(
+    //     clamp(
+    //       0.5px,
+    //       calc(
+    //         (18.918014128728416 * var(--_cms-playground-unit)) -
+    //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+    //       ),
+    //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+    //     ),
+    //     auto
+    //   )
+    //   minmax(
+    //     clamp(
+    //       0.5px,
+    //       calc(
+    //         (18.918014128728416 * var(--_cms-playground-unit)) -
+    //           (0.18918014128728416 * var(--_cms-scrollbar-width))
+    //       ),
+    //       calc(0.18918014128728416 * var(--_cms-section-max-width))
+    //     ),
+    //     auto
+    //   );
+    &>div {
+      &#{$childItemSelector} {
         width: 100%;
-        gap: var(
-          --_ctm-mob-lay-lt-im-gp,
-          var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
-        );
-
-        &:is(.sld > *, .rws > *, .cln > *) {
-          // gap: var(
-          //   --_ctm-mob-lay-lt-im-gp,
-          //   var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
-          // );
-          gap: #{prepareMediaVariable(--_ctm-lay-lt-im-gp, 0px)};
-        }
-        &:is(.grd > *) {
-          column-gap: #{prepareMediaVariable(--_ctm-lay-lt-cn-gp, 0px)};
-          row-gap: #{prepareMediaVariable(--_ctm-lay-lt-rw-gp, 0px)};
-        }
-        // width: 100%;
-        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
-        // grid-auto-rows: minmax(100px, 1fr);
       }
     }
+  }
+}
 
-    &.rws {
-      & > .wrapper {
-        // grid-template-columns: 100%;
-        // grid-template-rows:
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   )
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   )
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   )
-        //   minmax(
-        //     clamp(
-        //       0.5px,
-        //       calc(
-        //         (18.918014128728416 * var(--_cms-playground-unit)) -
-        //           (0.18918014128728416 * var(--_cms-scrollbar-width))
-        //       ),
-        //       calc(0.18918014128728416 * var(--_cms-section-max-width))
-        //     ),
-        //     auto
-        //   );
-        & > div {
-          &#{$childItemSelector} {
-            width: 100%;
-          }
-        }
-      }
-    }
+&.cln {
+  &[data-view-state="auto"] {
+    height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
+  }
 
-    &.cln {
-      &[data-view-state="auto"] {
-        height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
-      }
-      & > .wrapper {
-        height: 100%;
-        & > div {
-          &#{$childItemSelector} {
-            width: 100%;
-            // align-self: flex-start;
-          }
-        }
+  &>.wrapper {
+    height: 100%;
+
+    &>div {
+      &#{$childItemSelector} {
+        width: 100%;
+        // align-self: flex-start;
       }
     }
-
-    // &[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-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;
+//     }
+//   }
+// }
+}
+}