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

package/dist/allocations-quota-details.scss

@@ -4,146 +4,195 @@
 // Allocations quotaDetails layout/design CSS-variable paths.
 // @imported inside allocationDetails.scss within the allocationDetails scope.
 
+$overflowSelector: ".flex__overflow";
+
+// Text Transform (with the word wrap/break pair the panel groups with it) and Text
+// Overflow for one text node. $suffix is "-dc" for the Label blocks, which write the
+// *Desc keys. Declared here rather than reusing the allocationDetails mixins so this
+// file stays self-contained, matching how it already redeclares the rebound vars.
+@mixin aqd-text-controls($base, $suffix: "", $clampVar: --_sf-line-clamp) {
+  text-transform: prepareMediaVariable(#{$base}-tt-tm#{$suffix}, none);
+  word-wrap: prepareMediaVariable(#{$base}-wd-wp#{$suffix}, normal);
+  word-break: prepareMediaVariable(#{$base}-wd-bk#{$suffix}, normal);
+
+  // The clamp needs the text to wrap first, so it undoes the `nowrap` above it.
+  &#{$overflowSelector} {
+    white-space: normal;
+    @include restrictToLinesShow(#{var($clampVar, 1)});
+  }
+}
+
 .quota__details__element {
   background-color: var(
     --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
-    var(
-      --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
-      var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-bd-cr)
-    )
+    var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-bd-cr, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-bd-cr))
   );
   padding: var(
     --_ctm-mob-dn-qa-ds-qa-ds-lt-pg,
-    var(
-      --_ctm-tab-dn-qa-ds-qa-ds-lt-pg,
-      var(--_ctm-dn-qa-ds-qa-ds-lt-pg)
-    )
+    var(--_ctm-tab-dn-qa-ds-qa-ds-lt-pg, var(--_ctm-dn-qa-ds-qa-ds-lt-pg))
   );
   display: flex;
   flex-direction: column;
   --_sf-gp: var(
     --_ctm-mob-dn-qa-ds-qa-ds-lt-im-sg,
-    var(
-      --_ctm-tab-dn-qa-ds-qa-ds-lt-im-sg,
-      var(--_ctm-dn-qa-ds-qa-ds-lt-im-sg, 16px)
-    )
+    var(--_ctm-tab-dn-qa-ds-qa-ds-lt-im-sg, var(--_ctm-dn-qa-ds-qa-ds-lt-im-sg, 16px))
   );
   row-gap: var(--_sf-gp);
-  width: fit-content;
+  // Embedded in an allocation card, not free-standing like the Quota Details element
+  // itself: `fit-content` let the row size to its text and spill past the card, so it
+  // is pinned to the card instead and the row below reflows within it.
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   height: auto;
   border-color: var(
     --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
-    var(
-      --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
-      var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-cr)
-    )
+    var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-cr, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-cr))
   );
   border-style: var(
     --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-br-se,
-    var(
-      --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-se,
-      var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-se)
-    )
+    var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-se, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-se))
   );
   border-width: var(
     --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
-    var(
-      --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
-      var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-wh)
-    )
+    var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-wh, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-wh))
   );
   border-radius: var(
     --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
-    var(
-      --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
-      var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-rs)
-    )
+    var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-br-rs, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-br-rs))
   );
   box-shadow: var(
       --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
-      var(
-        --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
-        var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-ae)
-      )
+      var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-ae, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-ae))
     )
     var(
       --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
-      var(
-        --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
-        var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-br)
-      )
+      var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-br, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-br))
     )
     var(
       --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
-      var(
-        --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
-        var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-sd)
-      )
+      var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-sd, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-sd))
     )
     var(
       --_ctm-mob-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
-      var(
-        --_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
-        var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-cr)
-      )
+      var(--_ctm-tab-dn-qa-ds-qa-ds-dn-wt-se-sw-cr, var(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-sw-cr))
     );
 
   .product__hilights {
     display: flex;
     align-items: center;
-    justify-content: var(
-      --_ctm-mob-dn-qa-ds-qa-ds-lt-hl-at,
-      var(
-        --_ctm-tab-dn-qa-ds-qa-ds-lt-hl-at,
-        var(--_ctm-dn-qa-ds-qa-ds-lt-hl-at)
-      )
+    // Design > Widget Style > alignment, falling back to the Layout panel's own
+    // alignment so cards set up before the design control existed keep theirs.
+    justify-content: prepareMediaVariable(
+      --_ctm-dn-qa-ds-qa-ds-dn-wt-se-hl-at,
+      prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-lt-hl-at)
     );
     gap: var(--_sf-gp);
     width: 100%;
     height: 100%;
+    // Pinned to the card above, so the two stats wrap onto a second line when the
+    // card is too narrow for both instead of running past its edge.
+    flex-wrap: wrap;
+    min-width: 0;
 
     &[data-show-dividers="true"] {
+      // See quota-details.scss: Shape Size and Shape Color are the item's only two
+      // controls, Size measuring the marker's diameter or the rule's thickness. The
+      // `-dr-dr-` doubling is the `divider` node followed by the `divider…` property
+      // name — the shape vars were written with only one, which is why neither
+      // control did anything.
+      $shapeSize: prepareMediaVariable(
+        --_ctm-dn-qa-ds-qa-ds-dn-dr-dr-se-se,
+        prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
+      );
+      $shapeColor: prepareMediaVariable(
+        --_ctm-dn-qa-ds-qa-ds-dn-dr-dr-se-cr,
+        prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-dr-cr, #e4e7ec)
+      );
+
       .product__list__item {
         position: relative;
         &:not(:last-child)::after {
           content: "";
-          width: var(
-            --_ctm-mob-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-            var(
-              --_ctm-tab-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-              var(--_ctm-dn-qa-ds-qa-ds-dn-dr-dr-wh)
-            )
-          );
+          width: $shapeSize;
           height: 100%;
           position: absolute;
-          right: calc(
-            (-1 * var(--_sf-gp) / 2) -
-              (
-                var(
-                    --_ctm-mob-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-                    var(
-                      --_ctm-tab-dn-qa-ds-qa-ds-dn-dr-dr-wh,
-                      var(--_ctm-dn-qa-ds-qa-ds-dn-dr-dr-wh)
-                    )
-                  ) /
-                  2
-              )
-          );
-          background-color: var(
-            --_ctm-mob-dn-qa-ds-qa-ds-dn-dr-dr-cr,
-            var(
-              --_ctm-tab-dn-qa-ds-qa-ds-dn-dr-dr-cr,
-              var(--_ctm-dn-qa-ds-qa-ds-dn-dr-dr-cr)
-            )
-          );
+          right: calc((-1 * var(--_sf-gp) / 2) - (#{$shapeSize} / 2));
+          background-color: $shapeColor;
+        }
+
+        // Divider item (Divider -> Item Style). Same geometry as the standalone
+        // element: the rule's centre sits at -(gap/2) from the item's right edge,
+        // so the marker is pinned there and translated half its own width back.
+        .divider__marker {
+          position: absolute;
+          top: 50%;
+          right: calc(-1 * var(--_sf-gp, 0px) / 2);
+          transform: translate(50%, -50%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1;
+
+          // 8px rather than the rule's thickness when Shape Size is absent: a marker
+          // falling back to a hairline would read as missing.
+          &[data-shape="circle"],
+          &[data-shape="square"] {
+            width: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
+            height: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
+            background-color: $shapeColor;
+          }
+
+          &[data-shape="circle"] {
+            border-radius: 50%;
+          }
+
+          &[data-shape="icon"] {
+            padding-block: 2px;
+            background-color: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-wt-se-bd-cr, #ffffff);
+          }
+
+          .icon {
+            display: flex;
+
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
+              height: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
+
+              &[stroke]:not([stroke="none"]),
+              [stroke]:not([stroke="none"]) {
+                stroke: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-in-c1, #e4e7ec);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-se-wh, 1.25);
+              }
+              &[fill]:not([fill="none"]),
+              [fill]:not([fill="none"]) {
+                fill: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-dr-in-c1, #e4e7ec);
+              }
+            }
+          }
+        }
+
+        // Rendered inside every item; only the ones carrying a rule show it.
+        &:last-child .divider__marker {
+          display: none;
         }
       }
+
+      // A shape or icon marker REPLACES the rule rather than sitting on it, so the
+      // rule is drawn only while the separator is the plain "divider".
+      &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
+        display: none;
+      }
     }
 
     .product__list__item {
       display: flex;
       align-items: center;
       gap: 4px;
+      // Flex items default to min-width:auto, so they refuse to shrink below their
+      // text width — the same guard the standalone element carries.
+      min-width: 0;
 
       .svg_icon {
         display: flex;
@@ -152,34 +201,25 @@
 
     .quota__left {
       .count {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-cr,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-cr,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-cr)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-cr, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-cr))
         );
         font-family: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy))
         );
         font-size: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ft-se)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ft-se, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ft-se))
         );
         font-weight: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt))
         );
         font-style: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
