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

package/dist/allocationDetails.scss

@@ -77,11 +77,8 @@ $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
@@ -104,6 +101,7 @@ $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);
@@ -123,61 +121,36 @@ $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.
@@ -185,15 +158,12 @@ $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));
   }
 }
 
@@ -208,14 +178,12 @@ $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
@@ -235,6 +203,7 @@ $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;
@@ -243,71 +212,54 @@ $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;
@@ -315,126 +267,77 @@ $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);
@@ -444,15 +347,11 @@ $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;
         }
       }
@@ -486,54 +385,29 @@ $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,
@@ -562,100 +436,53 @@ $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;
@@ -678,10 +505,12 @@ $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;
@@ -691,12 +520,14 @@ $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);
 
@@ -705,6 +536,7 @@ $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);
 
@@ -724,1925 +556,1611 @@ $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.
+          // 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="top"] {
-              align-self: flex-start;
-            }
-            &[data-vertical-align="center"] {
-              align-self: center;
-            }
-            &[data-vertical-align="bottom"] {
-              align-self: flex-end;
-            }
           }
-          .product__views {
-            display: flex;
-            // background-color: #fff;
-            // border: 1px solid var(--_gray-300);
-            border-radius: 4px;
-            border-style: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-se, solid);
-            border-width: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
-            border-color: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-cr, var(--_gray-200));
-            background-color: prepareMediaVariable(
-              --_ctm-dn-gd-vw-cl-se-lt-se-bd-cr,
-              var(--_base-white)
-            );
-            // height: 40px;
-            // overflow: hidden;
-
-            // Hoisted out of `.btn` so the "Icon + Text" rules further down can size
-            // themselves off the same icon measurement.
-            $size: #{var(
-                --_sf-at-btn-size,
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
-              )};
-
-            .btn {
-              // display: inline-block;
-              // // padding: 8px;
-              // display: flex;
-              // align-items: center;
-              // justify-content: center;
-
-              display: var(--_d-flex);
-              --_width-20: 20px;
-              // $size: var(--_width-40);
-              // The 2x cell is now a floor rather than a fixed size: Padding is
-              // configurable, so the button grows past it once the padding needs more
-              // room than the icon left over. Untouched elements have no padding and
-              // stay exactly 2x, as they always were.
-              min-width: calc(#{$size} * 2);
-              min-height: calc(#{$size} * 2);
-              box-sizing: border-box;
-              padding: var(--_sf-at-btn-pg, #{prepareMediaVariable(
-                    --_ctm-dn-gd-vw-cl-se-bn-dt-se-pg,
-                    0
-                  )});
-              align-items: center;
-              justify-content: center;
-              background: var(
-                --_sf-at-btn-bd,
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
-              );
-              box-shadow: var(
-                --_sf-at-btn-sw,
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0 0)}
-                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
-                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
-                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
-              );
-
-              // The renderer reads Show Shadow off whichever state the button is in,
-              // so one attribute covers both.
-              &[data-show-shadow="false"] {
-                box-shadow: none;
-              }
 
-              cursor: pointer;
-              button {
-                display: flex;
-                // Until these are cleared the button keeps the browser's own
-                // padding and border, which pushed the glyph off the centre of its
-                // cell — that is what made the Grid and List icons sit unevenly
-                // beside each other. Filling the cell and centring here keeps them
-                // on one baseline at every icon size.
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                height: 100%;
-                padding: 0;
-                border: none;
-                background: transparent;
-              }
+          &[data-vertical-align="bottom"] {
+            align-self: flex-end;
+          }
+        }
 
-              // 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;
-                }
-              }
+        .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))})
+        }
 
-              // &: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);
-                }
-              }
+        ;
+
+        .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;
+        }
 
-              &:first-of-type {
-                border-radius: 4px 0 0 4px;
-              }
-              &:last-of-type {
-                border-radius: 0 4px 4px 0;
-              }
-            }
-          }
-        // products header styles
-        .showcase__header {
-          display: flex;
-          justify-content: space-between;
-          padding: 16px 0;
-          margin-bottom: 16px;
-          border-bottom: var(--Gray-200, #eaecf0) 1px solid;
-          .quota__details {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-          }
+        cursor: pointer;
 
-          .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);
-              }
-            }
-          }
+        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;
         }
 
-        //  add to cart button styles
-        .primary__btn {
+        // 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;
-          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;
+          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;
           }
         }
 
-        //  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%;
-              }
-            }
-          }
+        // &:hover {
+        //   background-color: var(--_gray-100);
+        // }
 
