@sc-360-v2/storefront-cms-library 0.1.99 → 0.2.1

package/dist/map.scss

@@ -90,11 +90,7 @@
           text-align: var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an));
           letter-spacing: var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg));
           line-height: var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht));
-          text-decoration: var(
-            --_ctm-dn-mp-wt-lh,
-            var(--_ctm-dn-mp-wt-ue),
-            var(--_tst-dn-mp-wt-lh)
-          );
+          text-decoration: var(--_ctm-dn-mp-wt-ue);
         }
         & p {
           color: var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc));
@@ -105,11 +101,8 @@
           text-align: var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc));
           letter-spacing: var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc));
           line-height: var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc));
-          text-decoration: var(
-            --_ctm-dn-mp-wt-lh-dc,
-            var(--_ctm-dn-mp-wt-ue-dc),
-            var(--_tst-dn-mp-wt-lh)
-          );
+
+          text-decoration: var(--_ctm-dn-mp-wt-ue-dc);
         }
         // h3 {
         //   margin-bottom: var(--_mb-4);
@@ -229,7 +222,7 @@
               text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
               letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
               line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
-              text-decoration: var(--_ctm-dn-tp-tt-dn-lh, var(--_ctm-dn-tp-tt-dn-ue));
+              text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
             }
             p {
               font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
@@ -240,7 +233,7 @@
               text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
               letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
               line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
-              text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
+              text-decoration: var(--_ctm-dn-tp-tt-dn-ue-dc);
             }
           }
           .tooltip__image {

package/dist/product-basic-elements.scss

@@ -2,7 +2,9 @@
 @use "sass:list";
 
 [data-div-type="element"] {
-  &[data-element-type="productName"] {
+  &[data-element-type="productName"],
+  &[data-element-type="brandName"],
+  &[data-element-type="categoryName"] {
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
@@ -73,7 +75,8 @@
       }
     }
   }
-  &[data-element-type="productDescription"] {
+  &[data-element-type="productDescription"],
+  &[data-element-type="categoryDescription"] {
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
@@ -211,7 +214,8 @@
       }
     }
   }
