@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

package/dist/product-actions.scss

@@ -44,6 +44,14 @@
         var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
       );
 
+      // Widget Style's "Show Border" switch. The border above is painted from CSS
+      // variables, so the switch arrives as a data attribute and the width is zeroed
+      // here — same approach as the popover's border switch further down.
+      &[data-widget-border="false"] {
+        border-width: 0;
+        border-style: none;
+      }
+
       box-shadow: var(
         --_show-shadow,
         var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
@@ -286,6 +294,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-se-wh, 1);
               }
             }
           }
@@ -509,6 +518,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-by-nw-dt-se-se-wh, 1);
               }
             }
           }
@@ -726,6 +736,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-wt-dt-se-se-wh, 1);
               }
             }
           }
@@ -942,6 +953,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ce-dt-se-se-wh, 1);
               }
             }
           }
@@ -1167,6 +1179,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-se-wh, 1);
               }
             }
           }
@@ -1425,6 +1438,7 @@
                   --_sf-hr-in-c1,
                   prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1)
                 );
+                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-se-wh, 1);
               }
             }
           }
@@ -1643,6 +1657,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
               }
             }
           }
@@ -1858,6 +1873,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
               }
             }
           }
@@ -2073,6 +2089,7 @@
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
+                stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
               }
             }
           }
@@ -2321,6 +2338,11 @@
         }
       }
 
+      // Horizontal side of the popover, from design > Popover Style > Popover Position.
+      // Only the side changes — the vertical placement below is left to the display
+      // style, so a vertically stacked list still opens beside its trigger and a
+      // horizontal one still opens underneath it. "Right" is the original behaviour and
+      // stays the default, so elements saved before this control are unaffected.
       &[data-display-style="Stack Vertically"] {
         .popover-box {
           left: 100%;
@@ -2328,12 +2350,43 @@
           margin-left: 6px;
           top: 0;
         }
+
+        // Beside the trigger, on its left instead of its right.
+        .popover-container[data-popover-position="Left"] .popover-box {
+          left: auto;
+          right: 100%;
+          margin-left: 0;
+          margin-right: 6px;
+        }
       }
       &[data-display-style="Stack Horizontally"] {
         .popover-box {
           right: 0;
           margin-top: 6px;
         }
+
+        // Under the trigger, aligned to its left edge instead of its right.
+        .popover-container[data-popover-position="Left"] .popover-box {
+          right: auto;
+          left: 0;
+        }
+      }
+
+      // "Show Border" switch for the popover. The border is painted from CSS variables
+      // above, so the switch arrives as a data attribute and the width is zeroed here.
+      // Placed after the .popover-box rules and one attribute deeper, so it wins.
+      .popover-container[data-popover-border="false"] .popover-box {
+        border-width: 0;
+        border-style: none;
+      }
+
+      // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
+      // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
+      .popover-container[data-popover-position="Left"] .popover-arrow {
+        left: auto;
+        right: -5px;
+        box-shadow: 1px 1px 0px
+          var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
       }
     }
   }

package/dist/product-basic-elements.scss