-          &[data-list-view="list"] {
-            grid-template-columns: auto;
-            .product__card {
-              flex-direction: row;
-              align-items: prepareMediaVariable(--_ctm-lt-an-is, start);
-              // gap: 24px;
-              .card__img__container {
-                width: 250px;
-              }
-            }
-          }
-          display: grid;
-          // Gap BETWEEN the item cards, now one control per axis. Both fall back to
-          // the single `itemGap` this section used to carry, so a grid spaced before
-          // the split keeps its spacing until either axis is touched.
-          row-gap: prepareMediaVariable(
-            --_ctm-dn-an-an-im-rw-gp,
-            prepareMediaVariable(--_ctm-dn-an-an-im-im-gp, 0px)
-          );
-          column-gap: prepareMediaVariable(
-            --_ctm-dn-an-an-im-cn-gp,
-            prepareMediaVariable(--_ctm-dn-an-an-im-im-gp, 0px)
-          );
-
-          .product__card {
-            // product card styles
-            display: flex;
-            // Item Card > Item Gap: image container <-> details container. 12px is
-            // what was hardcoded here, so an untouched card does not move.
-            gap: prepareMediaVariable(--_ctm-dn-im-cd-im-gp, 12px);
-
-            background-color: var(
-              --_ctm-mob-dn-im-cd-bd-cr,
-              var(--_ctm-tab-dn-im-cd-bd-cr, var(--_ctm-dn-im-cd-bd-cr))
-            );
-
-            border-color: var(
-              --_ctm-mob-dn-im-cd-br-cr,
-              var(--_ctm-tab-dn-im-cd-br-cr, var(--_ctm-dn-im-cd-br-cr))
-            );
-
-            border-style: var(
-              --_ctm-mob-dn-im-cd-br-se,
-              var(--_ctm-tab-dn-im-cd-br-se, var(--_ctm-dn-im-cd-br-se))
-            );
-
-            border-width: var(
-              --_ctm-mob-dn-im-cd-br-wh,
-              var(--_ctm-tab-dn-im-cd-br-wh, var(--_ctm-dn-im-cd-br-wh))
-            );
-
-            border-radius: var(
-              --_ctm-mob-dn-im-cd-br-rs,
-              var(--_ctm-tab-dn-im-cd-br-rs, var(--_ctm-dn-im-cd-br-rs))
-            );
-
-            box-shadow: var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-dn-im-cd-sw-ae,
-                  var(--_ctm-tab-dn-im-cd-sw-ae, var(--_ctm-dn-im-cd-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-im-cd-sw-br,
-                  var(--_ctm-tab-dn-im-cd-sw-br, var(--_ctm-dn-im-cd-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-im-cd-sw-sd,
-                  var(--_ctm-tab-dn-im-cd-sw-sd, var(--_ctm-dn-im-cd-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-im-cd-sw-cr,
-                  var(--_ctm-tab-dn-im-cd-sw-cr, var(--_ctm-dn-im-cd-sw-cr))
-                )
-            );
-            padding: var(
-              --_ctm-mob-dn-im-cd-pg,
-              var(--_ctm-tab-dn-im-cd-pg, var(--_ctm-dn-im-cd-pg))
-            );
-            .card__img__container {
-              height: 300px;
-              background-color: #fff;
-              display: flex;
-              align-items: flex-start;
-              justify-content: center;
-              border-radius: 6px;
-              &[data-has-link="true"] {
-                cursor: pointer;
-              }
-              .placeholder__image {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-              }
-            }
-            .price_details {
-              display: flex;
-              flex-direction: column;
-              gap: 8px;
-              align-items: prepareMediaVariable(--_ctm-lt-jy-ct, start);
-
-              .product__name {
-                background-color: var(
-                  --_ctm-mob-dn-ne-bd-cr,
-                  var(--_ctm-tab-dn-ne-bd-cr, var(--_ctm-dn-ne-bd-cr))
-                );
-
-                border-color: var(
-                  --_ctm-mob-dn-ne-br-cr,
-                  var(--_ctm-tab-dn-ne-br-cr, var(--_ctm-dn-ne-br-cr))
-                );
-
-                border-style: var(
-                  --_ctm-mob-dn-ne-br-se,
-                  var(--_ctm-tab-dn-ne-br-se, var(--_ctm-dn-ne-br-se))
-                );
-
-                border-width: var(
-                  --_ctm-mob-dn-ne-br-wh,
-                  var(--_ctm-tab-dn-ne-br-wh, var(--_ctm-dn-ne-br-wh))
-                );
-
-                border-radius: var(
-                  --_ctm-mob-dn-ne-br-rs,
-                  var(--_ctm-tab-dn-ne-br-rs, var(--_ctm-dn-ne-br-rs))
-                );
-
-                box-shadow: var(
-                  --_show-shadow,
-                  var(--_ctm-mob-dn-ne-sw-ae, var(--_ctm-tab-dn-ne-sw-ae, var(--_ctm-dn-ne-sw-ae)))
-                    var(
-                      --_ctm-mob-dn-ne-sw-br,
-                      var(--_ctm-tab-dn-ne-sw-br, var(--_ctm-dn-ne-sw-br))
-                    )
-                    var(
-                      --_ctm-mob-dn-ne-sw-sd,
-                      var(--_ctm-tab-dn-ne-sw-sd, var(--_ctm-dn-ne-sw-sd))
-                    )
-                    var(
-                      --_ctm-mob-dn-ne-sw-cr,
-                      var(--_ctm-tab-dn-ne-sw-cr, var(--_ctm-dn-ne-sw-cr))
-                    )
-                );
-                white-space: var(--_sf-sc-pt-lt-we-se, nowrap);
-
-                height: 100%;
-
-                color: var(--_ctm-mob-dn-ne-cr, var(--_ctm-tab-dn-ne-cr, var(--_ctm-dn-ne-cr)));
-                font-family: var(
-                  --_ctm-mob-dn-ne-ft-fy,
-                  var(--_ctm-tab-dn-ne-ft-fy, var(--_ctm-dn-ne-ft-fy))
-                );
-                text-transform: var(
-                  --_ctm-mob-dn-ne-tt-tm,
-                  var(--_ctm-tab-dn-ne-tt-tm, var(--_ctm-dn-ne-tt-tm))
-                );
-                word-wrap: var(
-                  --_ctm-mob-dn-ne-wd-wp,
-                  var(--_ctm-tab-dn-ne-wd-wp, var(--_ctm-dn-ne-wd-wp))
-                );
-                word-break: var(
-                  --_ctm-mob-dn-ne-wd-bk,
-                  var(--_ctm-tab-dn-ne-wd-bk, var(--_ctm-dn-ne-wd-bk))
-                );
-                font-size: var(
-                  --_ctm-mob-dn-ne-ft-se,
-                  var(--_ctm-tab-dn-ne-ft-se, var(--_ctm-dn-ne-ft-se))
-                );
-                font-weight: var(
-                  --_ctm-mob-dn-ne-ft-wt,
-                  var(--_ctm-tab-dn-ne-ft-wt, var(--_ctm-dn-ne-ft-wt))
-                );
-                font-style: var(
-                  --_ctm-mob-dn-ne-ft-se-ic,
-                  var(--_ctm-tab-dn-ne-ft-se-ic, var(--_ctm-dn-ne-ft-se-ic))
-                );
-                text-align: var(
-                  --_ctm-mob-dn-ne-tt-an,
-                  var(--_ctm-tab-dn-ne-tt-an, var(--_ctm-dn-ne-tt-an))
-                );
-                letter-spacing: var(
-                  --_ctm-mob-dn-ne-lr-sg,
-                  var(--_ctm-tab-dn-ne-lr-sg, var(--_ctm-dn-ne-lr-sg))
-                );
-                line-height: var(
-                  --_ctm-mob-dn-ne-le-ht,
-                  var(--_ctm-tab-dn-ne-le-ht, var(--_ctm-dn-ne-le-ht))
-                );
-                text-decoration: var(
-                  --_ctm-mob-dn-ne-ue,
-                  var(--_ctm-tab-dn-ne-ue, var(--_ctm-dn-ne-ue))
-                );
-                padding: prepareMediaVariable(--_ctm-dn-ne-pg);
-                @include ad-text-transform(--_ctm-dn-ne);
-
-                & > span {
-                  width: 100%;
-                  @include ad-text-overflow;
-                }
-                &[data-has-link="true"] {
-                  cursor: pointer;
-                  &:hover {
-                    color: var(--_primary-500);
-                  }
-                }
-              }
-              .brand__container {
-                display: flex;
-                flex-wrap: wrap;
-                align-items: center;
-                gap: 8px;
-                color: var(--_gray-600);
-                font-weight: 500;
-
-                // Item Card > Brand & Code Direction. Horizontal is the original
-                // side-by-side row; vertical stacks the two blocks and lets each
-                // start at the left rather than being centred against the other.
-                &[data-direction="vertical"] {
-                  flex-direction: column;
-                  align-items: flex-start;
-                  flex-wrap: nowrap;
-                }
-              }
-            }
+        &.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))
+        }
 
-            .brand {
-              display: flex;
-              align-items: center;
-              gap: 6px;
-              @include ad-section-box(--_ctm-dn-bd);
+        ;
+        --_sf-at-pt-cl: #{prepareMediaVariable(
+ --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-c1,
+        var(--_gray-700))
+      }
 
-              .brand__icon {
-                @include ad-section-icon(--_ctm-dn-bd);
-              }
+      ;
+      --_sf-at-btn-bd: #{prepareMediaVariable(
+ --_ctm-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
+      var(--_gray-200))
+    }
 
