@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.61

package/dist/bundleCategories.scss

@@ -0,0 +1,301 @@
+/**
+ * Bundle Categories — the category strip above a bundle's product list.
+ *
+ * Mirrors the category tabs in the Bundle Details element: a horizontal row of
+ * cards, each with the category's image, its name, how many products it holds
+ * and how many are selected. The row is an Embla carousel, so the slides are
+ * laid out by the carousel and only the card itself is styled here.
+ */
+[data-div-type="element"] {
+  &[data-element-type="bundleCategories"] {
+    // The builder writes width/height/margin/padding as --_ctm-* custom properties
+    // rather than as plain CSS. Without consuming them the Layout panel appears to
+    // do nothing — which is exactly how this element behaved.
+    //
+    // `--_sf-nw-wh` closes the chain: it is the width the element emits itself
+    // while a resize drag is in flight, before the percentage is committed.
+    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, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, 0)));
+    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, 0)));
+
+    // Show Border / Show Shadow are CONTROLS, not CSS, so the builder never turns
+    // them into `--_ctm-*` variables — the element surfaces them as data
+    // attributes and the gates below read those.
+    &[data-show-border="false"] > .wrapper {
+      border-style: none;
+    }
+
+    // A gate of its own rather than the shared `--_show-shadow`: custom properties
+    // inherit, so a parent whose shadow is switched off would silently clear this
+    // element's too.
+    &[data-show-shadow="false"] {
+      --_sf-bc-show-shadow: none;
+    }
+
+    // Background type is chosen in the Design tab and written onto the element as
+    // `data-background-type`; gradients add `data-gradient-type`. Both are gated
+    // exactly as the repeater item gates them, and like it the painted surface is
+    // the wrapper rather than the root — the root carries the builder's own
+    // `#<id>` rule and cannot be overridden from this stylesheet.
+    &[data-background-type="color"] > .wrapper {
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+    }
+
+    &[data-background-type="image"] > .wrapper {
+      background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
+    }
+
+    &[data-background-type="gradient"] > .wrapper {
+      --_sf-bc-gradient-angle: calc(
+        var(--_ctm-mob-dn-gt-ae, var(--_ctm-tab-dn-gt-ae, var(--_ctm-dn-gt-ae, 90))) * 1deg
+      );
+      --_sf-bc-gradient-start-color: var(
+        --_ctm-mob-dn-gt-st-cr,
+        var(--_ctm-tab-dn-gt-st-cr, var(--_ctm-dn-gt-st-cr, transparent))
+      );
+      --_sf-bc-gradient-start-position: calc(
+        var(--_ctm-mob-dn-gt-st-pn, var(--_ctm-tab-dn-gt-st-pn, var(--_ctm-dn-gt-st-pn, 0))) * 1%
+      );
+      --_sf-bc-gradient-end-color: var(
+        --_ctm-mob-dn-gt-ed-cr,
+        var(--_ctm-tab-dn-gt-ed-cr, var(--_ctm-dn-gt-ed-cr, transparent))
+      );
+      --_sf-bc-gradient-end-position: calc(
+        var(--_ctm-mob-dn-gt-ed-pn, var(--_ctm-tab-dn-gt-ed-pn, var(--_ctm-dn-gt-ed-pn, 100))) * 1%
+      );
+      --_sf-bc-gradient-position: var(
+        --_ctm-mob-dn-gt-pn,
+        var(--_ctm-tab-dn-gt-pn, var(--_ctm-dn-gt-pn, center))
+      );
+    }
+
+    &[data-gradient-type="Linear Gradient"] > .wrapper {
+      background-image: linear-gradient(
+        var(--_sf-bc-gradient-angle),
+        var(--_sf-bc-gradient-start-color) var(--_sf-bc-gradient-start-position),
+        var(--_sf-bc-gradient-end-color) var(--_sf-bc-gradient-end-position)
+      );
+    }
+
+    &[data-gradient-type="Radial Gradient"] > .wrapper {
+      background-image: radial-gradient(
+        circle at var(--_sf-bc-gradient-position),
+        var(--_sf-bc-gradient-start-color) var(--_sf-bc-gradient-start-position),
+        var(--_sf-bc-gradient-end-color) var(--_sf-bc-gradient-end-position)
+      );
+    }
+    background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
+    background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
+    background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
+
+    border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+    border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+    border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+    border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+    // Show Border / Show Shadow are CONTROLS, not CSS, so they never become
+    // variables — the element surfaces them as data attributes instead.
+    &[data-show-border="false"] {
+      border-style: none;
+    }
+
+    // A gate of its own rather than the shared `--_show-shadow`: custom properties
+    // inherit, so a parent whose shadow is switched off would silently clear this
+    // element's too.
+    &[data-show-shadow="false"] {
+      --_sf-bc-show-shadow: none;
+    }
+
+    // Per-part fallbacks: without them one unset part invalidates the whole
+    // `box-shadow` at computed-value time and it resolves to `none`.
+    box-shadow: var(
+      --_sf-bc-show-shadow,
+      var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae, 0)))
+        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br, 0)))
+        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd, 0)))
+        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr, transparent)))
+    );
+
+    // Height goes on the wrapper, not here: the builder emits the element's own
+    // default styles as `#<id>{ height: auto }`, and an id selector outranks this
+    // stylesheet — so a height set here could never win and the top/bottom resize
+    // handles moved nothing. The wrapper is outside that rule's reach.
+    > .wrapper {
+      width: 100%;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, 100%))) !important;
+
+      // Border, radius and shadow ride on the wrapper alongside the background so
+      // the whole painted surface is one box.
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+      background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
+      background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
+      background-attachment: var(
+        --_ctm-mob-dn-bd-at,
+        var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))
+      );
+      // Position is stored as separate X and Y values, not one shorthand.
+      background-position: var(
+          --_ctm-mob-dn-bd-pn-x,
+          var(--_ctm-tab-dn-bd-pn-x, var(--_ctm-dn-bd-pn-x, center))
+        )
+        var(--_ctm-mob-dn-bd-pn-y, var(--_ctm-tab-dn-bd-pn-y, var(--_ctm-dn-bd-pn-y, center)));
+
+      // Per-part fallbacks: without them one unset part invalidates the whole
+      // `box-shadow` at computed-value time and it resolves to `none`.
+      box-shadow: var(
+        --_sf-bc-show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae, 0)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br, 0)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd, 0)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr, transparent)))
+      );
+    }
+
+    // Bundle name above the strip, matching the heading Bundle Details prints.
+    .bundle__name {
+      margin: 0 0 12px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .bundle__categories {
+      width: 100%;
+
+      // Embla's own classes. The container has to be an explicit row — otherwise
+      // the slides stack — and each slide needs a width of its own, or it
+      // collapses to the widest word and the labels wrap per character.
+      .embla__container {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .embla__slide {
+        flex: 0 0 auto;
+        min-width: 240px;
+      }
+
+      // Arrow placement is driven by the carousel's control position, which the
+      // shared EmblaCarouselBasic stamps onto `.embla` as `data-control-type`.
+      // In "Side" mode — the default this element passes — it renders the two
+      // buttons as bare children of `.embla` with no wrapper, so an earlier rule
+      // written against an `.arrow-navigation` wrapper never matched and the
+      // arrows stacked above and below the strip.
+      //
+      // Keyed and sized exactly as bundleDetails does it: the viewport gives up
+      // 120px so the absolutely-placed arrows sit beside the cards rather than
+      // on top of them.
+      .embla {
+        position: relative;
+
+        &[data-control-type="Side"] {
+          .embla__viewport {
+            width: calc(100% - 120px);
+            margin-inline: auto;
+          }
+
+          .left-button,
+          .right-button {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+          }
+
+          .left-button {
+            left: 0;
+          }
+
+          .right-button {
+            right: 0;
+          }
+        }
+      }
+    }
+
+    .bundle__category {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      font: inherit;
+      text-align: left;
+      width: 100%;
+      min-width: 240px;
+      white-space: nowrap;
+
+      // The open tab. Kept to a border rather than a fill so the strip stays quiet
+      // against the product list below it.
+      &[data-is-active="true"] {
+        border-color: #1f1f1f;
+      }
+    }
+
+    .bundle__category__image {
+      flex: 0 0 auto;
+      width: 56px;
+      height: 56px;
+      overflow: hidden;
+      border-radius: 2px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .bundle__category__text {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-width: 0;
+    }
+
+    .bundle__category__name {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-weight: 600;
+    }
+
+    .bundle__category__tick {
+      color: #2e7d32;
+    }
+
+    .bundle__category__count,
+    .bundle__category__selected {
+      font-size: 12px;
+      opacity: 0.75;
+    }
+
+    // Validation message for this category, shown after a failed add to cart.
+    // `white-space: normal` because the card itself is nowrap.
+    .bundle__category__error {
+      margin-top: 4px;
+      font-size: 12px;
+      color: #c62828;
+      white-space: normal;
+    }
+  }
+}

package/dist/bundleDetails.scss

@@ -3615,11 +3615,20 @@ $defaultValues: (
                       // Divider colour/width come from DividerStylesInstance on widgetStyle
                       // (dividerWeight / dividerColor), with defaults so the line still
                       // renders when nothing is configured.
+                      // Rows sit flush against each other, so the divider is pushed just
+                      // below the row and the row keeps that much margin for it —
+                      // otherwise a thick one grew up over its own label.
+                      &[data-show-divider="true"]:not(:last-child) {
+                        @include dividerGapReserve(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh);
+                      }
                       &[data-show-divider="true"]:not(:last-child)::after {
                         content: "";
                         position: absolute;
                         left: 0;
-                        bottom: 0;
+                        bottom: dividerGapOffset(
+                          0px,
+                          --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh
+                        );
                         width: 100%;
                         height: #{prepareMediaVariable(
                             --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh,

package/dist/button copy.scss

@@ -62,6 +62,18 @@
         --_ctm-mob-dn-hr-se-ft-fy,
         var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
       );
+      --_sf-hr-tt-tm: var(
+        --_ctm-mob-dn-hr-se-tt-tm,
+        var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
+      );
+      --_sf-hr-wd-wp: var(
+        --_ctm-mob-dn-hr-se-wd-wp,
+        var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))
+      );
+      --_sf-hr-wd-bk: var(
+        --_ctm-mob-dn-hr-se-wd-bk,
+        var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))
+      );
       --_sf-hr-fs: var(
         --_ctm-mob-dn-hr-se-ft-se,
         var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
@@ -201,6 +213,22 @@
           --_sf-hr-ff,
           var(--_ctm-mob-dn-dt-se-ft-fy, var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy)))
         );
