@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.75

package/dist/allocationDetails.scss

@@ -77,8 +77,11 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
   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));
+  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
@@ -101,7 +104,6 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
     [stroke]:not([stroke="none"]) {
       stroke: prepareMediaVariable(#{$base}-in-c1, currentColor);
     }
-
     &[fill]:not([fill="none"]),
     [fill]:not([fill="none"]) {
       fill: prepareMediaVariable(#{$base}-in-c1, currentColor);
@@ -121,36 +123,61 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
   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);
+  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));
+  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.
@@ -158,12 +185,15 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
 // 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));
+  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)
+    );
   }
 }
 
@@ -178,12 +208,14 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
 @function ad-tree-icon-var($state, $key, $fallback) {
   $legacy: prepareMediaVariable(#{$ad-tree-icon}-#{$key}, $fallback);
 
-  @if $state =="dt-se" {
+  @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));
+  @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
@@ -203,7 +235,6 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
     [stroke]:not([stroke="none"]) {
       stroke: $color;
     }
-
     &[fill]:not([fill="none"]),
     [fill]:not([fill="none"]) {
       fill: $color;
@@ -212,54 +243,71 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
 }
 
 @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));
+  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)))));
+    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 {
+    & > 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;
@@ -267,77 +315,126 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
       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))));
+      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)));
+      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))));
+        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)));
+          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);
@@ -347,11 +444,15 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
 
       &[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-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)));
+          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;
         }
       }
@@ -385,29 +486,54 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
           // 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)));
+          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,
@@ -436,53 +562,100 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
           }
 
           .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))));
+            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)));
+            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;
@@ -505,12 +678,10 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
             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;
@@ -520,14 +691,12 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
                 font-weight: 400;
                 line-height: 18px;
                 padding-left: 8px;
-
                 .text__primary {
                   color: #243dc6;
                   font-size: 16px;
                 }
               }
             }
-
             .section__desc {
               color: var(--Gray-iron-500, #70707b);
 
@@ -536,7 +705,6 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
               font-weight: 400;
               line-height: 18px;
               margin: 0px;
-
               span {
                 color: var(--Gray-900, #101828);
 
@@ -556,1611 +724,1925 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
           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"] {
+            // 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;
+              }
 
-          &[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))})
-        }
+              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;
+              }
 
-        ;
-
-        .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;
-        }
+              // 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;
+                }
+              }
 
-        cursor: pointer;
+              // &: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);
+                }
+              }
 
-        button {
+              &: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;
-          // 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;
-        }
+          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;
+          }
 
-        // 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;
+          .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);
+              }
+            }
           }
         }
 
-        // &: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))
+        //  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;
+          }
         }
 
-        ;
-        --_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);
-  }
-}
+        //  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%;
+              }
+            }
+          }
 
-&:first-of-type {
-  border-radius: 4px 0 0 4px;
-}
+          &[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;
+                }
+              }
+            }
 
-&:last-of-type {
-  border-radius: 0 4px 4px 0;
-}
-}
-}
+            .brand {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+              @include ad-section-box(--_ctm-dn-bd);
 
-// 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;
-  }
+              .brand__icon {
+                @include ad-section-icon(--_ctm-dn-bd);
+              }
 
-  .button__group {
-    display: flex;
-    gap: 12px;
-  }
+              .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);
 
-  .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;
+              .code__icon {
+                @include ad-section-icon(--_ctm-dn-ce);
+              }
 
-      button {
-        display: flex;
-      }
+              .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;
+            }
+          }
 
-      &:hover {
-        background-color: var(--_gray-100);
+          // Quota details styling for the embedded QuotaDetailsContent, rebound to
+          // the Allocations quotaDetails CSS-variable paths.
+          @import "./allocations-quota-details.scss";
+        }
       }
 
-      &.active {
-        background-color: #ced4f6;
+      .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;
+          }
 
-        button {
-          svg {
-            path {
-              stroke: var(--_primary-500);
+          &: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;
             }
           }
-        }
-      }
 
-      &:first-child {
-        border-right: 1px solid var(--_gray-200);
-      }
-    }
-  }
-}
+          background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr));
 
-//  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);
-  }
+          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
+          display: flex;
+          flex-direction: var(--_sf-fd-bn);
+          align-items: center;
 
-  &.disable__btn {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
+          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));
 
-//  product list styles
-.showcase__product__list {
-  .product__card {
-    .category__image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
+          border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
 
-  &[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))
-  }
+          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));
 
-  ;
-  grid-template-columns: getRepeatColWidth(--_sf-cl-count, --_sf-cl-gp);
+          &[data-show-border="true"] {
+            border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
 
-  // gap: 24px;
-  .product__card {
-    flex-direction: column;
+            border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
 
-    .card__img__container {
-      width: 100%;
-    }
-  }
-}
+            border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
+          }
 
