@sc-360-v2/storefront-cms-library 0.5.53 → 0.5.55

package/dist/bulk-variant-picker.scss

@@ -3112,6 +3112,8 @@ $minWidth: 70px;
                 path {
                   stroke: var(--_gray-500);
                   // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-wh, 1.25);
                 }
               }
             }
@@ -3425,6 +3427,8 @@ $minWidth: 70px;
 
               path {
                 stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-se-wh, 1.25);
               }
             }
           }

package/dist/bundle copy.scss

@@ -1168,6 +1168,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: var(--_ctm-dn-be-ds-pe-bn-dn-in-se);
                   path {
                     stroke: var(--_ctm-dn-be-ds-pe-bn-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -1265,6 +1267,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                 path {
                   stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                 }
               }
             }
@@ -1306,6 +1310,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                   path {
                     stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -1456,6 +1462,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                   path {
                     stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -1497,6 +1505,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                     path {
                       stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                     }
                   }
                 }
@@ -1602,6 +1612,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                 path {
                   stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                 }
               }
             }
@@ -1643,6 +1655,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                   path {
                     stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -1750,6 +1764,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                 path {
                   stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                 }
               }
             }
@@ -1791,6 +1807,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                   path {
                     stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -1970,6 +1988,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                       path {
                         stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                        // Overrides the stroke-width presentation attribute baked into the icon markup.
+                        stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                       }
                     }
                   }
@@ -2012,6 +2032,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                         height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                         path {
                           stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                          // Overrides the stroke-width presentation attribute baked into the icon markup.
+                          stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                         }
                       }
                     }
@@ -2166,6 +2188,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                   path {
                     stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -2206,6 +2230,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     height: var(--_ctm-dn-be-nn-bn-dn-in-se);
                     path {
                       stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                     }
                   }
                 }

package/dist/bundle.scss

@@ -1834,6 +1834,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_sf-hr-in-c1,
                     prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1)
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-se-wh, 1.25);
                 }
               }
             }
@@ -2201,6 +2203,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_sf-hr-in-c1,
                     prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1)
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-se-wh, 1.25);
                 }
               }
             }
@@ -2266,6 +2270,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                   path {
                     stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                   }
                 }
               }
@@ -2481,6 +2487,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                     path {
                       stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                     }
                   }
                 }
@@ -2525,6 +2533,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                       path {
                         stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
+                        // Overrides the stroke-width presentation attribute baked into the icon markup.
+                        stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                       }
                     }
                   }

package/dist/bundleDetails.scss

@@ -1209,6 +1209,11 @@ $defaultValues: (
                     --_sf-hr-in-c1,
                     prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-in-c1)
                   );
+                  // Overrides the stroke-width presentation attribute baked into the icon markup.
+                  stroke-width: prepareMediaVariable(
+                    --_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-se-wh,
+                    1.25
+                  );
                 }
               }
             }
@@ -5257,6 +5262,8 @@ $defaultValues: (
                 //             --_sf-hr-in-c1,
                 //             prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1)
                 //           );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-se-wh, 1.25);
                 //         }
                 //       }
                 //     }
@@ -5457,6 +5464,11 @@ $defaultValues: (
                         --_sf-hr-in-c1,
                         prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-in-c1)
                       );
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(
+                        --_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-se-wh,
+                        1.25
+                      );
                     }
                   }
                 }
@@ -5858,6 +5870,8 @@ $defaultValues: (
           height: prepareMediaVariable(--_ctm-dn-er-me-in-se);
           path {
             stroke: prepareMediaVariable(--_ctm-dn-er-me-in-c1);
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-er-me-se-wh, 1.25);
           }
         }
       }

package/dist/button copy.scss

@@ -259,6 +259,8 @@
                 var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
               )
             );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-dt-se-se-wh, 1.25);
           }
         }
       }

package/dist/button.scss

@@ -210,6 +210,8 @@
 
           path {
             stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dt-se-in-c1));
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-dt-se-se-wh, 1.25);
           }
         }
       }

package/dist/buyForHeaders.scss

