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

package/dist/product-labels.scss

@@ -92,15 +92,17 @@
         .items__container {
           &[data-show-divider="true"] {
             &[data-flex-direction="row"] {
+              // The divider is a pseudo-element and takes no space of its own, so a thick
+              // one grew back over the label beside it — see dividerGapReserve in functions.scss.
+              .item:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
+              }
               .item:not(:last-child)::before {
                 content: "";
                 position: absolute;
                 top: 0;
                 bottom: 0; /* For full height divider */
-                right: calc(
-                  -1 *
-                    (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
-                ); /* Half of your gap + 1px offset */
+                right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
                 width: var(
                   --_ctm-mob-dn-wt-se-dr-wt,
                   var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
@@ -112,15 +114,15 @@
               }
             }
             &[data-flex-direction="column"] {
+              .item:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
+              }
               .item:not(:last-child)::before {
                 content: "";
                 position: absolute;
                 left: 0;
                 right: 0;
-                bottom: calc(
-                  -1 *
-                    (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
-                );
+                bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
                 height: var(
                   --_ctm-mob-dn-wt-se-dr-wt,
                   var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))

package/dist/product-options.scss

@@ -2,6 +2,15 @@
 @use "sass:list";
 @use "./functions.scss" as *;
 
+// The value text inside a swatch moved out of design.optionValueStyle into its own
+// schema, design.optionValueTextStyle, so the box and the text are edited from separate
+// accordions. Pages saved before the split still carry the typography keys under the old
+// section, so every value-text property resolves the new variable first and falls back to
+// the old one — both across breakpoints.
+@function optionValueTextVar($newVar, $legacyVar) {
+  @return prepareMediaVariable($newVar, prepareMediaVariable($legacyVar));
+}
+
 [data-div-type="element"] {
   &[data-element-type="productOptions"] {
     width: var(
@@ -116,6 +125,28 @@
           --_ctm-mob-dn-on-te-ue,
           var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
         );
+
+        // design.optionTitle container styling. The title is its own design schema, so it
+        // carries the same Fill / Border / Border Radius / Shadow set as the value box.
+        background-color: prepareMediaVariable(--_ctm-dn-on-te-bd-cr, transparent);
+        border-color: prepareMediaVariable(--_ctm-dn-on-te-br-cr);
+        border-style: prepareMediaVariable(--_ctm-dn-on-te-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-on-te-br-wh, 0px);
+        border-radius: prepareMediaVariable(--_ctm-dn-on-te-br-rs, 0px);
+        // Same --_show-shadow gate the widget container uses in this file.
+        box-shadow: var(
+          --_show-shadow,
+          prepareMediaVariable(--_ctm-dn-on-te-sw-ae) prepareMediaVariable(--_ctm-dn-on-te-sw-br)
+            prepareMediaVariable(--_ctm-dn-on-te-sw-sd) prepareMediaVariable(--_ctm-dn-on-te-sw-cr)
+        );
+
+        // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as a
+        // variable — the renderer adds `.flex__overflow` and publishes the line count as
+        // `--_sf-line-clamp`.
+        &.flex__overflow {
+          white-space: normal;
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
       }
 
       .product__option__element__swatch {
@@ -148,6 +179,10 @@
         &[data-overflow-items="Scroll"] {
           .swatch__list {
             overflow-x: auto;
+            // Gap (layout.swatchScrollGap): clearance between the swatches and the
+            // scrollbar this mode adds underneath. Padding inside the scrolling box, so
+            // it holds the items off the scrollbar rather than widening the element.
+            padding-bottom: prepareMediaVariable(--_ctm-lt-sh-sl-gp, 0px);
             // overflow-y: hidden;
             flex-wrap: nowrap;
           }
@@ -194,57 +229,57 @@
           var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
         );
 
-        // for font
-
-        --_sf-hr-cr: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-cr,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-cr, var(--_ctm-dn-on-ve-se-hr-se-cr))
-        );
-        --_sf-hr-ft-fy: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-ft-fy,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-on-ve-se-hr-se-ft-fy))
-        );
-        --_sf-hr-tt-tm: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-tt-tm,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-tt-tm, var(--_ctm-dn-on-ve-se-hr-se-tt-tm))
-        );
-        --_sf-hr-wd-wp: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-wd-wp,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-wd-wp, var(--_ctm-dn-on-ve-se-hr-se-wd-wp))
-        );
-        --_sf-hr-wd-bk: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-wd-bk,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-wd-bk, var(--_ctm-dn-on-ve-se-hr-se-wd-bk))
-        );
-        --_sf-hr-ft-se: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-ft-se,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se, var(--_ctm-dn-on-ve-se-hr-se-ft-se))
-        );
-        --_sf-hr-ft-wt: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-ft-wt,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-on-ve-se-hr-se-ft-wt))
-        );
-        --_sf-hr-ft-se-ic: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-ft-se-ic,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-on-ve-se-hr-se-ft-se-ic))
-        );
-        --_sf-hr-tt-an: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-tt-an,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-tt-an, var(--_ctm-dn-on-ve-se-hr-se-tt-an))
-        );
-        --_sf-hr-lr-sg: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-lr-sg,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-on-ve-se-hr-se-lr-sg))
-        );
-        --_sf-hr-le-ht: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-le-ht,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-le-ht, var(--_ctm-dn-on-ve-se-hr-se-le-ht))
-        );
-
-        --_sf-hr-ue: var(
-          --_ctm-mob-dn-on-ve-se-hr-se-ue,
-          var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
-        );
+        // for font — from optionValueTextStyle.hoverState, falling back to the pre-split
+        // optionValueStyle.hoverState keys.
+        --_sf-hr-cr: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-cr,
+            --_ctm-dn-on-ve-se-hr-se-cr
+          )};
+        --_sf-hr-ft-fy: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-fy,
+            --_ctm-dn-on-ve-se-hr-se-ft-fy
+          )};
+        --_sf-hr-tt-tm: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-tt-tm,
+            --_ctm-dn-on-ve-se-hr-se-tt-tm
+          )};
+        --_sf-hr-wd-wp: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-wd-wp,
+            --_ctm-dn-on-ve-se-hr-se-wd-wp
+          )};
+        --_sf-hr-wd-bk: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-wd-bk,
+            --_ctm-dn-on-ve-se-hr-se-wd-bk
+          )};
+        --_sf-hr-ft-se: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-se,
+            --_ctm-dn-on-ve-se-hr-se-ft-se
+          )};
+        --_sf-hr-ft-wt: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-wt,
+            --_ctm-dn-on-ve-se-hr-se-ft-wt
+          )};
+        --_sf-hr-ft-se-ic: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-se-ic,
+            --_ctm-dn-on-ve-se-hr-se-ft-se-ic
+          )};
+        --_sf-hr-tt-an: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-tt-an,
+            --_ctm-dn-on-ve-se-hr-se-tt-an
+          )};
+        --_sf-hr-lr-sg: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-lr-sg,
+            --_ctm-dn-on-ve-se-hr-se-lr-sg
+          )};
+        --_sf-hr-le-ht: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-le-ht,
+            --_ctm-dn-on-ve-se-hr-se-le-ht
+          )};
+
+        --_sf-hr-ue: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ue,
+            --_ctm-dn-on-ve-se-hr-se-ue
+          )};
       }
       .swatch__item[data-selected="true"] {
         --_sf-sd-bd-cr: var(
@@ -281,56 +316,57 @@
           var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
         );
 
-        // for font
-        --_sf-hr-cr: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-cr,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-cr, var(--_ctm-dn-on-ve-se-sd-se-cr))
-        );
-        --_sf-hr-ft-fy: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-ft-fy,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-on-ve-se-sd-se-ft-fy))
-        );
-        --_sf-hr-tt-tm: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-tt-tm,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-tt-tm, var(--_ctm-dn-on-ve-se-sd-se-tt-tm))
-        );
-        --_sf-hr-wd-wp: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-wd-wp,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-wd-wp, var(--_ctm-dn-on-ve-se-sd-se-wd-wp))
-        );
-        --_sf-hr-wd-bk: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-wd-bk,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-wd-bk, var(--_ctm-dn-on-ve-se-sd-se-wd-bk))
-        );
-        --_sf-hr-ft-se: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-ft-se,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se, var(--_ctm-dn-on-ve-se-sd-se-ft-se))
-        );
-        --_sf-hr-ft-wt: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-ft-wt,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-on-ve-se-sd-se-ft-wt))
-        );
-        --_sf-hr-ft-se-ic: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-ft-se-ic,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-on-ve-se-sd-se-ft-se-ic))
-        );
-        --_sf-hr-tt-an: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-tt-an,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-tt-an, var(--_ctm-dn-on-ve-se-sd-se-tt-an))
-        );
-        --_sf-hr-lr-sg: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-lr-sg,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-on-ve-se-sd-se-lr-sg))
-        );
-        --_sf-hr-le-ht: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-le-ht,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-le-ht, var(--_ctm-dn-on-ve-se-sd-se-le-ht))
-        );
-
-        --_sf-hr-ue: var(
-          --_ctm-mob-dn-on-ve-se-sd-se-ue,
-          var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
-        );
+        // for font — from optionValueTextStyle.selectedState, falling back to the
+        // pre-split optionValueStyle.selectedState keys.
+        --_sf-hr-cr: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-cr,
+            --_ctm-dn-on-ve-se-sd-se-cr
+          )};
+        --_sf-hr-ft-fy: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-fy,
+            --_ctm-dn-on-ve-se-sd-se-ft-fy
+          )};
+        --_sf-hr-tt-tm: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-tt-tm,
+            --_ctm-dn-on-ve-se-sd-se-tt-tm
+          )};
+        --_sf-hr-wd-wp: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-wd-wp,
+            --_ctm-dn-on-ve-se-sd-se-wd-wp
+          )};
+        --_sf-hr-wd-bk: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-wd-bk,
+            --_ctm-dn-on-ve-se-sd-se-wd-bk
+          )};
+        --_sf-hr-ft-se: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-se,
+            --_ctm-dn-on-ve-se-sd-se-ft-se
+          )};
+        --_sf-hr-ft-wt: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-wt,
+            --_ctm-dn-on-ve-se-sd-se-ft-wt
+          )};
+        --_sf-hr-ft-se-ic: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-se-ic,
+            --_ctm-dn-on-ve-se-sd-se-ft-se-ic
+          )};
+        --_sf-hr-tt-an: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-tt-an,
+            --_ctm-dn-on-ve-se-sd-se-tt-an
+          )};
+        --_sf-hr-lr-sg: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-lr-sg,
+            --_ctm-dn-on-ve-se-sd-se-lr-sg
+          )};
+        --_sf-hr-le-ht: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-le-ht,
+            --_ctm-dn-on-ve-se-sd-se-le-ht
+          )};
+
+        --_sf-hr-ue: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ue,
+            --_ctm-dn-on-ve-se-sd-se-ue
+          )};
       }
 
       .swatch__item {
@@ -345,6 +381,18 @@
         width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
         height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
 
+        // A Single Select value is text, not a swatch image. `white-space: nowrap` on
+        // .option__value__text keeps it on one line, but this box is fixed-size with
+        // overflow:hidden, so a value wider than Swatch Item Size was clipped instead.
+        // Grow to the content and keep Swatch Item Size as the floor, so short values look
+        // exactly as before and only the ones that would have been cut off get wider.
+        &[data-display-style="Single Select"] {
+          width: auto;
+          height: auto;
+          min-width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
+          min-height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
+        }
+
         // &[data-display-style="Swatch"] {
         //   height: prepareMediaVariable(--_ctm-lt-sh-im-se);
         //   width: prepareMediaVariable(--_ctm-lt-sh-im-se);
@@ -508,21 +556,68 @@
         }
 
         .option__value__text {
-          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-cr));
-          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-fy));
-          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-tm));
-          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-wd-wp));
-          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-wd-bk));
-          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se));
-          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-wt));
+          color: var(
+            --_sf-hr-cr,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-cr, --_ctm-dn-on-ve-se-dt-se-cr)}
+          );
+          font-family: var(
+            --_sf-hr-ft-fy,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-dn-on-ve-se-dt-se-ft-fy)}
+          );
+          text-transform: var(
+            --_sf-hr-tt-tm,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-dn-on-ve-se-dt-se-tt-tm)}
+          );
+          word-wrap: var(
+            --_sf-hr-wd-wp,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-dn-on-ve-se-dt-se-wd-wp)}
+          );
+          word-break: var(
+            --_sf-hr-wd-bk,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-dn-on-ve-se-dt-se-wd-bk)}
+          );
+          font-size: var(
+            --_sf-hr-ft-se,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-dn-on-ve-se-dt-se-ft-se)}
+          );
+          font-weight: var(
+            --_sf-hr-ft-wt,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-dn-on-ve-se-dt-se-ft-wt)}
+          );
           font-style: var(
             --_sf-hr-ft-se-ic,
-            prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic)
+            #{optionValueTextVar(
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
+                --_ctm-dn-on-ve-se-dt-se-ft-se-ic
+              )}
+          );
+          text-align: var(
+            --_sf-hr-tt-an,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-dn-on-ve-se-dt-se-tt-an)}
           );
