@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$overflowSelector: ".flex__overflow";

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
$defaultValues: (
  --_sf-flex-direckdaka-mobile: getListOfResponsive(row, column),
  --_sf-flex-embla-pd-daka-mobile: getListOfResponsive(10px, 10px 0px),
  --_sf-sc-pt-lt-we-se: getListOfResponsive(nowrap, break-spaces),
);
// ---------------------------------------------------------------------------
// Tree view (Allocations View = "Tree"). Generated CSS-var bases for
// design.sidebarDesign.* — the path shortcodes come from splitCamelCaseAndJoin.
// The rules below are the Category Groups sidebar rules, kept deliberately
// identical so the two trees look and behave the same; only the var bases and
// class prefix differ.
// ---------------------------------------------------------------------------
$ad-sidebar-design: "--_ctm-dn-sr-dn"; // sidebarDesign (itemGap)
$ad-sidebar: "--_ctm-dn-sr-dn-sr-cr"; // sidebarDesign.sidebarContainer
$ad-heading: "--_ctm-dn-sr-dn-sr-hg"; // sidebarDesign.sidebarHeading
$ad-tree: "--_ctm-dn-sr-dn-pe-rw"; // sidebarDesign.profileRow
$ad-tree-icon: "--_ctm-dn-sr-dn-pe-te-in"; // sidebarDesign.profileTreeIcon
$ad-subtree: "--_ctm-dn-sr-dn-an-rw"; // sidebarDesign.allocationRow
$ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
$ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows

