@use "./functions.scss" as *;

// Verbatim adaptation of quota-details.scss inner styles, rebound to the
// Category Groups quotaDetails layout/design CSS-variable paths.
// @imported inside category-groups-element.scss within the categoryGroups scope.

.quota__details__element {
  background-color: var(
    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
    var(
      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr)
    )
  );
  padding: var(
    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg,
    var(
      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg,
      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg)
    )
  );
  display: flex;
  flex-direction: column;
  --_sf-gp: var(
    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg,
    var(
      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg,
      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg, 16px)
    )
  );
  row-gap: var(--_sf-gp);
  width: fit-content;
  height: auto;
  border-color: var(
    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
    var(
      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr)
    )
  );
  border-style: var(
    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se,
    var(
      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se,
      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se)
    )
  );
  border-width: var(
    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
    var(
      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh)
    )
  );
  border-radius: var(
    --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
    var(
      --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
      var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs)
    )
  );
  box-shadow: var(
      --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
      var(
        --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
        var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae)
      )
    )
    var(
      --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
      var(
        --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
        var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br)
      )
    )
    var(
      --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
      var(
        --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
        var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd)
      )
    )
    var(
      --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
      var(
        --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
        var(--_ctm-catego-dn-pt-gd-dn-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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-hl-at,
      prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-hl-at)
    );
    gap: var(--_sf-gp);
    width: 100%;
    height: 100%;

    &[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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se,
        prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
      );
      $shapeColor: prepareMediaVariable(
        --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-cr,
        prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-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). This element embeds the same Quota
        // Details schema, so its Divider panel offers the same control and needs the
        // same marker — otherwise it would write to keys nothing here draws.
        .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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
            height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
              #ffffff
            );
          }

          .icon {
            display: flex;

            svg {
              width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
              height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);

              &[stroke]:not([stroke="none"]),
              [stroke]:not([stroke="none"]) {
                stroke: prepareMediaVariable(
                  --_ctm-catego-dn-pt-gd-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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-se-wh,
                  1.25
                );
              }
              &[fill]:not([fill="none"]),
              [fill]:not([fill="none"]) {
                fill: prepareMediaVariable(
                  --_ctm-catego-dn-pt-gd-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;

      .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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr)
          )
        );
        font-family: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy)
          )
        );
        text-transform: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm)
          )
        );
        word-wrap: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp)
          )
        );
        word-break: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk)
          )
        );
        font-size: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se)
          )
        );
        font-weight: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt)
          )
        );
        font-style: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic)
          )
        );
        letter-spacing: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg)
          )
        );
        line-height: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht)
          )
        );
        text-decoration: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue)
          )
        );
      }
      .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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc)
          )
        );
        font-family: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc)
          )
        );
        text-transform: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc)
          )
        );
        word-wrap: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc)
          )
        );
        word-break: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc)
          )
        );
        font-size: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc)
          )
        );
        font-weight: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc)
          )
        );
        font-style: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc)
          )
        );
        letter-spacing: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc)
          )
        );
        line-height: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc)
          )
        );
        text-decoration: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc)
          )
        );
      }
      .icon {
        display: flex;
        svg {
          width: var(
            --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
            var(
              --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
              var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
            )
          );
          height: var(
            --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
            var(
              --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
              var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
            )
          );
          path {
            stroke: var(
              --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1,
              var(
                --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1,
                var(--_ctm-catego-dn-pt-gd-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-catego-dn-pt-gd-dn-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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr)
          )
        );
        font-family: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy)
          )
        );
        text-transform: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm)
          )
        );
        word-wrap: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp)
          )
        );
        word-break: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk)
          )
        );
        font-size: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se)
          )
        );
        font-weight: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt)
          )
        );
        font-style: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic)
          )
        );
        letter-spacing: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg)
          )
        );
        line-height: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht)
          )
        );
        text-decoration: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue)
          )
        );
      }
      .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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc)
          )
        );
        font-family: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc)
          )
        );
        text-transform: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc)
          )
        );
        word-wrap: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc)
          )
        );
        word-break: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc)
          )
        );
        font-size: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc)
          )
        );
        font-weight: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc)
          )
        );
        font-style: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc)
          )
        );
        letter-spacing: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc)
          )
        );
        line-height: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc)
          )
        );
        text-decoration: var(
          --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
          var(
            --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
            var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc)
          )
        );
      }
      .icon {
        display: flex;
        svg {
          width: var(
            --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
            var(
              --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
              var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
            )
          );
          height: var(
            --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
            var(
              --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
              var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
            )
          );
          path {
            stroke: var(
              --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1,
              var(
                --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1,
                var(--_ctm-catego-dn-pt-gd-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-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-se-wh,
              1.25
            );
          }
        }
      }
    }
  }
}