-          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-an));
-          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-lr-sg));
-          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-le-ht-dc));
-          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ue));
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-dn-on-ve-se-dt-se-lr-sg)}
+          );
+          // The pre-split key is `le-ht-dc`; the new section is read under both spellings
+          // so whichever one the converter writes resolves.
+          line-height: var(
+            --_sf-hr-le-ht,
+            prepareMediaVariable(
+              --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
+              #{optionValueTextVar(
+                  --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
+                  --_ctm-dn-on-ve-se-dt-se-le-ht-dc
+                )}
+            )
+          );
+          text-decoration: var(
+            --_sf-hr-ue,
+            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ue, --_ctm-dn-on-ve-se-dt-se-ue)}
+          );
+          // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
+          // broke onto a second line inside it. Keep it on one line.
+          white-space: nowrap;
         }
         &.disabled {
           color: #aaa;
@@ -580,18 +675,68 @@
       // }
 
       .option__value__text {
-        color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-cr));
-        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-fy));
-        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-tm));
-        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-wd-wp));
-        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-wd-bk));
-        font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se));
-        font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-wt));
-        font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic));
-        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-an));
-        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-lr-sg));
-        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-le-ht-dc));
-        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ue));
+        color: var(
+          --_sf-hr-cr,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-cr, --_ctm-dn-on-ve-se-dt-se-cr)}
+        );
+        font-family: var(
+          --_sf-hr-ft-fy,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-dn-on-ve-se-dt-se-ft-fy)}
+        );
+        text-transform: var(
+          --_sf-hr-tt-tm,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-dn-on-ve-se-dt-se-tt-tm)}
+        );
+        word-wrap: var(
+          --_sf-hr-wd-wp,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-dn-on-ve-se-dt-se-wd-wp)}
+        );
+        word-break: var(
+          --_sf-hr-wd-bk,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-dn-on-ve-se-dt-se-wd-bk)}
+        );
+        font-size: var(
+          --_sf-hr-ft-se,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-dn-on-ve-se-dt-se-ft-se)}
+        );
+        font-weight: var(
+          --_sf-hr-ft-wt,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-dn-on-ve-se-dt-se-ft-wt)}
+        );
+        font-style: var(
+          --_sf-hr-ft-se-ic,
+          #{optionValueTextVar(
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
+              --_ctm-dn-on-ve-se-dt-se-ft-se-ic
+            )}
+        );
+        text-align: var(
+          --_sf-hr-tt-an,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-dn-on-ve-se-dt-se-tt-an)}
+        );
+        letter-spacing: var(
+          --_sf-hr-lr-sg,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-dn-on-ve-se-dt-se-lr-sg)}
+        );
+        // The pre-split key is `le-ht-dc`; the new section is read under both spellings
+        // so whichever one the converter writes resolves.
+        line-height: var(
+          --_sf-hr-le-ht,
+          prepareMediaVariable(
+            --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
+            #{optionValueTextVar(
+                --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
+                --_ctm-dn-on-ve-se-dt-se-le-ht-dc
+              )}
+          )
+        );
+        text-decoration: var(
+          --_sf-hr-ue,
+          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ue, --_ctm-dn-on-ve-se-dt-se-ue)}
+        );
+        // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
+        // broke onto a second line inside it. Keep it on one line.
+        white-space: nowrap;
       }
 
       .product-select-image {

package/dist/product-price.scss

@@ -1718,8 +1718,14 @@
         --_ctm-mob-dn-ss-tt-tm,
         var(--_ctm-tab-dn-ss-tt-tm, var(--_ctm-dn-ss-tt-tm))
       );
