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

package/dist/hotspot.scss

@@ -454,10 +454,7 @@ $data: (
                 color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
 
                 font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-fy));
-                text-transform: var(
-                  --_sf-hr-tt-tm,
-                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-tm)
-                );
+                text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-tm));
                 word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wd-wp));
                 word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wd-bk));
                 &.flex__overflow {

package/dist/icon-list.scss

@@ -9,50 +9,36 @@ $textContaner: "flex__ili__container";
 $desc: "flex__ili__description";
 $overflowSelector: ".flex__overflow";
 $pos2: (
-  hrz: (
-    keys: (
-      0: inline,
-      after: (
-        top: 0,
+  hrz: (keys: (0: inline,
+      after: (top: 0,
         right: 0,
         height: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
         width: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
       ),
     ),
-    after: (
-      start: (
-        top: 0px,
+    after: (start: (top: 0px,
       ),
-      center: (
-        top: 50%,
+      center: (top: 50%,
         transform: translateY(-50%),
       ),
-      end: (
-        top: auto,
+      end: (top: auto,
         bottom: 0,
       ),
     ),
   ),
-  vtl: (
-    keys: (
-      0: block,
-      after: (
-        bottom: 0,
+  vtl: (keys: (0: block,
+      after: (bottom: 0,
         left: 0,
         width: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
         height: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
       ),
     ),
-    after: (
-      start: (
-        left: 0px,
+    after: (start: (left: 0px,
       ),
-      center: (
-        left: 50%,
+      center: (left: 50%,
         transform: translateX(-50%),
       ),
-      end: (
-        left: auto,
+      end: (left: auto,
         right: 0,
       ),
     ),
@@ -61,7 +47,7 @@ $pos2: (
 
 [data-div-type="element"] {
   &[data-element-type="icon-list"] {
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // gap: prepareMediaVariable(--_ctm-lt-im-gp);
       row-gap: prepareMediaVariable(--_ctm-lt-rw-gp, 0px);
@@ -95,13 +81,12 @@ $pos2: (
       background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
 
       &[data-show-boxshadow="true"] {
-        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae)
-          prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd)
-          prepareMediaVariable(--_ctm-dn-lt-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae) prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd) prepareMediaVariable(--_ctm-dn-lt-sw-cr);
       }
 
       &[data-show-divider="true"] {
-        & > .#{$item} {
+        &>.#{$item} {
+
           // &:not(:last-of-type)
           &:not(:last-child) {
             position: var(--_p-relative);
@@ -117,9 +102,7 @@ $pos2: (
                 //   #{prepareMediaVariable(--_ctm-lt-im-gp)} +
                 //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
                 // );
-                padding-#{map.get($keys, 0)}-end: calc(
-                  #{var(--_ctm-custom-lt-im-gp)} + #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
-                );
+                padding-#{map.get($keys, 0)}-end: calc(#{var(--_ctm-custom-lt-im-gp)} + #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)});
 
                 @each $k, $v in $afterKeys {
                   &::after {
@@ -149,7 +132,7 @@ $pos2: (
         }
       }
 
-      & > .#{$item} {
+      &>.#{$item} {
         display: var(--_d-flex);
         gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px));
 
@@ -173,12 +156,12 @@ $pos2: (
           --_txt-ht-wd-bk: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-wd-bk)};
         }
 
-        & > span {
+        &>span {
           &.#{$icon} {
             display: var(--_d-flex);
             align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));
 
-            & > svg {
+            &>svg {
               width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
               height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
 
@@ -191,7 +174,7 @@ $pos2: (
           }
         }
 
-        & > div {
+        &>div {
           &.#{$textContaner} {
             display: var(--_d-flex);
             flex-grow: 1;
@@ -205,13 +188,8 @@ $pos2: (
               //   #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
               //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
               // );
-              margin-inline-start: calc(
-                var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)) +
-                  var(
-                    --_ctm-mob-dn-tt-cr-dr-wt,
-                    var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
-                  )
-              );
+              margin-inline-start: calc(var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)) + var(--_ctm-mob-dn-tt-cr-dr-wt,
+                    var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))));
               position: relative;
 
               @each $key, $value in map.get(map.get($pos2, hrz), after) {
@@ -235,22 +213,16 @@ $pos2: (
                 //         #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
                 //     )
                 // );
-                left: calc(
-                  calc(
-                      -1 *
-                        var(
-                          --_ctm-mob-dn-tt-cr-dr-wt,
-                          var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
-                        )
-                    ) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px))
-                );
+                left: calc(calc(-1 * var(--_ctm-mob-dn-tt-cr-dr-wt,
+                        var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit)))) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)));
                 width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
                 height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
                 border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
               }
             }
 
-            & > .#{$text} {
+            &>.#{$text} {
+
               &,
               * {
                 font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
@@ -262,10 +234,8 @@ $pos2: (
                 text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
                 letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
                 line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
-                text-transform: var(
-                  --_txt-ht-tt-tm,
-                  prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-tm)
-                );
+                text-transform: var(--_txt-ht-tt-tm,
+                    prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-tm));
                 word-wrap: var(--_txt-ht-wd-wp, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
                 word-break: var(--_txt-ht-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-bk));
               }
@@ -275,7 +245,8 @@ $pos2: (
               }
             }
 
-            & > .#{$desc} {
+            &>.#{$desc} {
+
               &,
               * {
                 font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
@@ -309,4 +280,4 @@ $pos2: (
       }
     }
   }
-}
+}

package/dist/image-for-product.scss

@@ -1,21 +1,21 @@
-.product_img {
-  // background-color: var(--_base-white);
-  border-radius: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // border: 1px solid var(--_gray-200);
-  overflow: hidden;
-  img {
-    max-height: 100%;
-    object-fit: contain;
-    // padding: 4px;
-  }
-  .no_image {
-    padding: 16px;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
+.product_img {
+  // background-color: var(--_base-white);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid var(--_gray-200);
+  overflow: hidden;
+  img {
+    max-height: 100%;
+    object-fit: contain;
+    // padding: 4px;
+  }
+  .no_image {
+    padding: 16px;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/dist/image-temp.scss

@@ -91,13 +91,28 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
       // border-box height the border lands outside the element's fixed height
       // and the top/bottom edges get clipped; without border-box the width grows
       // past the element and the outline sits wider than the image.
-      // Tracks the var rather than 100% because the element drops its own height
-      // while resizing, dragging or in full view.
-      height: prepareMediaVariable(--_ctm-lt-ht);
+      // 100% rather than --_ctm-lt-ht: while resizing, dragging or in full view the
+      // element drops its own height, and a wrapper still pinned to the layout
+      // height kept a short box around a taller picture, so the image spilled over
+      // whatever sat below it on the canvas. Following the element keeps this box
+      // definite whenever the element has a height, and lets the two grow together
+      // when it does not.
+      height: 100%;
       box-sizing: border-box;
       // overflow: clip;
       rotate: calc(var(--_ctm-dn-re) * 1deg);
 
+      // FlexAnchorTag renders an <a> and CategoryImage adds a click <div> between
+      // this wrapper and the image, both height:auto by default. That left the
+      // image's own `height: 100%` with nothing definite to resolve against, so it
+      // fell back to the picture's natural size and escaped the box — 167px of logo
+      // in a 30px brand image. `:has` keeps this off the builder resizer, which
+      // carries no image.
+      :is(a, div):has(.image-element) {
+        display: block;
+        height: 100%;
+      }
+
       &:is(:not(:has([class*="crop__main"]) *)) {
         padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
         background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));

package/dist/language-selector.scss

@@ -13,8 +13,8 @@
 // section — Widget Style absorbed it, so the fallback exists only for pages saved
 // before the merge. Same shape the divider already uses for its
 // hover-falls-back-to-default chain below.
-$widgetFontProps:
-  ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt-tm, wd-wp, wd-bk, pg;
+$widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt-tm, wd-wp, wd-bk,
+  pg;
 
 @mixin widgetStateFont($state, $fallbackState: null) {
   @each $p in $widgetFontProps {
@@ -516,41 +516,49 @@ $widgetFontProps:
           );
         }
 
+        // Both states also collapse the weight when their own switch is off, so the space
+        // reserved below matches whether the divider is actually painted. Mirrors the
+        // `display: none` rules at the end of this block.
+        &[data-show-divider="false"]:not(:hover),
+        &[data-show-divider-hover="false"]:hover {
+          --_sf-dr-wt: 0px;
+        }
+
+        // The divider is a pseudo-element, so it takes no space of its own: at a weight
+        // wider than half the item gap it used to grow back over the option's label.
+        // `dividerGapReserve` gives the option that weight as margin and
+        // `dividerGapOffset` pushes the divider into it, so the rule stays inside the gap
+        // whatever the weight. `--_sf-dr-wt` rather than the raw variables so the reserve
+        // follows the hover weight the same way the divider itself does.
         &[data-flex-direction="row"] {
+          .option:not(:last-child) {
+            @include dividerGapReserve(var(--_sf-dr-wt), right);
+          }
           .option:not(:last-child)::before {
             content: "";
             position: absolute;
             top: 0;
             bottom: 0; /* For full height divider */
-            right: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-gp-bn-is,
-                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-                    ) /
-                    2
-                )
-            ); /* Half of your gap, assuming divider is centered in the gap */
+            right: dividerGapOffset(
+              var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
+              var(--_sf-dr-wt)
+            );
             width: var(--_sf-dr-wt); /* Divider thickness */
             background-color: var(--_sf-dr-cr); /* Divider color */
           }
         }
         &[data-flex-direction="column"] {
+          .option:not(:last-child) {
+            @include dividerGapReserve(var(--_sf-dr-wt));
+          }
           .option:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-gp-bn-is,
-                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-                    ) /
-                    2
-                )
+            bottom: dividerGapOffset(
+              var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
+              var(--_sf-dr-wt)
             );
             height: var(--_sf-dr-wt);
             background-color: var(--_sf-dr-cr);

package/dist/last-x-orders.scss

@@ -101,6 +101,11 @@
         &[data-show-dividers="true"] {
           .product__list__item {
             position: relative;
+            // The divider is a pseudo-element and takes no space of its own, so a thick
+            // one grew back over the item beside it — see dividerGapReserve in functions.scss.
+            &:not(:last-child) {
+              @include dividerGapReserve(--_ctm-dn-dr-dr-wh, right);
+            }
             &:not(:last-child)::after {
               content: "";
               width: var(
@@ -109,19 +114,7 @@
               );
               height: 100%;
               position: absolute;
-              right: calc(
-                (
-                    -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) /
-                      2
-                  ) -
-                  (
-                    var(
-                        --_ctm-mob-dn-dr-dr-wh,
-                        var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
-                      ) /
-                      2
-                  )
-              );
+              right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-dr-dr-wh);
               background-color: var(
                 --_ctm-mob-dn-dr-dr-cr,
                 var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))

package/dist/layouter-item.scss

@@ -13,12 +13,14 @@
 
     // width: 100%;
     // background: var(--_ctm-layo-dn-bd-cr);
+    height: 100% !important;
+    min-height: prepareMediaVariable(--_ctm-layo-lt-mn-ht, 100px) !important;
 
     & > div {
       &.wrapper {
         width: 100%;
         height: 100%;
-        min-height: prepareMediaVariable(--_ctm-layo-lt-mn-ht, 0px) !important;
+        min-height: prepareMediaVariable(--_ctm-layo-lt-mn-ht, 100px) !important;
         padding: var(--_ctm-mob-layo-lt-pg, var(--_ctm-tab-layo-lt-pg, var(--_ctm-layo-lt-pg)));
 
         &:is([data-background-type="color"] > *).wrapper {

package/dist/layouter.scss

@@ -22,21 +22,51 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
       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-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-gt-ae, 90)} * 1deg);
-      --_sf-lay-gradient-start-color: #{prepareMediaVariable(--_ctm-lay-dn-gt-st-cr, transparent)};
+      --_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-gt-st-pn, 0)} * 1%
+        #{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-gt-ed-cr, transparent)};
+      --_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-gt-ed-pn, 100)} * 1%
+        #{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-gt-pn, center)};
+      --_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(
@@ -56,12 +86,30 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     }
 
     &[data-background-type="image"] {
-      background-image: prepareMediaVariable(--_ctm-lay-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-lay-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-lay-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-lay-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-lay-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-lay-dn-bd-se);
+      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(
@@ -88,21 +136,21 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     //   --_ctm-mob-lay-dn-bd-se,
     //   var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
     // );
-    border-radius: var(
-      --_ctm-mob-lay-dn-br-rs,
-      var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))
+    border-radius: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-rs,
+      prepareMediaVariable(--_ctm-lay-dn-br-rs)
     );