+        text-transform: var(
+          --_sf-hr-tt-tm,
+          var(--_ctm-mob-dn-dt-se-tt-tm, var(--_ctm-tab-dn-dt-se-tt-tm, var(--_ctm-dn-dt-se-tt-tm)))
+        );
+        word-wrap: var(
+          --_sf-hr-wd-wp,
+          var(--_ctm-mob-dn-dt-se-wd-wp, var(--_ctm-tab-dn-dt-se-wd-wp, var(--_ctm-dn-dt-se-wd-wp)))
+        );
+        word-break: var(
+          --_sf-hr-wd-bk,
+          var(--_ctm-mob-dn-dt-se-wd-bk, var(--_ctm-tab-dn-dt-se-wd-bk, var(--_ctm-dn-dt-se-wd-bk)))
+        );
+        &.flex__overflow {
+          white-space: normal;
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
         font-size: var(
           --_sf-hr-fs,
           var(--_ctm-mob-dn-dt-se-ft-se, var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se)))

package/dist/buy-for-tabs-container-item.scss

@@ -1,80 +1,80 @@
-@use "sass:map";
-@use "sass:list";
-[data-div-type="element"] {
-  &[data-element-type="buyForTabsContainer"] {
-    width: 100%;
-    & > div {
-      &.wrapper {
-        width: 100%;
-        height: 100%;
-        padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
-
-        background-color: var(
-          --_ctm-mob-repe-dn-bd-cr,
-          var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
-        );
-        background-image: var(
-          --_ctm-mob-repe-dn-bd-ie,
-          var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
-        );
-        background-attachment: var(
-          --_ctm-mob-repe-dn-bd-at,
-          var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
-        );
-        background-position: var(
-          --_ctm-mob-repe-dn-bd-pn,
-          var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
-        );
-        background-repeat: var(
-          --_ctm-mob-repe-dn-bd-rt,
-          var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
-        );
-        background-size: var(
-          --_ctm-mob-repe-dn-bd-se,
-          var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
-        );
-        border-radius: var(
-          --_ctm-mob-repe-dn-br-rs,
-          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
-        );
-        border-color: var(
-          --_ctm-mob-repe-dn-br-cr,
-          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-repe-dn-br-se,
-          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-repe-dn-br-wh,
-          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
-        );
-        box-shadow: var(
-          --_hover-show-shadow,
-          var(
-            --_sf-hr-bx-sw,
-            var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-dn-dt-se-sw-ae,
-                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-dt-se-sw-br,
-                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-dt-se-sw-sd,
-                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-dt-se-sw-cr,
-                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
-                )
-            )
-          )
-        );
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+[data-div-type="element"] {
+  &[data-element-type="buyForTabsContainer"] {
+    width: 100%;
+    & > div {
+      &.wrapper {
+        width: 100%;
+        height: 100%;
+        padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
+
+        background-color: var(
+          --_ctm-mob-repe-dn-bd-cr,
+          var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
+        );
+        background-image: var(
+          --_ctm-mob-repe-dn-bd-ie,
+          var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
+        );
+        background-attachment: var(
+          --_ctm-mob-repe-dn-bd-at,
+          var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
+        );
+        background-position: var(
+          --_ctm-mob-repe-dn-bd-pn,
+          var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
+        );
+        background-repeat: var(
+          --_ctm-mob-repe-dn-bd-rt,
+          var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
+        );
+        background-size: var(
+          --_ctm-mob-repe-dn-bd-se,
+          var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
+        );
+        border-radius: var(
+          --_ctm-mob-repe-dn-br-rs,
+          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-repe-dn-br-cr,
+          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-repe-dn-br-se,
+          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-repe-dn-br-wh,
+          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
+        );
+        box-shadow: var(
+          --_hover-show-shadow,
+          var(
+            --_sf-hr-bx-sw,
+            var(
+              --_show-shadow,
+              var(
+                  --_ctm-mob-dn-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-br,
+                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+                )
+            )
+          )
+        );
+      }
+    }
+  }
+}

package/dist/buyForHeaders.scss

@@ -720,10 +720,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                           )
                         );
                         // Overrides the stroke-width presentation attribute baked into the icon markup.