-  &[data-element-type="productCode"] {
+  &[data-element-type="productCode"],
+  &[data-element-type="categoryCode"] {
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);

package/dist/product-highlights.scss

@@ -55,13 +55,11 @@
         }
         .horizontal {
           display: flex;
-          flex-direction: row;
-          gap: var(--_ctm-lt-im-sg);
+          gap: var(--_ctm-lt-im-sg, 10px);
           .item {
             padding: var(--_ctm-lt-im-pg);
-            min-width: 100px;
-            min-height: 100px;
             border: 1px solid #000;
+            max-width: 100px;
             img {
               width: 100%;
               height: 100%;
@@ -70,7 +68,6 @@
           }
           &[data-overflow-items="Wrap"] {
             flex-wrap: wrap;
-            height: 100px;
             .item {
               img {
                 object-fit: contain;
@@ -89,12 +86,10 @@
           display: flex;
           flex-direction: column;
           gap: var(--_ctm-lt-im-sg);
-          height: 200px;
           .item {
             padding: var(--_ctm-lt-im-pg);
-            min-width: 100px;
-            min-height: 100px;
             border: 1px solid #000;
+            max-width: 100px;
             img {
               width: 100%;
               height: 100%;
@@ -107,7 +102,7 @@
         }
         .grid {
           display: grid;
-          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(100px, 1fr));
+          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
           gap: var(--_ctm-lt-im-sg);
           &[data-overflow-items="Scroll"] {
             height: 200px;

package/dist/product-image.scss

@@ -4,7 +4,7 @@
   &[data-element-type="productImage"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
     width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    height: var(--_ctm-lt-ht);
+    // height: var(--_ctm-lt-ht);
     // height: var(--_ctm-lt-ht);
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
 
@@ -576,6 +576,9 @@
     //   margin-bottom: var(--_mb-4);
     // }
   }
+  > img {
+    object-fit: cover;
+  }
   &[data-text-position="On Image"] {
     .gallery-header {
       width: 100%;

package/dist/productDetails.scss

@@ -7,9 +7,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
   &[data-element-type="productDetails"] {
     // 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-prod-ele-nw-wh-vl, auto));
+    width: calc(1% * var(--_ctm-prod-lt-wh, auto));
     // width: 100%;
     // height: var(--_ctm-pro-lt-ht) !important;
+    // width: 100%;
     height: auto;
     margin: var(--_ctm-prod-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
     background: var(--_ctm-prod-dn-bd-cr);

package/dist/repeater-embla-controls.scss

@@ -0,0 +1,202 @@
+@use "sass:map";
+@use "sass:list";
+
+@mixin CMSRepeaterEmblaControlStyles($type: 1) {
+  @if ($type == 1) {
+    &:is(body[data-iframe-body="true"] *),
+    &:hover {
+      --_sf-nv-ic-vt: visible;
+      --_sf-nv-ic-op: 1;
+    }
+    // Navigation
+    // button {
+    //   &.embla__btn {
+    //     position: absolute;
+    //     z-index: calc(var(--_higher-zIndex, 99999) - 2);
+    //     --_sf-ic-sz-nn: var(
+    //       --_ctm-mob-rep-lt-aw-in-se,
+    //       var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
+    //     );
+    //     width: var(--_sf-ic-sz-nn);
+    //     // --_ctm-rep-lt-dt-se
+    //     height: var(--_sf-ic-sz-nn);
+    //     border-radius: var(--_sf-nv-ic-br, 50%);
+    //     background: var(--_sf-nv-ic-bg, #fff);
+    //     top: var(--_sf-nv-tp-vl, 50%);
+    //     transform: translateY(-50%);
+    //     visibility: var(--_sf-nv-ic-vt, hidden);
+    //     opacity: var(--_sf-nv-ic-op, 0);
+    //     transition: all 0.45s ease;
+
+    //     &:hover:not(:disabled) {
+    //       --_sf-nv-ic-bg: var(--_sf-sl-ct-ic-dt-at-cl);
+
+    //       svg {
+    //         path {
+    //           stroke: #fff;
+    //         }
+    //       }
+    //     }
+    //     &:disabled {
+    //       opacity: 0.45;
+    //       cursor: auto;
+    //     }
+
+    //     &.embla__prev {
+    //       left: var(--_sf-nv-lt-vl, 10px);
+    //     }
+    //     &.embla__next {
+    //       right: var(--_sf-nv-lt-vl, 10px);
+    //     }
+
+    //     & > svg {
+    //       width: calc(var(--_sf-ic-sz-nn) * 0.5);
+    //       height: calc(var(--_sf-ic-sz-nn) * 0.5);
+    //     }
+    //   }
+    // }
+
+    // :is(.pagination__v1) {
+    //   position: absolute;
+    //   z-index: calc(var(--_higher-zIndex, 99999) - 2);
+    //   left: 50%;
+    //   transform: translateX(-50%);
+    //   bottom: var(--_sf-nv-tp-vl, 10px);
+
+    //   display: flex;
+    //   align-items: center;
+    //   gap: 8px;
+
+    //   & > button {
+    //     &.embla__dot {
+    //       --_sf-ed-vl-sz: var(
+    //         --_ctm-mob-rep-lt-dt-se,
+    //         var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
+    //       );
+    //       width: var(--_sf-nv-pg-sz-ac, var(--_sf-ed-vl-sz, 10px));
+    //       height: var(--_sf-ed-vl-sz, 10px);
+    //       border-radius: var(--_sf-dt-bt-at, 50%);
+    //       transition: all 0.45s ease;
+    //       background: var(--_sf-nv-pg-bg, #fff);
+
+    //       &.embla__dot--selected {
+    //         --_sf-nv-pg-bg: var(--_sf-sl-ct-ic-dt-at-cl, #162578);
+    //         --_sf-dt-bt-at: min(calc(var(--_sf-ed-vl-sz, 10px) * 0.5), 10px);
+    //         --_sf-nv-pg-sz-ac: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
+    //       }
+    //     }
+    //   }
+    // }
+  }
+  @include emblaBtnStylesV1($type);
+  @include emblaDotsStylesV1($type);
+
+  @if ($type == 2) {
+    &:is(body[data-iframe-body="true"] *),
+    &:hover {
+      --_sf-pg-ic-vt: visible;
+      --_sf-pg-ic-op: 1;
+    }
+    .repeater__control__element {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: calc(var(--_higher-zIndex, 99999) - 2);
+      visibility: var(--_sf-pg-ic-vt, hidden);
+      opacity: var(--_sf-pg-ic-op, 0);
+      transition: all 0.45s ease;
+
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+}
+
+@mixin emblaBtnStylesV1($type: 1) {
+  // Navigation
+  button {
+    &.embla__btn {
+      @if ($type == 1) {
+        position: absolute;
+        z-index: calc(var(--_higher-zIndex, 99999) - 2);
+        top: var(--_sf-nv-tp-vl, 50%);
+        transform: translateY(-50%);
+        visibility: var(--_sf-nv-ic-vt, hidden);
+        opacity: var(--_sf-nv-ic-op, 0);
+        transition: all 0.45s ease;
+        &.embla__prev {
+          left: var(--_sf-nv-lt-vl, 10px);
+        }
+        &.embla__next {
+          right: var(--_sf-nv-lt-vl, 10px);
+        }
+      }
+      --_sf-ic-sz-nn: var(
+        --_ctm-mob-rep-lt-aw-in-se,
+        var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
+      );
+      width: var(--_sf-ic-sz-nn);
+      // --_ctm-rep-lt-dt-se
+      height: var(--_sf-ic-sz-nn);
+      border-radius: var(--_sf-nv-ic-br, 50%);
+      background: var(--_sf-nv-ic-bg, #fff);
+
+      &:hover:not(:disabled) {
+        --_sf-nv-ic-bg: var(--_sf-sl-ct-ic-dt-at-cl);
+
+        svg {
+          path {
+            stroke: #fff;
+          }
+        }
+      }
+      &:disabled {
+        opacity: 0.45;
+        cursor: auto;
+      }
+
+      & > svg {
+        width: calc(var(--_sf-ic-sz-nn) * 0.5);
+        height: calc(var(--_sf-ic-sz-nn) * 0.5);
+      }
+    }
+  }
+}
+
+@mixin emblaDotsStylesV1($type: 1) {
+  :is(.pagination__v1) {
+    @if ($type == 1) {
+      position: absolute;
+      z-index: calc(var(--_higher-zIndex, 99999) - 2);
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: var(--_sf-nv-tp-vl, 10px);
+    }
+
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    & > button {
+      &.embla__dot {
+        --_sf-ed-vl-sz: var(
+          --_ctm-mob-rep-lt-dt-se,
+          var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
+        );
+        width: var(--_sf-nv-pg-sz-ac, var(--_sf-ed-vl-sz, 10px));
+        height: var(--_sf-ed-vl-sz, 10px);
+        border-radius: var(--_sf-dt-bt-at, 50%);
+        transition: all 0.45s ease;
+        background: var(--_sf-nv-pg-bg, #fff);
+
+        &.embla__dot--selected {
+          --_sf-nv-pg-bg: var(--_sf-sl-ct-ic-dt-at-cl, #162578);
+          --_sf-dt-bt-at: min(calc(var(--_sf-ed-vl-sz, 10px) * 0.5), 10px);
+          --_sf-nv-pg-sz-ac: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
+        }
+      }
+    }
+  }
+}

package/dist/repeater-item.scss

@@ -10,12 +10,14 @@
     // margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
 
     // width: 100%;
-    background: var(--_ctm-repe-dn-bd-cr);
+    // background: var(--_ctm-repe-dn-bd-cr);
 
     & > div {
       &.wrapper {
         width: 100%;
         height: 100%;
+        // padding: var(--_ctm-repe-lt-pg);
+        background: var(--_ctm-repe-dn-bd-cr);
       }
     }
   }

package/dist/repeater.scss

@@ -1,25 +1,56 @@
 @use "sass:map";
 @use "sass:list";
+@use "./repeater-embla-controls.scss" as *;
 $childItemSelector: '[data-element-type="repeater-item"]';
 [data-div-type="element"] {
   &[data-element-type="repeater"] {
     // width: var(--_sf-con-nw-wh);
     // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: calc(1% * var(--_ctm-rep-ele-nw-wh-vl, auto));
+    width: calc(
+      1% *
+        var(
+          --_ctm-mob-rep-ele-nw-wh-vl,
+          var(--_ctm-tab-rep-ele-nw-wh-vl, var(--_ctm-rep-ele-nw-wh-vl, auto))
+        )
+    );
     // width: 100%;
     // height: var(--_ctm-con-lt-ht);
-    margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn)));
-    background: var(--_ctm-rep-dn-bd-cr);
+    margin: var(
+      --_ctm-mob-rep-lt-mn,
+      var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
+    );
+    background: var(
+      --_ctm-mob-rep-dn-bd-cr,
+      var(--_ctm-tab-rep-dn-bd-cr, var(--_ctm-rep-dn-bd-cr))
+    );
 
     &.grd {
       & > div {
         &.wrapper {
           width: 100%;
           display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(var(--_ctm-rep-lt-mn-cn-wh), 1fr));
-          grid-template-rows: repeat(auto-fit, minmax(var(--_ctm-rep-lt-mn-rw-ht), 1fr));
+          grid-template-columns: repeat(
+            auto-fit,
+            minmax(
+              var(
+                --_ctm-mob-rep-lt-mn-cn-wh,
+                var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))
+              ),
+              1fr
+            )
+          );
+          grid-template-rows: repeat(
+            auto-fit,
+            minmax(
+              var(
+                --_ctm-mob-rep-lt-mn-rw-ht,
+                var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))
+              ),
+              1fr
+            )
+          );
 
-          & > div {
+          div {
             &#{$childItemSelector} {
               width: 100%;
             }
@@ -34,6 +65,7 @@ $childItemSelector: '[data-element-type="repeater-item"]';
           display: flex !important;
           flex-wrap: wrap;
           width: 100%;
+          height: 100%;
         }
       }
       &:not(.stimsfrRws) {
@@ -66,8 +98,15 @@ $childItemSelector: '[data-element-type="repeater-item"]';
           &.wrapper {
             & > div {
               &#{$childItemSelector} {
-                --_col-count: var(--_sf-gd-ct, 3);
-                --_col-gap: var(--_ctm-rep-lt-im-gp);
+                // --_col-count: var(--_sf-gd-ct, 3);
+                --_col-count: var(
+                  --_ctm-mob-rep-lt-st-is-pr-rw,
+                  var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3))
+                );
+                --_col-gap: var(
+                  --_ctm-mob-rep-lt-im-gp,
+                  var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
+                );
                 width: calc(
                   (100% / var(--_col-count)) -
                     (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
@@ -86,9 +125,72 @@ $childItemSelector: '[data-element-type="repeater-item"]';
       }
     }
 
+    &.sld {
+      overflow: clip;
+      height: auto;
+      --_sf-sl-ct-ic-dt-at-cl: var(
+        --_ctm-mob-rep-lt-cl-ae-cr,
+        var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr))
+      );
+      // &:is([data-control-type="1"]) {
+      //   @include CMSRepeaterEmblaControlStyles(1);
+      // }
+      @for $i from 1 through 2 {
+        &:is([data-control-type="#{$i}"]) {
+          @include CMSRepeaterEmblaControlStyles($i);
+        }
+      }
+
+      & > div {
+        &.wrapper {
+          &.embla__container {
+            display: flex !important;
+            --_embla-slide-space: var(
+              --_ctm-mob-rep-lt-im-gp,
+              var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp))
+            );
+            --_embla-col-count: var(
+              --_ctm-mob-rep-lt-st-is-pr-se,
+              var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-lt-st-is-pr-se, 3))
+            );
+            // gap: 0px !important;
+            // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
+            width: 100%;
+            height: 100%;
+            & > .embla__slide {
+              --_sf-cl-vl: calc(
+                (100% / var(--_embla-col-count, 3)) -
+                  (
+                    ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
+                      (var(--_embla-col-count, 3))
+                  )
+              );
+              // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
+              // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
+              flex: 0 0 var(--_sf-cl-vl);
+              width: var(--_sf-cl-vl);
+              grid-template-rows: minmax(
+                max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+                auto
+              );
+              grid-template-columns: minmax(0px, 1fr);
+              // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
+              // padding-left: 0px !important;
+
+              img {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
     & > div {
       &.wrapper {
-        gap: var(--_ctm-rep-lt-im-gp, 0px);
+        gap: var(
+          --_ctm-mob-rep-lt-im-gp,
+          var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
+        );
         // width: 100%;
         // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
         // grid-auto-rows: minmax(100px, 1fr);

package/dist/section.scss

@@ -18,13 +18,19 @@ section {
     );
     box-shadow: var(
       --_hide-section-shadow,
-      var(--_ctm-sec-dn-sw-ae, var(--_tst-dn-dt-se-sw-ae))
-        var(--_ctm-sec-dn-sw-br, var(--_tst-dn-dt-se-sw-br))
-        var(--_ctm-sec-dn-sw-sd, var(--_tst-dn-dt-se-sw-sd))
-        var(--_ctm-sec-dn-sw-cr, var(--_tst-dn-dt-se-sw-cr))
+      var(--_ctm-mob-sec-dn-sw-ae, var(--_ctm-tab-sec-dn-sw-ae, var(--_ctm-sec-dn-sw-ae)))
+        var(--_ctm-mob-sec-dn-sw-br, var(--_ctm-tab-sec-dn-sw-br, var(--_ctm-sec-dn-sw-br)))
+        var(--_ctm-mob-sec-dn-sw-sd, var(--_ctm-tab-sec-dn-sw-sd, var(--_ctm-sec-dn-sw-sd)))
+        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-sec-dn-sw-cr)))
     );
-    background: var(--_ctm-sec-dn-bd-cr, var(--_tst-sec-dn-bd-cr));
-    border-radius: var(--_ctm-sec-dn-br-rs, var(--_tst-dn-dt-se-br-rs)) !important;
+    background: var(
+      --_ctm-mob-sec-dn-bd-cr,
+      var(--_ctm-tab-sec-dn-bd-cr, var(--_ctm-sec-dn-bd-cr))
+    );
+    border-radius: var(
+      --_ctm-mob-sec-dn-br-rs,
+      var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
+    ) !important;
     &[data-show-shadow="false"] {
       --_hide-section-shadow: none;
     }
@@ -35,24 +41,30 @@ section {
       &[data-type="wrapper-layer"] {
         display: var(--_d-flex) !important;
         pointer-events: none;
+        position: var(--_p-absolute);
         visibility: visible !important;
         inset: 0 0 0 0;
         border-color: var(
           --_hide-section-border,
-          var(--_ctm-sec-dn-br-cr, var(--_tst-dn-dt-se-br-cr))
+          var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
         );
         border-style: var(
           --_hide-section-border,
-          var(--_ctm-sec-dn-br-se, var(--_tst-dn-dt-se-br-se))
+          var(--_ctm-mob-sec-dn-br-se, var(--_ctm-tab-sec-dn-br-se, var(--_ctm-sec-dn-br-se)))
         );
         border-width: var(
           --_hide-section-border,
-          var(--_ctm-sec-dn-br-wh, var(--_tst-dn-dt-se-br-wh))
+          var(--_ctm-mob-sec-dn-br-wh, var(--_ctm-tab-sec-dn-br-wh, var(--_ctm-sec-dn-br-wh)))
+        );
+        border-radius: var(
+          --_ctm-mob-sec-dn-br-rs,
+          var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
         );
-        border-radius: var(--_ctm-sec-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
       }
       &[data-div-type="cms-section-wrapper"] {
-        max-width: var(--_sf-wp-mx-wt);
+        // max-width: var(--_sf-wp-mx-wt);
+        max-width: var(--_ctm-mob-sec-lt-wh, var(--_ctm-tab-sec-lt-wh, var(--_ctm-sec-lt-wh)));
+        margin-inline: auto;
         position: var(--_p-relative);
         width: 100%;
       }
@@ -81,14 +93,26 @@ section {
         &:is([data-element-type="stack"]) {
           width: max(
             0.5px,
-            calc(var(--_ctm-sta-ele-nw-wh-vl) / 100) *
+            calc(
+                var(
+                    --_ctm-mob-sta-ele-nw-wh-vl,
+                    var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
+                  ) /
+                  100
+              ) *
               (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
           );
         }
         &:is([data-element-type="container"]) {
           width: max(
             0.5px,
-            calc(var(--_ctm-con-ele-nw-wh-vl) / 100) *
+            calc(
+                var(
+                    --_ctm-mob-con-ele-nw-wh-vl,
+                    var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl))
+                  ) /
+                  100
+              ) *
               (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
           );
         }
@@ -96,7 +120,13 @@ section {
         &:not([data-element-type="container"], [data-element-type="stack"]) {
           width: max(
             0.5px,
-            calc(var(--_ctm-ele-nw-wh-vl) / 100) *
+            calc(
+                var(
+                    --_ctm-mob-ele-nw-wh-vl,
+                    var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))
+                  ) /
+                  100
+              ) *
               (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
           );
         }