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

package/dist/product-basic-elements.scss

@@ -589,250 +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%;
-      // 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(
-        --_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%;
-      // 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;
-      // 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))

package/dist/product-image-bundles.scss

@@ -9,13 +9,24 @@
   );
   // height: var(--_ctm-mob-dn-pt-pl-dn-pt-ie-lt-ht, var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-ht, var(--_ctm-dn-pt-pl-dn-pt-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-pt-pl-dn-pt-ie-lt-ht,
       var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-ht, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-ht))
     );
   }
 
+  &:has(#{$contentSizedGallery}) {
+    min-height: var(
+      --_ctm-mob-dn-pt-pl-dn-pt-ie-lt-ht,
+      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-lt-ht, var(--_ctm-dn-pt-pl-dn-pt-ie-lt-ht))
+    );
+  }
+
   // &[data-view-state="full"] {
   //   width: auto;
   //   // height: 100%;
@@ -180,19 +191,48 @@
 
     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-pt-pl-dn-pt-ie-gy-wt-se-br-cr,
-      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr))
+      --_show-gy-border,
+      var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-cr)
+        )
+      )
     );
 
     border-style: var(
-      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se,
-      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se))
+      --_show-gy-border,
+      var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-se)
+        )
+      )
     );
 
     border-width: var(
-      --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh,
-      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh))
+      --_show-gy-border,
+      var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh,
+        var(
+          --_ctm-tab-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh,
+          var(--_ctm-dn-pt-pl-dn-pt-ie-gy-wt-se-br-wh)
+        )
+      )
     );
 
     border-radius: var(
@@ -201,7 +241,7 @@
     );
 
     box-shadow: var(
-      --_show-shadow,
+      --_show-gy-shadow,
       var(
           --_ctm-mob-dn-pt-pl-dn-pt-ie-gy-wt-se-sw-ae,
           var(
@@ -972,17 +1012,34 @@
       --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-bd-cr,
       var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-bd-cr, var(--_ctm-dn-pt-pl-dn-pt-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-pt-pl-dn-pt-ie-im-se-br-cr,
-      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-cr))
+      --_show-im-border,
+      var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-cr,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-cr))
+      )
     );
     border-style: var(
-      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-se,
-      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-se))
+      --_show-im-border,
+      var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-se,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-se, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-se))
+      )
     );
     border-width: var(
-      --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-wh,
-      var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-wh))
+      --_show-im-border,
+      var(
+        --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-wh,
+        var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-br-wh, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-br-wh))
+      )
     );
     border-radius: var(
       --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-br-rs,
@@ -990,7 +1047,7 @@
     );
 
     box-shadow: var(
-      --_show-shadow,
+      --_show-im-shadow,
       var(
           --_ctm-mob-dn-pt-pl-dn-pt-ie-im-se-sw-ae,
           var(--_ctm-tab-dn-pt-pl-dn-pt-ie-im-se-sw-ae, var(--_ctm-dn-pt-pl-dn-pt-ie-im-se-sw-ae))