-                        stroke-width: prepareMediaVariable(
-                          --_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh,
-                          1.25
-                        );
+                        stroke-width: prepareMediaVariable(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh, 1.25);
                       }
                     }
 
@@ -1332,10 +1329,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                         )
                       );
                       // Overrides the stroke-width presentation attribute baked into the icon markup.
-                      stroke-width: prepareMediaVariable(
-                        --_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh,
-                        1.25
-                      );
+                      stroke-width: prepareMediaVariable(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh, 1.25);
                     }
                   }
 
@@ -1895,10 +1889,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     path {
                       stroke: var(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-in-c1);
                       // Overrides the stroke-width presentation attribute baked into the icon markup.
-                      stroke-width: prepareMediaVariable(
-                        --_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh,
-                        1.25
-                      );
+                      stroke-width: prepareMediaVariable(--_ctm-buy-dn-ee-ds-wr-my-ct-ct-in-se-wh, 1.25);
                     }
                   }
 

package/dist/cart-details.scss

@@ -153,10 +153,12 @@ $overflowSelector: ".flex__overflow";
               text-transform: prepareMediaVariable(--_ctm-dn-ct-hg-ss-tt-tm);
               word-wrap: prepareMediaVariable(--_ctm-dn-ct-hg-ss-wd-wp);
               word-break: prepareMediaVariable(--_ctm-dn-ct-hg-ss-wd-bk);