@@ -640,6 +640,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                             var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1)
                           )
                         );
+                        // Overrides the stroke-width presentation attribute baked into the icon markup.
+                        stroke-width: prepareMediaVariable(
+                          --_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh,
+                          1.25
+                        );
                       }
                     }
 
@@ -1139,6 +1144,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                           var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1)
                         )
                       );
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(
+                        --_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh,
+                        1.25
+                      );
                     }
                   }
 
@@ -1584,6 +1594,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     height: var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-se);
                     path {
                       stroke: var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1);
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(
+                        --_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh,
+                        1.25
+                      );
                     }
                   }
 
@@ -2736,6 +2751,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
                       path {
                         stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
+                        // Overrides the stroke-width presentation attribute baked into the icon markup.
+                        stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
                       }
                     }
                     &:hover {
@@ -4200,6 +4217,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
                       path {
                         stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
+                        // Overrides the stroke-width presentation attribute baked into the icon markup.
+                        stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25);
                       }
                     }
                   }

package/dist/cart-details.scss

@@ -4,6 +4,26 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+$overflowSelector: ".flex__overflow";
+
+// Text Transform / Word Wrap / Word Break are emitted by the Typography panel for
+// every cart details text section. Each section repeats its typography block in the
+// desktop and the responsive layout, so the three declarations live in one mixin
+// that both call with the section's variable prefix.
+@mixin cartDetailsTextFlow($prefix) {
+  text-transform: prepareMediaVariable(#{$prefix}-tt-tm, none);
+  word-wrap: prepareMediaVariable(#{$prefix}-wd-wp, normal);
+  word-break: prepareMediaVariable(#{$prefix}-wd-bk, normal);
+}
+
+// Text Overflow is a `controls` property, not a CSS one, so it cannot come through as
+// a variable — the renderer opts the node in with `.flex__overflow` and carries the
+// line count in `--_sf-line-clamp`. Same contract as cart-summary and order-status.
+@mixin cartDetailsTextClamp {
+  &#{$overflowSelector} {
+    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+  }
+}
 
 // $defaultValues: (
 //   --_dm-flt: getListOfResponsive(flex-end, flex-start),
@@ -130,6 +150,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               text-decoration: prepareMediaVariable(--_ctm-dn-ct-hg-ss-ue);
               letter-spacing: prepareMediaVariable(--_ctm-dn-ct-hg-ss-lr-sg);
               font-family: prepareMediaVariable(--_ctm-dn-ct-hg-ss-ft-fy);
+              text-align: prepareMediaVariable(--_ctm-dn-ct-hg-ss-tt-an);
+              @include cartDetailsTextFlow(--_ctm-dn-ct-hg-ss);
+              display: block;
+              width: 100%;
+              @include cartDetailsTextClamp;
             }
 
             .number_of_items {
@@ -200,6 +225,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-ct-an-ss-le-ht,
                 var(--_ctm-tab-dn-ct-an-ss-le-ht, var(--_ctm-dn-ct-an-ss-le-ht))
               );
+              @include cartDetailsTextFlow(--_ctm-dn-ct-an-ss);
 
               &:hover {
                 text-decoration: underline;
@@ -557,6 +583,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           font-weight: 500;
           font-size: 14px;
           line-height: 20px;
+          @include cartDetailsTextFlow(--_ctm-dn-pt-as-is);
+          @include cartDetailsTextClamp;
 
           &.required::after {
             content: " *";
@@ -1052,17 +1080,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       // }
     }
 
-    border-radius: 4px;
-    box-shadow: var(--_ctm-dn-ct-im-ss-sw-ae) var(--_ctm-dn-ct-im-ss-sw-br)
-      var(--_ctm-dn-ct-im-ss-sw-sd) var(--_ctm-dn-ct-im-ss-sw-cr);
-    margin: var(--_ctm-dn-ct-im-ss-mn);
-    padding: var(--_ctm-dn-ct-im-ss-pg);
-    background: var(--_ctm-dn-ct-im-ss-bd-cr);
+    border-radius: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-rs);
+    box-shadow: prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-ae)
+      prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-br) prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-sd)
+      prepareMediaVariable(--_ctm-dn-ct-im-ss-sw-cr);
+    padding: prepareMediaVariable(--_ctm-dn-ct-im-ss-pg);
+    background: prepareMediaVariable(--_ctm-dn-ct-im-ss-bd-cr);
     max-width: 100%;
     min-width: 100%;
