@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

package/dist/grid.scss

@@ -1,169 +1,169 @@
-$activeElementSelector: "[data-has-clicked='true']";
-$elementSelector: "[data-div-type='element']";
-
-@use "./functions.scss" as *;
-
-$flex: "flx";
-$grid: "grd";
-$flexRow: "rw";
-$flexRowReverse: "rw-rv";
-$flexColumn: "cln";
-$flexColumnReverse: "cln-rv";
-[data-div-type="grid"] {
-  position: var(--_p-relative);
-  display: var(--_d-grid);
-  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
-  // height: 100% !important;
-  box-shadow: var(
-    --_hide-grid-shadow,
-    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
-      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
-  );
-  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-
-  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-  // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
-  // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
-  // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
-  // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
-  // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
-  // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
-  // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
-
-  &[data-background-type="color"] {
-    & > .wrapper {
-      background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
-    }
-  }
-
-  &[data-background-type="gradient"] {
-    --_sf-gri-gradient-angle: calc(#{prepareMediaVariable(--_ctm-gri-dn-gt-ae, 90)} * 1deg);
-    --_sf-gri-gradient-start-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-st-cr, transparent)};
-    --_sf-gri-gradient-start-position: calc(
-      #{prepareMediaVariable(--_ctm-gri-dn-gt-st-pn, 0)} * 1%
-    );
-    --_sf-gri-gradient-end-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-cr, transparent)};
-    --_sf-gri-gradient-end-position: calc(
-      #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-pn, 100)} * 1%
-    );
-    --_sf-gri-gradient-position: #{prepareMediaVariable(--_ctm-gri-dn-gt-pn, center)};
-
-    &[data-gradient-type="Linear Gradient"] {
-      & > .wrapper {
-        background-image: linear-gradient(
-          var(--_sf-gri-gradient-angle),
-          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
-          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
-        );
-      }
-    }
-
-    &[data-gradient-type="Radial Gradient"] {
-      & > .wrapper {
-        background-image: radial-gradient(
-          circle at var(--_sf-gri-gradient-position),
-          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
-          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
-        );
-      }
-    }
-  }
-
-  &[data-background-type="image"] {
-    & > .wrapper {
-      background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-gri-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
-    }
-  }
-
-  &[data-show-shadow="false"] {
-    --_hide-grid-shadow: none;
-  }
-  &[data-show-border="false"] {
-    --_hide-grid-border: none;
-  }
-
-  &:is(#{$activeElementSelector}) {
-    &:has(#{$activeElementSelector}#{$elementSelector}) {
-      & > div {
-        &[data-type="wrapper-layer"] {
-          --_sf-gri-wl-vt: visible;
-          --_sf-gri-wl-op: 1;
-          --_sf-gri-wl-dp: block;
-          --_sf-gri-wl-bw: 1px;
-          z-index: 2;
-        }
-      }
-    }
-  }
-
-  & > div {
-    &[data-type="wrapper-layer"] {
-      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
-      pointer-events: none;
-      visibility: var(--_sf-gri-wl-vt, hidden) !important;
-      opacity: var(--_sf-gri-wl-op, 0) !important;
-      position: var(--_p-absolute) !important;
-      inset: 0 0 0 0;
-      --_sf-pr-wr-ly-br-cl: 25%;
-      border: var(--_sf-gri-wl-bw) solid
-        color-mix(
-          in srgb,
-          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
-          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
-        );
-    }
-    &[data-div-type="cms-grid-wrapper"] {
-      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
-      // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
-      // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
-      // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
-      // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
-      // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
-      // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
-      width: 100%;
-      grid-area: 1/1/2/2 !important;
-      height: 100%;
-      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
-      display: var(--_d-grid);
-      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
-      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
-      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
-      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
-
-      &:is(.#{$flex} > *) {
-        display: var(--_d-flex) !important;
-        column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
-        row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
-        flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
-        overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
-
-        &.#{$flexRow} {
-          flex-direction: row;
-          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexRowReverse} {
-          flex-direction: row-reverse;
-          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexColumn} {
-          flex-direction: column;
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexColumnReverse} {
-          flex-direction: column-reverse;
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-      }
-    }
-  }
-}
+$activeElementSelector: "[data-has-clicked='true']";
+$elementSelector: "[data-div-type='element']";
+
+@use "./functions.scss" as *;
+
+$flex: "flx";
+$grid: "grd";
+$flexRow: "rw";
+$flexRowReverse: "rw-rv";
+$flexColumn: "cln";
+$flexColumnReverse: "cln-rv";
+[data-div-type="grid"] {
+  position: var(--_p-relative);
+  display: var(--_d-grid);
+  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
+  // height: 100% !important;
+  box-shadow: var(
+    --_hide-grid-shadow,
+    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
+      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
+  );
+  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+
+  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+  // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
+  // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+  // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+  // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+  // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+  // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+  // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+
+  &[data-background-type="color"] {
+    & > .wrapper {
+      background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+    }
+  }
+
+  &[data-background-type="gradient"] {
+    --_sf-gri-gradient-angle: calc(#{prepareMediaVariable(--_ctm-gri-dn-gt-ae, 90)} * 1deg);
+    --_sf-gri-gradient-start-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-st-cr, transparent)};
+    --_sf-gri-gradient-start-position: calc(
+      #{prepareMediaVariable(--_ctm-gri-dn-gt-st-pn, 0)} * 1%
+    );
+    --_sf-gri-gradient-end-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-cr, transparent)};
+    --_sf-gri-gradient-end-position: calc(
+      #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-pn, 100)} * 1%
+    );
+    --_sf-gri-gradient-position: #{prepareMediaVariable(--_ctm-gri-dn-gt-pn, center)};
+
+    &[data-gradient-type="Linear Gradient"] {
+      & > .wrapper {
+        background-image: linear-gradient(
+          var(--_sf-gri-gradient-angle),
+          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
+          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
+        );
+      }
+    }
+
+    &[data-gradient-type="Radial Gradient"] {
+      & > .wrapper {
+        background-image: radial-gradient(
+          circle at var(--_sf-gri-gradient-position),
+          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
+          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
+        );
+      }
+    }
+  }
+
+  &[data-background-type="image"] {
+    & > .wrapper {
+      background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+      background-position-y: prepareMediaVariable(--_ctm-gri-dn-bd-pn-y);
+      background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+    }
+  }
+
+  &[data-show-shadow="false"] {
+    --_hide-grid-shadow: none;
+  }
+  &[data-show-border="false"] {
+    --_hide-grid-border: none;
+  }
+
+  &:is(#{$activeElementSelector}) {
+    &:has(#{$activeElementSelector}#{$elementSelector}) {
+      & > div {
+        &[data-type="wrapper-layer"] {
+          --_sf-gri-wl-vt: visible;
+          --_sf-gri-wl-op: 1;
+          --_sf-gri-wl-dp: block;
+          --_sf-gri-wl-bw: 1px;
+          z-index: 2;
+        }
+      }
+    }
+  }
+
+  & > div {
+    &[data-type="wrapper-layer"] {
+      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
+      pointer-events: none;
+      visibility: var(--_sf-gri-wl-vt, hidden) !important;
+      opacity: var(--_sf-gri-wl-op, 0) !important;
+      position: var(--_p-absolute) !important;
+      inset: 0 0 0 0;
+      --_sf-pr-wr-ly-br-cl: 25%;
+      border: var(--_sf-gri-wl-bw) solid
+        color-mix(
+          in srgb,
+          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
+          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
+        );
+    }
+    &[data-div-type="cms-grid-wrapper"] {
+      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
+      // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+      // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+      // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+      // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+      // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+      // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+      width: 100%;
+      grid-area: 1/1/2/2 !important;
+      height: 100%;
+      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
+      display: var(--_d-grid);
+      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
+      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
+      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
+      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
+
+      &:is(.#{$flex} > *) {
+        display: var(--_d-flex) !important;
+        column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
+        flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
+        overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
+
+        &.#{$flexRow} {
+          flex-direction: row;
+          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexRowReverse} {
+          flex-direction: row-reverse;
+          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexColumn} {
+          flex-direction: column;
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexColumnReverse} {
+          flex-direction: column-reverse;
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+      }
+    }
+  }
+}