-    border-color: var(
-      --_ctm-mob-lay-dn-br-cr,
-      var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr))
+    border-color: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-cr,
+      prepareMediaVariable(--_ctm-lay-dn-br-cr)
     );
-    border-style: var(
-      --_ctm-mob-lay-dn-br-se,
-      var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se))
+    border-style: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-se,
+      prepareMediaVariable(--_ctm-lay-dn-br-se)
     );
-    border-width: var(
-      --_ctm-mob-lay-dn-br-wh,
-      var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh))
+    border-width: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-wh,
+      prepareMediaVariable(--_ctm-lay-dn-br-wh)
     );
     box-shadow: var(
       --_hover-show-shadow,
@@ -110,10 +158,19 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
         --_sf-hr-bx-sw,
         var(
           --_show-shadow,
-          var(--_ctm-mob-lay-dn-sw-ae, var(--_ctm-tab-lay-dn-sw-ae, var(--_ctm-lay-dn-sw-ae)))
-            var(--_ctm-mob-lay-dn-sw-br, var(--_ctm-tab-lay-dn-sw-br, var(--_ctm-lay-dn-sw-br)))
-            var(--_ctm-mob-lay-dn-sw-sd, var(--_ctm-tab-lay-dn-sw-sd, var(--_ctm-lay-dn-sw-sd)))
-            var(--_ctm-mob-lay-dn-sw-cr, var(--_ctm-tab-lay-dn-sw-cr, var(--_ctm-lay-dn-sw-cr)))
+          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)
+            )
         )
       )
     );
@@ -182,6 +239,52 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
         --_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);
       // }
@@ -194,6 +297,38 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
         }
       }
 
+      // 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);