-              .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);
+    ;
+    // 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)
+  }
 
-              .code__icon {
-                @include ad-section-icon(--_ctm-dn-ce);
-              }
+  #{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);
+}
 
-              .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;
-            }
-          }
+// &.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);
+  }
+}
 
-          // Quota details styling for the embedded QuotaDetailsContent, rebound to
-          // the Allocations quotaDetails CSS-variable paths.
-          @import "./allocations-quota-details.scss";
-        }
-      }
+&:first-of-type {
+  border-radius: 4px 0 0 4px;
+}
 
-      .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)));
+&:last-of-type {
+  border-radius: 0 4px 4px 0;
+}
+}
+}
+
+// products header styles
+.showcase__header {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 0;
+  margin-bottom: 16px;
+  border-bottom: var(--Gray-200, #eaecf0) 1px solid;
+
+  .quota__details {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .button__group {
+    display: flex;
+    gap: 12px;
+  }
+
+  .product__views {
+    display: flex;
+    background-color: #fff;
+    border: 1px solid var(--_gray-300);
+    border-radius: 6px;
+    height: 40px;
+    overflow: hidden;
+
+    .btn {
+      display: inline-block;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      button {
         display: flex;
-        flex-direction: column;
-        --_sf-gp: var(
-          --_ctm-mob-lt-im-sg,
-          var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
-        );
-        --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-        row-gap: var(--_sf-gp);
-        width: 100%;
-        height: 100%;
-        border-color: var(
-          --_ctm-mob-dn-sr-wt-se-br-cr,
-          var(--_ctm-tab-dn-sr-wt-se-br-cr, var(--_ctm-dn-sr-wt-se-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-dn-sr-wt-se-br-se,
-          var(--_ctm-tab-dn-sr-wt-se-br-se, var(--_ctm-dn-sr-wt-se-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-dn-sr-wt-se-br-wh,
-          var(--_ctm-tab-dn-sr-wt-se-br-wh, var(--_ctm-dn-sr-wt-se-br-wh))
-        );
-        border-radius: var(
-          --_ctm-mob-dn-sr-wt-se-br-rs,
-          var(--_ctm-tab-dn-sr-wt-se-br-rs, var(--_ctm-dn-sr-wt-se-br-rs))
-        );
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-sr-wt-se-sw-ae,
-              var(--_ctm-tab-dn-sr-wt-se-sw-ae, var(--_ctm-dn-sr-wt-se-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-sr-wt-se-sw-br,
-              var(--_ctm-tab-dn-sr-wt-se-sw-br, var(--_ctm-dn-sr-wt-se-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-sr-wt-se-sw-sd,
-              var(--_ctm-tab-dn-sr-wt-se-sw-sd, var(--_ctm-dn-sr-wt-se-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-sr-wt-se-sw-cr,
-              var(--_ctm-tab-dn-sr-wt-se-sw-cr, var(--_ctm-dn-sr-wt-se-sw-cr))
-            )
-        );
-        .profile__button {
-          &[data-show-shadow="false"] {
-            --_show-shadow: none;
-          }
-          &[data-icon-position="left"] {
-            --_sf-fd-bn: row;
-          }
-          &[data-icon-position="right"] {
-            --_sf-fd-bn: row-reverse;
-          }
-          &[data-icon-position="center"] {
-            --_sf-fd-bn: row;
-          }
+      }
 
-          &:hover {
-            --_sf-hr-bd-cr: var(
-              --_ctm-mob-dn-sr-tb-hr-se-bd-cr,
-              var(--_ctm-tab-dn-sr-tb-hr-se-bd-cr, var(--_ctm-dn-sr-tb-hr-se-bd-cr))
-            );
-            --_sf-hr-br-cr: var(
-              --_ctm-mob-dn-sr-tb-hr-se-br-cr,
-              var(--_ctm-tab-dn-sr-tb-hr-se-br-cr, var(--_ctm-dn-sr-tb-hr-se-br-cr))
-            );
-            --_sf-hr-br-se: var(
-              --_ctm-mob-dn-sr-tb-hr-se-br-se,
-              var(--_ctm-tab-dn-sr-tb-hr-se-br-se, var(--_ctm-dn-sr-tb-hr-se-br-se))
-            );
-            --_sf-hr-br-wh: var(
-              --_ctm-mob-dn-sr-tb-hr-se-br-wh,
-              var(--_ctm-tab-dn-sr-tb-hr-se-br-wh, var(--_ctm-dn-sr-tb-hr-se-br-wh))
-            );
-            --_sf-hr-br-rs: var(
-              --_ctm-mob-dn-sr-tb-hr-se-br-rs,
-              var(--_ctm-tab-dn-sr-tb-hr-se-br-rs, var(--_ctm-dn-sr-tb-hr-se-br-rs))
-            );
-            --_sf-hr-at: var(
-              --_ctm-mob-dn-sr-tb-hr-se-at,
-              var(--_ctm-tab-dn-sr-tb-hr-se-at, var(--_ctm-dn-sr-tb-hr-se-at))
-            );
-            --_sf-hr-in-ad-tt-sg: var(
-              --_ctm-mob-dn-sr-tb-hr-se-in-ad-tt-sg,
-              var(--_ctm-tab-dn-sr-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-sr-tb-hr-se-in-ad-tt-sg))
-            );
-
-            // for shadow
-            --_sf-hr-sw-ae: var(
-              --_ctm-mob-dn-sr-tb-hr-se-sw-ae,
-              var(--_ctm-tab-dn-sr-tb-hr-se-sw-ae, var(--_ctm-dn-sr-tb-hr-se-sw-ae))
-            );
-            --_sf-hr-sw-br: var(
-              --_ctm-mob-dn-sr-tb-hr-se-sw-br,
-              var(--_ctm-tab-dn-sr-tb-hr-se-sw-br, var(--_ctm-dn-sr-tb-hr-se-sw-br))
-            );
-            --_sf-hr-sw-hr: var(
-              --_ctm-mob-dn-sr-tb-hr-se-sw-hr,
-              var(--_ctm-tab-dn-sr-tb-hr-se-sw-hr, var(--_ctm-dn-sr-tb-hr-se-sw-hr))
-            );
-            --_sf-hr-sw-cr: var(
-              --_ctm-mob-dn-sr-tb-hr-se-sw-cr,
-              var(--_ctm-tab-dn-sr-tb-hr-se-sw-cr, var(--_ctm-dn-sr-tb-hr-se-sw-cr))
-            );
-
-            // for font
-
-            --_sf-hr-cr: var(
-              --_ctm-mob-dn-sr-tb-hr-se-cr,
-              var(--_ctm-tab-dn-sr-tb-hr-se-cr, var(--_ctm-dn-sr-tb-hr-se-cr))
-            );
-            --_sf-hr-ft-fy: var(
-              --_ctm-mob-dn-sr-tb-hr-se-ft-fy,
-              var(--_ctm-tab-dn-sr-tb-hr-se-ft-fy, var(--_ctm-dn-sr-tb-hr-se-ft-fy))
-            );
-            --_sf-hr-ft-se: var(
-              --_ctm-mob-dn-sr-tb-hr-se-ft-se,
-              var(--_ctm-tab-dn-sr-tb-hr-se-ft-se, var(--_ctm-dn-sr-tb-hr-se-ft-se))
-            );
-            --_sf-hr-ft-wt: var(
-              --_ctm-mob-dn-sr-tb-hr-se-ft-wt,
-              var(--_ctm-tab-dn-sr-tb-hr-se-ft-wt, var(--_ctm-dn-sr-tb-hr-se-ft-wt))
-            );
-            --_sf-hr-ft-se-ic: var(
-              --_ctm-mob-dn-sr-tb-hr-se-ft-se-ic,
-              var(--_ctm-tab-dn-sr-tb-hr-se-ft-se-ic, var(--_ctm-dn-sr-tb-hr-se-ft-se-ic))
-            );
-            --_sf-hr-tt-an: var(
-              --_ctm-mob-dn-sr-tb-hr-se-tt-an,
-              var(--_ctm-tab-dn-sr-tb-hr-se-tt-an, var(--_ctm-dn-sr-tb-hr-se-tt-an))
-            );
-            --_sf-hr-lr-sg: var(
-              --_ctm-mob-dn-sr-tb-hr-se-lr-sg,
-              var(--_ctm-tab-dn-sr-tb-hr-se-lr-sg, var(--_ctm-dn-sr-tb-hr-se-lr-sg))
-            );
-            --_sf-hr-le-ht: var(
-              --_ctm-mob-dn-sr-tb-hr-se-le-ht,
-              var(--_ctm-tab-dn-sr-tb-hr-se-le-ht, var(--_ctm-dn-sr-tb-hr-se-le-ht))
-            );
-            --_sf-hr-tt-tm: var(
-              --_ctm-mob-dn-sr-tb-hr-se-tt-tm,
-              var(--_ctm-tab-dn-sr-tb-hr-se-tt-tm, var(--_ctm-dn-sr-tb-hr-se-tt-tm))
-            );
-            --_sf-hr-wd-wp: var(
-              --_ctm-mob-dn-sr-tb-hr-se-wd-wp,
-              var(--_ctm-tab-dn-sr-tb-hr-se-wd-wp, var(--_ctm-dn-sr-tb-hr-se-wd-wp))
-            );
-            --_sf-hr-wd-bk: var(
-              --_ctm-mob-dn-sr-tb-hr-se-wd-bk,
-              var(--_ctm-tab-dn-sr-tb-hr-se-wd-bk, var(--_ctm-dn-sr-tb-hr-se-wd-bk))
-            );
-
-            --_sf-hr-in-se: var(
-              --_ctm-mob-dn-sr-tb-hr-se-in-se,
-              var(--_ctm-tab-dn-sr-tb-hr-se-in-se, var(--_ctm-dn-sr-tb-hr-se-in-se))
-            );
-            --_sf-hr-in-se: var(
-              --_ctm-mob-dn-sr-tb-hr-se-in-se,
-              var(--_ctm-tab-dn-sr-tb-hr-se-in-se, var(--_ctm-dn-sr-tb-hr-se-in-se))
-            );
-            --_sf-hr-in-c1: var(
-              --_ctm-mob-dn-sr-tb-hr-se-in-c1,
-              var(--_ctm-tab-dn-sr-tb-hr-se-in-c1, var(--_ctm-dn-sr-tb-hr-se-in-c1))
-            );
-            --_sf-hr-ue: var(
-              --_ctm-mob-dn-sr-tb-hr-se-ue,
-              var(--_ctm-tab-dn-sr-tb-hr-se-ue, var(--_ctm-dn-sr-tb-hr-se-ue))
-            );
-
-            // for pading and width
-            --_sf-hr-pg: var(
-              --_ctm-mob-dn-sr-tb-hr-se-pg,
-              var(--_ctm-tab-dn-sr-tb-hr-se-pg, var(--_ctm-dn-sr-tb-hr-se-pg))
-            );
-            --_sf-hr-wh: var(
-              --_ctm-mob-dn-sr-tb-hr-se-wh,
-              var(--_ctm-tab-dn-sr-tb-hr-se-wh, var(--_ctm-dn-sr-tb-hr-se-wh))
-            );
-
-            &[data-hover-show-shadow="false"] {
-              --_hover-show-shadow: none;
-            }
-            &[data-hover-show-icon="false"] {
-              --_hover-show-icon: none;
+      &:hover {
+        background-color: var(--_gray-100);
+      }
+
+      &.active {
+        background-color: #ced4f6;
+
+        button {
+          svg {
+            path {
+              stroke: var(--_primary-500);
             }
           }
+        }
+      }
 
-          background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr));
+      &:first-child {
+        border-right: 1px solid var(--_gray-200);
+      }
+    }
+  }
+}
 
-          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
-          display: flex;
-          flex-direction: var(--_sf-fd-bn);
-          align-items: center;
+//  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);
+  }
 
-          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));
+  &.disable__btn {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
 
-          border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
+//  product list styles
+.showcase__product__list {
+  .product__card {
+    .category__image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
 
-          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-ae))
-            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-br))
-            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-sd))
-            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-cr));
+  &[data-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))
+  }
 
