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

package/dist/layouter.scss

@@ -1,491 +1,491 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-@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: 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))))
-    );
-
-    // 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)
-      );
-    }
-
-    &[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%;
-            }
-          }
-
-          @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);
-        }
-      }
-
-      // 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%;
-              }
-            }
-          }
-        }
-      }
-    }
-    & > 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);
-      }
-    }
-
-    &.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)));
-      }
-      & > .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;
-    //     }
-    //   }
-    // }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+@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: 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))))
+    );
+
+    // 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)
+      );
+    }
+
+    &[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%;
+            }
+          }
+
+          @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);
+        }
+      }
+
+      // 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%;
+              }
+            }
+          }
+        }
+      }
+    }
+    & > 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);
+      }
+    }
+
+    &.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)));
+      }
+      & > .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;
+    //     }
+    //   }
+    // }
+  }
+}