+
               &.flex__overflow {
                 white-space: normal;
                 @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
               }
+
               text-align: prepareMediaVariable(--_ctm-dn-ct-hg-ss-tt-an);
               @include cartDetailsTextFlow(--_ctm-dn-ct-hg-ss);
               display: block;
@@ -580,13 +582,12 @@ $overflowSelector: ".flex__overflow";
         border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 4px;
         padding: 10px;
-        border: 1px solid var(--_thm-cs-be-se-3);
         background-color: var(--_base-white);
         border-radius: 4px;
 
         .label {
           display: block;
-          color: var(--_gray-700);
+          color: var(--_thm-cs-be-cr-1);
           font-weight: 500;
           font-size: 14px;
           line-height: 20px;
@@ -894,8 +895,8 @@ $overflowSelector: ".flex__overflow";
               gap: 8px;
 
               img {
-                width: 40px;
-                height: 40px;
+                // width: 40px;
+                // height: 40px;
 
                 border-radius: 50%;
               }
@@ -1477,10 +1478,12 @@ $overflowSelector: ".flex__overflow";
                   var(--_ctm-tab-dn-pt-as-ss-wd-bk, var(--_ctm-dn-pt-as-ss-wd-bk))
                 )
               );
+
               &.flex__overflow {
                 white-space: normal;
                 @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
               }
