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

package/dist/layouter.scss

@@ -4,426 +4,488 @@
 @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));
-}
-
-&[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%;
-        }
+      --_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)
+        );
       }
 
-      @media only screen and (max-width: 767px) {
-        grid-template-rows: auto;
+      &[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)
+        );
       }
     }
-  }
-}
-
-&.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;
+    &[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)
+      );
     }
 
-    @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 {
+    // 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%;
+            }
+          }
+
+          @media only screen and (max-width: 767px) {
+            grid-template-rows: auto;
+          }
         }
       }
     }
-  }
-}
-}
-
-&>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)));
 
-    &: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)};
-    }
+    &.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);
+        }
+      }
 
-    &:is(.grd > *) {
-      column-gap: #{prepareMediaVariable(--_ctm-lay-lt-cn-gp, 0px)};
-      row-gap: #{prepareMediaVariable(--_ctm-lay-lt-rw-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%);
+        }
 
-    // width: 100%;
-    // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
-    // grid-auto-rows: minmax(100px, 1fr);
-  }
-}
+        // 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)};
+        }
 
-&.rws {
-  &>.wrapper {
+        .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)};
+        }
+      }
 
-    // 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} {
+      & > 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 {
         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);
       }
     }
-  }
-}
 
-&.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;
+    &.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%;
+          }
+        }
       }
     }
-  }
-}
 
-// &[data-view-state="full"] {
-//   width: auto;
-//   margin: 0;
-//   justify-self: stretch !important;
-//   align-self: stretch !important;
-//   cursor: auto;
+    &.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;
+          }
+        }
+      }
+    }
 
-//   & > 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;
+    //     }
+    //   }
+    // }
+  }
 }
-}