// $transform is the fallback for Text Transform, so a row that already rendered
// uppercase keeps doing so on elements saved before the control existed.
@mixin ad-font($base, $color, $size, $weight: 600, $transform: none) {
  color: prepareMediaVariable(#{$base}-cr, $color);
  font-family: prepareMediaVariable(#{$base}-ft-fy, ("Inter", sans-serif));
  font-size: prepareMediaVariable(#{$base}-ft-se, $size);
  font-weight: prepareMediaVariable(#{$base}-ft-wt, $weight);
  font-style: prepareMediaVariable(#{$base}-ft-se-ic);
  text-align: prepareMediaVariable(#{$base}-tt-an);
  letter-spacing: prepareMediaVariable(#{$base}-lr-sg);
  line-height: prepareMediaVariable(#{$base}-le-ht);
  text-decoration: prepareMediaVariable(#{$base}-ue);
  text-transform: prepareMediaVariable(#{$base}-tt-tm, $transform);
  word-wrap: prepareMediaVariable(#{$base}-wd-wp, normal);
  word-break: prepareMediaVariable(#{$base}-wd-bk, normal);
}

// Text Transform and the word wrap/break pair the typography panel groups with it.
// $suffix is "-dc" for the sections whose Value block writes the *Desc keys.
@mixin ad-text-transform($base, $suffix: "", $transform: none) {
  text-transform: prepareMediaVariable(#{$base}-tt-tm#{$suffix}, $transform);
  word-wrap: prepareMediaVariable(#{$base}-wd-wp#{$suffix}, normal);
  word-break: prepareMediaVariable(#{$base}-wd-bk#{$suffix}, normal);
}

// Text Overflow: the renderer adds `.flex__overflow` and publishes the line count,
// so the clamp only applies once the toggle is on. `white-space: normal` undoes any
// `nowrap` above it — the text has to wrap before it can be restricted to N lines.
@mixin ad-text-overflow($clampVar: --_sf-line-clamp) {
  &#{$overflowSelector} {
    white-space: normal;
    @include restrictToLinesShow(#{var($clampVar, 1)});
  }
}

// Container box for the sections whose schema has always carried Padding, Fill,
// Border, Border Radius and Shadow but which only ever rendered their font — the
// controls were there and did nothing (Brand, Code).
//
// Every fallback is the neutral value, not `prepareMediaVariable`'s `inherit`
// default: these boxes had no such rule at all until now, so an untouched card has
// to keep rendering byte for byte as it did. `inherit` would quietly hand them the
// parent's padding and fill, and a non-zero radius default would round every card
// nobody had styled.
@mixin ad-section-box($base) {
  padding: prepareMediaVariable(#{$base}-pg, 0);
  background-color: prepareMediaVariable(#{$base}-bd-cr, transparent);
  border-color: prepareMediaVariable(#{$base}-br-cr, transparent);
  border-style: prepareMediaVariable(#{$base}-br-se, solid);
  border-width: prepareMediaVariable(#{$base}-br-wh, 0);
  border-radius: prepareMediaVariable(#{$base}-br-rs, 0);
  box-shadow: var(
    --_show-shadow,
    prepareMediaVariable(#{$base}-sw-ae, 0 0) prepareMediaVariable(#{$base}-sw-br, 0)
      prepareMediaVariable(#{$base}-sw-sd, 0) prepareMediaVariable(#{$base}-sw-cr, transparent)
  );
}

// The icon a Brand / Code block can carry in front of its value. Sized and coloured
// from the section's own Icon settings, and told to hold its width so a long value
// wrapping beside it cannot squeeze the glyph.
@mixin ad-section-icon($base) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: prepareMediaVariable(#{$base}-in-c1, currentColor);

  svg {
    width: prepareMediaVariable(#{$base}-in-se, 16px);
    height: prepareMediaVariable(#{$base}-in-se, 16px);

    // Apply the configured colour even when the fetched SVG hardcodes its own
    // stroke/fill (parts explicitly set to "none" are left alone).
    &[stroke]:not([stroke="none"]),
    [stroke]:not([stroke="none"]) {
      stroke: prepareMediaVariable(#{$base}-in-c1, currentColor);
    }
    &[fill]:not([fill="none"]),
    [fill]:not([fill="none"]) {
      fill: prepareMediaVariable(#{$base}-in-c1, currentColor);
    }
  }

  img {
    width: prepareMediaVariable(#{$base}-in-se, 16px);
    height: prepareMediaVariable(#{$base}-in-se, 16px);
    object-fit: contain;
  }
}

@mixin ad-design($base) {
  background-color: prepareMediaVariable(#{$base}-bd-cr, transparent);
  border-color: prepareMediaVariable(#{$base}-br-cr, transparent);
  border-style: prepareMediaVariable(#{$base}-br-se, solid);
  border-width: prepareMediaVariable(#{$base}-br-wh, 0);
  border-radius: prepareMediaVariable(#{$base}-br-rs, 4px);
  box-shadow: prepareMediaVariable(#{$base}-sw-ae, 0 0) prepareMediaVariable(#{$base}-sw-br, 0)
    prepareMediaVariable(#{$base}-sw-sd, 0) prepareMediaVariable(#{$base}-sw-cr, transparent);
}

// Interactive states ($state = "hr-se" | "sd-se") fall back to the DEFAULT
// state, so editing the default cascades to hover and selected.
@mixin ad-font-state($base, $state, $color, $size, $weight: 600) {
  color: prepareMediaVariable(
    #{$base}-#{$state}-cr,
    prepareMediaVariable(#{$base}-dt-se-cr, $color)
  );
  font-family: prepareMediaVariable(
    #{$base}-#{$state}-ft-fy,
    prepareMediaVariable(#{$base}-dt-se-ft-fy, ("Inter", sans-serif))
  );
  font-size: prepareMediaVariable(
    #{$base}-#{$state}-ft-se,
    prepareMediaVariable(#{$base}-dt-se-ft-se, $size)
  );
  font-weight: prepareMediaVariable(
    #{$base}-#{$state}-ft-wt,
    prepareMediaVariable(#{$base}-dt-se-ft-wt, $weight)
  );
  font-style: prepareMediaVariable(
    #{$base}-#{$state}-ft-se-ic,
    prepareMediaVariable(#{$base}-dt-se-ft-se-ic)
  );
  text-align: prepareMediaVariable(
    #{$base}-#{$state}-tt-an,
    prepareMediaVariable(#{$base}-dt-se-tt-an)
  );
  letter-spacing: prepareMediaVariable(
    #{$base}-#{$state}-lr-sg,
    prepareMediaVariable(#{$base}-dt-se-lr-sg)
  );
  line-height: prepareMediaVariable(
    #{$base}-#{$state}-le-ht,
    prepareMediaVariable(#{$base}-dt-se-le-ht)
  );
  text-decoration: prepareMediaVariable(
    #{$base}-#{$state}-ue,
    prepareMediaVariable(#{$base}-dt-se-ue)
  );
  text-transform: prepareMediaVariable(
    #{$base}-#{$state}-tt-tm,
    prepareMediaVariable(#{$base}-dt-se-tt-tm, none)
  );
  word-wrap: prepareMediaVariable(
    #{$base}-#{$state}-wd-wp,
    prepareMediaVariable(#{$base}-dt-se-wd-wp, normal)
  );
  word-break: prepareMediaVariable(
    #{$base}-#{$state}-wd-bk,
    prepareMediaVariable(#{$base}-dt-se-wd-bk, normal)
  );
}

// Padding, and the icon-to-label gap on the profile row, per interaction state.
// Same default-state fallback as ad-design-state; kept separate because only the
// profile row has an item gap — the allocation row is a lone label with nothing to
// space, so $gap is left out there rather than emitting a gap it never uses.
@mixin ad-layout-state($base, $state, $padding, $gap: null) {
  padding: prepareMediaVariable(
    #{$base}-#{$state}-pg,
    prepareMediaVariable(#{$base}-dt-se-pg, $padding)
  );
  @if $gap != null {
    gap: prepareMediaVariable(
      #{$base}-#{$state}-im-gp,
      prepareMediaVariable(#{$base}-dt-se-im-gp, $gap)
    );
  }
}

// One key of the profile tree icon, resolved for an interaction state.
//
// $state is the state segment ("dt-se" | "hr-se" | "sd-se") and $key the icon key
// ("in-se" / "in-c1" for the collapsed icon, "in-se-ed" / "in-cr-ed" for the
// expanded one). Hover and selected fall back to the default state, so editing
// Default still cascades — the same rule the rows either side of the icon follow.
// The innermost fallback is the stateless variable this section used before it had
// states, which is what keeps trees saved back then rendering unchanged.
@function ad-tree-icon-var($state, $key, $fallback) {
  $legacy: prepareMediaVariable(#{$ad-tree-icon}-#{$key}, $fallback);

  @if $state == "dt-se" {
    @return prepareMediaVariable(#{$ad-tree-icon}-dt-se-#{$key}, $legacy);
  }

  @return prepareMediaVariable(
    #{$ad-tree-icon}-#{$state}-#{$key},
    prepareMediaVariable(#{$ad-tree-icon}-dt-se-#{$key}, $legacy)
  );
}

// Size + colour of the tree icon for one state. The colour is applied to the
// element and to the fetched SVG's own stroke/fill, since a custom icon may
// hardcode them (parts explicitly set to "none" are left alone).
@mixin ad-tree-icon($state, $sizeKey, $colorKey, $fallbackSize: 20px, $fallbackColor: #002a4e) {
  $size: ad-tree-icon-var($state, $sizeKey, $fallbackSize);
  $color: ad-tree-icon-var($state, $colorKey, $fallbackColor);

  color: $color;

  svg {
    width: $size;
    height: $size;

    &[stroke]:not([stroke="none"]),
    [stroke]:not([stroke="none"]) {
      stroke: $color;
    }
    &[fill]:not([fill="none"]),
    [fill]:not([fill="none"]) {
      fill: $color;
    }
  }
}

@mixin ad-design-state($base, $state) {
  background-color: prepareMediaVariable(
    #{$base}-#{$state}-bd-cr,
    prepareMediaVariable(#{$base}-dt-se-bd-cr, transparent)
  );
  border-color: prepareMediaVariable(
    #{$base}-#{$state}-br-cr,
    prepareMediaVariable(#{$base}-dt-se-br-cr, transparent)
  );
  border-style: prepareMediaVariable(
    #{$base}-#{$state}-br-se,
    prepareMediaVariable(#{$base}-dt-se-br-se, solid)
  );
  border-width: prepareMediaVariable(
    #{$base}-#{$state}-br-wh,
    prepareMediaVariable(#{$base}-dt-se-br-wh, 0)
  );
  border-radius: prepareMediaVariable(
    #{$base}-#{$state}-br-rs,
    prepareMediaVariable(#{$base}-dt-se-br-rs, 4px)
  );
  box-shadow: prepareMediaVariable(
      #{$base}-#{$state}-sw-ae,
      prepareMediaVariable(#{$base}-dt-se-sw-ae, 0 0)
    )
    prepareMediaVariable(#{$base}-#{$state}-sw-br, prepareMediaVariable(#{$base}-dt-se-sw-br, 0))
    prepareMediaVariable(#{$base}-#{$state}-sw-sd, prepareMediaVariable(#{$base}-dt-se-sw-sd, 0))
    prepareMediaVariable(
      #{$base}-#{$state}-sw-cr,
      prepareMediaVariable(#{$base}-dt-se-sw-cr, transparent)
    );
}

[data-div-type="element"] {
  &[data-element-type="allocationDetails"] {
    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
    @include prepareMediaQueries($defaultValues);
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
      )
    );

    margin: var(--_ctm-lt-mn, --_tst-lt-mn);

    & > div {
      &.wrapper {
        width: 100%;
      }
    }
    .allocation_details_sklts {
      display: flex;
      gap: 24px;
      width: 100%;
      .allocation_details_sklts_item {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
        .allocation_details_info {
          display: flex;
          gap: 8px;
        }
      }
    }
    .loading__container {
      width: 100%;
      height: 25vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .allocation_details {
      background-color: var(
        --_ctm-mob-dn-wt-se-bd-cr,
        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
      );

      border-color: var(
        --_ctm-mob-dn-wt-se-br-cr,
        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
      );

      border-style: var(
        --_ctm-mob-dn-wt-se-br-se,
        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
      );

      border-width: var(
        --_ctm-mob-dn-wt-se-br-wh,
        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
      );

      border-radius: var(
        --_ctm-mob-dn-wt-se-br-rs,
        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
      );

      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
      );

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      gap: var(
        --_ctm-mob-lt-it-ad-mn-qy-sg,
        var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
      );
      display: flex;
      flex-direction: column;
      // text css
      .title__wraper {
        background-color: var(
          --_ctm-mob-dn-te-bd-cr,
          var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
        );

        border-color: var(
          --_ctm-mob-dn-te-br-cr,
          var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
        );

        border-style: var(
          --_ctm-mob-dn-te-br-se,
          var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
        );

        border-width: var(
          --_ctm-mob-dn-te-br-wh,
          var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
        );

        border-radius: var(
          --_ctm-mob-dn-te-br-rs,
          var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
        );

        box-shadow: var(
          --_show-shadow,
          var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
            var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
            var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
            var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
        );
        white-space: nowrap;

        height: 100%;
        .title {
          color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
          font-family: var(
            --_ctm-mob-dn-te-ft-fy,
            var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-te-tt-tm,
            var(--_ctm-tab-dn-te-tt-tm, var(--_ctm-dn-te-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-te-wd-wp,
            var(--_ctm-tab-dn-te-wd-wp, var(--_ctm-dn-te-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-te-wd-bk,
            var(--_ctm-tab-dn-te-wd-bk, var(--_ctm-dn-te-wd-bk))
          );
          font-size: var(
            --_ctm-mob-dn-te-ft-se,
            var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-te-ft-wt,
            var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-te-ft-se-ic,
            var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-te-tt-an,
            var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-te-lr-sg,
            var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-te-le-ht,
            var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht))
          );
          text-decoration: var(--_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue)));
          padding: prepareMediaVariable(--_ctm-dn-te-pg);
          @include ad-text-transform(--_ctm-dn-te);
          @include ad-text-overflow;
        }
      }

      &[data-show-dividers="true"] {
        .showcase__title {
          border-bottom-width: var(
            --_ctm-mob-dn-wt-se-dr-wh,
            var(--_ctm-tab-dn-wt-se-dr-wh, var(--_ctm-dn-wt-se-dr-wh, 1px))
          );
          border-bottom-style: solid;
          border-bottom-color: var(
            --_ctm-mob-dn-wt-se-dr-cr,
            var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr, #e4e7ec))
          );
          padding-bottom: 10px;
        }
      }

      .product__showcase {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: prepareMediaVariable(--_ctm-lt-an-im-gp, 18px);

        // height: 100vh;/
        // overflow-y: auto;

        .allocation__item {
          @import "./product-image-allocation.scss";

          // The configured Width must NOT go into flex-basis. In grid view the card
          // is a column flex container, where basis is the main axis — the HEIGHT —
          // so putting the width there silently overrode the Height (px) the import
          // above sets, and the control looked dead. `auto` lets Width and Height
          // each land on their own axis in both views; `0 0` still keeps the image
          // from shrinking, which is the only thing the explicit basis was for.
          .product__image_element {
            flex: 0 0 auto;
          }

          display: flex;
          flex-direction: column;
          // Allocation > Item Gap. Spaces the header from the card grid below it;
          // the same value spaces the header's own two parts (see `.showcase__title`),
          // so name -> quota details -> cards keep one rhythm. 10px is what was
          // hardcoded here before, so an untouched element does not move.
          gap: prepareMediaVariable(--_ctm-dn-an-im-gp, 10px);
          background-color: var(
            --_ctm-mob-dn-an-an-im-bd-cr,
            var(--_ctm-tab-dn-an-an-im-bd-cr, var(--_ctm-dn-an-an-im-bd-cr))
          );

          border-color: var(
            --_ctm-mob-dn-an-an-im-br-cr,
            var(--_ctm-tab-dn-an-an-im-br-cr, var(--_ctm-dn-an-an-im-br-cr))
          );

          border-style: var(
            --_ctm-mob-dn-an-an-im-br-se,
            var(--_ctm-tab-dn-an-an-im-br-se, var(--_ctm-dn-an-an-im-br-se))
          );

          border-width: var(
            --_ctm-mob-dn-an-an-im-br-wh,
            var(--_ctm-tab-dn-an-an-im-br-wh, var(--_ctm-dn-an-an-im-br-wh))
          );

          border-radius: var(
            --_ctm-mob-dn-an-an-im-br-rs,
            var(--_ctm-tab-dn-an-an-im-br-rs, var(--_ctm-dn-an-an-im-br-rs))
          );

          box-shadow: var(
            --_show-shadow,
            var(
                --_ctm-mob-dn-an-an-im-sw-ae,
                var(--_ctm-tab-dn-an-an-im-sw-ae, var(--_ctm-dn-an-an-im-sw-ae))
              )
              var(
                --_ctm-mob-dn-an-an-im-sw-br,
                var(--_ctm-tab-dn-an-an-im-sw-br, var(--_ctm-dn-an-an-im-sw-br))
              )
              var(
                --_ctm-mob-dn-an-an-im-sw-sd,
                var(--_ctm-tab-dn-an-an-im-sw-sd, var(--_ctm-dn-an-an-im-sw-sd))
              )
              var(
                --_ctm-mob-dn-an-an-im-sw-cr,
                var(--_ctm-tab-dn-an-an-im-sw-cr, var(--_ctm-dn-an-an-im-sw-cr))
              )
          );
          padding: var(
            --_ctm-mob-dn-an-an-im-pg,
            var(--_ctm-tab-dn-an-an-im-pg, var(--_ctm-dn-an-an-im-pg))
          );

          // Quota details in the allocation header. It renders the same embedded
          // Quota Details element the cards do, from its own copy of the settings,
          // so the rules come from a rebound copy of the card stylesheet rather than
          // being written out again here.
          .showcase__title {
            // Name and quota only — the view switcher moved back up to
            // `.main__header`, where it is drawn once for the whole element instead
            // of once per allocation.
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: prepareMediaVariable(--_ctm-dn-an-im-gp, 10px);

            // The name and quota keep their own column, so Allocation > Item Gap goes
            // on spacing those two rather than pushing the switcher around.
            .showcase__title__info {
              display: flex;
              flex-direction: column;
              gap: prepareMediaVariable(--_ctm-dn-an-im-gp, 10px);
              flex: 1;
              min-width: 0;
            }

            @import "./allocation-header-quota-details.scss";
          }

          .allocation__name {
            background-color: var(
              --_ctm-mob-dn-an-an-ne-bd-cr,
              var(--_ctm-tab-dn-an-an-ne-bd-cr, var(--_ctm-dn-an-an-ne-bd-cr))
            );

            border-color: var(
              --_ctm-mob-dn-an-an-ne-br-cr,
              var(--_ctm-tab-dn-an-an-ne-br-cr, var(--_ctm-dn-an-an-ne-br-cr))
            );

            border-style: var(
              --_ctm-mob-dn-an-an-ne-br-se,
              var(--_ctm-tab-dn-an-an-ne-br-se, var(--_ctm-dn-an-an-ne-br-se))
            );

            border-width: var(
              --_ctm-mob-dn-an-an-ne-br-wh,
              var(--_ctm-tab-dn-an-an-ne-br-wh, var(--_ctm-dn-an-an-ne-br-wh))
            );

            border-radius: var(
              --_ctm-mob-dn-an-an-ne-br-rs,
              var(--_ctm-tab-dn-an-an-ne-br-rs, var(--_ctm-dn-an-an-ne-br-rs))
            );

            box-shadow: var(
              --_show-shadow,
              var(
                  --_ctm-mob-dn-an-an-ne-sw-ae,
                  var(--_ctm-tab-dn-an-an-ne-sw-ae, var(--_ctm-dn-an-an-ne-sw-ae))
                )
                var(
                  --_ctm-mob-dn-an-an-ne-sw-br,
                  var(--_ctm-tab-dn-an-an-ne-sw-br, var(--_ctm-dn-an-an-ne-sw-br))
                )
                var(
                  --_ctm-mob-dn-an-an-ne-sw-sd,
                  var(--_ctm-tab-dn-an-an-ne-sw-sd, var(--_ctm-dn-an-an-ne-sw-sd))
                )
                var(
                  --_ctm-mob-dn-an-an-ne-sw-cr,
                  var(--_ctm-tab-dn-an-an-ne-sw-cr, var(--_ctm-dn-an-an-ne-sw-cr))
                )
            );
            white-space: nowrap;

            color: var(
              --_ctm-mob-dn-an-an-ne-cr,
              var(--_ctm-tab-dn-an-an-ne-cr, var(--_ctm-dn-an-an-ne-cr))
            );
            font-family: var(
              --_ctm-mob-dn-an-an-ne-ft-fy,
              var(--_ctm-tab-dn-an-an-ne-ft-fy, var(--_ctm-dn-an-an-ne-ft-fy))
            );
            text-transform: var(
              --_ctm-mob-dn-an-an-ne-tt-tm,
              var(--_ctm-tab-dn-an-an-ne-tt-tm, var(--_ctm-dn-an-an-ne-tt-tm))
            );
            word-wrap: var(
              --_ctm-mob-dn-an-an-ne-wd-wp,
              var(--_ctm-tab-dn-an-an-ne-wd-wp, var(--_ctm-dn-an-an-ne-wd-wp))
            );
            word-break: var(
              --_ctm-mob-dn-an-an-ne-wd-bk,
              var(--_ctm-tab-dn-an-an-ne-wd-bk, var(--_ctm-dn-an-an-ne-wd-bk))
            );
            font-size: var(
              --_ctm-mob-dn-an-an-ne-ft-se,
              var(--_ctm-tab-dn-an-an-ne-ft-se, var(--_ctm-dn-an-an-ne-ft-se))
            );
            font-weight: var(
              --_ctm-mob-dn-an-an-ne-ft-wt,
              var(--_ctm-tab-dn-an-an-ne-ft-wt, var(--_ctm-dn-an-an-ne-ft-wt))
            );
            font-style: var(
              --_ctm-mob-dn-an-an-ne-ft-se-ic,
              var(--_ctm-tab-dn-an-an-ne-ft-se-ic, var(--_ctm-dn-an-an-ne-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-dn-an-an-ne-tt-an,
              var(--_ctm-tab-dn-an-an-ne-tt-an, var(--_ctm-dn-an-an-ne-tt-an))
            );
            letter-spacing: var(
              --_ctm-mob-dn-an-an-ne-lr-sg,
              var(--_ctm-tab-dn-an-an-ne-lr-sg, var(--_ctm-dn-an-an-ne-lr-sg))
            );
            line-height: var(
              --_ctm-mob-dn-an-an-ne-le-ht,
              var(--_ctm-tab-dn-an-an-ne-le-ht, var(--_ctm-dn-an-an-ne-le-ht))
            );
            text-decoration: var(
              --_ctm-mob-dn-an-an-ne-ue,
              var(--_ctm-tab-dn-an-an-ne-ue, var(--_ctm-dn-an-an-ne-ue))
            );
            padding: prepareMediaVariable(--_ctm-dn-an-an-ne-pg);
            @include ad-text-transform(--_ctm-dn-an-an-ne);
            @include ad-text-overflow;
          }
        }

        .main__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          // padding: 16px 0;
          // margin-bottom: 16px;
          // border-bottom: var(--Gray-500, #eaecf0) 1px solid;

          .section__title {
            color: var(--Gray-900, #101828);

            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 30px;
            margin: 0px;
            h3 {
              display: flex;
              align-items: center;
              font-size: 20px;
              .text__secondary {
                color: var(--Gray-iron-500, #70707b);
                font-size: 16px;

                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                padding-left: 8px;
                .text__primary {
                  color: #243dc6;
                  font-size: 16px;
                }
              }
            }
            .section__desc {
              color: var(--Gray-iron-500, #70707b);

              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: 18px;
              margin: 0px;
              span {
                color: var(--Gray-900, #101828);

                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: 24px;
              }
            }
          }
        }

        // The view switcher sits in `.main__header`, once for the whole element.
        // These rules stay at showcase level rather than nested under that header, so
        // they keep reaching it wherever it ends up.
        .button__group {
          display: flex;
          gap: 12px;
          margin-left: auto;
            // Grid View Control Style > Layout Style > Vertical Alignment. The
            // renderer publishes the stored word (top / center / bottom); those are
            // not align-self keywords, so the mapping is done here rather than
            // written into every saved element.
            align-self: center;
            &[data-vertical-align="top"] {
              align-self: flex-start;
            }
            &[data-vertical-align="center"] {
              align-self: center;
            }
            &[data-vertical-align="bottom"] {
              align-self: flex-end;
            }
          }
          .product__views {
            display: flex;
            // background-color: #fff;
            // border: 1px solid var(--_gray-300);
            border-radius: 4px;
            border-style: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-se, solid);
            border-width: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
            border-color: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-cr, var(--_gray-200));
            background-color: prepareMediaVariable(
              --_ctm-dn-gd-vw-cl-se-lt-se-bd-cr,
              var(--_base-white)
            );
            // height: 40px;
            // overflow: hidden;

            // Hoisted out of `.btn` so the "Icon + Text" rules further down can size
            // themselves off the same icon measurement.
            $size: #{var(
                --_sf-at-btn-size,
                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
              )};

            .btn {
              // display: inline-block;
              // // padding: 8px;
              // display: flex;
              // align-items: center;
              // justify-content: center;

              display: var(--_d-flex);
              --_width-20: 20px;
              // $size: var(--_width-40);
              // The 2x cell is now a floor rather than a fixed size: Padding is
              // configurable, so the button grows past it once the padding needs more
              // room than the icon left over. Untouched elements have no padding and
              // stay exactly 2x, as they always were.
              min-width: calc(#{$size} * 2);
              min-height: calc(#{$size} * 2);
              box-sizing: border-box;
              padding: var(--_sf-at-btn-pg, #{prepareMediaVariable(
                    --_ctm-dn-gd-vw-cl-se-bn-dt-se-pg,
                    0
                  )});
              align-items: center;
              justify-content: center;
              background: var(
                --_sf-at-btn-bd,
                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
              );
              box-shadow: var(
                --_sf-at-btn-sw,
                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0 0)}
                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
              );

              // The renderer reads Show Shadow off whichever state the button is in,
              // so one attribute covers both.
              &[data-show-shadow="false"] {
                box-shadow: none;
              }

              cursor: pointer;
              button {
                display: flex;
                // Until these are cleared the button keeps the browser's own
                // padding and border, which pushed the glyph off the centre of its
                // cell — that is what made the Grid and List icons sit unevenly
                // beside each other. Filling the cell and centring here keeps them
                // on one baseline at every icon size.
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                padding: 0;
                border: none;
                background: transparent;
              }

              // The glyph gets its own flex box so the svg sits centred without the
              // inline-baseline gap a bare `dangerouslySetInnerHTML` span would add.
              .btn__icon {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;

                // An uploaded icon comes through as an <img> sized to its box, so the
                // box needs a size of its own — the svg rule further down only reaches
                // library icons, and a percentage inside a shrink-to-fit parent would
                // otherwise resolve to nothing.
                img {
                  width: calc(#{$size} * 1);
                  height: calc(#{$size} * 1);
                  object-fit: contain;
                }
              }

              // &:hover {
              //   background-color: var(--_gray-100);
              // }

              &.active {
                // --_sf-at-pt-cl: var(--_gray-700);
                --_sf-at-btn-size: #{prepareMediaVariable(
                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-se,
                    var(--_width-20)
                  )};
                --_sf-at-pt-cl: #{prepareMediaVariable(
                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-c1,
                    var(--_gray-700)
                  )};
                --_sf-at-btn-bd: #{prepareMediaVariable(
                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
                    var(--_gray-200)
                  )};
                // Same re-pointing trick as the icon vars above: the padding and
                // shadow declarations stay written once and simply re-resolve
                // against the selected state's values.
                --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-pg, 0)};
                --_sf-at-btn-sw: #{prepareMediaVariable(
                    --_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-ae,
                    0 0
                  )}
                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-br, 0)}
                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-sd, 0)}
                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-cr, transparent)};
                // background: var(--_gray-200);
              }
              // &.active {
              //   background-color: #ced4f6;
              //   button {
              //     svg {
              //       path {
              //         stroke: var(--_primary-500);
              //       }
              //     }
              //   }
              // }
              // &:first-child {
              //   border-right: 1px solid var(--_gray-200);
              // }

              svg {
                width: calc(#{$size} * 1);
                height: calc(#{$size} * 1);

                path {
                  stroke: var(
                    --_sf-at-pt-cl,
                    #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
                }
              }

              &:first-of-type {
                border-radius: 4px 0 0 4px;
              }
              &:last-of-type {
                border-radius: 0 4px 4px 0;
              }
            }
          }
        // products header styles
        .showcase__header {
          display: flex;
          justify-content: space-between;
          padding: 16px 0;
          margin-bottom: 16px;
          border-bottom: var(--Gray-200, #eaecf0) 1px solid;
          .quota__details {
            display: flex;
            align-items: center;
            gap: 8px;
          }

          .button__group {
            display: flex;
            gap: 12px;
          }
          .product__views {
            display: flex;
            background-color: #fff;
            border: 1px solid var(--_gray-300);
            border-radius: 6px;
            height: 40px;
            overflow: hidden;

            .btn {
              display: inline-block;
              padding: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              button {
                display: flex;
              }
              &:hover {
                background-color: var(--_gray-100);
              }
              &.active {
                background-color: #ced4f6;
                button {
                  svg {
                    path {
                      stroke: var(--_primary-500);
                    }
                  }
                }
              }
              &:first-child {
                border-right: 1px solid var(--_gray-200);
              }
            }
          }
        }

        //  add to cart button styles
        .primary__btn {
          display: flex;
          gap: 8px;
          height: 44px;
          padding: 8px 14px;
          background-color: var(--_primary-500);
          border-radius: 6px;
          color: #fff;
          font-weight: 600;
          height: 40px;
          display: inline-flex;
          cursor: pointer;
          &:hover {
            background-color: var(--_primary-500);
          }
          &.disable__btn {
            cursor: not-allowed;
            opacity: 0.5;
          }
        }

        //  product list styles
        .showcase__product__list {
          .product__card {
            .category__image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          &[data-list-view="grid"] {
            // grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            // grid-template-columns: repeat(
            //   var(
            //     --_ctm-mob-dn-an-an-im-is-pr-rw,
            //     var(--_ctm-tab-dn-an-an-im-is-pr-rw, var(--_ctm-dn-an-an-im-is-pr-rw))
            //   ),
            //   1fr
            // );
            --_sf-cl-count: #{prepareMediaVariable(--_ctm-dn-an-an-im-is-pr-rw, 1)};
            // The column width has to be worked out from the COLUMN gap alone — it is
            // the only one that eats into the row's width.
            --_sf-cl-gp: #{prepareMediaVariable(
                --_ctm-dn-an-an-im-cn-gp,
                prepareMediaVariable(--_ctm-dn-an-an-im-im-gp, 0px)
              )};
            grid-template-columns: getRepeatColWidth(--_sf-cl-count, --_sf-cl-gp);
            // gap: 24px;
            .product__card {
              flex-direction: column;
              .card__img__container {
                width: 100%;
              }
            }
          }

          &[data-list-view="list"] {
            grid-template-columns: auto;
            .product__card {
              flex-direction: row;
              align-items: prepareMediaVariable(--_ctm-lt-an-is, start);
              // gap: 24px;
              .card__img__container {
                width: 250px;
              }
            }
          }
          display: grid;
          // Gap BETWEEN the item cards, now one control per axis. Both fall back to
          // the single `itemGap` this section used to carry, so a grid spaced before
          // the split keeps its spacing until either axis is touched.
          row-gap: prepareMediaVariable(
            --_ctm-dn-an-an-im-rw-gp,
            prepareMediaVariable(--_ctm-dn-an-an-im-im-gp, 0px)
          );
          column-gap: prepareMediaVariable(
            --_ctm-dn-an-an-im-cn-gp,
            prepareMediaVariable(--_ctm-dn-an-an-im-im-gp, 0px)
          );

          .product__card {
            // product card styles
            display: flex;
            // Item Card > Item Gap: image container <-> details container. 12px is
            // what was hardcoded here, so an untouched card does not move.
            gap: prepareMediaVariable(--_ctm-dn-im-cd-im-gp, 12px);

            background-color: var(
              --_ctm-mob-dn-im-cd-bd-cr,
              var(--_ctm-tab-dn-im-cd-bd-cr, var(--_ctm-dn-im-cd-bd-cr))
            );

            border-color: var(
              --_ctm-mob-dn-im-cd-br-cr,
              var(--_ctm-tab-dn-im-cd-br-cr, var(--_ctm-dn-im-cd-br-cr))
            );

            border-style: var(
              --_ctm-mob-dn-im-cd-br-se,
              var(--_ctm-tab-dn-im-cd-br-se, var(--_ctm-dn-im-cd-br-se))
            );

            border-width: var(
              --_ctm-mob-dn-im-cd-br-wh,
              var(--_ctm-tab-dn-im-cd-br-wh, var(--_ctm-dn-im-cd-br-wh))
            );

            border-radius: var(
              --_ctm-mob-dn-im-cd-br-rs,
              var(--_ctm-tab-dn-im-cd-br-rs, var(--_ctm-dn-im-cd-br-rs))
            );

            box-shadow: var(
              --_show-shadow,
              var(
                  --_ctm-mob-dn-im-cd-sw-ae,
                  var(--_ctm-tab-dn-im-cd-sw-ae, var(--_ctm-dn-im-cd-sw-ae))
                )
                var(
                  --_ctm-mob-dn-im-cd-sw-br,
                  var(--_ctm-tab-dn-im-cd-sw-br, var(--_ctm-dn-im-cd-sw-br))
                )
                var(
                  --_ctm-mob-dn-im-cd-sw-sd,
                  var(--_ctm-tab-dn-im-cd-sw-sd, var(--_ctm-dn-im-cd-sw-sd))
                )
                var(
                  --_ctm-mob-dn-im-cd-sw-cr,
                  var(--_ctm-tab-dn-im-cd-sw-cr, var(--_ctm-dn-im-cd-sw-cr))
                )
            );
            padding: var(
              --_ctm-mob-dn-im-cd-pg,
              var(--_ctm-tab-dn-im-cd-pg, var(--_ctm-dn-im-cd-pg))
            );
            .card__img__container {
              height: 300px;
              background-color: #fff;
              display: flex;
              align-items: flex-start;
              justify-content: center;
              border-radius: 6px;
              &[data-has-link="true"] {
                cursor: pointer;
              }
              .placeholder__image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .price_details {
              display: flex;
              flex-direction: column;
              gap: 8px;
              align-items: prepareMediaVariable(--_ctm-lt-jy-ct, start);

              .product__name {
                background-color: var(
                  --_ctm-mob-dn-ne-bd-cr,
                  var(--_ctm-tab-dn-ne-bd-cr, var(--_ctm-dn-ne-bd-cr))
                );

                border-color: var(
                  --_ctm-mob-dn-ne-br-cr,
                  var(--_ctm-tab-dn-ne-br-cr, var(--_ctm-dn-ne-br-cr))
                );

                border-style: var(
                  --_ctm-mob-dn-ne-br-se,
                  var(--_ctm-tab-dn-ne-br-se, var(--_ctm-dn-ne-br-se))
                );

                border-width: var(
                  --_ctm-mob-dn-ne-br-wh,
                  var(--_ctm-tab-dn-ne-br-wh, var(--_ctm-dn-ne-br-wh))
                );

                border-radius: var(
                  --_ctm-mob-dn-ne-br-rs,
                  var(--_ctm-tab-dn-ne-br-rs, var(--_ctm-dn-ne-br-rs))
                );

                box-shadow: var(
                  --_show-shadow,
                  var(--_ctm-mob-dn-ne-sw-ae, var(--_ctm-tab-dn-ne-sw-ae, var(--_ctm-dn-ne-sw-ae)))
                    var(
                      --_ctm-mob-dn-ne-sw-br,
                      var(--_ctm-tab-dn-ne-sw-br, var(--_ctm-dn-ne-sw-br))
                    )
                    var(
                      --_ctm-mob-dn-ne-sw-sd,
                      var(--_ctm-tab-dn-ne-sw-sd, var(--_ctm-dn-ne-sw-sd))
                    )
                    var(
                      --_ctm-mob-dn-ne-sw-cr,
                      var(--_ctm-tab-dn-ne-sw-cr, var(--_ctm-dn-ne-sw-cr))
                    )
                );
                white-space: var(--_sf-sc-pt-lt-we-se, nowrap);

                height: 100%;

                color: var(--_ctm-mob-dn-ne-cr, var(--_ctm-tab-dn-ne-cr, var(--_ctm-dn-ne-cr)));
                font-family: var(
                  --_ctm-mob-dn-ne-ft-fy,
                  var(--_ctm-tab-dn-ne-ft-fy, var(--_ctm-dn-ne-ft-fy))
                );
                text-transform: var(
                  --_ctm-mob-dn-ne-tt-tm,
                  var(--_ctm-tab-dn-ne-tt-tm, var(--_ctm-dn-ne-tt-tm))
                );
                word-wrap: var(
                  --_ctm-mob-dn-ne-wd-wp,
                  var(--_ctm-tab-dn-ne-wd-wp, var(--_ctm-dn-ne-wd-wp))
                );
                word-break: var(
                  --_ctm-mob-dn-ne-wd-bk,
                  var(--_ctm-tab-dn-ne-wd-bk, var(--_ctm-dn-ne-wd-bk))
                );
                font-size: var(
                  --_ctm-mob-dn-ne-ft-se,
                  var(--_ctm-tab-dn-ne-ft-se, var(--_ctm-dn-ne-ft-se))
                );
                font-weight: var(
                  --_ctm-mob-dn-ne-ft-wt,
                  var(--_ctm-tab-dn-ne-ft-wt, var(--_ctm-dn-ne-ft-wt))
                );
                font-style: var(
                  --_ctm-mob-dn-ne-ft-se-ic,
                  var(--_ctm-tab-dn-ne-ft-se-ic, var(--_ctm-dn-ne-ft-se-ic))
                );
                text-align: var(
                  --_ctm-mob-dn-ne-tt-an,
                  var(--_ctm-tab-dn-ne-tt-an, var(--_ctm-dn-ne-tt-an))
                );
                letter-spacing: var(
                  --_ctm-mob-dn-ne-lr-sg,
                  var(--_ctm-tab-dn-ne-lr-sg, var(--_ctm-dn-ne-lr-sg))
                );
                line-height: var(
                  --_ctm-mob-dn-ne-le-ht,
                  var(--_ctm-tab-dn-ne-le-ht, var(--_ctm-dn-ne-le-ht))
                );
                text-decoration: var(
                  --_ctm-mob-dn-ne-ue,
                  var(--_ctm-tab-dn-ne-ue, var(--_ctm-dn-ne-ue))
                );
                padding: prepareMediaVariable(--_ctm-dn-ne-pg);
                @include ad-text-transform(--_ctm-dn-ne);

                & > span {
                  width: 100%;
                  @include ad-text-overflow;
                }
                &[data-has-link="true"] {
                  cursor: pointer;
                  &:hover {
                    color: var(--_primary-500);
                  }
                }
              }
              .brand__container {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
                color: var(--_gray-600);
                font-weight: 500;

                // Item Card > Brand & Code Direction. Horizontal is the original
                // side-by-side row; vertical stacks the two blocks and lets each
                // start at the left rather than being centred against the other.
                &[data-direction="vertical"] {
                  flex-direction: column;
                  align-items: flex-start;
                  flex-wrap: nowrap;
                }
              }
            }

            .brand {
              display: flex;
              align-items: center;
              gap: 6px;
              @include ad-section-box(--_ctm-dn-bd);

              .brand__icon {
                @include ad-section-icon(--_ctm-dn-bd);
              }

              .value {
                // padding-block-end: var(--_sf-dc-pd-bt);

                color: var(
                  --_ctm-mob-dn-bd-cr-dc,
                  var(--_ctm-tab-dn-bd-cr-dc, var(--_ctm-dn-bd-cr-dc))
                );
                font-family: var(
                  --_ctm-mob-dn-bd-ft-fy-dc,
                  var(--_ctm-tab-dn-bd-ft-fy-dc, var(--_ctm-dn-bd-ft-fy-dc))
                );
                text-transform: var(
                  --_ctm-mob-dn-bd-tt-tm-dc,
                  var(--_ctm-tab-dn-bd-tt-tm-dc, var(--_ctm-dn-bd-tt-tm-dc))
                );
                word-wrap: var(
                  --_ctm-mob-dn-bd-wd-wp-dc,
                  var(--_ctm-tab-dn-bd-wd-wp-dc, var(--_ctm-dn-bd-wd-wp-dc))
                );
                word-break: var(
                  --_ctm-mob-dn-bd-wd-bk-dc,
                  var(--_ctm-tab-dn-bd-wd-bk-dc, var(--_ctm-dn-bd-wd-bk-dc))
                );
                font-size: var(
                  --_ctm-mob-dn-bd-ft-se-dc,
                  var(--_ctm-tab-dn-bd-ft-se-dc, var(--_ctm-dn-bd-ft-se-dc))
                );
                font-weight: var(
                  --_ctm-mob-dn-bd-ft-wt-dc,
                  var(--_ctm-tab-dn-bd-ft-wt-dc, var(--_ctm-dn-bd-ft-wt-dc))
                );
                font-style: var(
                  --_ctm-mob-dn-bd-ft-se-ic-dc,
                  var(--_ctm-tab-dn-bd-ft-se-ic-dc, var(--_ctm-dn-bd-ft-se-ic-dc))
                );
                text-align: var(
                  --_ctm-mob-dn-bd-tt-an-dc,
                  var(--_ctm-tab-dn-bd-tt-an-dc, var(--_ctm-dn-bd-tt-an-dc))
                );
                letter-spacing: var(
                  --_ctm-mob-dn-bd-lr-sg-dc,
                  var(--_ctm-tab-dn-bd-lr-sg-dc, var(--_ctm-dn-bd-lr-sg-dc))
                );
                line-height: var(
                  --_ctm-mob-dn-bd-le-ht-dc,
                  var(--_ctm-tab-dn-bd-le-ht-dc, var(--_ctm-dn-bd-le-ht-dc))
                );
                text-decoration: var(
                  --_ctm-mob-dn-bd-ue-dc,
                  var(--_ctm-tab-dn-bd-ue-dc, var(--_ctm-dn-bd-ue-dc))
                );
                @include ad-text-transform(--_ctm-dn-bd, "-dc");
                @include ad-text-overflow(--_sf-line-clamp-desc);
              }
              .label {
                color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
                font-family: var(
                  --_ctm-mob-dn-bd-ft-fy,
                  var(--_ctm-tab-dn-bd-ft-fy, var(--_ctm-dn-bd-ft-fy))
                );
                text-transform: var(
                  --_ctm-mob-dn-bd-tt-tm,
                  var(--_ctm-tab-dn-bd-tt-tm, var(--_ctm-dn-bd-tt-tm))
                );
                word-wrap: var(
                  --_ctm-mob-dn-bd-wd-wp,
                  var(--_ctm-tab-dn-bd-wd-wp, var(--_ctm-dn-bd-wd-wp))
                );
                word-break: var(
                  --_ctm-mob-dn-bd-wd-bk,
                  var(--_ctm-tab-dn-bd-wd-bk, var(--_ctm-dn-bd-wd-bk))
                );
                font-size: var(
                  --_ctm-mob-dn-bd-ft-se,
                  var(--_ctm-tab-dn-bd-ft-se, var(--_ctm-dn-bd-ft-se))
                );
                font-weight: var(
                  --_ctm-mob-dn-bd-ft-wt,
                  var(--_ctm-tab-dn-bd-ft-wt, var(--_ctm-dn-bd-ft-wt))
                );
                font-style: var(
                  --_ctm-mob-dn-bd-ft-se-ic,
                  var(--_ctm-tab-dn-bd-ft-se-ic, var(--_ctm-dn-bd-ft-se-ic))
                );
                text-align: var(
                  --_ctm-mob-dn-bd-tt-an,
                  var(--_ctm-tab-dn-bd-tt-an, var(--_ctm-dn-bd-tt-an))
                );
                letter-spacing: var(
                  --_ctm-mob-dn-bd-lr-sg,
                  var(--_ctm-tab-dn-bd-lr-sg, var(--_ctm-dn-bd-lr-sg))
                );
                line-height: var(
                  --_ctm-mob-dn-bd-le-ht,
                  var(--_ctm-tab-dn-bd-le-ht, var(--_ctm-dn-bd-le-ht))
                );
                text-decoration: var(
                  --_ctm-mob-dn-bd-ue,
                  var(--_ctm-tab-dn-bd-ue, var(--_ctm-dn-bd-ue))
                );
                @include ad-text-transform(--_ctm-dn-bd);
                @include ad-text-overflow;
              }
            }
            .code {
              display: flex;
              align-items: center;
              gap: 6px;
              @include ad-section-box(--_ctm-dn-ce);

              .code__icon {
                @include ad-section-icon(--_ctm-dn-ce);
              }

              .value {
                // padding-block-end: var(--_sf-dc-pd-bt);

                color: var(
                  --_ctm-mob-dn-ce-cr-dc,
                  var(--_ctm-tab-dn-ce-cr-dc, var(--_ctm-dn-ce-cr-dc))
                );
                font-family: var(
                  --_ctm-mob-dn-ce-ft-fy-dc,
                  var(--_ctm-tab-dn-ce-ft-fy-dc, var(--_ctm-dn-ce-ft-fy-dc))
                );
                text-transform: var(
                  --_ctm-mob-dn-ce-tt-tm-dc,
                  var(--_ctm-tab-dn-ce-tt-tm-dc, var(--_ctm-dn-ce-tt-tm-dc))
                );
                word-wrap: var(
                  --_ctm-mob-dn-ce-wd-wp-dc,
                  var(--_ctm-tab-dn-ce-wd-wp-dc, var(--_ctm-dn-ce-wd-wp-dc))
                );
                word-break: var(
                  --_ctm-mob-dn-ce-wd-bk-dc,
                  var(--_ctm-tab-dn-ce-wd-bk-dc, var(--_ctm-dn-ce-wd-bk-dc))
                );
                font-size: var(
                  --_ctm-mob-dn-ce-ft-se-dc,
                  var(--_ctm-tab-dn-ce-ft-se-dc, var(--_ctm-dn-ce-ft-se-dc))
                );
                font-weight: var(
                  --_ctm-mob-dn-ce-ft-wt-dc,
                  var(--_ctm-tab-dn-ce-ft-wt-dc, var(--_ctm-dn-ce-ft-wt-dc))
                );
                font-style: var(
                  --_ctm-mob-dn-ce-ft-se-ic-dc,
                  var(--_ctm-tab-dn-ce-ft-se-ic-dc, var(--_ctm-dn-ce-ft-se-ic-dc))
                );
                text-align: var(
                  --_ctm-mob-dn-ce-tt-an-dc,
                  var(--_ctm-tab-dn-ce-tt-an-dc, var(--_ctm-dn-ce-tt-an-dc))
                );
                letter-spacing: var(
                  --_ctm-mob-dn-ce-lr-sg-dc,
                  var(--_ctm-tab-dn-ce-lr-sg-dc, var(--_ctm-dn-ce-lr-sg-dc))
                );
                line-height: var(
                  --_ctm-mob-dn-ce-le-ht-dc,
                  var(--_ctm-tab-dn-ce-le-ht-dc, var(--_ctm-dn-ce-le-ht-dc))
                );
                text-decoration: var(
                  --_ctm-mob-dn-ce-ue-dc,
                  var(--_ctm-tab-dn-ce-ue-dc, var(--_ctm-dn-ce-ue-dc))
                );
                @include ad-text-transform(--_ctm-dn-ce, "-dc");
                @include ad-text-overflow(--_sf-line-clamp-desc);
              }
              .label {
                color: var(--_ctm-mob-dn-ce-cr, var(--_ctm-tab-dn-ce-cr, var(--_ctm-dn-ce-cr)));
                font-family: var(
                  --_ctm-mob-dn-ce-ft-fy,
                  var(--_ctm-tab-dn-ce-ft-fy, var(--_ctm-dn-ce-ft-fy))
                );
                text-transform: var(
                  --_ctm-mob-dn-ce-tt-tm,
                  var(--_ctm-tab-dn-ce-tt-tm, var(--_ctm-dn-ce-tt-tm))
                );
                word-wrap: var(
                  --_ctm-mob-dn-ce-wd-wp,
                  var(--_ctm-tab-dn-ce-wd-wp, var(--_ctm-dn-ce-wd-wp))
                );
                word-break: var(
                  --_ctm-mob-dn-ce-wd-bk,
                  var(--_ctm-tab-dn-ce-wd-bk, var(--_ctm-dn-ce-wd-bk))
                );
                font-size: var(
                  --_ctm-mob-dn-ce-ft-se,
                  var(--_ctm-tab-dn-ce-ft-se, var(--_ctm-dn-ce-ft-se))
                );
                font-weight: var(
                  --_ctm-mob-dn-ce-ft-wt,
                  var(--_ctm-tab-dn-ce-ft-wt, var(--_ctm-dn-ce-ft-wt))
                );
                font-style: var(
                  --_ctm-mob-dn-ce-ft-se-ic,
                  var(--_ctm-tab-dn-ce-ft-se-ic, var(--_ctm-dn-ce-ft-se-ic))
                );
                text-align: var(
                  --_ctm-mob-dn-ce-tt-an,
                  var(--_ctm-tab-dn-ce-tt-an, var(--_ctm-dn-ce-tt-an))
                );
                letter-spacing: var(
                  --_ctm-mob-dn-ce-lr-sg,
                  var(--_ctm-tab-dn-ce-lr-sg, var(--_ctm-dn-ce-lr-sg))
                );
                line-height: var(
                  --_ctm-mob-dn-ce-le-ht,
                  var(--_ctm-tab-dn-ce-le-ht, var(--_ctm-dn-ce-le-ht))
                );
                text-decoration: var(
                  --_ctm-mob-dn-ce-ue,
                  var(--_ctm-tab-dn-ce-ue, var(--_ctm-dn-ce-ue))
                );
                @include ad-text-transform(--_ctm-dn-ce);
                @include ad-text-overflow;
              }
            }
            .price {
              background-color: var(
                --_ctm-mob-dn-pe-bd-cr,
                var(--_ctm-tab-dn-pe-bd-cr, var(--_ctm-dn-pe-bd-cr))
              );

              border-color: var(
                --_ctm-mob-dn-pe-br-cr,
                var(--_ctm-tab-dn-pe-br-cr, var(--_ctm-dn-pe-br-cr))
              );

              border-style: var(
                --_ctm-mob-dn-pe-br-se,
                var(--_ctm-tab-dn-pe-br-se, var(--_ctm-dn-pe-br-se))
              );

              border-width: var(
                --_ctm-mob-dn-pe-br-wh,
                var(--_ctm-tab-dn-pe-br-wh, var(--_ctm-dn-pe-br-wh))
              );

              border-radius: var(
                --_ctm-mob-dn-pe-br-rs,
                var(--_ctm-tab-dn-pe-br-rs, var(--_ctm-dn-pe-br-rs))
              );

              box-shadow: var(
                --_show-shadow,
                var(--_ctm-mob-dn-pe-sw-ae, var(--_ctm-tab-dn-pe-sw-ae, var(--_ctm-dn-pe-sw-ae)))
                  var(--_ctm-mob-dn-pe-sw-br, var(--_ctm-tab-dn-pe-sw-br, var(--_ctm-dn-pe-sw-br)))
                  var(--_ctm-mob-dn-pe-sw-sd, var(--_ctm-tab-dn-pe-sw-sd, var(--_ctm-dn-pe-sw-sd)))
                  var(--_ctm-mob-dn-pe-sw-cr, var(--_ctm-tab-dn-pe-sw-cr, var(--_ctm-dn-pe-sw-cr)))
              );
              white-space: nowrap;

              height: 100%;

              color: var(--_ctm-mob-dn-pe-cr, var(--_ctm-tab-dn-pe-cr, var(--_ctm-dn-pe-cr)));
              font-family: var(
                --_ctm-mob-dn-pe-ft-fy,
                var(--_ctm-tab-dn-pe-ft-fy, var(--_ctm-dn-pe-ft-fy))
              );
              text-transform: var(
                --_ctm-mob-dn-pe-tt-tm,
                var(--_ctm-tab-dn-pe-tt-tm, var(--_ctm-dn-pe-tt-tm))
              );
              word-wrap: var(
                --_ctm-mob-dn-pe-wd-wp,
                var(--_ctm-tab-dn-pe-wd-wp, var(--_ctm-dn-pe-wd-wp))
              );
              word-break: var(
                --_ctm-mob-dn-pe-wd-bk,
                var(--_ctm-tab-dn-pe-wd-bk, var(--_ctm-dn-pe-wd-bk))
              );
              font-size: var(
                --_ctm-mob-dn-pe-ft-se,
                var(--_ctm-tab-dn-pe-ft-se, var(--_ctm-dn-pe-ft-se))
              );
              font-weight: var(
                --_ctm-mob-dn-pe-ft-wt,
                var(--_ctm-tab-dn-pe-ft-wt, var(--_ctm-dn-pe-ft-wt))
              );
              font-style: var(
                --_ctm-mob-dn-pe-ft-se-ic,
                var(--_ctm-tab-dn-pe-ft-se-ic, var(--_ctm-dn-pe-ft-se-ic))
              );
              text-align: var(
                --_ctm-mob-dn-pe-tt-an,
                var(--_ctm-tab-dn-pe-tt-an, var(--_ctm-dn-pe-tt-an))
              );
              letter-spacing: var(
                --_ctm-mob-dn-pe-lr-sg,
                var(--_ctm-tab-dn-pe-lr-sg, var(--_ctm-dn-pe-lr-sg))
              );
              line-height: var(
                --_ctm-mob-dn-pe-le-ht,
                var(--_ctm-tab-dn-pe-le-ht, var(--_ctm-dn-pe-le-ht))
              );
              text-decoration: var(
                --_ctm-mob-dn-pe-ue,
                var(--_ctm-tab-dn-pe-ue, var(--_ctm-dn-pe-ue))
              );
              padding: prepareMediaVariable(--_ctm-dn-pe-pg);
              @include ad-text-transform(--_ctm-dn-pe);
              @include ad-text-overflow;
            }
          }

          // Quota details styling for the embedded QuotaDetailsContent, rebound to
          // the Allocations quotaDetails CSS-variable paths.
          @import "./allocations-quota-details.scss";
        }
      }

      .allocation__profile__tabs {
        width: 100%;
        background-color: var(
          --_ctm-mob-dn-sr-wt-se-bd-cr,
          var(--_ctm-tab-dn-sr-wt-se-bd-cr, var(--_ctm-dn-sr-wt-se-bd-cr))
        );
        // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
        display: flex;
        flex-direction: column;
        --_sf-gp: var(
          --_ctm-mob-lt-im-sg,
          var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
        );
        --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
        row-gap: var(--_sf-gp);
        width: 100%;
        height: 100%;
        border-color: var(
          --_ctm-mob-dn-sr-wt-se-br-cr,
          var(--_ctm-tab-dn-sr-wt-se-br-cr, var(--_ctm-dn-sr-wt-se-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-sr-wt-se-br-se,
          var(--_ctm-tab-dn-sr-wt-se-br-se, var(--_ctm-dn-sr-wt-se-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-sr-wt-se-br-wh,
          var(--_ctm-tab-dn-sr-wt-se-br-wh, var(--_ctm-dn-sr-wt-se-br-wh))
        );
        border-radius: var(
          --_ctm-mob-dn-sr-wt-se-br-rs,
          var(--_ctm-tab-dn-sr-wt-se-br-rs, var(--_ctm-dn-sr-wt-se-br-rs))
        );
        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-sr-wt-se-sw-ae,
              var(--_ctm-tab-dn-sr-wt-se-sw-ae, var(--_ctm-dn-sr-wt-se-sw-ae))
            )
            var(
              --_ctm-mob-dn-sr-wt-se-sw-br,
              var(--_ctm-tab-dn-sr-wt-se-sw-br, var(--_ctm-dn-sr-wt-se-sw-br))
            )
            var(
              --_ctm-mob-dn-sr-wt-se-sw-sd,
              var(--_ctm-tab-dn-sr-wt-se-sw-sd, var(--_ctm-dn-sr-wt-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-sr-wt-se-sw-cr,
              var(--_ctm-tab-dn-sr-wt-se-sw-cr, var(--_ctm-dn-sr-wt-se-sw-cr))
            )
        );
        .profile__button {
          &[data-show-shadow="false"] {
            --_show-shadow: none;
          }
          &[data-icon-position="left"] {
            --_sf-fd-bn: row;
          }
          &[data-icon-position="right"] {
            --_sf-fd-bn: row-reverse;
          }
          &[data-icon-position="center"] {
            --_sf-fd-bn: row;
          }

          &:hover {
            --_sf-hr-bd-cr: var(
              --_ctm-mob-dn-sr-tb-hr-se-bd-cr,
              var(--_ctm-tab-dn-sr-tb-hr-se-bd-cr, var(--_ctm-dn-sr-tb-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-sr-tb-hr-se-br-cr,
              var(--_ctm-tab-dn-sr-tb-hr-se-br-cr, var(--_ctm-dn-sr-tb-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-sr-tb-hr-se-br-se,
              var(--_ctm-tab-dn-sr-tb-hr-se-br-se, var(--_ctm-dn-sr-tb-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-sr-tb-hr-se-br-wh,
              var(--_ctm-tab-dn-sr-tb-hr-se-br-wh, var(--_ctm-dn-sr-tb-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-sr-tb-hr-se-br-rs,
              var(--_ctm-tab-dn-sr-tb-hr-se-br-rs, var(--_ctm-dn-sr-tb-hr-se-br-rs))
            );
            --_sf-hr-at: var(
              --_ctm-mob-dn-sr-tb-hr-se-at,
              var(--_ctm-tab-dn-sr-tb-hr-se-at, var(--_ctm-dn-sr-tb-hr-se-at))
            );
            --_sf-hr-in-ad-tt-sg: var(
              --_ctm-mob-dn-sr-tb-hr-se-in-ad-tt-sg,
              var(--_ctm-tab-dn-sr-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-sr-tb-hr-se-in-ad-tt-sg))
            );

            // for shadow
            --_sf-hr-sw-ae: var(
              --_ctm-mob-dn-sr-tb-hr-se-sw-ae,
              var(--_ctm-tab-dn-sr-tb-hr-se-sw-ae, var(--_ctm-dn-sr-tb-hr-se-sw-ae))
            );
            --_sf-hr-sw-br: var(
              --_ctm-mob-dn-sr-tb-hr-se-sw-br,
              var(--_ctm-tab-dn-sr-tb-hr-se-sw-br, var(--_ctm-dn-sr-tb-hr-se-sw-br))
            );
            --_sf-hr-sw-hr: var(
              --_ctm-mob-dn-sr-tb-hr-se-sw-hr,
              var(--_ctm-tab-dn-sr-tb-hr-se-sw-hr, var(--_ctm-dn-sr-tb-hr-se-sw-hr))
            );
            --_sf-hr-sw-cr: var(
              --_ctm-mob-dn-sr-tb-hr-se-sw-cr,
              var(--_ctm-tab-dn-sr-tb-hr-se-sw-cr, var(--_ctm-dn-sr-tb-hr-se-sw-cr))
            );

            // for font

            --_sf-hr-cr: var(
              --_ctm-mob-dn-sr-tb-hr-se-cr,
              var(--_ctm-tab-dn-sr-tb-hr-se-cr, var(--_ctm-dn-sr-tb-hr-se-cr))
            );
            --_sf-hr-ft-fy: var(
              --_ctm-mob-dn-sr-tb-hr-se-ft-fy,
              var(--_ctm-tab-dn-sr-tb-hr-se-ft-fy, var(--_ctm-dn-sr-tb-hr-se-ft-fy))
            );
            --_sf-hr-ft-se: var(
              --_ctm-mob-dn-sr-tb-hr-se-ft-se,
              var(--_ctm-tab-dn-sr-tb-hr-se-ft-se, var(--_ctm-dn-sr-tb-hr-se-ft-se))
            );
            --_sf-hr-ft-wt: var(
              --_ctm-mob-dn-sr-tb-hr-se-ft-wt,
              var(--_ctm-tab-dn-sr-tb-hr-se-ft-wt, var(--_ctm-dn-sr-tb-hr-se-ft-wt))
            );
            --_sf-hr-ft-se-ic: var(
              --_ctm-mob-dn-sr-tb-hr-se-ft-se-ic,
              var(--_ctm-tab-dn-sr-tb-hr-se-ft-se-ic, var(--_ctm-dn-sr-tb-hr-se-ft-se-ic))
            );
            --_sf-hr-tt-an: var(
              --_ctm-mob-dn-sr-tb-hr-se-tt-an,
              var(--_ctm-tab-dn-sr-tb-hr-se-tt-an, var(--_ctm-dn-sr-tb-hr-se-tt-an))
            );
            --_sf-hr-lr-sg: var(
              --_ctm-mob-dn-sr-tb-hr-se-lr-sg,
              var(--_ctm-tab-dn-sr-tb-hr-se-lr-sg, var(--_ctm-dn-sr-tb-hr-se-lr-sg))
            );
            --_sf-hr-le-ht: var(
              --_ctm-mob-dn-sr-tb-hr-se-le-ht,
              var(--_ctm-tab-dn-sr-tb-hr-se-le-ht, var(--_ctm-dn-sr-tb-hr-se-le-ht))
            );
            --_sf-hr-tt-tm: var(
              --_ctm-mob-dn-sr-tb-hr-se-tt-tm,
              var(--_ctm-tab-dn-sr-tb-hr-se-tt-tm, var(--_ctm-dn-sr-tb-hr-se-tt-tm))
            );
            --_sf-hr-wd-wp: var(
              --_ctm-mob-dn-sr-tb-hr-se-wd-wp,
              var(--_ctm-tab-dn-sr-tb-hr-se-wd-wp, var(--_ctm-dn-sr-tb-hr-se-wd-wp))
            );
            --_sf-hr-wd-bk: var(
              --_ctm-mob-dn-sr-tb-hr-se-wd-bk,
              var(--_ctm-tab-dn-sr-tb-hr-se-wd-bk, var(--_ctm-dn-sr-tb-hr-se-wd-bk))
            );

            --_sf-hr-in-se: var(
              --_ctm-mob-dn-sr-tb-hr-se-in-se,
              var(--_ctm-tab-dn-sr-tb-hr-se-in-se, var(--_ctm-dn-sr-tb-hr-se-in-se))
            );
            --_sf-hr-in-se: var(
              --_ctm-mob-dn-sr-tb-hr-se-in-se,
              var(--_ctm-tab-dn-sr-tb-hr-se-in-se, var(--_ctm-dn-sr-tb-hr-se-in-se))
            );
            --_sf-hr-in-c1: var(
              --_ctm-mob-dn-sr-tb-hr-se-in-c1,
              var(--_ctm-tab-dn-sr-tb-hr-se-in-c1, var(--_ctm-dn-sr-tb-hr-se-in-c1))
            );
            --_sf-hr-ue: var(
              --_ctm-mob-dn-sr-tb-hr-se-ue,
              var(--_ctm-tab-dn-sr-tb-hr-se-ue, var(--_ctm-dn-sr-tb-hr-se-ue))
            );

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-sr-tb-hr-se-pg,
              var(--_ctm-tab-dn-sr-tb-hr-se-pg, var(--_ctm-dn-sr-tb-hr-se-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-sr-tb-hr-se-wh,
              var(--_ctm-tab-dn-sr-tb-hr-se-wh, var(--_ctm-dn-sr-tb-hr-se-wh))
            );

            &[data-hover-show-shadow="false"] {
              --_hover-show-shadow: none;
            }
            &[data-hover-show-icon="false"] {
              --_hover-show-icon: none;
            }
          }

          background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr));

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-at));
          gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-in-ad-tt-sg));

          border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));

          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-ae))
            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-br))
            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-sd))
            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-cr));

          &[data-show-border="true"] {
            border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));

            border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));

            border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
          }

          // text styles

          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-fy));
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }

          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));

          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));

          font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));

          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));

          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));

          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));

          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

          // Same shape as the font rules above: the base value is the default
          // state, and the `&:hover` block below re-points --_sf-hr-* at the hover
          // state so this declaration re-resolves without being repeated.
          text-transform: var(
            --_sf-hr-tt-tm,
            prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-tm, none)
          );

          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal));

          word-break: var(
            --_sf-hr-wd-bk,
            prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal)
          );

          [data-element-style="Text"] {
            display: inline-block;
            width: 100%;
          }

          &[data-is-selected="true"] {
            --_sf-sd-bd-cr: var(
              --_ctm-mob-dn-me-sd-se-bd-cr,
              var(--_ctm-tab-dn-sr-tb-sd-se-bd-cr, var(--_ctm-dn-sr-tb-sd-se-bd-cr))
            );
            --_sf-sd-br-cr: var(
              --_ctm-mob-dn-sr-tb-sd-se-br-cr,
              var(--_ctm-tab-dn-sr-tb-sd-se-br-cr, var(--_ctm-dn-sr-tb-sd-se-br-cr))
            );
            --_sf-sd-br-se: var(
              --_ctm-mob-dn-sr-tb-sd-se-br-se,
              var(--_ctm-tab-dn-sr-tb-sd-se-br-se, var(--_ctm-dn-sr-tb-sd-se-br-se))
            );
            --_sf-sd-br-wh: var(
              --_ctm-mob-dn-sr-tb-sd-se-br-wh,
              var(--_ctm-tab-dn-sr-tb-sd-se-br-wh, var(--_ctm-dn-sr-tb-sd-se-br-wh))
            );
            --_sf-sd-br-rs: var(
              --_ctm-mob-dn-sr-tb-sd-se-br-rs,
              var(--_ctm-tab-dn-sr-tb-sd-se-br-rs, var(--_ctm-dn-sr-tb-sd-se-br-rs))
            );
            --_sf-sd-at: var(
              --_ctm-mob-dn-sr-tb-sd-se-at,
              var(--_ctm-tab-dn-sr-tb-sd-se-at, var(--_ctm-dn-sr-tb-sd-se-at))
            );
            --_sf-sd-in-ad-tt-sg: var(
              --_ctm-mob-dn-sr-tb-sd-se-in-ad-tt-sg,
              var(--_ctm-tab-dn-sr-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-sr-tb-sd-se-in-ad-tt-sg))
            );

            // for shadow
            --_sf-sd-sw-ae: var(
              --_ctm-mob-dn-sr-tb-sd-se-sw-ae,
              var(--_ctm-tab-dn-sr-tb-sd-se-sw-ae, var(--_ctm-dn-sr-tb-sd-se-sw-ae))
            );
            --_sf-sd-sw-br: var(
              --_ctm-mob-dn-sr-tb-sd-se-sw-br,
              var(--_ctm-tab-dn-sr-tb-sd-se-sw-br, var(--_ctm-dn-sr-tb-sd-se-sw-br))
            );
            --_sf-sd-sw-hr: var(
              --_ctm-mob-dn-sr-tb-sd-se-sw-hr,
              var(--_ctm-tab-dn-sr-tb-sd-se-sw-hr, var(--_ctm-dn-sr-tb-sd-se-sw-hr))
            );
            --_sf-sd-sw-cr: var(
              --_ctm-mob-dn-sr-tb-sd-se-sw-cr,
              var(--_ctm-tab-dn-sr-tb-sd-se-sw-cr, var(--_ctm-dn-sr-tb-sd-se-sw-cr))
            );

            // for font

            --_sf-sd-cr: var(
              --_ctm-mob-dn-sr-tb-sd-se-cr,
              var(--_ctm-tab-dn-sr-tb-sd-se-cr, var(--_ctm-dn-sr-tb-sd-se-cr))
            );
            --_sf-sd-ft-fy: var(
              --_ctm-mob-dn-sr-tb-sd-se-ft-fy,
              var(--_ctm-tab-dn-sr-tb-sd-se-ft-fy, var(--_ctm-dn-sr-tb-sd-se-ft-fy))
            );
            --_sf-sd-ft-se: var(
              --_ctm-mob-dn-sr-tb-sd-se-ft-se,
              var(--_ctm-tab-dn-sr-tb-sd-se-ft-se, var(--_ctm-dn-sr-tb-sd-se-ft-se))
            );
            --_sf-sd-ft-wt: var(
              --_ctm-mob-dn-sr-tb-sd-se-ft-wt,
              var(--_ctm-tab-dn-sr-tb-sd-se-ft-wt, var(--_ctm-dn-sr-tb-sd-se-ft-wt))
            );
            --_sf-sd-ft-se-ic: var(
              --_ctm-mob-dn-sr-tb-sd-se-ft-se-ic,
              var(--_ctm-tab-dn-sr-tb-sd-se-ft-se-ic, var(--_ctm-dn-sr-tb-sd-se-ft-se-ic))
            );
            --_sf-sd-tt-an: var(
              --_ctm-mob-dn-sr-tb-sd-se-tt-an,
              var(--_ctm-tab-dn-sr-tb-sd-se-tt-an, var(--_ctm-dn-sr-tb-sd-se-tt-an))
            );
            --_sf-sd-lr-sg: var(
              --_ctm-mob-dn-sr-tb-sd-se-lr-sg,
              var(--_ctm-tab-dn-sr-tb-sd-se-lr-sg, var(--_ctm-dn-sr-tb-sd-se-lr-sg))
            );
            --_sf-sd-le-ht: var(
              --_ctm-mob-dn-sr-tb-sd-se-le-ht,
              var(--_ctm-tab-dn-sr-tb-sd-se-le-ht, var(--_ctm-dn-sr-tb-sd-se-le-ht))
            );
            --_sf-sd-tt-tm: var(
              --_ctm-mob-dn-sr-tb-sd-se-tt-tm,
              var(--_ctm-tab-dn-sr-tb-sd-se-tt-tm, var(--_ctm-dn-sr-tb-sd-se-tt-tm))
            );
            --_sf-sd-wd-wp: var(
              --_ctm-mob-dn-sr-tb-sd-se-wd-wp,
              var(--_ctm-tab-dn-sr-tb-sd-se-wd-wp, var(--_ctm-dn-sr-tb-sd-se-wd-wp))
            );
            --_sf-sd-wd-bk: var(
              --_ctm-mob-dn-sr-tb-sd-se-wd-bk,
              var(--_ctm-tab-dn-sr-tb-sd-se-wd-bk, var(--_ctm-dn-sr-tb-sd-se-wd-bk))
            );

            --_sf-sd-in-se: var(
              --_ctm-mob-dn-sr-tb-sd-se-in-se,
              var(--_ctm-tab-dn-sr-tb-sd-se-in-se, var(--_ctm-dn-sr-tb-sd-se-in-se))
            );
            --_sf-sd-in-se: var(
              --_ctm-mob-dn-sr-tb-sd-se-in-se,
              var(--_ctm-tab-dn-sr-tb-sd-se-in-se, var(--_ctm-dn-sr-tb-sd-se-in-se))
            );
            --_sf-sd-in-c1: var(
              --_ctm-mob-dn-sr-tb-sd-se-in-c1,
              var(--_ctm-tab-dn-sr-tb-sd-se-in-c1, var(--_ctm-dn-sr-tb-sd-se-in-c1))
            );
            --_sf-sd-ue: var(
              --_ctm-mob-dn-sr-tb-hr-ue,
              var(--_ctm-tab-dn-sr-tb-hr-ue, var(--_ctm-dn-sr-tb-hr-ue))
            );

            // for pading and width
            --_sf-sd-pg: var(
              --_ctm-mob-dn-sr-tb-sd-se-pg,
              var(--_ctm-tab-dn-sr-tb-sd-se-pg, var(--_ctm-dn-sr-tb-sd-se-pg))
            );
            --_sf-sd-wh: var(
              --_ctm-mob-dn-sr-tb-sd-se-wh,
              var(--_ctm-tab-dn-sr-tb-sd-se-wh, var(--_ctm-dn-sr-tb-sd-se-wh))
            );

            &[data-hover-show-shadow="false"] {
              --_hover-show-shadow: none;
            }
            &[data-hover-show-icon="false"] {
              --_hover-show-icon: none;
            }

            background-color: var(
              --_sf-sd-bd-cr,
              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr)
            );

            padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
            display: flex;
            flex-direction: var(--_sf-fd-bn);
            align-items: center;

            justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-at));
            gap: var(--_sf-sd-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-in-ad-tt-sg));

            border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));

            box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-ae))
              var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-br))
              var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-sd))
              var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-cr));

            &[data-show-border="true"] {
              border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));

              border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));

              border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
            }

            // text styles

            color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));

            font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-fy));
            &.flex__overflow {
              white-space: normal;
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }

            font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));

            font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));

            font-style: var(
              --_sf-sd-ft-se-ic,
              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic)
            );

            text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));

            letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));

            line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));

            text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

            text-transform: var(
              --_sf-sd-tt-tm,
              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-tm, none)
            );

            word-wrap: var(
              --_sf-sd-wd-wp,
              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal)
            );

            word-break: var(
              --_sf-sd-wd-bk,
              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal)
            );

            [data-element-style="Text"] {
              display: inline-block;
              width: 100%;
            }
          }
        }
        .embla {
          height: auto;
          padding: var(--_sf-flex-embla-pd-daka-mobile, 10px);

          .embla__viewport {
            .embla__container {
              display: flex;
              gap: prepareMediaVariable(--_ctm-dn-sr-wt-se-im-gp);
              .embla__slide {
                width: unset;
              }
            }
          }
        }
      }
      .embla {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        // padding: 10px;
        // overflow: hidden;

        .embla__viewport {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          flex-direction: column;

          overflow: hidden;

          .embla__container {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-rows: 100%;

            grid-template-columns: repeat(
              var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
              calc(
                100% /
                  var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
              )
            );

            grid-auto-flow: column;
            gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));

            &[data-control-type="Bottom"][data-slider-control="Arrows"] {
              height: calc(100% - calc(50px + 10px));
            }

            &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
              height: calc(100% - calc(50px + 20px));
            }

            &[data-control-type="Bottom"][data-slider-control="Dots"] {
              height: calc(
                100% - calc(
                    var(
                        --_ctm-mob-dn-pn-ds-dt-se,
                        var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
                      ) +
                      20px
                  )
              );
            }

            .embla__slide {
              width: 100%;
              height: 100%;
              & > img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        &:not([data-display-style="Column"]) {
          .embla__container {
            grid-auto-columns: calc(
              100% /
                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
            );
          }
        }

        .arrow-navigation {
          display: flex;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          justify-content: space-between;
          transform: translate(-50%, -50%);
          //   padding-left: 20px;

          &[data-control-type="Bottom-Overflow"] {
            transform: translateX(-50%);
            width: 100%;
            justify-content: center;
            gap: 12px;
            top: unset;
            bottom: 6px;
          }
          &[data-control-type="Bottom"] {
            transform: unset;
            position: static;
            width: 100%;
            justify-content: center;
            gap: 12px;
            margin-top: 10px;
          }
        }
        // Profiles Slider > Pagination Arrows, styled the way the Gallery Slider
        // element styles its own: the button is a plain 10px-padded circle, sized by
        // Arrow Size, and the only fill it carries is the chosen Background Color
        // mixed down to 10% (20% on hover). These rules used to read
        // `--_ctm-dn-pn-as-*`, a `design.paginationArrows` node that does not exist
        // on this element, so the panel could not reach the strip's arrows at all;
        // they now read design.slider.paginationArrows.
        :is(.left-button, .right-button) {
          @include BgColorLighter(var(#{$ad-slider-arrows}-bd-cr), 10%);

          &:not(:disabled):hover {
            @include BgColorLighter(var(#{$ad-slider-arrows}-bd-cr), 20%);
          }
        }
        .left-button,
        .right-button {
          padding: 10px;
          border: none;
          border-radius: 50%;

          // Background Shape: a circle by default, squared off by "None" and given
          // the gallery's 4px rounding by "Square". Keyed off the BUTTON, not the
          // `.embla` container — EmblaCarouselBasic, which renders this strip, only
          // publishes the attribute on the buttons.
          &[data-background-shape="None"] {
            border-radius: 0;
          }
          &[data-background-shape="Round"] {
            border-radius: 50%;
          }
          &[data-background-shape="Square"] {
            border-radius: 4px;
          }
          // 20px, not prepareMediaVariable's `inherit` tail — inheriting the strip's
          // width here would blow the buttons out. 20 is also the schema default, so
          // a strip saved before this node existed matches a fresh one.
          width: prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px);
          height: prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px);

          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          outline: none;

          &:disabled {
            & svg {
              path {
                stroke: #c3b7b7;
              }
            }
          }
        }
        .left-button {
          margin-left: 12px;
        }
        .right-button {
          margin-right: 12px;
        }
        .icon {
          display: flex;

          svg {
            width: calc(#{prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px)} * 0.5);
            height: calc(#{prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px)} * 0.5);

            // Arrow Color. `path { stroke }` alone was too narrow — it matched the
            // built-in chevrons and nothing else. Cover the svg itself and any
            // descendant carrying a stroke or a fill, leaving parts explicitly set
            // to "none" alone so an unfilled shape stays unfilled.
            &[stroke]:not([stroke="none"]),
            [stroke]:not([stroke="none"]) {
              stroke: prepareMediaVariable(#{$ad-slider-arrows}-aw-cr, #514949);
            }
            &[fill]:not([fill="none"]),
            [fill]:not([fill="none"]) {
              fill: prepareMediaVariable(#{$ad-slider-arrows}-aw-cr, #514949);
            }
          }
        }

        &[data-control-type="Side"] {
          .embla__viewport {
            width: calc(100% - 85px);
            margin-inline: auto;
          }
          .left-button {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          .right-button {
            position: absolute;

            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        &[data-thumbnail-placement="top"] {
          flex-direction: column-reverse;
        }
        &[data-thumbnail-placement="bottom"] {
          flex-direction: column;
        }
        &[data-thumbnail-placement="left"] {
          flex-direction: row-reverse;

          .embla__thumbs {
            width: var(--_ctm-lt-tl-se);
            height: 100%;

            & .embla__thumbs__container {
              flex-direction: column;
              height: 100%;
            }
          }
        }
        &[data-thumbnail-placement="right"] {
          flex-direction: row;
          .embla__thumbs {
            width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

            height: 100%;

            & .embla__thumbs__container {
              flex-direction: column;
              height: 100%;
            }
          }
        }
        .embla__dots {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
          gap: 6px;

          &[data-control-type="Bottom-Overflow"] {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 75%;
          }
          .embla__dot {
            -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
            -webkit-appearance: none;
            appearance: none;
            background-color: var(
              --_ctm-mob-dn-pn-ds-or-dt-cr,
              var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
            );

            touch-action: manipulation;
            display: inline-flex;
            text-decoration: none;
            cursor: pointer;
            border: 0;
            padding: 0;
            margin: 0;
            // width: 0.6rem;
            // height: 0.6rem;
            width: var(
              --_ctm-mob-dn-pn-ds-dt-se,
              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
            );
            height: var(
              --_ctm-mob-dn-pn-ds-dt-se,
              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
            );

            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
          }
          .embla__dot:after {
            // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
            width: var(
              --_ctm-mob-dn-pn-ds-dt-se,
              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
            );
            height: var(
              --_ctm-mob-dn-pn-ds-dt-se,
              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
            );

            border-radius: 50%;
            display: flex;
            align-items: center;
            content: "";
          }
          .embla__dot--selected:after {
            box-shadow: inset 0 0 0 1px var(--text-body);
            background-color: var(
              --_ctm-mob-dn-pn-ds-ct-dt-cr,
              var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
            );
          }
          &[data-slider-control="Pagination Line"] {
            .embla__dot {
              width: var(
                --_ctm-mob-dn-pn-le-le-wh,
                var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
              );
              height: var(
                --_ctm-mob-dn-pn-le-le-ht,
                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
              );
              background-color: var(
                --_ctm-mob-dn-pn-le-or-le-cr,
                var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
              );
              border-radius: 6px;
            }

            .embla__dot--selected:after {
              box-shadow: inset 0 0 0 1px var(--text-body);
              border-radius: 6px;
              width: var(
                --_ctm-mob-dn-pn-le-le-wh,
                var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
              );
              height: var(
                --_ctm-mob-dn-pn-le-le-ht,
                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
              );
              background-color: var(
                --_ctm-mob-dn-pn-le-ct-le-cr,
                var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
              );
            }
          }
        }

        .embla__thumbs {
          width: 100%;
          height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

          position: relative;
          display: grid;
          grid-template-columns: 1fr;
          overflow: hidden;
          // margin: 10px;
          padding: 10px;

          .embla__thumbs__viewport {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;

            overflow: hidden;
          }
          .embla__thumbs__container {
            display: flex;
            flex-direction: row;
            margin-left: calc(var(--thumbs-slide-spacing) * -1);
            gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));

            width: 100%;
            // justify-content: center;
            // height: 200px;

            .embla__thumbs__slide {
              min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
              max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
              height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

              & img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    // ---- Tree view: profiles sidebar + allocation on the right ---------------
    // Two columns, mirroring the Category Groups element. The gap between them is
    // the element's own allocation item gap so it stays in the same layout panel.
    .allocation_details_tree {
      display: flex;
      align-items: flex-start;
      width: 100%;
      gap: prepareMediaVariable(#{$ad-sidebar-design}-im-gp, 36px);

      .ad_main {
        flex: 1;
        min-width: 0;
      }
    }

    .ad_sidebar {
      display: flex;
      flex-direction: column;
      // Sidebar Container → gap (heading ↔ tree) + padding.
      gap: prepareMediaVariable(#{$ad-sidebar}-im-gp, 12px);
      padding: prepareMediaVariable(#{$ad-sidebar}-pg, 0);
      width: 260px;
      flex-shrink: 0;
      @include ad-design($ad-sidebar);
      border-radius: prepareMediaVariable(#{$ad-sidebar}-br-rs, 0);
    }

    .ad_sidebar_heading {
      white-space: nowrap;
      margin: 0;
      line-height: 1.25;
      // `uppercase` is the fallback, not a hardcoded rule, so Text Transform can
      // override it while untouched elements keep the look they always had.
      @include ad-font($ad-heading, #002a4e, 16px, 400, uppercase);
      @include ad-text-overflow;
    }

    .ad_allocation_tree {
      display: flex;
      flex-direction: column;
      // Gap BETWEEN profile rows (Sidebar Container → Profile Gap).
      gap: prepareMediaVariable(#{$ad-sidebar}-pe-gp, 8px);
      width: 100%;
    }

    .ad_tree_node {
      display: flex;
      align-items: center;
      // Profile Row → item gap (icon ↔ label).
      gap: prepareMediaVariable(#{$ad-tree}-dt-se-im-gp, 4px);
      padding: prepareMediaVariable(#{$ad-tree}-dt-se-pg, 4px 0);
      cursor: pointer;
      @include ad-design(#{$ad-tree}-dt-se);
    }

    .ad_tree_node_icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      color: ad-tree-icon-var("dt-se", "in-c1", #002a4e);
    }

    .ad_chevron {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s ease;
      @include ad-tree-icon("dt-se", "in-se", "in-c1");
    }

    .ad_chevron.is-open {
      transform: rotate(90deg);
    }

    // Show / hide of the icon, per interaction state. `aria-expanded` picks which of
    // the two switches applies: the Collapsed Icon's while the profile is closed,
    // the Expanded Icon's while it is open.
    //
    // Each state emits BOTH outcomes, not just the hidden one — a state that shows
    // the icon has to be able to bring it back when the state beneath it hid it
    // (Default off, Hover on). Hover and Selected carry one extra selector each, so
    // they already outrank Default; Selected is written last so it wins over Hover
    // on a row that is both.
    .ad_tree_node[aria-expanded="false"][data-show-icon="false"] .ad_tree_node_icon,
    .ad_tree_node[aria-expanded="true"][data-show-icon-expanded="false"] .ad_tree_node_icon {
      display: none;
    }

    .ad_tree_node[aria-expanded="false"]:hover[data-hover-show-icon="false"] .ad_tree_node_icon,
    .ad_tree_node[aria-expanded="true"]:hover[data-hover-show-icon-expanded="false"]
      .ad_tree_node_icon {
      display: none;
    }
    .ad_tree_node[aria-expanded="false"]:hover[data-hover-show-icon="true"] .ad_tree_node_icon,
    .ad_tree_node[aria-expanded="true"]:hover[data-hover-show-icon-expanded="true"]
      .ad_tree_node_icon {
      display: flex;
    }

    .ad_tree_node[aria-expanded="false"].is-active[data-selected-show-icon="false"]
      .ad_tree_node_icon,
    .ad_tree_node[aria-expanded="true"].is-active[data-selected-show-icon-expanded="false"]
      .ad_tree_node_icon {
      display: none;
    }
    .ad_tree_node[aria-expanded="false"].is-active[data-selected-show-icon="true"]
      .ad_tree_node_icon,
    .ad_tree_node[aria-expanded="true"].is-active[data-selected-show-icon-expanded="true"]
      .ad_tree_node_icon {
      display: flex;
    }

    // The expanded icon has its own size/colour vars so it is independent of the
    // collapsed one.
    .ad_chevron.is-expanded {
      @include ad-tree-icon("dt-se", "in-se-ed", "in-cr-ed");
    }

    .ad_tree_node_label {
      flex: 1;
      min-width: 0;
      @include ad-font(#{$ad-tree}-dt-se, #002a4e, 14px, 600);
      @include ad-text-overflow;
    }

    .ad_tree_node:hover {
      @include ad-design-state($ad-tree, hr-se);
      @include ad-layout-state($ad-tree, hr-se, 4px 0, 4px);
    }
    .ad_tree_node:hover .ad_tree_node_label {
      @include ad-font-state($ad-tree, hr-se, #002a4e, 14px, 600);
    }
    // The icon follows the row it sits in. `.is-expanded` is listed after the plain
    // rule in each block on purpose: it is the more specific selector, so the
    // expanded icon keeps its own size/colour instead of inheriting the collapsed
    // one's while the row is hovered or active.
    .ad_tree_node:hover .ad_tree_node_icon {
      color: ad-tree-icon-var("hr-se", "in-c1", #002a4e);
    }
    .ad_tree_node:hover .ad_chevron {
      @include ad-tree-icon("hr-se", "in-se", "in-c1");
    }
    .ad_tree_node:hover .ad_chevron.is-expanded {
      @include ad-tree-icon("hr-se", "in-se-ed", "in-cr-ed");
    }
    .ad_tree_node.is-active {
      @include ad-design-state($ad-tree, sd-se);
      @include ad-layout-state($ad-tree, sd-se, 4px 0, 4px);
    }
    .ad_tree_node.is-active .ad_tree_node_label {
      @include ad-font-state($ad-tree, sd-se, #002a4e, 14px, 600);
    }
    .ad_tree_node.is-active .ad_tree_node_icon {
      color: ad-tree-icon-var("sd-se", "in-c1", #002a4e);
    }
    .ad_tree_node.is-active .ad_chevron {
      @include ad-tree-icon("sd-se", "in-se", "in-c1");
    }
    .ad_tree_node.is-active .ad_chevron.is-expanded {
      @include ad-tree-icon("sd-se", "in-se-ed", "in-cr-ed");
    }

    .ad_subtree {
      display: flex;
      flex-direction: column;
      // Gap BETWEEN allocation rows (Sidebar Container → Allocation Gap).
      gap: prepareMediaVariable(#{$ad-sidebar}-an-gp, 8px);
      padding-left: 31px;
      width: 100%;
    }

    .ad_subtree_node {
      padding: prepareMediaVariable(#{$ad-subtree}-dt-se-pg, 4px 0);
      cursor: pointer;
      @include ad-design(#{$ad-subtree}-dt-se);
    }

    .ad_subtree_node_label {
      letter-spacing: -0.28px;
      min-width: 0;
      @include ad-font(#{$ad-subtree}-dt-se, #1d1b1c, 14px, 400);
      @include ad-text-overflow;
    }

    .ad_subtree_node:hover {
      @include ad-design-state($ad-subtree, hr-se);
      @include ad-layout-state($ad-subtree, hr-se, 4px 0);
    }
    .ad_subtree_node:hover .ad_subtree_node_label {
      @include ad-font-state($ad-subtree, hr-se, #1d1b1c, 14px, 400);
    }
    .ad_subtree_node.is-active {
      @include ad-design-state($ad-subtree, sd-se);
      @include ad-layout-state($ad-subtree, sd-se, 4px 0);
    }
    .ad_subtree_node.is-active .ad_subtree_node_label {
      @include ad-font-state($ad-subtree, sd-se, #1d1b1c, 14px, 400);
    }

    // Narrow screens: the rail stops being a column and sits above the allocation.
    @media only screen and (max-width: 767px) {
      .allocation_details_tree {
        flex-direction: column;
      }
      .ad_sidebar {
        width: 100%;
      }
    }
  }
}