-          &[data-show-border="true"] {
-            border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
+  ;
+  grid-template-columns: getRepeatColWidth(--_sf-cl-count, --_sf-cl-gp);
 
-            border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
+  // gap: 24px;
+  .product__card {
+    flex-direction: column;
 
-            border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
-          }
+    .card__img__container {
+      width: 100%;
+    }
+  }
+}
 
-          // text styles
+&[data-list-view="list"] {
+  grid-template-columns: auto;
 
-          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
+  .product__card {
+    flex-direction: row;
+    align-items: prepareMediaVariable(--_ctm-lt-an-is, start);
 
-          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)});
-          }
+    // gap: 24px;
+    .card__img__container {
+      width: 250px;
+    }
+  }
+}
 
-          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
+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-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
+    .placeholder__image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
 
-          font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));
+  .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;
+      }
 
-          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
+      &[data-has-link="true"] {
+        cursor: pointer;
 
-          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
+        &:hover {
+          color: var(--_primary-500);
+        }
+      }
+    }
 
-          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
+    .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;
+      }
+    }
+  }
 
-          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    @include ad-section-box(--_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)
-          );
+    .brand__icon {
+      @include ad-section-icon(--_ctm-dn-bd);
+    }
 
-          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal));
+    .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-break: var(
-            --_sf-hr-wd-bk,
-            prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, 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;
+    }
+  }
 
