@sc-360-v2/storefront-cms-library 0.5.54 → 0.5.55

package/dist/allocationDetails.scss

@@ -24,8 +24,11 @@ $ad-tree: "--_ctm-dn-sr-dn-pe-rw"; // sidebarDesign.profileRow
 $ad-tree-icon: "--_ctm-dn-sr-dn-pe-te-in"; // sidebarDesign.profileTreeIcon
 $ad-subtree: "--_ctm-dn-sr-dn-an-rw"; // sidebarDesign.allocationRow
 $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
+$ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
 
-@mixin ad-font($base, $color, $size, $weight: 600) {
+// $transform is the fallback for Text Transform, so a row that already rendered
+// uppercase keeps doing so on elements saved before the control existed.
+@mixin ad-font($base, $color, $size, $weight: 600, $transform: none) {
   color: prepareMediaVariable(#{$base}-cr, $color);
   font-family: prepareMediaVariable(#{$base}-ft-fy, ("Inter", sans-serif));
   font-size: prepareMediaVariable(#{$base}-ft-se, $size);
@@ -35,6 +38,83 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
   letter-spacing: prepareMediaVariable(#{$base}-lr-sg);
   line-height: prepareMediaVariable(#{$base}-le-ht);
   text-decoration: prepareMediaVariable(#{$base}-ue);
+  text-transform: prepareMediaVariable(#{$base}-tt-tm, $transform);
+  word-wrap: prepareMediaVariable(#{$base}-wd-wp, normal);
+  word-break: prepareMediaVariable(#{$base}-wd-bk, normal);
+}
+
+// Text Transform and the word wrap/break pair the typography panel groups with it.
+// $suffix is "-dc" for the sections whose Value block writes the *Desc keys.
+@mixin ad-text-transform($base, $suffix: "", $transform: none) {
+  text-transform: prepareMediaVariable(#{$base}-tt-tm#{$suffix}, $transform);
+  word-wrap: prepareMediaVariable(#{$base}-wd-wp#{$suffix}, normal);
+  word-break: prepareMediaVariable(#{$base}-wd-bk#{$suffix}, normal);
+}
+
+// Text Overflow: the renderer adds `.flex__overflow` and publishes the line count,
+// so the clamp only applies once the toggle is on. `white-space: normal` undoes any
+// `nowrap` above it — the text has to wrap before it can be restricted to N lines.
+@mixin ad-text-overflow($clampVar: --_sf-line-clamp) {
+  &#{$overflowSelector} {
+    white-space: normal;
+    @include restrictToLinesShow(#{var($clampVar, 1)});
+  }
+}
+
+// Container box for the sections whose schema has always carried Padding, Fill,
+// Border, Border Radius and Shadow but which only ever rendered their font — the
+// controls were there and did nothing (Brand, Code).
+//
+// Every fallback is the neutral value, not `prepareMediaVariable`'s `inherit`
+// default: these boxes had no such rule at all until now, so an untouched card has
+// to keep rendering byte for byte as it did. `inherit` would quietly hand them the
+// parent's padding and fill, and a non-zero radius default would round every card
+// nobody had styled.
+@mixin ad-section-box($base) {
+  padding: prepareMediaVariable(#{$base}-pg, 0);
+  background-color: prepareMediaVariable(#{$base}-bd-cr, transparent);
+  border-color: prepareMediaVariable(#{$base}-br-cr, transparent);
+  border-style: prepareMediaVariable(#{$base}-br-se, solid);
+  border-width: prepareMediaVariable(#{$base}-br-wh, 0);
+  border-radius: prepareMediaVariable(#{$base}-br-rs, 0);
+  box-shadow: var(
+    --_show-shadow,
+    prepareMediaVariable(#{$base}-sw-ae, 0 0) prepareMediaVariable(#{$base}-sw-br, 0)
+      prepareMediaVariable(#{$base}-sw-sd, 0) prepareMediaVariable(#{$base}-sw-cr, transparent)
+  );
+}
+
+// The icon a Brand / Code block can carry in front of its value. Sized and coloured
+// from the section's own Icon settings, and told to hold its width so a long value
+// wrapping beside it cannot squeeze the glyph.
+@mixin ad-section-icon($base) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: prepareMediaVariable(#{$base}-in-c1, currentColor);
+
+  svg {
+    width: prepareMediaVariable(#{$base}-in-se, 16px);
+    height: prepareMediaVariable(#{$base}-in-se, 16px);
+
+    // Apply the configured colour even when the fetched SVG hardcodes its own
+    // stroke/fill (parts explicitly set to "none" are left alone).
+    &[stroke]:not([stroke="none"]),
+    [stroke]:not([stroke="none"]) {
+      stroke: prepareMediaVariable(#{$base}-in-c1, currentColor);
+    }
+    &[fill]:not([fill="none"]),
+    [fill]:not([fill="none"]) {
+      fill: prepareMediaVariable(#{$base}-in-c1, currentColor);
+    }
+  }
+
+  img {
+    width: prepareMediaVariable(#{$base}-in-se, 16px);
+    height: prepareMediaVariable(#{$base}-in-se, 16px);
+    object-fit: contain;
+  }
 }
 
 @mixin ad-design($base) {
@@ -86,6 +166,80 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
     #{$base}-#{$state}-ue,
     prepareMediaVariable(#{$base}-dt-se-ue)
   );
+  text-transform: prepareMediaVariable(
+    #{$base}-#{$state}-tt-tm,
+    prepareMediaVariable(#{$base}-dt-se-tt-tm, none)
+  );
+  word-wrap: prepareMediaVariable(
+    #{$base}-#{$state}-wd-wp,
+    prepareMediaVariable(#{$base}-dt-se-wd-wp, normal)
+  );
+  word-break: prepareMediaVariable(
+    #{$base}-#{$state}-wd-bk,
+    prepareMediaVariable(#{$base}-dt-se-wd-bk, normal)
+  );
+}
+
+// Padding, and the icon-to-label gap on the profile row, per interaction state.
+// Same default-state fallback as ad-design-state; kept separate because only the
+// profile row has an item gap — the allocation row is a lone label with nothing to
+// space, so $gap is left out there rather than emitting a gap it never uses.
+@mixin ad-layout-state($base, $state, $padding, $gap: null) {
+  padding: prepareMediaVariable(
+    #{$base}-#{$state}-pg,
+    prepareMediaVariable(#{$base}-dt-se-pg, $padding)
+  );
+  @if $gap != null {
+    gap: prepareMediaVariable(
+      #{$base}-#{$state}-im-gp,
+      prepareMediaVariable(#{$base}-dt-se-im-gp, $gap)
+    );
+  }
+}
+
+// One key of the profile tree icon, resolved for an interaction state.
+//
+// $state is the state segment ("dt-se" | "hr-se" | "sd-se") and $key the icon key
+// ("in-se" / "in-c1" for the collapsed icon, "in-se-ed" / "in-cr-ed" for the
+// expanded one). Hover and selected fall back to the default state, so editing
+// Default still cascades — the same rule the rows either side of the icon follow.
+// The innermost fallback is the stateless variable this section used before it had
+// states, which is what keeps trees saved back then rendering unchanged.
+@function ad-tree-icon-var($state, $key, $fallback) {
+  $legacy: prepareMediaVariable(#{$ad-tree-icon}-#{$key}, $fallback);
+
+  @if $state == "dt-se" {
+    @return prepareMediaVariable(#{$ad-tree-icon}-dt-se-#{$key}, $legacy);
+  }
+
+  @return prepareMediaVariable(
+    #{$ad-tree-icon}-#{$state}-#{$key},
+    prepareMediaVariable(#{$ad-tree-icon}-dt-se-#{$key}, $legacy)
+  );
+}
+
+// Size + colour of the tree icon for one state. The colour is applied to the
+// element and to the fetched SVG's own stroke/fill, since a custom icon may
+// hardcode them (parts explicitly set to "none" are left alone).
+@mixin ad-tree-icon($state, $sizeKey, $colorKey, $fallbackSize: 20px, $fallbackColor: #002a4e) {
+  $size: ad-tree-icon-var($state, $sizeKey, $fallbackSize);
+  $color: ad-tree-icon-var($state, $colorKey, $fallbackColor);
+
+  color: $color;
+
+  svg {
+    width: $size;
+    height: $size;
+
+    &[stroke]:not([stroke="none"]),
+    [stroke]:not([stroke="none"]) {
+      stroke: $color;
+    }
+    &[fill]:not([fill="none"]),
+    [fill]:not([fill="none"]) {
+      fill: $color;
+    }
+  }
 }
 
 @mixin ad-design-state($base, $state) {
@@ -271,6 +425,8 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
           );
           text-decoration: var(--_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue)));
           padding: prepareMediaVariable(--_ctm-dn-te-pg);
+          @include ad-text-transform(--_ctm-dn-te);
+          @include ad-text-overflow;
         }
       }
 
@@ -301,13 +457,23 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
         .allocation__item {
           @import "./product-image-allocation.scss";
 
+          // The configured Width must NOT go into flex-basis. In grid view the card
+          // is a column flex container, where basis is the main axis — the HEIGHT —
+          // so putting the width there silently overrode the Height (px) the import
+          // above sets, and the control looked dead. `auto` lets Width and Height
+          // each land on their own axis in both views; `0 0` still keeps the image
+          // from shrinking, which is the only thing the explicit basis was for.
           .product__image_element {
-            flex: 0 0 prepareMediaVariable(--_ctm-dn-ie-lt-wh);
+            flex: 0 0 auto;
           }
 
           display: flex;
           flex-direction: column;
-          gap: 10px;
+          // Allocation > Item Gap. Spaces the header from the card grid below it;
+          // the same value spaces the header's own two parts (see `.showcase__title`),
+          // so name -> quota details -> cards keep one rhythm. 10px is what was
+          // hardcoded here before, so an untouched element does not move.
+          gap: prepareMediaVariable(--_ctm-dn-an-im-gp, 10px);
           background-color: var(
             --_ctm-mob-dn-an-an-im-bd-cr,
             var(--_ctm-tab-dn-an-an-im-bd-cr, var(--_ctm-dn-an-an-im-bd-cr))
@@ -357,214 +523,32 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
             var(--_ctm-tab-dn-an-an-im-pg, var(--_ctm-dn-an-an-im-pg))
           );
 
-          .quota__left {
-            background-color: var(
-              --_ctm-mob-dn-an-qa-lt-bd-cr,
-              var(--_ctm-tab-dn-an-qa-lt-bd-cr, var(--_ctm-dn-an-qa-lt-bd-cr))
-            );
-
-            border-color: var(
-              --_ctm-mob-dn-an-qa-lt-br-cr,
-              var(--_ctm-tab-dn-an-qa-lt-br-cr, var(--_ctm-dn-an-qa-lt-br-cr))
-            );
-
-            border-style: var(
-              --_ctm-mob-dn-an-qa-lt-br-se,
-              var(--_ctm-tab-dn-an-qa-lt-br-se, var(--_ctm-dn-an-qa-lt-br-se))
-            );
-
-            border-width: var(
-              --_ctm-mob-dn-an-qa-lt-br-wh,
-              var(--_ctm-tab-dn-an-qa-lt-br-wh, var(--_ctm-dn-an-qa-lt-br-wh))
-            );
-
-            border-radius: var(
-              --_ctm-mob-dn-an-qa-lt-br-rs,
-              var(--_ctm-tab-dn-an-qa-lt-br-rs, var(--_ctm-dn-an-qa-lt-br-rs))
-            );
-
-            box-shadow: var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-dn-an-qa-lt-sw-ae,
-                  var(--_ctm-tab-dn-an-qa-lt-sw-ae, var(--_ctm-dn-an-qa-lt-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-an-qa-lt-sw-br,
-                  var(--_ctm-tab-dn-an-qa-lt-sw-br, var(--_ctm-dn-an-qa-lt-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-an-qa-lt-sw-sd,
-                  var(--_ctm-tab-dn-an-qa-lt-sw-sd, var(--_ctm-dn-an-qa-lt-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-an-qa-lt-sw-cr,
-                  var(--_ctm-tab-dn-an-qa-lt-sw-cr, var(--_ctm-dn-an-qa-lt-sw-cr))
-                )
-            );
-            white-space: nowrap;
-
-            height: 100%;
-
-            padding: prepareMediaVariable(--_ctm-dn-an-qa-lt-pg);
-            .label {
-              color: var(
-                --_ctm-mob-dn-an-qa-lt-cr,
-                var(--_ctm-tab-dn-an-qa-lt-cr, var(--_ctm-dn-an-qa-lt-cr))
-              );
-              font-family: var(
-                --_ctm-mob-dn-an-qa-lt-ft-fy,
-                var(--_ctm-tab-dn-an-qa-lt-ft-fy, var(--_ctm-dn-an-qa-lt-ft-fy))
-              );
-              font-size: var(
-                --_ctm-mob-dn-an-qa-lt-ft-se,
-                var(--_ctm-tab-dn-an-qa-lt-ft-se, var(--_ctm-dn-an-qa-lt-ft-se))
-              );
-              font-weight: var(
-                --_ctm-mob-dn-an-qa-lt-ft-wt,
-                var(--_ctm-tab-dn-an-qa-lt-ft-wt, var(--_ctm-dn-an-qa-lt-ft-wt))
-              );
-              font-style: var(
-                --_ctm-mob-dn-an-qa-lt-ft-se-ic,
-                var(--_ctm-tab-dn-an-qa-lt-ft-se-ic, var(--_ctm-dn-an-qa-lt-ft-se-ic))
-              );
-              text-align: var(
-                --_ctm-mob-dn-an-qa-lt-tt-an,
-                var(--_ctm-tab-dn-an-qa-lt-tt-an, var(--_ctm-dn-an-qa-lt-tt-an))
-              );
-              letter-spacing: var(
-                --_ctm-mob-dn-an-qa-lt-lr-sg,
-                var(--_ctm-tab-dn-an-qa-lt-lr-sg, var(--_ctm-dn-an-qa-lt-lr-sg))
-              );
-              line-height: var(
-                --_ctm-mob-dn-an-qa-lt-le-ht,
-                var(--_ctm-tab-dn-an-qa-lt-le-ht, var(--_ctm-dn-an-qa-lt-le-ht))
-              );
-              text-decoration: var(
-                --_ctm-mob-dn-an-qa-lt-ue,
-                var(--_ctm-tab-dn-an-qa-lt-ue, var(--_ctm-dn-an-qa-lt-ue))
-              );
-            }
-            .value {
-              // padding-block-end: var(--_sf-dc-pd-bt);
+          // Quota details in the allocation header. It renders the same embedded
+          // Quota Details element the cards do, from its own copy of the settings,
+          // so the rules come from a rebound copy of the card stylesheet rather than
+          // being written out again here.
+          .showcase__title {
+            // A row now, because the view switcher sits in this header beside the
+            // name and quota rather than up in `.main__header`. `flex-start` lets the
+            // switcher's own Vertical Alignment decide where it sits against the
+            // taller text column — in a row, align-self IS the vertical axis, which
+            // is what Top / Center / Bottom means.
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: prepareMediaVariable(--_ctm-dn-an-im-gp, 10px);
 
-              color: var(
-                --_ctm-mob-dn-an-qa-lt-cr-dc,
-                var(--_ctm-tab-dn-an-qa-lt-cr-dc, var(--_ctm-dn-an-qa-lt-cr-dc))
-              );
-              font-family: var(
-                --_ctm-mob-dn-an-qa-lt-ft-fy-dc,
-                var(--_ctm-tab-dn-an-qa-lt-ft-fy-dc, var(--_ctm-dn-an-qa-lt-ft-fy-dc))
-              );
-              font-size: var(
-                --_ctm-mob-dn-an-qa-lt-ft-se-dc,
-                var(--_ctm-tab-dn-an-qa-lt-ft-se-dc, var(--_ctm-dn-an-qa-lt-ft-se-dc))
-              );
-              font-weight: var(
-                --_ctm-mob-dn-an-qa-lt-ft-wt-dc,
-                var(--_ctm-tab-dn-an-qa-lt-ft-wt-dc, var(--_ctm-dn-an-qa-lt-ft-wt-dc))
-              );
-              font-style: var(
-                --_ctm-mob-dn-an-qa-lt-ft-se-ic-dc,
-                var(--_ctm-tab-dn-an-qa-lt-ft-se-ic-dc, var(--_ctm-dn-an-qa-lt-ft-se-ic-dc))
-              );
-              text-align: var(
-                --_ctm-mob-dn-an-qa-lt-tt-an-dc,
-                var(--_ctm-tab-dn-an-qa-lt-tt-an-dc, var(--_ctm-dn-an-qa-lt-tt-an-dc))
-              );
-              letter-spacing: var(
-                --_ctm-mob-dn-an-qa-lt-lr-sg-dc,
-                var(--_ctm-tab-dn-an-qa-lt-lr-sg-dc, var(--_ctm-dn-an-qa-lt-lr-sg-dc))
-              );
-              line-height: var(
-                --_ctm-mob-dn-an-qa-lt-le-ht-dc,
-                var(--_ctm-tab-dn-an-qa-lt-le-ht-dc, var(--_ctm-dn-an-qa-lt-le-ht-dc))
-              );
-              text-decoration: var(
-                --_ctm-mob-dn-an-qa-lt-ue-dc,
-                var(--_ctm-tab-dn-an-qa-lt-ue-dc, var(--_ctm-dn-an-qa-lt-ue-dc))
-              );
-            }
-          }
-          .days__left {
-            .label {
-              color: var(
-                --_ctm-mob-dn-an-es-in-cr,
-                var(--_ctm-tab-dn-an-es-in-cr, var(--_ctm-dn-an-es-in-cr))
-              );
-              font-family: var(
-                --_ctm-mob-dn-an-es-in-ft-fy,
-                var(--_ctm-tab-dn-an-es-in-ft-fy, var(--_ctm-dn-an-es-in-ft-fy))
-              );
-              font-size: var(
-                --_ctm-mob-dn-an-es-in-ft-se,
-                var(--_ctm-tab-dn-an-es-in-ft-se, var(--_ctm-dn-an-es-in-ft-se))
-              );
-              font-weight: var(
-                --_ctm-mob-dn-an-es-in-ft-wt,
-                var(--_ctm-tab-dn-an-es-in-ft-wt, var(--_ctm-dn-an-es-in-ft-wt))
-              );
-              font-style: var(
-                --_ctm-mob-dn-an-es-in-ft-se-ic,
-                var(--_ctm-tab-dn-an-es-in-ft-se-ic, var(--_ctm-dn-an-es-in-ft-se-ic))
-              );
-              text-align: var(
-                --_ctm-mob-dn-an-es-in-tt-an,
-                var(--_ctm-tab-dn-an-es-in-tt-an, var(--_ctm-dn-an-es-in-tt-an))
-              );
-              letter-spacing: var(
-                --_ctm-mob-dn-an-es-in-lr-sg,
-                var(--_ctm-tab-dn-an-es-in-lr-sg, var(--_ctm-dn-an-es-in-lr-sg))
-              );
-              line-height: var(
-                --_ctm-mob-dn-an-es-in-le-ht,
-                var(--_ctm-tab-dn-an-es-in-le-ht, var(--_ctm-dn-an-es-in-le-ht))
-              );
-              text-decoration: var(
-                --_ctm-mob-dn-an-es-in-ue,
-                var(--_ctm-tab-dn-an-es-in-ue, var(--_ctm-dn-an-es-in-ue))
-              );
+            // The name and quota keep their own column, so Allocation > Item Gap goes
+            // on spacing those two rather than pushing the switcher around.
+            .showcase__title__info {
+              display: flex;
+              flex-direction: column;
+              gap: prepareMediaVariable(--_ctm-dn-an-im-gp, 10px);
+              flex: 1;
+              min-width: 0;
             }
-            .value {
-              // padding-block-end: var(--_sf-dc-pd-bt);
 
-              color: var(
-                --_ctm-mob-dn-an-es-in-cr-dc,
-                var(--_ctm-tab-dn-an-es-in-cr-dc, var(--_ctm-dn-an-es-in-cr-dc))
-              );
-              font-family: var(
-                --_ctm-mob-dn-an-es-in-ft-fy-dc,
-                var(--_ctm-tab-dn-an-es-in-ft-fy-dc, var(--_ctm-dn-an-es-in-ft-fy-dc))
-              );
-              font-size: var(
-                --_ctm-mob-dn-an-es-in-ft-se-dc,
-                var(--_ctm-tab-dn-an-es-in-ft-se-dc, var(--_ctm-dn-an-es-in-ft-se-dc))
-              );
-              font-weight: var(
-                --_ctm-mob-dn-an-es-in-ft-wt-dc,
-                var(--_ctm-tab-dn-an-es-in-ft-wt-dc, var(--_ctm-dn-an-es-in-ft-wt-dc))
-              );
-              font-style: var(
-                --_ctm-mob-dn-an-es-in-ft-se-ic-dc,
-                var(--_ctm-tab-dn-an-es-in-ft-se-ic-dc, var(--_ctm-dn-an-es-in-ft-se-ic-dc))
-              );
-              text-align: var(
-                --_ctm-mob-dn-an-es-in-tt-an-dc,
-                var(--_ctm-tab-dn-an-es-in-tt-an-dc, var(--_ctm-dn-an-es-in-tt-an-dc))
-              );
-              letter-spacing: var(
-                --_ctm-mob-dn-an-es-in-lr-sg-dc,
-                var(--_ctm-tab-dn-an-es-in-lr-sg-dc, var(--_ctm-dn-an-es-in-lr-sg-dc))
-              );
-              line-height: var(
-                --_ctm-mob-dn-an-es-in-le-ht-dc,
-                var(--_ctm-tab-dn-an-es-in-le-ht-dc, var(--_ctm-dn-an-es-in-le-ht-dc))
-              );
-              text-decoration: var(
-                --_ctm-mob-dn-an-es-in-ue-dc,
-                var(--_ctm-tab-dn-an-es-in-ue-dc, var(--_ctm-dn-an-es-in-ue-dc))
-              );
-            }
+            @import "./allocation-header-quota-details.scss";
           }
 
           .allocation__name {
@@ -651,6 +635,8 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
               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;
           }
         }
 
@@ -707,107 +693,191 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
               }
             }
           }
-          .button__group {
-            display: flex;
-            gap: 12px;
-            margin-left: auto;
+        }
+
+        // The view switcher lives in the allocation header (`.showcase__title`), not
+        // in `.main__header` where it started, so its rules sit at showcase level and
+        // reach it wherever it is nested.
+        .button__group {
+          display: flex;
+          gap: 12px;
+          margin-left: auto;
+          // Grid View Control Style > Layout Style > Vertical Alignment. The
+          // renderer publishes the stored word (top / center / bottom); those are
+          // not align-self keywords, so the mapping is done here rather than
+          // written into every saved element.
+          align-self: center;
+          &[data-vertical-align="top"] {
+            align-self: flex-start;
           }
-          .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;
+          &[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;
 
-            .btn {
-              // display: inline-block;
-              // // padding: 8px;
-              // display: flex;
-              // align-items: center;
-              // justify-content: center;
-
-              display: var(--_d-flex);
-              padding: 0px;
-              --_width-20: 20px;
-              // $size: var(--_width-40);
-              $size: #{var(
-                  --_sf-at-btn-size,
-                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
-                )};
-              width: calc(#{$size} * 2);
-              height: calc(#{$size} * 2);
+            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;
-              background: var(
-                --_sf-at-btn-bd,
-                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
-              );
+              width: 100%;
+              height: 100%;
+              padding: 0;
+              border: none;
+              background: transparent;
+            }
 
-              cursor: pointer;
-              button {
-                display: flex;
-              }
-              // &:hover {
-              //   background-color: var(--_gray-100);
-              // }
+            // 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;
 
-              &.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)
-                  )};
-                // 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 {
+              // 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);
-
-                path {
-                  stroke: var(
-                    --_sf-at-pt-cl,
-                    #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
-                  );
-                }
+                object-fit: contain;
               }
+            }
 
-              &:first-of-type {
-                border-radius: 4px 0 0 4px;
-              }
-              &:last-of-type {
-                border-radius: 0 4px 4px 0;
+            // &:hover {
+            //   background-color: var(--_gray-100);
+            // }
+
+            &.active {
+              // --_sf-at-pt-cl: var(--_gray-700);
+              --_sf-at-btn-size: #{prepareMediaVariable(
+                  --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-se,
+                  var(--_width-20)
+                )};
+              --_sf-at-pt-cl: #{prepareMediaVariable(
+                  --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-c1,
+                  var(--_gray-700)
+                )};
+              --_sf-at-btn-bd: #{prepareMediaVariable(
+                  --_ctm-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
+                  var(--_gray-200)
+                )};
+              // Same re-pointing trick as the icon vars above: the padding and
+              // shadow declarations stay written once and simply re-resolve
+              // against the selected state's values.
+              --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-pg, 0)};
+              --_sf-at-btn-sw: #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-ae, 0 0)}
+                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-br, 0)}
+                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-sd, 0)}
+                #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-sd-se-sw-cr, transparent)};
+              // background: var(--_gray-200);
+            }
+            // &.active {
+            //   background-color: #ced4f6;
+            //   button {
+            //     svg {
+            //       path {
+            //         stroke: var(--_primary-500);
+            //       }
+            //     }
+            //   }
+            // }
+            // &:first-child {
+            //   border-right: 1px solid var(--_gray-200);
+            // }
+
+            svg {
+              width: calc(#{$size} * 1);
+              height: calc(#{$size} * 1);
+
+              path {
+                stroke: var(
+                  --_sf-at-pt-cl,
+                  #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
+                );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
               }
             }
+
+            &:first-of-type {
+              border-radius: 4px 0 0 4px;
+            }
+            &:last-of-type {
+              border-radius: 0 4px 4px 0;
+            }
           }
         }
         // products header styles
@@ -906,7 +976,12 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
             //   1fr
             // );
             --_sf-cl-count: #{prepareMediaVariable(--_ctm-dn-an-an-im-is-pr-rw, 1)};
-            --_sf-cl-gp: #{prepareMediaVariable(--_ctm-dn-an-an-im-im-gp, 0px)};
+            // 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 {
@@ -929,15 +1004,24 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
             }
           }
           display: grid;
-          gap: var(
-            --_ctm-mob-dn-an-an-im-im-gp,
-            var(--_ctm-tab-dn-an-an-im-im-gp, var(--_ctm-dn-an-an-im-im-gp, 0px))
+          // 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;
-            gap: 12px;
+            // 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,
@@ -1089,13 +1173,11 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
                   var(--_ctm-tab-dn-ne-ue, var(--_ctm-dn-ne-ue))
                 );
                 padding: prepareMediaVariable(--_ctm-dn-ne-pg);
-                text-transform: prepareMediaVariable(--_ctm-dn-ne-tt-tm);
+                @include ad-text-transform(--_ctm-dn-ne);
 
                 & > span {
                   width: 100%;
-                  &#{$overflowSelector} {
-                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-                  }
+                  @include ad-text-overflow;
                 }
                 &[data-has-link="true"] {
                   cursor: pointer;
@@ -1111,6 +1193,15 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
                 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;
+                }
               }
             }
 
@@ -1118,6 +1209,11 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
               display: flex;
               align-items: center;
               gap: 6px;
+              @include ad-section-box(--_ctm-dn-bd);
+
+              .brand__icon {
+                @include ad-section-icon(--_ctm-dn-bd);
+              }
 
               .value {
                 // padding-block-end: var(--_sf-dc-pd-bt);
@@ -1158,6 +1254,8 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
                   --_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)));
@@ -1193,12 +1291,19 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
                   --_ctm-mob-dn-bd-ue,
                   var(--_ctm-tab-dn-bd-ue, var(--_ctm-dn-bd-ue))
                 );
+                @include ad-text-transform(--_ctm-dn-bd);
+                @include ad-text-overflow;
               }
             }
             .code {
               display: flex;
               align-items: center;
               gap: 6px;
+              @include ad-section-box(--_ctm-dn-ce);
+
+              .code__icon {
+                @include ad-section-icon(--_ctm-dn-ce);
+              }
 
               .value {
                 // padding-block-end: var(--_sf-dc-pd-bt);
@@ -1239,6 +1344,8 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
                   --_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)));
@@ -1274,6 +1381,8 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
                   --_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 {
@@ -1347,6 +1456,8 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
                 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;
             }
           }
 
@@ -1504,6 +1615,18 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
               --_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,
@@ -1585,6 +1708,21 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
 
           text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
 
+          // Same shape as the font rules above: the base value is the default
+          // state, and the `&:hover` block below re-points --_sf-hr-* at the hover
+          // state so this declaration re-resolves without being repeated.
+          text-transform: var(
+            --_sf-hr-tt-tm,
+            prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-tm, none)
+          );
+
+          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-wp, normal));
+
+          word-break: var(
+            --_sf-hr-wd-bk,
+            prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-wd-bk, normal)
+          );
+
           [data-element-style="Text"] {
             display: inline-block;
             width: 100%;
@@ -1672,6 +1810,18 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
               --_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,
@@ -1758,6 +1908,21 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
 
             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%;
@@ -1880,65 +2045,67 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
             margin-top: 10px;
           }
         }
+        // Profiles Slider > Pagination Arrows. These rules used to read
+        // `--_ctm-dn-pn-as-*`, a `design.paginationArrows` node that does not exist
+        // on this element — so every one of them fell through to its hardcoded
+        // default and the panel could not reach the strip's arrows at all. They now
+        // read design.slider.paginationArrows, and each fallback is the value that
+        // was hardcoded, so an untouched strip renders exactly as before.
         &[data-control-type="Side"] {
           .left-button,
           .right-button {
-            background-color: transparent;
+            background-color: prepareMediaVariable(#{$ad-slider-arrows}-bd-cr, transparent);
           }
         }
         &[data-background-shape="Round"] {
           .left-button,
           .right-button {
-            background-color: #f2f5f5;
+            background-color: prepareMediaVariable(#{$ad-slider-arrows}-bd-cr, #f2f5f5);
             box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
           }
         }
-        .left-button {
-          padding: 10px;
-          border-radius: 50%;
-          border: none;
-          width: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
+        .left-button,
+        .right-button {
+          padding: prepareMediaVariable(#{$ad-slider-arrows}-pg, 10px);
+          border-color: prepareMediaVariable(#{$ad-slider-arrows}-br-cr, transparent);
+          border-style: prepareMediaVariable(#{$ad-slider-arrows}-br-se, solid);
+          border-width: prepareMediaVariable(#{$ad-slider-arrows}-br-wh, 0);
+          // 50%, not prepareMediaVariable's `inherit` tail: an arrow with no
+          // configured radius has always been a circle.
+          border-radius: prepareMediaVariable(#{$ad-slider-arrows}-br-rs, 50%);
+          // 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);
+          // Opt-in, like the gallery's: these arrows have never cast a shadow.
+          box-shadow: none;
+
+          &[data-show-shadow="true"] {
+            box-shadow: prepareMediaVariable(#{$ad-slider-arrows}-sw-ae, 0 0)
+              prepareMediaVariable(#{$ad-slider-arrows}-sw-br, 0)
+              prepareMediaVariable(#{$ad-slider-arrows}-sw-sd, 0)
+              prepareMediaVariable(#{$ad-slider-arrows}-sw-cr, transparent);
+          }
 
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           outline: none;
-          margin-left: 12px;
-          &:disabled {
-            & svg {
-              path {
-                stroke: #c3b7b7;
-              }
-            }
+
+          &[data-show-border="false"] {
+            border: none;
           }
-        }
-        .right-button {
-          border-radius: 50%;
-          border: none;
-          width: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
 
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-right: 12px;
-          padding: 10px;
+          // Background Shape overrides the configured radius when it names one;
+          // "None" leaves the radius alone.
+          &[data-background-shape="Round"] {
+            border-radius: 50%;
+          }
+          &[data-background-shape="Square"] {
+            border-radius: 0;
+          }
 
           &:disabled {
             & svg {
@@ -1948,27 +2115,30 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
             }
           }
         }
+        .left-button {
+          margin-left: 12px;
+        }
+        .right-button {
+          margin-right: 12px;
+        }
         .icon {
           display: flex;
 
           svg {
-            width: calc(
-              var(
-                  --_ctm-mob-dn-pn-as-aw-se,
-                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-                ) *
-                0.5
-            );
-            height: calc(
-              var(
-                  --_ctm-mob-dn-pn-as-aw-se,
-                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-                ) *
-                0.5
-            );
-
-            path {
-              stroke: #514949;
+            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);
             }
           }
         }
@@ -2205,9 +2375,11 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
     .ad_sidebar_heading {
       white-space: nowrap;
       margin: 0;
-      text-transform: uppercase;
       line-height: 1.25;
-      @include ad-font($ad-heading, #002a4e, 16px, 400);
+      // `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 {
@@ -2235,7 +2407,7 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
       width: 24px;
       height: 24px;
       flex-shrink: 0;
-      color: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
+      color: ad-tree-icon-var("dt-se", "in-c1", #002a4e);
     }
 
     .ad_chevron {
@@ -2243,64 +2415,100 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
       align-items: center;
       justify-content: center;
       transition: transform 0.15s ease;
-      color: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
-
-      svg {
-        width: prepareMediaVariable(#{$ad-tree-icon}-in-se, 20px);
-        height: prepareMediaVariable(#{$ad-tree-icon}-in-se, 20px);
-        // Apply the configured colour even when the fetched SVG hardcodes its own
-        // stroke/fill (skip parts explicitly set to "none").
-        &[stroke]:not([stroke="none"]),
-        [stroke]:not([stroke="none"]) {
-          stroke: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
-        }
-        &[fill]:not([fill="none"]),
-        [fill]:not([fill="none"]) {
-          fill: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
-        }
-      }
+      @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 {
-      color: prepareMediaVariable(#{$ad-tree-icon}-in-cr-ed, #002a4e);
-
-      svg {
-        width: prepareMediaVariable(#{$ad-tree-icon}-in-se-ed, 20px);
-        height: prepareMediaVariable(#{$ad-tree-icon}-in-se-ed, 20px);
-        &[stroke]:not([stroke="none"]),
-        [stroke]:not([stroke="none"]) {
-          stroke: prepareMediaVariable(#{$ad-tree-icon}-in-cr-ed, #002a4e);
-        }
-        &[fill]:not([fill="none"]),
-        [fill]:not([fill="none"]) {
-          fill: prepareMediaVariable(#{$ad-tree-icon}-in-cr-ed, #002a4e);
-        }
-      }
+      @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;
@@ -2319,17 +2527,21 @@ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
 
     .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);