-    border-style: var(--_ctm-dn-ct-im-ss-br-se);
-    border-color: var(--_ctm-dn-ct-im-ss-br-cr);
-    border-width: var(--_ctm-dn-ct-im-ss-br-wh);
+    border-style: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-se);
+    border-color: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-cr);
+    border-width: prepareMediaVariable(--_ctm-dn-ct-im-ss-br-wh);
     gap: 16px;
     display: grid;
 
@@ -1079,7 +1107,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       .cart_product_left_wrapper {
         display: flex;
         align-items: flex-start;
-        gap: 16px;
+        // gap: 16px;
+        gap: prepareMediaVariable(--_ctm-dn-pt-in-wr-im-gp, 16px);
         // max-width: 60%;
         height: 100%;
 
@@ -1088,13 +1117,35 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         .product_image {
-          width: 130px;
+          width: 100%;
           height: 130px;
-          background-color: var(--_gray-50);
-          border-radius: 8px;
-          border: 1px solid var(--_thm-cs-be-se-3);
+          background-color: prepareMediaVariable(--_ctm-dn-pt-ie-ss-bd-cr);
+          border-radius: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-rs);
+          border-width: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-wh);
+          border-color: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-cr);
+          border-style: prepareMediaVariable(--_ctm-dn-pt-ie-ss-br-se);
           overflow: hidden;
           flex-shrink: 0;
+          box-shadow: var(
+            --_show-shadow,
+            var(
+                --_ctm-mob-dn-pt-ie-ss-sw-ae,
+                var(--_ctm-tab-dn-pt-ie-ss-sw-ae, var(--_ctm-dn-pt-ie-ss-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-pt-ie-ss-sw-br,
+                var(--_ctm-tab-dn-pt-ie-ss-sw-br, var(--_ctm-dn-pt-ie-ss-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-pt-ie-ss-sw-sd,
+                var(--_ctm-tab-dn-pt-ie-ss-sw-sd, var(--_ctm-dn-pt-ie-ss-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-pt-ie-ss-sw-cr,
+                var(--_ctm-tab-dn-pt-ie-ss-sw-cr, var(--_ctm-dn-pt-ie-ss-sw-cr))
+              )
+          );
+          object-fit: cover;
 
           img {
             width: 100%;
@@ -1170,10 +1221,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-pt-ne-ss-ue,
                 var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue))
               );
+              @include cartDetailsTextFlow(--_ctm-dn-pt-ne-ss);
+              @include cartDetailsTextClamp;
             }
 
             .product_code {
               display: flex;
+              @include cartDetailsTextClamp;
               align-items: center;
               align-self: stretch;
               flex-wrap: wrap;
@@ -1220,6 +1274,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-in-ss-ue,
                   var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                 );
+                @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss);
 
                 &:not(:last-child)::after {
                   content: "";
@@ -1243,6 +1298,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               align-self: stretch;
               flex-wrap: wrap;
               font-size: 14px;
+              @include cartDetailsTextClamp;
 
               span {
                 white-space: nowrap;
@@ -1285,6 +1341,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-in-ss-ue,
                   var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                 );
+                @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss);
 
                 &::after {
                   content: "/";
@@ -1357,6 +1414,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-pt-as-ss-ue,
                 var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
               );
+              @include cartDetailsTextFlow(--_ctm-dn-pt-as-ss);
 
               .attr_val_info_detail {
                 b {
@@ -1450,9 +1508,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht))
               );
               text-decoration: var(
-                --_ctm-mob-dn-pt-qy-ss-ue,
-                var(--_ctm-tab-dn-pt-qy-ss-ue, var(--_ctm-dn-pt-qy-ss-ue))
+                --_ctm-mob-dn-pt-rd-io-ss-ue,
+                var(--_ctm-tab-dn-pt-rd-io-ss-ue, var(--_ctm-dn-pt-rd-io-ss-ue))
               );
+              @include cartDetailsTextFlow(--_ctm-dn-pt-rd-io);
+              @include cartDetailsTextClamp;
             }
           }
         }