-          [data-element-style="Text"] {
-            display: inline-block;
-            width: 100%;
-          }
+  .code {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    @include ad-section-box(--_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;
-            }
+    .code__icon {
+      @include ad-section-icon(--_ctm-dn-ce);
+    }
 
-            background-color: var(
-              --_sf-sd-bd-cr,
-              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr)
-            );
+    .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);
+    }
 
-            padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
-            display: flex;
-            flex-direction: var(--_sf-fd-bn);
-            align-items: center;
+    .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;
+    }
+  }
 
-            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));
+  .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;
+  }
+}
 
-            border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
+// Quota details styling for the embedded QuotaDetailsContent, rebound to
+// the Allocations quotaDetails CSS-variable paths.
+@import "./allocations-quota-details.scss";
+}
+}
 
-            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));
+.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-show-border="true"] {
-              border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
+    &[data-icon-position="left"] {
+      --_sf-fd-bn: row;
+    }
 
-              border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
+    &[data-icon-position="right"] {
+      --_sf-fd-bn: row-reverse;
+    }
 
-              border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
-            }
+    &[data-icon-position="center"] {
+      --_sf-fd-bn: row;
+    }
 
-            // text styles
+    &: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;
+      }
 
-            color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
+      &[data-hover-show-icon="false"] {
+        --_hover-show-icon: none;
+      }
+    }
 
-            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)});
-            }
+    background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr));
 
-            font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
+    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-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
+    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-style: var(
-              --_sf-sd-ft-se-ic,
-              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic)
-            );
+    border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
 