@@ -190,34 +230,26 @@
         );
         letter-spacing: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg))
         );
         line-height: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-le-ht)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-le-ht, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-le-ht))
         );
         text-decoration: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-ue,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ue,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ue)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ue, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ue))
         );
+        @include aqd-text-controls(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt);
       }
       .label {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc))
         );
         font-family: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
@@ -263,28 +295,20 @@
         );
         text-decoration: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc))
         );
+        @include aqd-text-controls(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt, "-dc", --_sf-line-clamp-desc);
       }
       .icon {
         display: flex;
         svg {
           width: var(
             --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
-            var(
-              --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
-              var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
-            )
+            var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-in-se))
           );
           height: var(
             --_ctm-mob-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
-            var(
-              --_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
-              var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
-            )
+            var(--_ctm-tab-dn-qa-ds-qa-ds-dn-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-in-se))
           );
           path {
             stroke: var(
@@ -294,6 +318,8 @@
                 var(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-in-c1)
               )
             );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-qa-lt-se-wh, 1.25);
           }
         }
       }
@@ -301,34 +327,25 @@
 
     .days__left {
       .count {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-cr,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-cr,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-cr)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-cr, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-cr))
         );
         font-family: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy))
         );
         font-size: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ft-se)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ft-se, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ft-se))
         );
         font-weight: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt))
         );
         font-style: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
@@ -339,34 +356,26 @@
         );
         letter-spacing: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg))
         );
         line-height: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-le-ht)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-le-ht, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-le-ht))
         );
         text-decoration: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-ue,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ue,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ue)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ue, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ue))
         );
+        @include aqd-text-controls(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt);
       }
       .label {
-        white-space: nowrap;
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
         color: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc))
         );
         font-family: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
@@ -412,28 +421,20 @@
         );
         text-decoration: var(
           --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
-          var(
-            --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
-            var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc)
-          )
+          var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc))
         );
+        @include aqd-text-controls(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt, "-dc", --_sf-line-clamp-desc);
       }
       .icon {
         display: flex;
         svg {
           width: var(
             --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
-            var(
-              --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
-              var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
-            )
+            var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-in-se, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-in-se))
           );
           height: var(
             --_ctm-mob-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
-            var(
-              --_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
-              var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
-            )
+            var(--_ctm-tab-dn-qa-ds-qa-ds-dn-ds-lt-in-se, var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-in-se))
           );
           path {
             stroke: var(
@@ -443,6 +444,8 @@
                 var(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-in-c1)
               )
             );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-qa-ds-qa-ds-dn-ds-lt-se-wh, 1.25);
           }
         }
       }