@@ -39,6 +39,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(
@@ -128,7 +131,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(
@@ -179,6 +190,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
 
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
@@ -287,7 +301,11 @@ $overflowSelector: ".flex__overflow";
         );
         text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
         letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-        line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+        // Line box guard — see the note on the other groups in this file.
+        line-height: max(
+          var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+          1em
+        );
         text-decoration: var(
           --_sf-hr-tt-dn,
           var(
@@ -329,6 +347,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(
@@ -402,7 +423,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(
@@ -453,6 +482,9 @@ $overflowSelector: ".flex__overflow";
 
     & > .wrapper {
       width: 100%;
+      // Follow the elements own height so the styled box (background, border, shadow)
+      // matches the Height set in layout instead of only hugging the text.
+      min-height: inherit;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(
@@ -526,7 +558,15 @@ $overflowSelector: ".flex__overflow";
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
       text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
       letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
+      // Line box guard. The line-height control stores a fixed length (its default is
+      // 1rem), so it does not grow with the font size — at a large size the glyphs end
+      // up taller than their own line box and spill out of it, which is what makes the
+      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
+      // while still honouring any larger value the user sets.
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       text-decoration: var(
         --_sf-hr-tt-dn,
         var(
@@ -549,244 +589,4 @@ $overflowSelector: ".flex__overflow";
       }
     }
   }
-  &[data-element-type="productReview"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    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, var(--_tst-lt-mn))));
-    min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-    // height: ;
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    // --_aspect-ratio: calc(
-    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    // );
-
-    & > .wrapper {
-      width: 100%;
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      border-color: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
-      );
-      border-style: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
-      );
-      border-width: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      );
-      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(
-        --_show-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)))
-      );
-      // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-show-border="false"] {
-      --_show-border: none;
-    }
-    // .text-element {
-    //   background: #6d96e4;
-    //   // padding: 10px;
-    //   font-weight: 600;
-    //   color: rgba(75, 69, 70, 1);
-    // }
-    .text-element {
-      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-      // border-color: var(
-      //   --_show-border,
-      //   var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
-      // );
-      // border-style: var(
-      //   --_show-border,
-      //   var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
-      // );
-      // border-width: var(
-      //   --_show-border,
-      //   var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      // );
-      // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      // box-shadow: var(
-      //   --_show-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)))
-      // );
-      color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
-      font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
-      font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
-      font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
-      font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
-      text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
-      letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
-      text-decoration: var(
-        --_sf-hr-tt-dn,
-        var(
-          --_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
-        )
-      );
-      scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
-      &[data-flip-x="true"] {
-        transform: scaleX(-1);
-      }
-      &[data-flip-y="true"] {
-        transform: scaleY(-1);
-      }
-    }
-    text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
-  }
-  &[data-element-type="productRating"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    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, var(--_tst-lt-mn))));
-    min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-    // height: ;
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    // --_aspect-ratio: calc(
-    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    // );
-
-    & > .wrapper {
-      width: 100%;
-      // height: 100%;
-
-      border-color: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
-      );
-      border-style: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
-      );
-      border-width: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      );
-      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(
-        --_show-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)))
-      );
-
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-show-border="false"] {
-      --_show-border: none;
-    }
-    // .text-element {
-    //   background: #6d96e4;
-    //   // padding: 10px;
-    //   font-weight: 600;
-    //   color: rgba(75, 69, 70, 1);
-    // }
-    .text-element {
-      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-      // border-color: var(
-      //   --_show-border,
-      //   var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
-      // );
-      // border-style: var(
-      //   --_show-border,
-      //   var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
-      // );
-      // border-width: var(
-      //   --_show-border,
-      //   var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      // );
-      // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      // box-shadow: var(
-      //   --_show-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)))
-      // );
-      color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
-      font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
-      font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
-      font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
-      font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
-      text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
-      letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
-      line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
-      text-decoration: var(
-        --_sf-hr-tt-dn,
-        var(
-          --_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
-        )
-      );
-      scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
-      &[data-flip-x="true"] {
-        transform: scaleX(-1);
-      }
-      &[data-flip-y="true"] {
-        transform: scaleY(-1);
-      }
-      text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
-    }
-  }
 }

package/dist/product-image-allocation.scss

@@ -4,9 +4,17 @@
   width: var(--_ctm-mob-dn-ie-lt-wh, var(--_ctm-tab-dn-ie-lt-wh, var(--_ctm-dn-ie-lt-wh)));
   // height: var(--_ctm-mob-dn-ie-lt-ht, var(--_ctm-tab-dn-ie-lt-ht, var(--_ctm-dn-ie-lt-ht)));
 