-&[data-list-view="list"] {
-  grid-template-columns: auto;
+          // text styles
 
-  .product__card {
-    flex-direction: row;
-    align-items: prepareMediaVariable(--_ctm-lt-an-is, start);
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
 
-    // gap: 24px;
-    .card__img__container {
-      width: 250px;
-    }
-  }
-}
+          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)});
+          }
 
-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;
-    }
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
 
-    .placeholder__image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
 
-  .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;
-      }
+          font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));
 
-      &[data-has-link="true"] {
-        cursor: pointer;
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
 
-        &:hover {
-          color: var(--_primary-500);
-        }
-      }
-    }
+          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
 
-    .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;
-      }
-    }
-  }
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
 
-  .brand {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    @include ad-section-box(--_ctm-dn-bd);
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
 
-    .brand__icon {
-      @include ad-section-icon(--_ctm-dn-bd);
-    }
+          // 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)
+          );
 
-    .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);
-    }
+          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal));
 
-    .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;
-    }
-  }
+          word-break: var(
+            --_sf-hr-wd-bk,
+            prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal)
+          );
 
-  .code {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    @include ad-section-box(--_ctm-dn-ce);
+          [data-element-style="Text"] {
+            display: inline-block;
+            width: 100%;
+          }
 
-    .code__icon {
-      @include ad-section-icon(--_ctm-dn-ce);
-    }
+          &[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;
+            }
 
-    .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);
-    }
+            background-color: var(
+              --_sf-sd-bd-cr,
+              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr)
+            );
 
-    .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;
-    }
-  }
+            padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
+            display: flex;
+            flex-direction: var(--_sf-fd-bn);
+            align-items: center;
 
-  .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;
-  }
-}
+            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));
 
-// Quota details styling for the embedded QuotaDetailsContent, rebound to
-// the Allocations quotaDetails CSS-variable paths.
-@import "./allocations-quota-details.scss";
-}
-}
+            border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
 
-.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;
-    }
+            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-icon-position="left"] {
-      --_sf-fd-bn: row;
-    }
+            &[data-show-border="true"] {
+              border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
 
-    &[data-icon-position="right"] {
-      --_sf-fd-bn: row-reverse;
-    }
+              border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
 
-    &[data-icon-position="center"] {
-      --_sf-fd-bn: row;
-    }
+              border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
+            }
 
-    &: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;
-      }
+            // text styles
 
-      &[data-hover-show-icon="false"] {
-        --_hover-show-icon: none;
-      }
-    }
+            color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
 
-    background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-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)});
+            }
 
-    padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
-    display: flex;
-    flex-direction: var(--_sf-fd-bn);
-    align-items: center;
+            font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
 
-    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));
+            font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
 
-    border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
+            font-style: var(
+              --_sf-sd-ft-se-ic,
+              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic)
+            );
 
-    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));
+            text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
 
-    &[data-show-border="true"] {
-      border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
+            letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
 
-      border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
+            line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
 
-      border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
-    }
+            text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
 
-    // text styles
+            text-transform: var(
+              --_sf-sd-tt-tm,
+              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-tm, none)
+            );
 
-    color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
+            word-wrap: var(
+              --_sf-sd-wd-wp,
+              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal)
+            );
 
-    font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-fy));
+            word-break: var(
+              --_sf-sd-wd-bk,
+              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal)
+            );
 
-    &.flex__overflow {
-      white-space: normal;
-      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-    }
+            [data-element-style="Text"] {
+              display: inline-block;
+              width: 100%;
+            }
+          }
+        }
+        .embla {
+          height: auto;
+          padding: var(--_sf-flex-embla-pd-daka-mobile, 10px);
 
-    font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
+          .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;
 
-    font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
+        .embla__viewport {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
 
-    font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));
+          overflow: hidden;
 
-    text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
+          .embla__container {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-rows: 100%;
 
-    letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
+            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)))
+              )
+            );
 
-    line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
+            grid-auto-flow: column;
+            gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
 
-    text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+            &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+              height: calc(100% - calc(50px + 10px));
+            }
 
-    // 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));
+            &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+              height: calc(100% - calc(50px + 20px));
+            }
 
-    word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal));
+            &[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
+                  )
+              );
+            }
 
-    word-break: var(--_sf-hr-wd-bk,
-      prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal));
+            .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)))
+            );
+          }
+        }
 
-    [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)});
-      }
+        .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);
 
-      font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
 
-      font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
+          &:disabled {
+            & svg {
+              path {
+                stroke: #c3b7b7;
+              }
+            }
+          }
+        }
+        .left-button {
+          margin-left: 12px;
+        }
+        .right-button {
+          margin-right: 12px;
+        }
+        .icon {
+          display: flex;
 
-      font-style: var(--_sf-sd-ft-se-ic,
-        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));
+          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);
+            }
+          }
+        }
 