-      word-wrap: var(--_ctm-mob-dn-ss-wd-wp, var(--_ctm-tab-dn-ss-wd-wp, var(--_ctm-dn-ss-wd-wp)));
-      word-break: var(--_ctm-mob-dn-ss-wd-bk, var(--_ctm-tab-dn-ss-wd-bk, var(--_ctm-dn-ss-wd-bk)));
+      word-wrap: var(
+        --_ctm-mob-dn-ss-wd-wp,
+        var(--_ctm-tab-dn-ss-wd-wp, var(--_ctm-dn-ss-wd-wp))
+      );
+      word-break: var(
+        --_ctm-mob-dn-ss-wd-bk,
+        var(--_ctm-tab-dn-ss-wd-bk, var(--_ctm-dn-ss-wd-bk))
+      );
       font-size: var(--_ctm-mob-dn-ss-ft-se, var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se)));
       font-weight: var(
         --_ctm-mob-dn-ss-ft-wt,

package/dist/productDetails.scss

@@ -115,7 +115,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
     box-shadow: var(
       --_show-shadow,
-      prepareMediaVariable(--_ctm-prod-dn-sw-ae, 0 0) prepareMediaVariable(--_ctm-prod-dn-sw-br, 0)
+      prepareMediaVariable(--_ctm-prod-dn-sw-ae, 0 0)
+        prepareMediaVariable(--_ctm-prod-dn-sw-br, 0)
         prepareMediaVariable(--_ctm-prod-dn-sw-sd, 0)
         prepareMediaVariable(--_ctm-prod-dn-sw-cr, transparent)
     );