-            text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
+    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));
 
-            letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
+    &[data-show-border="true"] {
+      border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
 
-            line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
+      border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
 
-            text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+      border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
+    }
 
-            text-transform: var(
-              --_sf-sd-tt-tm,
-              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-tm, none)
-            );
+    // text styles
 
-            word-wrap: var(
-              --_sf-sd-wd-wp,
-              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal)
-            );
+    color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
 
-            word-break: var(
-              --_sf-sd-wd-bk,
-              prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal)
-            );
+    font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-fy));
 
-            [data-element-style="Text"] {
-              display: inline-block;
-              width: 100%;
-            }
-          }
-        }
-        .embla {
-          height: auto;
-          padding: var(--_sf-flex-embla-pd-daka-mobile, 10px);
+    &.flex__overflow {
+      white-space: normal;
+      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+    }
 
-          .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-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
 
-        .embla__viewport {
-          width: 100%;
-          height: 100%;
-          position: relative;
-          display: flex;
-          flex-direction: column;
+    font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
 
-          overflow: hidden;
+    font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));
 
-          .embla__container {
-            width: 100%;
-            height: 100%;
-            display: grid;
-            grid-template-rows: 100%;
+    text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
 
-            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)))
-              )
-            );
+    letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
 
-            grid-auto-flow: column;
-            gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+    line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
 
-            &[data-control-type="Bottom"][data-slider-control="Arrows"] {
-              height: calc(100% - calc(50px + 10px));
-            }
+    text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
 
-            &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-              height: calc(100% - calc(50px + 20px));
-            }
+    // 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="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-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, 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)))
-            );
-          }
-        }
+    word-break: var(--_sf-hr-wd-bk,
+      prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal));
 
-        .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);
+    [data-element-style="Text"] {
+      display: inline-block;
+      width: 100%;
+    }
 
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
+    &[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;
+      }
 
-          &:disabled {
-            & svg {
-              path {
-                stroke: #c3b7b7;
-              }
-            }
-          }
-        }
-        .left-button {
-          margin-left: 12px;
-        }
-        .right-button {
-          margin-right: 12px;
-        }
-        .icon {
-          display: flex;
+      &[data-hover-show-icon="false"] {
+        --_hover-show-icon: none;
+      }
 
-          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);
-            }
-          }
-        }
+      background-color: var(--_sf-sd-bd-cr,
+        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr));
 
-        &[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;
+      padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
+      display: flex;
+      flex-direction: var(--_sf-fd-bn);
+      align-items: center;
 
-            right: 0;
-            top: 50%;
-            transform: translateY(-50%);
-          }
-        }
+      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));
 
-        &[data-thumbnail-placement="top"] {
-          flex-direction: column-reverse;
-        }
-        &[data-thumbnail-placement="bottom"] {
-          flex-direction: column;
-        }
-        &[data-thumbnail-placement="left"] {
-          flex-direction: row-reverse;
+      border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
 
-          .embla__thumbs {
-            width: var(--_ctm-lt-tl-se);
-            height: 100%;
+      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));
 
-            & .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)));
+      &[data-show-border="true"] {
+        border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
 
-            height: 100%;
+        border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
 
-            & .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))
-            );
+        border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
+      }
 
-            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;
-            }
+      // text styles
 
-            .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))
-              );
-            }
-          }
-        }
+      color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
 
-        .embla__thumbs {
-          width: 100%;
-          height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-          position: relative;
-          display: grid;
-          grid-template-columns: 1fr;
-          overflow: hidden;
-          // margin: 10px;
-          padding: 10px;
-
-          .embla__thumbs__viewport {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            display: flex;
-            flex-direction: column;
+      font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-fy));
 
-            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%;
-              }
-            }
-          }
-        }
+      &.flex__overflow {
+        white-space: normal;
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
-    }
-    // ---- 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;
+      font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
+
+      font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
+
+      font-style: var(--_sf-sd-ft-se-ic,
+        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));
+
+      text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
+
+      letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
+
+      line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
+
+      text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+
+      text-transform: var(--_sf-sd-tt-tm,
+        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-tm, none));
+
+      word-wrap: var(--_sf-sd-wd-wp,
+        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal));
+
+      word-break: var(--_sf-sd-wd-bk,
+        prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal));
+
+      [data-element-style="Text"] {
+        display: inline-block;
+        width: 100%;
       }
     }
+  }
 
-    .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 {
+    height: auto;
+    padding: var(--_sf-flex-embla-pd-daka-mobile, 10px);
 
-    .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;
+    .embla__viewport {
+      .embla__container {
+        display: flex;
+        gap: prepareMediaVariable(--_ctm-dn-sr-wt-se-im-gp);
+
+        .embla__slide {
+          width: unset;
+        }
+      }
     }
+  }
+}
 
-    .ad_allocation_tree {
-      display: flex;
-      flex-direction: column;
-      // Gap BETWEEN profile rows (Sidebar Container → Profile Gap).
-      gap: prepareMediaVariable(#{$ad-sidebar}-pe-gp, 8px);
+.embla {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  // padding: 10px;
+  // overflow: hidden;
+
+  .embla__viewport {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden;
+
+    .embla__container {
       width: 100%;
+      height: 100%;
+      display: grid;
+      grid-template-rows: 100%;
+
+      grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+          calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
+
+      grid-auto-flow: column;
+      gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+      &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+        height: calc(100% - calc(50px + 10px));
+      }
+
+      &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+        height: calc(100% - calc(50px + 20px));
+      }
+
+      &[data-control-type="Bottom"][data-slider-control="Dots"] {
+        height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
+                var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
+      }
+
+      .embla__slide {
+        width: 100%;
+        height: 100%;
+
+        &>img {
+          width: 100%;
+          height: 100%;
+        }
+      }
     }
+  }
 
-    .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);
+  &: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_icon {
-      display: flex;
-      align-items: center;
+  .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;
-      width: 24px;
-      height: 24px;
-      flex-shrink: 0;
-      color: ad-tree-icon-var("dt-se", "in-c1", #002a4e);
+      gap: 12px;
+      top: unset;
+      bottom: 6px;
     }
 
-    .ad_chevron {
-      display: flex;
-      align-items: center;
+    &[data-control-type="Bottom"] {
+      transform: unset;
+      position: static;
+      width: 100%;
       justify-content: center;
-      transition: transform 0.15s ease;
-      @include ad-tree-icon("dt-se", "in-se", "in-c1");
+      gap: 12px;
+      margin-top: 10px;
     }
+  }
 
-    .ad_chevron.is-open {
-      transform: rotate(90deg);
+  // 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%);
     }
+  }
 
