@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

package/dist/allocation-header-quota-details.scss

@@ -1,609 +1,609 @@
-@use "./functions.scss" as *;
-
-// The allocation HEADER's quota details. Same rules as allocations-quota-details.scss
-// (which styles the ones inside the product cards), rebound to the header's own
-// design.allocation.quotaDetails.* variable paths so the two can be styled apart.
-// @imported inside allocationDetails.scss within the .showcase__title 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 ahqd-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-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
-    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr))
-  );
-  padding: var(
-    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-pg,
-    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-pg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-pg))
-  );
-  display: flex;
-  flex-direction: column;
-  --_sf-gp: var(
-    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-im-sg,
-    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-im-sg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-im-sg, 16px))
-  );
-  row-gap: var(--_sf-gp);
-  // 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-an-qa-ds-qa-ds-dn-wt-se-br-cr,
-    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr))
-  );
-  border-style: var(
-    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-se,
-    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-se, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-se))
-  );
-  border-width: var(
-    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh,
-    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh))
-  );
-  border-radius: var(
-    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs,
-    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs))
-  );
-  box-shadow: var(
-      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae,
-      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae))
-    )
-    var(
-      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br,
-      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br))
-    )
-    var(
-      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd,
-      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd))
-    )
-    var(
-      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr,
-      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr))
-    );
-
-  .product__hilights {
-    display: flex;
-    align-items: center;
-    // 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-an-qa-ds-qa-ds-dn-wt-se-hl-at,
-      prepareMediaVariable(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-dr-dr-se-se,
-        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
-      );
-      $shapeColor: prepareMediaVariable(
-        --_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-cr,
-        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-cr, #e4e7ec)
-      );
-
-      .product__list__item {
-        position: relative;
-        // The rule is a pseudo-element and takes no space of its own, so a wide one grew
-        // back over the item beside it — see dividerGapReserve in functions.scss.
-        &:not(:last-child) {
-          @include dividerGapReserve($shapeSize, right);
-        }
-        &:not(:last-child)::after {
-          content: "";
-          width: $shapeSize;
-          height: 100%;
-          position: absolute;
-          right: dividerGapOffset(var(--_sf-gp, 0px), $shapeSize);
-          background-color: $shapeColor;
-        }
-
-        // Divider item (Divider -> Item Style). Same geometry as the standalone
-        // element: the rule's centre sits at -(gap/2) - (width/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: dividerMarkerOffset(var(--_sf-gp, 0px), $shapeSize);
-          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-an-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
-            height: prepareMediaVariable(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
-              #ffffff
-            );
-          }
-
-          .icon {
-            display: flex;
-
-            svg {
-              width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-se, 12px);
-              height: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-se, 12px);
-
-              &[stroke]:not([stroke="none"]),
-              [stroke]:not([stroke="none"]) {
-                stroke: prepareMediaVariable(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-dr-se-wh, 1.25);
-              }
-              &[fill]:not([fill="none"]),
-              [fill]:not([fill="none"]) {
-                fill: prepareMediaVariable(--_ctm-dn-an-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;
-      }
-    }
-
-    .quota__left {
-      .count {
-        // 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-an-qa-ds-qa-ds-dn-qa-lt-cr,
-          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr))
-        );
-        font-family: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy)
-          )
-        );
-        text-transform: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm)
-          )
-        );
-        word-wrap: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp)
-          )
-        );
-        word-break: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk)
-          )
-        );
-        font-size: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se)
-          )
-        );
-        font-weight: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt)
-          )
-        );
-        font-style: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic)
-          )
-        );
-        letter-spacing: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg)
-          )
-        );
-        line-height: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht)
-          )
-        );
-        text-decoration: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue,
-          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue))
-        );
-        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt);
-      }
-      .label {
-        // 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-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc)
-          )
-        );
-        font-family: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc)
-          )
-        );
-        text-transform: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc)
-          )
-        );
-        word-wrap: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc)
-          )
-        );
-        word-break: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc)
-          )
-        );
-        font-size: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc)
-          )
-        );
-        font-weight: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc)
-          )
-        );
-        font-style: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc)
-          )
-        );
-        letter-spacing: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc)
-          )
-        );
-        line-height: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc)
-          )
-        );
-        text-decoration: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc)
-          )
-        );
-        @include ahqd-text-controls(
-          --_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt,
-          "-dc",
-          --_sf-line-clamp-desc
-        );
-      }
-      .icon {
-        display: flex;
-        svg {
-          width: var(
-            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
-            var(
-              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
-              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
-            )
-          );
-          height: var(
-            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
-            var(
-              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
-              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
-            )
-          );
-          path {
-            stroke: var(
-              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
-              var(
-                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
-                var(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-qa-lt-se-wh, 1.25);
-          }
-        }
-      }
-    }
-
-    .days__left {
-      .count {
-        // 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-an-qa-ds-qa-ds-dn-ds-lt-cr,
-          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr))
-        );
-        font-family: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy)
-          )
-        );
-        text-transform: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm)
-          )
-        );
-        word-wrap: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp)
-          )
-        );
-        word-break: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk)
-          )
-        );
-        font-size: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se)
-          )
-        );
-        font-weight: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt)
-          )
-        );
-        font-style: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic)
-          )
-        );
-        letter-spacing: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg)
-          )
-        );
-        line-height: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht)
-          )
-        );
-        text-decoration: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue,
-          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue))
-        );
-        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt);
-      }
-      .label {
-        // 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-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc)
-          )
-        );
-        font-family: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc)
-          )
-        );
-        text-transform: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc)
-          )
-        );
-        word-wrap: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc)
-          )
-        );
-        word-break: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc)
-          )
-        );
-        font-size: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc)
-          )
-        );
-        font-weight: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc)
-          )
-        );
-        font-style: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc)
-          )
-        );
-        letter-spacing: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc)
-          )
-        );
-        line-height: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc)
-          )
-        );
-        text-decoration: var(
-          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
-          var(
-            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
-            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc)
-          )
-        );
-        @include ahqd-text-controls(
-          --_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt,
-          "-dc",
-          --_sf-line-clamp-desc
-        );
-      }
-      .icon {
-        display: flex;
-        svg {
-          width: var(
-            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
-            var(
-              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
-              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
-            )
-          );
-          height: var(
-            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
-            var(
-              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
-              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
-            )
-          );
-          path {
-            stroke: var(
-              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
-              var(
-                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
-                var(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-ds-lt-se-wh, 1.25);
-          }
-        }
-      }
-    }
-  }
-}
+@use "./functions.scss" as *;
+
+// The allocation HEADER's quota details. Same rules as allocations-quota-details.scss
+// (which styles the ones inside the product cards), rebound to the header's own
+// design.allocation.quotaDetails.* variable paths so the two can be styled apart.
+// @imported inside allocationDetails.scss within the .showcase__title 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 ahqd-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-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr))
+  );
+  padding: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-pg,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-pg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-pg))
+  );
+  display: flex;
+  flex-direction: column;
+  --_sf-gp: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-im-sg,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-im-sg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-im-sg, 16px))
+  );
+  row-gap: var(--_sf-gp);
+  // 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-an-qa-ds-qa-ds-dn-wt-se-br-cr,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr))
+  );
+  border-style: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-se,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-se, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-se))
+  );
+  border-width: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh))
+  );
+  border-radius: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs))
+  );
+  box-shadow: var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae))
+    )
+    var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br))
+    )
+    var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd))
+    )
+    var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr))
+    );
+
+  .product__hilights {
+    display: flex;
+    align-items: center;
+    // 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-an-qa-ds-qa-ds-dn-wt-se-hl-at,
+      prepareMediaVariable(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-dr-dr-se-se,
+        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
+      );
+      $shapeColor: prepareMediaVariable(
+        --_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-cr,
+        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-cr, #e4e7ec)
+      );
+
+      .product__list__item {
+        position: relative;
+        // The rule is a pseudo-element and takes no space of its own, so a wide one grew
+        // back over the item beside it — see dividerGapReserve in functions.scss.
+        &:not(:last-child) {
+          @include dividerGapReserve($shapeSize, right);
+        }
+        &:not(:last-child)::after {
+          content: "";
+          width: $shapeSize;
+          height: 100%;
+          position: absolute;
+          right: dividerGapOffset(var(--_sf-gp, 0px), $shapeSize);
+          background-color: $shapeColor;
+        }
+
+        // Divider item (Divider -> Item Style). Same geometry as the standalone
+        // element: the rule's centre sits at -(gap/2) - (width/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: dividerMarkerOffset(var(--_sf-gp, 0px), $shapeSize);
+          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-an-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
+            height: prepareMediaVariable(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
+              #ffffff
+            );
+          }
+
+          .icon {
+            display: flex;
+
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-se, 12px);
+              height: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-se, 12px);
+
+              &[stroke]:not([stroke="none"]),
+              [stroke]:not([stroke="none"]) {
+                stroke: prepareMediaVariable(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-dr-se-wh, 1.25);
+              }
+              &[fill]:not([fill="none"]),
+              [fill]:not([fill="none"]) {
+                fill: prepareMediaVariable(--_ctm-dn-an-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;
+      }
+    }
+
+    .quota__left {
+      .count {
+        // 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-an-qa-ds-qa-ds-dn-qa-lt-cr,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr))
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy)
+          )
+        );
+        text-transform: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm)
+          )
+        );
+        word-wrap: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp)
+          )
+        );
+        word-break: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue))
+        );
+        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt);
+      }
+      .label {
+        // 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-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc)
+          )
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc)
+          )
+        );
+        text-transform: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc)
+          )
+        );
+        word-wrap: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc)
+          )
+        );
+        word-break: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc)
+          )
+        );
+        @include ahqd-text-controls(
+          --_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt,
+          "-dc",
+          --_sf-line-clamp-desc
+        );
+      }
+      .icon {
+        display: flex;
+        svg {
+          width: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
+            )
+          );
+          height: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
+            )
+          );
+          path {
+            stroke: var(
+              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
+              var(
+                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
+                var(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-qa-lt-se-wh, 1.25);
+          }
+        }
+      }
+    }
+
+    .days__left {
+      .count {
+        // 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-an-qa-ds-qa-ds-dn-ds-lt-cr,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr))
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy)
+          )
+        );
+        text-transform: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm)
+          )
+        );
+        word-wrap: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp)
+          )
+        );
+        word-break: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue))
+        );
+        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt);
+      }
+      .label {
+        // 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-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc)
+          )
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc)
+          )
+        );
+        text-transform: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc)
+          )
+        );
+        word-wrap: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc)
+          )
+        );
+        word-break: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc)
+          )
+        );
+        @include ahqd-text-controls(
+          --_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt,
+          "-dc",
+          --_sf-line-clamp-desc
+        );
+      }
+      .icon {
+        display: flex;
+        svg {
+          width: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
+            )
+          );
+          height: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
+            )
+          );
+          path {
+            stroke: var(
+              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
+              var(
+                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
+                var(--_ctm-dn-an-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-an-qa-ds-qa-ds-dn-ds-lt-se-wh, 1.25);
+          }
+        }
+      }
+    }
+  }
+}