package/dist/icon-library.scss

@@ -1,78 +1,78 @@
-@use "sass:map";
-@use "sass:list";
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-
-[data-div-type="element"] {
-  &[data-element-type="iconLibrary"] {
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
-
-    & > .wrapper {
-      width: 100%;
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-    }
-    &[data-widget-border="true"] .icon__container {
-      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
-      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
-      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
-    }
-
-    &[data-widget-shadow="true"] .icon__container {
-      box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
-        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
-        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
-        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
-    }
-
-    &[data-widget-shadow="false"] .icon__container {
-      box-shadow: none;
-    }
-
-    .icon__container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      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)));
-      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-
-      .icon {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-
-        svg {
-          width: 100%;
-          height: 100%;
-          path {
-            stroke: var(
-              --_ctm-mob-dn-in-c1,
-              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
-            ) !important;
-            // Overrides the stroke-width presentation attribute baked into each icon's
-            // markup. A plain declaration is enough — presentation attributes lose to
-            // any CSS rule — so no !important is needed here.
-            stroke-width: var(--_ctm-mob-dn-se-wh, var(--_ctm-tab-dn-se-wh, var(--_ctm-dn-se-wh)));
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+
+[data-div-type="element"] {
+  &[data-element-type="iconLibrary"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
+
+    & > .wrapper {
+      width: 100%;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    }
+    &[data-widget-border="true"] .icon__container {
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+    }
+
+    &[data-widget-shadow="true"] .icon__container {
+      box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
+    }
+
+    &[data-widget-shadow="false"] .icon__container {
+      box-shadow: none;
+    }
+
+    .icon__container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      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)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+      .icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+
+        svg {
+          width: 100%;
+          height: 100%;
+          path {
+            stroke: var(
+              --_ctm-mob-dn-in-c1,
+              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
+            ) !important;
+            // Overrides the stroke-width presentation attribute baked into each icon's
+            // markup. A plain declaration is enough — presentation attributes lose to
+            // any CSS rule — so no !important is needed here.
+            stroke-width: var(--_ctm-mob-dn-se-wh, var(--_ctm-tab-dn-se-wh, var(--_ctm-dn-se-wh)));
+          }
+        }
+      }
+    }
+  }
+}

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%;
+    }
+  }
+}