-    // 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;
+  .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;
     }
 
-    .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;
+    &[data-background-shape="Round"] {
+      border-radius: 50%;
     }
 
-    .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;
+    &[data-background-shape="Square"] {
+      border-radius: 4px;
     }
 
-    // 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");
+    // 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_label {
-      flex: 1;
-      min-width: 0;
-      @include ad-font(#{$ad-tree}-dt-se, #002a4e, 14px, 600);
-      @include ad-text-overflow;
-    }
+  .left-button {
+    margin-left: 12px;
+  }
 
-    .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");
+  .right-button {
+    margin-right: 12px;
+  }
+
+  .icon {
+    display: flex;
+
+    svg {
+      width: calc(#{prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px)
     }
 
-    .ad_subtree {
-      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;
-      // Gap BETWEEN allocation rows (Sidebar Container → Allocation Gap).
-      gap: prepareMediaVariable(#{$ad-sidebar}-an-gp, 8px);
-      padding-left: 31px;
-      width: 100%;
+      height: 100%;
     }
+  }
+}
 
-    .ad_subtree_node {
-      padding: prepareMediaVariable(#{$ad-subtree}-dt-se-pg, 4px 0);
-      cursor: pointer;
-      @include ad-design(#{$ad-subtree}-dt-se);
-    }
+&[data-thumbnail-placement="right"] {
+  flex-direction: row;
 
-    .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: 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);
+    height: 100%;
+
+    & .embla__thumbs__container {
+      flex-direction: column;
+      height: 100%;
     }
-    .ad_subtree_node.is-active {
-      @include ad-design-state($ad-subtree, sd-se);
-      @include ad-layout-state($ad-subtree, sd-se, 4px 0);
+  }
+}
+
+.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.is-active .ad_subtree_node_label {
-      @include ad-font-state($ad-subtree, sd-se, #1d1b1c, 14px, 400);
+
+    .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)));
     }
+  }
+}
 
-    // 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 {
+.embla__thumbs {
+  width: 100%;
+  height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+  // margin: 10px;
+  padding: 10px;
+
+  .embla__thumbs__viewport {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden;
+  }
+
+  .embla__thumbs__container {
+    display: flex;
+    flex-direction: row;
+    margin-left: calc(var(--thumbs-slide-spacing) * -1);
+    gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
+
+    width: 100%;
+    // justify-content: center;
+    // height: 200px;
+
+    .embla__thumbs__slide {
+      min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+      max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+      height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+      & img {
         width: 100%;
+        height: 100%;
       }
     }
   }
 }
