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

package/dist/bundle.scss

@@ -630,6 +630,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
               var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy))
             );
+            --_sf-hr-tt-tm: var(
+              --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-tm,
+              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-tm))
+            );
+            --_sf-hr-wd-wp: var(
+              --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-wp,
+              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-wp))
+            );
+            --_sf-hr-wd-bk: var(
+              --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-bk,
+              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-bk))
+            );
             --_sf-hr-ft-se: var(
               --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
               var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se))
@@ -741,6 +753,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
 
           font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
+          text-transform: var(
+            --_sf-hr-tt-tm,
+            prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm)
+          );
+          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp));
+          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk));
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
 
           font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
 
@@ -828,6 +850,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
               var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy))
             );
+            --_sf-sd-tt-tm: var(
+              --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-tm,
+              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-tm))
+            );
+            --_sf-sd-wd-wp: var(
+              --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-wp,
+              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-wp))
+            );
+            --_sf-sd-wd-bk: var(
+              --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-bk,
+              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-bk))
+            );
             --_sf-sd-ft-se: var(
               --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
               var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se))
@@ -941,6 +975,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_sf-sd-ft-fy,
               prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)
             );
+            text-transform: var(
+              --_sf-sd-tt-tm,
+              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm)
+            );
+            word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp));
+            word-break: var(
+              --_sf-sd-wd-bk,
+              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk)
+            );
+            &.flex__overflow {
+              white-space: normal;
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
 
             font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
 
@@ -1121,6 +1168,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
               var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy))
             );
+            --_sf-hr-tt-tm: var(
+              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-tm,
+              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-tm))
+            );
+            --_sf-hr-wd-wp: var(
+              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-wp,
+              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-wp))
+            );
+            --_sf-hr-wd-bk: var(
+              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-bk,
+              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-bk))
+            );
             --_sf-hr-ft-se: var(
               --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
               var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se))
@@ -1232,6 +1291,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
 
           font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
+          text-transform: var(
+            --_sf-hr-tt-tm,
+            prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm)
+          );
+          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp));
+          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk));
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
 
           font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
 
@@ -1319,6 +1388,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
               var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy))
             );
+            --_sf-sd-tt-tm: var(
+              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-tm,
+              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-tm))
+            );
+            --_sf-sd-wd-wp: var(
+              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-wp,
+              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-wp))
+            );
+            --_sf-sd-wd-bk: var(
+              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-bk,
+              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-bk))
+            );
             --_sf-sd-ft-se: var(
               --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
               var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se))
@@ -1432,6 +1513,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               --_sf-sd-ft-fy,
               prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)
             );
+            text-transform: var(
+              --_sf-sd-tt-tm,
+              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm)
+            );
+            word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp));
+            word-break: var(
+              --_sf-sd-wd-bk,
+              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk)
+            );
+            &.flex__overflow {
+              white-space: normal;
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
 
             font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
 
@@ -1495,6 +1589,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           .bundle__title {
             font-family: prepareMediaVariable(--_ctm-dn-hg-dn-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-hg-dn-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-hg-dn-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-hg-dn-wd-bk);
             font-size: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se);
             color: prepareMediaVariable(--_ctm-dn-hg-dn-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-hg-dn-ft-wt);
@@ -1516,6 +1613,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           .bundle__description {
             font-family: prepareMediaVariable(--_ctm-dn-dn-dn-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-dn-dn-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-dn-dn-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-dn-dn-wd-bk);
             font-size: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se);
             color: prepareMediaVariable(--_ctm-dn-dn-dn-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-dn-dn-ft-wt);
@@ -1641,6 +1741,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)
                 )
               );
+              --_sf-hr-tt-tm: var(
+                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
+                var(
+                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
+                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-tm)
+                )
+              );
+              --_sf-hr-wd-wp: var(
+                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
+                var(
+                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
+                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-wp)
+                )
+              );
+              --_sf-hr-wd-bk: var(
+                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
+                var(
+                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
+                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-bk)
+                )
+              );
               --_sf-hr-ft-se: var(
                 --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
                 var(
@@ -1783,6 +1904,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_sf-hr-ft-fy,
                 prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy)
               );
+              text-transform: var(
+                --_sf-hr-tt-tm,
+                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-tm)
+              );
+              word-wrap: var(
+                --_sf-hr-wd-wp,
+                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-wp)
+              );
+              word-break: var(
+                --_sf-hr-wd-bk,
+                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-bk)
+              );
+              &.flex__overflow {
+                white-space: normal;
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
 
               font-size: var(
                 --_sf-hr-ft-se,
@@ -1942,6 +2079,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             .img-title {
               // padding: 12px;
               font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
+              word-wrap: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-bk);
               font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
               color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
               font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
@@ -2043,6 +2182,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
                 var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy))
               );