-  &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
+  // Content-sized display styles — the element grows with the number of images.
+  // See product-image.scss for the full reasoning.
+  $contentSizedGallery: '.embla[data-scroll-control="Non"]:is([data-display-style="Grid"][data-scroll-direction="Vertical"], [data-display-style="Rows"], [data-display-style="Masonry"])';
+
+  &:not(:has(#{$contentSizedGallery})) {
     height: var(--_ctm-mob-dn-ie-lt-ht, var(--_ctm-tab-dn-ie-lt-ht, var(--_ctm-dn-ie-lt-ht)));
   }
+
+  &:has(#{$contentSizedGallery}) {
+    min-height: var(--_ctm-mob-dn-ie-lt-ht, var(--_ctm-tab-dn-ie-lt-ht, var(--_ctm-dn-ie-lt-ht)));
+  }
   &[data-has-link="true"] {
     cursor: pointer;
   }
@@ -169,19 +177,39 @@
 
     width: 100%;
     height: 100%;
+
+    // Gallery Widget Style > Border / Shadow toggles. Distinct names from the item
+    // ones below, because .gallery__slide is a descendant and would otherwise
+    // inherit whatever is set here.
+    &[data-show-border="false"] {
+      --_show-gy-border: none;
+    }
+    &[data-show-shadow="false"] {
+      --_show-gy-shadow: none;
+    }
+
     border-color: var(
-      --_ctm-mob-dn-ie-gy-wt-se-br-cr,
-      var(--_ctm-tab-dn-ie-gy-wt-se-br-cr, var(--_ctm-dn-ie-gy-wt-se-br-cr))
+      --_show-gy-border,
+      var(
+        --_ctm-mob-dn-ie-gy-wt-se-br-cr,
+        var(--_ctm-tab-dn-ie-gy-wt-se-br-cr, var(--_ctm-dn-ie-gy-wt-se-br-cr))
+      )
     );
 
     border-style: var(
-      --_ctm-mob-dn-ie-gy-wt-se-br-se,
-      var(--_ctm-tab-dn-ie-gy-wt-se-br-se, var(--_ctm-dn-ie-gy-wt-se-br-se))
+      --_show-gy-border,
+      var(
+        --_ctm-mob-dn-ie-gy-wt-se-br-se,
+        var(--_ctm-tab-dn-ie-gy-wt-se-br-se, var(--_ctm-dn-ie-gy-wt-se-br-se))
+      )
     );
 
     border-width: var(
-      --_ctm-mob-dn-ie-gy-wt-se-br-wh,
-      var(--_ctm-tab-dn-ie-gy-wt-se-br-wh, var(--_ctm-dn-ie-gy-wt-se-br-wh))
+      --_show-gy-border,
+      var(
+        --_ctm-mob-dn-ie-gy-wt-se-br-wh,
+        var(--_ctm-tab-dn-ie-gy-wt-se-br-wh, var(--_ctm-dn-ie-gy-wt-se-br-wh))
+      )
     );
 
     border-radius: var(
@@ -190,7 +218,7 @@
     );
 
     box-shadow: var(
-      --_show-shadow,
+      --_show-gy-shadow,
       var(
           --_ctm-mob-dn-ie-gy-wt-se-sw-ae,
           var(--_ctm-tab-dn-ie-gy-wt-se-sw-ae, var(--_ctm-dn-ie-gy-wt-se-sw-ae))
@@ -879,17 +907,25 @@
       --_ctm-mob-dn-ie-im-se-bd-cr,
       var(--_ctm-tab-dn-ie-im-se-bd-cr, var(--_ctm-dn-ie-im-se-bd-cr))
     );
+    // Item Style > Border / Shadow toggles.
+    &[data-show-border="false"] {
+      --_show-im-border: none;
+    }
+    &[data-show-shadow="false"] {
+      --_show-im-shadow: none;
+    }
+
     border-color: var(
-      --_ctm-mob-dn-ie-im-se-br-cr,
-      var(--_ctm-tab-dn-ie-im-se-br-cr, var(--_ctm-dn-ie-im-se-br-cr))
+      --_show-im-border,
+      var(--_ctm-mob-dn-ie-im-se-br-cr, var(--_ctm-tab-dn-ie-im-se-br-cr, var(--_ctm-dn-ie-im-se-br-cr)))
     );
     border-style: var(
-      --_ctm-mob-dn-ie-im-se-br-se,
-      var(--_ctm-tab-dn-ie-im-se-br-se, var(--_ctm-dn-ie-im-se-br-se))
+      --_show-im-border,
+      var(--_ctm-mob-dn-ie-im-se-br-se, var(--_ctm-tab-dn-ie-im-se-br-se, var(--_ctm-dn-ie-im-se-br-se)))
     );
     border-width: var(
-      --_ctm-mob-dn-ie-im-se-br-wh,
-      var(--_ctm-tab-dn-ie-im-se-br-wh, var(--_ctm-dn-ie-im-se-br-wh))
+      --_show-im-border,
+      var(--_ctm-mob-dn-ie-im-se-br-wh, var(--_ctm-tab-dn-ie-im-se-br-wh, var(--_ctm-dn-ie-im-se-br-wh)))
     );
     border-radius: var(
       --_ctm-mob-dn-ie-im-se-br-rs,
@@ -897,7 +933,7 @@
     );
 
     box-shadow: var(
-      --_show-shadow,
+      --_show-im-shadow,
       var(
           --_ctm-mob-dn-ie-im-se-sw-ae,
           var(--_ctm-tab-dn-ie-im-se-sw-ae, var(--_ctm-dn-ie-im-se-sw-ae))