@@ -1499,6 +1559,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 display: flex;
                 padding: 8px 12px;
                 align-items: center;
+                align-self: center;
                 border-radius: 8px 0px 0px 8px;
 
                 p {
@@ -1607,6 +1668,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-pt-pe-ss-ue,
               var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
             );
+            @include cartDetailsTextFlow(--_ctm-dn-pt-pe-ss);
             min-width: 80px;
           }
         }
@@ -1674,6 +1736,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 //   --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
                 //   var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
                 // );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-et-se-wh, 1.25);
                 stroke: var(--_thm-cs-be-se-1);
               }
             }
@@ -1724,6 +1788,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
                 //   var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
                 // );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25);
                 stroke: var(--_thm-cs-be-se-1);
               }
             }
@@ -1768,6 +1834,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
                   var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-de-se-wh, 1.25);
               }
             }
 
@@ -1882,6 +1950,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-pt-as-ss-ue,
               var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
             );
+            @include cartDetailsTextFlow(--_ctm-dn-pt-as-ss);
           }
 
           .cart_item_accordion_left {
@@ -2508,6 +2577,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-ne-ss-ue,
                   var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue))
                 );
+                @include cartDetailsTextFlow(--_ctm-dn-pt-ne-ss);
+                @include cartDetailsTextClamp;
               }
 
               .product_code {
@@ -2516,6 +2587,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 align-self: stretch;
                 flex-wrap: wrap;
                 font-size: 14px;
+                @include cartDetailsTextClamp;
 
                 span {
                   // color: var(--_gray-600);
@@ -2558,6 +2630,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-in-ss-ue,
                     var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                   );
+                  @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss);
 
                   &:not(:last-child)::after {
                     content: "";
@@ -2581,6 +2654,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 align-self: stretch;
                 flex-wrap: wrap;
                 font-size: 14px;
+                @include cartDetailsTextClamp;
 
                 span {
                   white-space: nowrap;
@@ -2623,6 +2697,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-in-ss-ue,
                     var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                   );
+                  @include cartDetailsTextFlow(--_ctm-dn-pt-in-ss);
 
                   &::after {
                     content: "/";
@@ -2783,6 +2858,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-pe-ss-ue,
                   var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
                 );
+                @include cartDetailsTextFlow(--_ctm-dn-pt-pe-ss);
                 min-width: 80px;
               }
             }
@@ -2820,6 +2896,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
                       //   var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
                       // );
+                      // Overrides the stroke-width presentation attribute baked into the icon markup.
+                      stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25);
                       stroke: var(--_thm-cs-be-se-1);
                     }
                   }
@@ -2900,6 +2978,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-as-ss-ue,
                     var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
                   );
+                  @include cartDetailsTextFlow(--_ctm-dn-pt-as-ss);
 
                   .attr_val_info_detail {
                     b {
@@ -2993,9 +3072,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht))
                   );
                   text-decoration: var(
-                    --_ctm-mob-dn-pt-qy-ss-ue,
-                    var(--_ctm-tab-dn-pt-qy-ss-ue, var(--_ctm-dn-pt-qy-ss-ue))
+                    --_ctm-mob-dn-pt-rd-io-ss-ue,
+                    var(--_ctm-tab-dn-pt-rd-io-ss-ue, var(--_ctm-dn-pt-rd-io-ss-ue))
                   );
+                  @include cartDetailsTextFlow(--_ctm-dn-pt-rd-io);
+                  @include cartDetailsTextClamp;
                 }
               }
             }
@@ -3133,6 +3214,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
                       var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
                     );
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-de-se-wh, 1.25);
                   }
                 }