+              --_sf-hr-tt-tm: var(
+                --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-tm,
+                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-tm, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-tm))
+              );
+              --_sf-hr-wd-wp: var(
+                --_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-wp,
+                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-wp, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-wp))
+              );
+              --_sf-hr-wd-bk: var(
+                --_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-bk,
+                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-bk, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-bk))
+              );
               --_sf-hr-ft-se: var(
                 --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
                 var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se))
@@ -2155,6 +2306,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_sf-hr-ft-fy,
                 prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy)
               );
+              text-transform: var(
+                --_sf-hr-tt-tm,
+                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-tm)
+              );
+              word-wrap: var(
+                --_sf-hr-wd-wp,
+                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-wp)
+              );
+              word-break: var(
+                --_sf-hr-wd-bk,
+                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-bk)
+              );
+              &.flex__overflow {
+                white-space: normal;
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
 
               font-size: var(
                 --_sf-hr-ft-se,
@@ -2246,6 +2413,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               gap: 12px;
               align-self: stretch;
               font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
+              text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
+              &.flex__overflow {
+                white-space: normal;
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
               font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
               color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
               font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
@@ -2334,6 +2508,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   // text-overflow: ellipsis;
                   // white-space: nowrap;
                   font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-bk);
+                  &.flex__overflow {
+                    white-space: normal;
+                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                  }
                   font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
@@ -2357,6 +2538,34 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
 
+                // Category name + slider arrows of a category bundle. Tiles in the
+                // same row whose bundle has no category render this row empty, so
+                // every tile's image grid starts at the same height instead of
+                // riding up under the bundle name.
+                .tile_category_row {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  width: 100%;
+
+                  // An empty name still has to occupy its line box.
+                  .tile_category_name:empty::before {
+                    content: "\00a0";
+                  }
+
+                  // Rows next to a category slider also reserve the arrow button
+                  // box — same sizing NAVIGATION_STYLES gives those buttons.
+                  &[data-reserve-nav-height="true"] {
+                    min-height: calc(
+                      var(
+                          --_sf-icn-size,
+                          #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se, 16px)}
+                        ) *
+                        1.75
+                    );
+                  }
+                }
+
                 .brand-tile {
                   display: flex;
                   justify-content: center;
@@ -2371,6 +2580,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
 
                 .product-tile {
+                  // `--_sf-tile-columns` / `--_sf-tile-rows` are set inline by
+                  // TilesGridView from the Tile Columns / Tile Rows layout
+                  // settings — the same numbers it uses to decide how many image
+                  // cells to mount, so the template never holds cells the
+                  // renderer did not fill. The 2x2 fallback covers elements
+                  // rendered before those settings existed.
                   display: grid;
                   flex: 1 1 auto;
                   row-gap: prepareMediaVariable(--_ctm-lt-te-rw-gp);
@@ -2378,39 +2593,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   // padding: 10px;
                   box-sizing: border-box;
                   width: 100%;
-                  // i want height to be mutiple of 2 with --_ctm-lt-ie-ht\
+                  grid-template-columns: repeat(var(--_sf-tile-columns, 2), 1fr);
+                  grid-template-rows: repeat(var(--_sf-tile-rows, 2), 1fr);
 
-                  height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * 2);
-
-                  &.images-1 {
-                    // Single tile sits in the top-left cell at the same size as a
-                    // full 2x2 grid; the other three cells remain empty space.
-                    grid-template-columns: 1fr 1fr;
-                    grid-template-rows: 1fr 1fr;
-                  }
+                  // One image height per row.
+                  height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * var(--_sf-tile-rows, 2));
 
-                  &.images-2 {
-                    grid-template-columns: 1fr 1fr;
-                    // Keep the full two-row height: the two tiles stay in the top
-                    // row at 50% each and the bottom row remains empty space.
-                    grid-template-rows: 1fr 1fr;
-                  }
-
-                  &.images-3 {
-                    grid-template-columns: 1fr 1fr;
-                    grid-template-rows: 1fr 1fr;
-
-                    // The third tile stays in a single column (50% width) like the
-                    // tiles above; the fourth cell is left as empty space.
-                  }
-
-                  &.images-4 {
-                    grid-template-columns: 1fr 1fr;
-                    grid-template-rows: 1fr 1fr;
+                  // A bundle with no products at all shows a single placeholder
+                  // image, which keeps the whole grid area to itself.
+                  &.images-0 .product-image-wrapper {
+                    grid-column: 1 / -1;
+                    grid-row: 1 / -1;
                   }
 
                   &.animate-flip {
-                    .product-image-wrapper {
+                    // Padding cells hold no image, so they sit the animation out.
+                    .product-image-wrapper:not(.empty-image-slot) {
                       animation: flip 0.6s ease-in-out;
                     }
 
@@ -2463,6 +2661,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 gap: 12px;
                 align-self: stretch;
                 font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
+                text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
+                &.flex__overflow {
+                  white-space: normal;
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
                 font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
                 color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
                 font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
@@ -2509,6 +2714,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   align-self: stretch;
                   text-transform: uppercase;
                   font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
+                  &.flex__overflow {
+                    white-space: normal;
+                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                  }
                   font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);