+
               font-size: var(
                 --_ctm-mob-dn-pt-as-ss-ft-se,
                 var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
@@ -1599,10 +1602,12 @@ $overflowSelector: ".flex__overflow";
                   var(--_ctm-tab-dn-pt-rd-io-wd-bk, var(--_ctm-dn-pt-rd-io-wd-bk))
                 )
               );
+
               &.flex__overflow {
                 white-space: normal;
                 @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
               }
+
               font-size: var(
                 --_ctm-mob-dn-pt-rd-io-ft-se,
                 var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se))
@@ -1842,6 +1847,16 @@ $overflowSelector: ".flex__overflow";
 
             &:hover {
               background-color: var(--_gray-100);
+
+              // The hover target is this 32px wrapper, but the icons carry their own
+              // :hover stroke rule and are smaller than it - hovering the surrounding
+              // padding lit the background while the icon kept its base color. Drive
+              // the stroke from the wrapper so both change together, as the responsive
+              // block below already does.
+              .edit_icon svg path,
+              .wishlist_icon svg path {
+                stroke: var(--_thm-cs-at-py);
+              }
             }
           }
 
@@ -3238,10 +3253,12 @@ $overflowSelector: ".flex__overflow";
                       var(--_ctm-tab-dn-pt-as-ss-wd-bk, var(--_ctm-dn-pt-as-ss-wd-bk))
                     )
                   );
+
                   &.flex__overflow {
                     white-space: normal;
                     @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                   }
+
                   font-size: var(
                     --_ctm-mob-dn-pt-as-ss-ft-se,
                     var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
@@ -3360,10 +3377,12 @@ $overflowSelector: ".flex__overflow";
                       var(--_ctm-tab-dn-pt-rd-io-wd-bk, var(--_ctm-dn-pt-rd-io-wd-bk))
                     )
                   );
+
                   &.flex__overflow {
                     white-space: normal;
                     @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                   }
+
                   font-size: var(
                     --_ctm-mob-dn-pt-rd-io-ft-se,
                     var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se))