-      text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
+        &[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;
 
-      letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
 
-      line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
+        &[data-thumbnail-placement="top"] {
+          flex-direction: column-reverse;
+        }
+        &[data-thumbnail-placement="bottom"] {
+          flex-direction: column;
+        }
+        &[data-thumbnail-placement="left"] {
+          flex-direction: row-reverse;
 
-      text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+          .embla__thumbs {
+            width: var(--_ctm-lt-tl-se);
+            height: 100%;
 
-      text-transform: var(--_sf-sd-tt-tm,
-        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-tm, none));
+            & .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)));
 
-      word-wrap: var(--_sf-sd-wd-wp,
-        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal));
+            height: 100%;
 
-      word-break: var(--_sf-sd-wd-bk,
-        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal));
+            & .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))
+            );
 
-      [data-element-style="Text"] {
-        display: inline-block;
-        width: 100%;
-      }
-    }
-  }
+            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 {
-    height: auto;
-    padding: var(--_sf-flex-embla-pd-daka-mobile, 10px);
+            .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__viewport {
-      .embla__container {
-        display: flex;
-        gap: prepareMediaVariable(--_ctm-dn-sr-wt-se-im-gp);
+        .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;
 
-        .embla__slide {
-          width: unset;
+            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%;
+              }
+            }
+          }
         }
       }
     }
-  }
-}
-
-.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 {
+    // ---- 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%;
-      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));
-      }
+      gap: prepareMediaVariable(#{$ad-sidebar-design}-im-gp, 36px);
 
-      &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-        height: calc(100% - calc(50px + 20px));
+      .ad_main {
+        flex: 1;
+        min-width: 0;
       }
+    }
 
-      &[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));
-      }
+    .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);
+    }
 
-      .embla__slide {
-        width: 100%;
-        height: 100%;
+    .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;
+    }
 
-        &>img {
-          width: 100%;
-          height: 100%;
-        }
-      }
+    .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%;
     }
-  }
 
-  &: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))));
+    .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);
     }
-  }
 
-  .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%;
+    .ad_tree_node_icon {
+      display: flex;
+      align-items: center;
       justify-content: center;
-      gap: 12px;
-      top: unset;
-      bottom: 6px;
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      color: ad-tree-icon-var("dt-se", "in-c1", #002a4e);
     }
 
-    &[data-control-type="Bottom"] {
-      transform: unset;
-      position: static;
-      width: 100%;
+    .ad_chevron {
+      display: flex;
+      align-items: center;
       justify-content: center;
-      gap: 12px;
-      margin-top: 10px;
+      transition: transform 0.15s ease;
+      @include ad-tree-icon("dt-se", "in-se", "in-c1");
     }
-  }
 
-  // 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%);
+    .ad_chevron.is-open {
+      transform: rotate(90deg);
     }
-  }
 
-  .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;
+    // 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;
     }
 
-    &[data-background-shape="Round"] {
-      border-radius: 50%;
+    .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;
     }
-
-    &[data-background-shape="Square"] {
-      border-radius: 4px;
+    .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;
     }
 
-    // 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;
-        }
-      }
+    .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;
     }
-  }
-
-  .left-button {
-    margin-left: 12px;
-  }
-
-  .right-button {
-    margin-right: 12px;
-  }
-
-  .icon {
-    display: flex;
-
-    svg {
-      width: calc(#{prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px)
+    .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;
     }
 
-    * 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%;
+    // 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");
     }
-  }
-}
 
-&[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)));
+    .ad_tree_node_label {
+      flex: 1;
+      min-width: 0;
+      @include ad-font(#{$ad-tree}-dt-se, #002a4e, 14px, 600);
+      @include ad-text-overflow;
+    }
 
-    height: 100%;
+    .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");
+    }
 
-    & .embla__thumbs__container {
+    .ad_subtree {
+      display: flex;
       flex-direction: column;
-      height: 100%;
+      // Gap BETWEEN allocation rows (Sidebar Container → Allocation Gap).
+      gap: prepareMediaVariable(#{$ad-sidebar}-an-gp, 8px);
+      padding-left: 31px;
+      width: 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;
+    .ad_subtree_node {
+      padding: prepareMediaVariable(#{$ad-subtree}-dt-se-pg, 4px 0);
+      cursor: pointer;
+      @include ad-design(#{$ad-subtree}-dt-se);
     }
 
-    .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)));
+    .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;
     }
-  }
-}
-
-.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)));
+    .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);
+    }
 
-      & img {
+    // 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%;
-        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%;
-  }
-}
-}
-}