+}
+}
+
+// ---- Tree view: profiles sidebar + allocation on the right ---------------
+// Two columns, mirroring the Category Groups element. The gap between them is
+// the element's own allocation item gap so it stays in the same layout panel.
+.allocation_details_tree {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  gap: prepareMediaVariable(#{$ad-sidebar-design}-im-gp, 36px);
+
+  .ad_main {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.ad_sidebar {
+  display: flex;
+  flex-direction: column;
+  // Sidebar Container → gap (heading ↔ tree) + padding.
+  gap: prepareMediaVariable(#{$ad-sidebar}-im-gp, 12px);
+  padding: prepareMediaVariable(#{$ad-sidebar}-pg, 0);
+  width: 260px;
+  flex-shrink: 0;
+  @include ad-design($ad-sidebar);
+  border-radius: prepareMediaVariable(#{$ad-sidebar}-br-rs, 0);
+}
+
+.ad_sidebar_heading {
+  white-space: nowrap;
+  margin: 0;
+  line-height: 1.25;
+  // `uppercase` is the fallback, not a hardcoded rule, so Text Transform can
+  // override it while untouched elements keep the look they always had.
+  @include ad-font($ad-heading, #002a4e, 16px, 400, uppercase);
+  @include ad-text-overflow;
+}
+
+.ad_allocation_tree {
+  display: flex;
+  flex-direction: column;
+  // Gap BETWEEN profile rows (Sidebar Container → Profile Gap).
+  gap: prepareMediaVariable(#{$ad-sidebar}-pe-gp, 8px);
+  width: 100%;
+}
+
+.ad_tree_node {
+  display: flex;
+  align-items: center;
+  // Profile Row → item gap (icon ↔ label).
+  gap: prepareMediaVariable(#{$ad-tree}-dt-se-im-gp, 4px);
+  padding: prepareMediaVariable(#{$ad-tree}-dt-se-pg, 4px 0);
+  cursor: pointer;
+  @include ad-design(#{$ad-tree}-dt-se);
+}
+
+.ad_tree_node_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: ad-tree-icon-var("dt-se", "in-c1", #002a4e);
+}
+
+.ad_chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+  @include ad-tree-icon("dt-se", "in-se", "in-c1");
+}
+
+.ad_chevron.is-open {
+  transform: rotate(90deg);
+}
+
+// Show / hide of the icon, per interaction state. `aria-expanded` picks which of
+// the two switches applies: the Collapsed Icon's while the profile is closed,
+// the Expanded Icon's while it is open.
+//
+// Each state emits BOTH outcomes, not just the hidden one — a state that shows
+// the icon has to be able to bring it back when the state beneath it hid it
+// (Default off, Hover on). Hover and Selected carry one extra selector each, so
+// they already outrank Default; Selected is written last so it wins over Hover
+// on a row that is both.
+.ad_tree_node[aria-expanded="false"][data-show-icon="false"] .ad_tree_node_icon,
+.ad_tree_node[aria-expanded="true"][data-show-icon-expanded="false"] .ad_tree_node_icon {
+  display: none;
+}
+
+.ad_tree_node[aria-expanded="false"]:hover[data-hover-show-icon="false"] .ad_tree_node_icon,
+.ad_tree_node[aria-expanded="true"]:hover[data-hover-show-icon-expanded="false"] .ad_tree_node_icon {
+  display: none;
+}
+
+.ad_tree_node[aria-expanded="false"]:hover[data-hover-show-icon="true"] .ad_tree_node_icon,
+.ad_tree_node[aria-expanded="true"]:hover[data-hover-show-icon-expanded="true"] .ad_tree_node_icon {
+  display: flex;
+}
+
+.ad_tree_node[aria-expanded="false"].is-active[data-selected-show-icon="false"] .ad_tree_node_icon,
+.ad_tree_node[aria-expanded="true"].is-active[data-selected-show-icon-expanded="false"] .ad_tree_node_icon {
+  display: none;
+}
+
+.ad_tree_node[aria-expanded="false"].is-active[data-selected-show-icon="true"] .ad_tree_node_icon,
+.ad_tree_node[aria-expanded="true"].is-active[data-selected-show-icon-expanded="true"] .ad_tree_node_icon {
+  display: flex;
+}
+
+// The expanded icon has its own size/colour vars so it is independent of the
+// collapsed one.
+.ad_chevron.is-expanded {
+  @include ad-tree-icon("dt-se", "in-se-ed", "in-cr-ed");
+}
+
+.ad_tree_node_label {
+  flex: 1;
+  min-width: 0;
+  @include ad-font(#{$ad-tree}-dt-se, #002a4e, 14px, 600);
+  @include ad-text-overflow;
+}
+
+.ad_tree_node:hover {
+  @include ad-design-state($ad-tree, hr-se);
+  @include ad-layout-state($ad-tree, hr-se, 4px 0, 4px);
+}
+
+.ad_tree_node:hover .ad_tree_node_label {
+  @include ad-font-state($ad-tree, hr-se, #002a4e, 14px, 600);
+}
+
+// The icon follows the row it sits in. `.is-expanded` is listed after the plain
+// rule in each block on purpose: it is the more specific selector, so the
+// expanded icon keeps its own size/colour instead of inheriting the collapsed
+// one's while the row is hovered or active.
+.ad_tree_node:hover .ad_tree_node_icon {
+  color: ad-tree-icon-var("hr-se", "in-c1", #002a4e);
+}
+
+.ad_tree_node:hover .ad_chevron {
+  @include ad-tree-icon("hr-se", "in-se", "in-c1");
+}
+
+.ad_tree_node:hover .ad_chevron.is-expanded {
+  @include ad-tree-icon("hr-se", "in-se-ed", "in-cr-ed");
+}
+
+.ad_tree_node.is-active {
+  @include ad-design-state($ad-tree, sd-se);
+  @include ad-layout-state($ad-tree, sd-se, 4px 0, 4px);
+}
+
+.ad_tree_node.is-active .ad_tree_node_label {
+  @include ad-font-state($ad-tree, sd-se, #002a4e, 14px, 600);
+}
+
+.ad_tree_node.is-active .ad_tree_node_icon {
+  color: ad-tree-icon-var("sd-se", "in-c1", #002a4e);
+}
+
+.ad_tree_node.is-active .ad_chevron {
+  @include ad-tree-icon("sd-se", "in-se", "in-c1");
+}
+
+.ad_tree_node.is-active .ad_chevron.is-expanded {
+  @include ad-tree-icon("sd-se", "in-se-ed", "in-cr-ed");
+}
+
+.ad_subtree {
+  display: flex;
+  flex-direction: column;
+  // Gap BETWEEN allocation rows (Sidebar Container → Allocation Gap).
+  gap: prepareMediaVariable(#{$ad-sidebar}-an-gp, 8px);
+  padding-left: 31px;
+  width: 100%;
+}
+
+.ad_subtree_node {
+  padding: prepareMediaVariable(#{$ad-subtree}-dt-se-pg, 4px 0);
+  cursor: pointer;
+  @include ad-design(#{$ad-subtree}-dt-se);
+}
+
+.ad_subtree_node_label {
+  letter-spacing: -0.28px;
+  min-width: 0;
+  @include ad-font(#{$ad-subtree}-dt-se, #1d1b1c, 14px, 400);
+  @include ad-text-overflow;
+}
+
+.ad_subtree_node:hover {
+  @include ad-design-state($ad-subtree, hr-se);
+  @include ad-layout-state($ad-subtree, hr-se, 4px 0);
+}
+
+.ad_subtree_node:hover .ad_subtree_node_label {
+  @include ad-font-state($ad-subtree, hr-se, #1d1b1c, 14px, 400);
+}
+
+.ad_subtree_node.is-active {
+  @include ad-design-state($ad-subtree, sd-se);
+  @include ad-layout-state($ad-subtree, sd-se, 4px 0);
+}
+
+.ad_subtree_node.is-active .ad_subtree_node_label {
+  @include ad-font-state($ad-subtree, sd-se, #1d1b1c, 14px, 400);
+}
+
+// Narrow screens: the rail stops being a column and sits above the allocation.
+@media only screen and (max-width: 767px) {
+  .allocation_details_tree {
+    flex-direction: column;
+  }
+
+  .ad_sidebar {
+    width: 100%;
+  }
+}
+}
+}