@sc-360-v2/storefront-cms-library 0.5.64 → 0.5.66

package/dist/filters.scss

@@ -205,6 +205,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
                 var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
               );
+              // Border of the Clear All button. The section has carried border colour,
+              // style, width and the Show Border toggle all along, but this rule read
+              // none of them, so the whole Border tab did nothing.
+              border-color: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-cr, transparent);
+              border-style: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-se, solid);
+              border-width: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-wh, 0);
+              &[data-clear-all-text-border="false"] {
+                border: none;
+              }
+              // Text Overflow clamps to N lines; the renderer adds the class and
+              // publishes the count as --_sf-line-clamp.
+              &.flex__overflow {
+                white-space: normal;
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
               border-radius: var(
                 --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
                 var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
@@ -369,6 +384,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               align-items: center;
               gap: 10px;
               flex-wrap: wrap;
+
+              // Selected Items View. "Wrap" is the flowing row above — the default and
+              // what this has always been. "Vertical" stacks one chip per line, each
+              // sized to its own text rather than stretched across the column.
+              &[data-selected-items-view="Vertical"] {
+                flex-direction: column;
+                flex-wrap: nowrap;
+                align-items: flex-start;
+              }
               // .selected_item {
               //   display: flex;
               //   gap: 8px;
@@ -802,49 +826,182 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 transition: all 400ms ease-in-out;
               }
             }
+            // Search Bar. Until now only Border, Border Radius and Padding reached
+            // CSS from here, which is why Background Color, the text properties and
+            // Box Shadow all looked dead — nothing read their variables.
+            //
+            // The section carries Default / Focus states now, so everything reads
+            // `sh-br-dt-se-*` (searchBar.defaultState). The old flat `sh-br-*` name is
+            // kept as the fallback on the three that were live before the split, so a
+            // bar styled on an already-published page does not jump.
             .filter__search {
               display: flex;
               align-items: center;
-              // padding: 6px 10px;
-              padding: var(
-                --_sf-hr-sd-im-pg,
-                var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)))
+              width: 100%;
+
+              padding: prepareMediaVariable(
+                --_ctm-dn-sh-br-dt-se-pg,
+                prepareMediaVariable(--_ctm-dn-sh-br-pg)
               );
-              // border: 1px solid var(--_gray-300);
-              border-color: var(
-                --_sf-hr-br-cr,
-                var(
-                  --_ctm-mob-dn-sh-br-br-cr,
-                  var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
-                )
+              background-color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-bd-cr);
+              border-color: prepareMediaVariable(
+                --_ctm-dn-sh-br-dt-se-br-cr,
+                prepareMediaVariable(--_ctm-dn-sh-br-br-cr)
               );
-              border-style: var(
-                --_sf-hr-br-st,
-                var(
-                  --_ctm-mob-dn-sh-br-br-se,
-                  var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
-                )
+              border-style: prepareMediaVariable(
+                --_ctm-dn-sh-br-dt-se-br-se,
+                prepareMediaVariable(--_ctm-dn-sh-br-br-se)
               );
-              border-width: var(
-                --_sf-hr-br-wh,
-                var(
-                  --_ctm-mob-dn-sh-br-br-wh,
-                  var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
-                )
+              border-width: prepareMediaVariable(
+                --_ctm-dn-sh-br-dt-se-br-wh,
+                prepareMediaVariable(--_ctm-dn-sh-br-br-wh)
+              );
+              border-radius: prepareMediaVariable(
+                --_ctm-dn-sh-br-dt-se-br-rs,
+                prepareMediaVariable(--_ctm-dn-sh-br-br-rs)
               );
-              // border-radius: 6px;
-              border-radius: prepareMediaVariable(--_ctm-dn-sh-br-br-rs);
-              width: 100%;
 
+              // Opt-in, like every other Show Shadow in this element: the bar has
+              // never cast one, so it only appears once the toggle is on.
+              box-shadow: none;
+              &[data-show-shadow="true"] {
+                box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-ae, 0 0)
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-br, 0)
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-sd, 0)
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-cr, transparent);
+              }
+              &[data-show-border="false"] {
+                border: none;
+              }
+
+              // Text properties apply to the input and its placeholder, which is the
+              // only text this section owns.
+              input[type="text"] {
+                padding-left: 6px;
+                background-color: transparent;
+                color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr);
+                font-family: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-fy);
+                font-size: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se);
+                font-weight: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-wt);
+                font-style: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se-ic);
+                text-align: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-an);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-lr-sg);
+                line-height: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-le-ht);
+                text-decoration: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ue);
+                text-transform: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-wd-bk);
+
+                &::placeholder {
+                  color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr);
+                }
+              }
+
+              // The magnifier. Size and colour come from the Icon tab; `showIcon`
+              // hides it without removing the button from the flow.
               button {
                 display: flex;
                 svg {
-                  width: 18px;
-                  height: 18px;
+                  width: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px);
+                  height: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px);
+
+                  // A library glyph paints with `stroke` on its paths while an
+                  // uploaded one may use `fill`, or set either on the root.
+                  &[stroke]:not([stroke="none"]),
+                  [stroke]:not([stroke="none"]) {
+                    stroke: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1);
+                  }
+                  &[fill]:not([fill="none"]),
+                  [fill]:not([fill="none"]) {
+                    fill: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1);
+                  }
+                  stroke-width: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-se-wh);
+                }
+                &[data-show-icon="false"] {
+                  display: none;
                 }
               }
-              input[type="text"] {
-                padding-left: 6px;
+
+              // Focus State. `:focus-within` rather than `:focus`, because the focus
+              // lands on the input while the styling belongs to the bar around it.
+              // Each property falls back to its own default-state value, so a focus
+              // style nobody has set is simply the default one.
+              &:focus-within {
+                padding: prepareMediaVariable(
+                  --_ctm-dn-sh-br-fs-se-pg,
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-pg)
+                );
+                background-color: prepareMediaVariable(
+                  --_ctm-dn-sh-br-fs-se-bd-cr,
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-bd-cr)
+                );
+                border-color: prepareMediaVariable(
+                  --_ctm-dn-sh-br-fs-se-br-cr,
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-cr)
+                );
+                border-style: prepareMediaVariable(
+                  --_ctm-dn-sh-br-fs-se-br-se,
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-se)
+                );
+                border-width: prepareMediaVariable(
+                  --_ctm-dn-sh-br-fs-se-br-wh,
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-wh)
+                );
+                border-radius: prepareMediaVariable(
+                  --_ctm-dn-sh-br-fs-se-br-rs,
+                  prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-rs)
+                );
+
+                &[data-focus-show-shadow="true"] {
+                  box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-ae, 0 0)
+                    prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-br, 0)
+                    prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-sd, 0)
+                    prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-cr, transparent);
+                }
+
+                input[type="text"] {
+                  color: prepareMediaVariable(
+                    --_ctm-dn-sh-br-fs-se-cr,
+                    prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr)
+                  );
+                  font-size: prepareMediaVariable(
+                    --_ctm-dn-sh-br-fs-se-ft-se,
+                    prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se)
+                  );
+                  font-weight: prepareMediaVariable(
+                    --_ctm-dn-sh-br-fs-se-ft-wt,
+                    prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-wt)
+                  );
+                  text-transform: prepareMediaVariable(
+                    --_ctm-dn-sh-br-fs-se-tt-tm,
+                    prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-tm)
+                  );
+                }
+
+                button svg {
+                  width: prepareMediaVariable(
+                    --_ctm-dn-sh-br-fs-se-in-se,
+                    prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px)
+                  );
+                  height: prepareMediaVariable(
+                    --_ctm-dn-sh-br-fs-se-in-se,
+                    prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px)
+                  );
+                  &[stroke]:not([stroke="none"]),
+                  [stroke]:not([stroke="none"]) {
+                    stroke: prepareMediaVariable(
+                      --_ctm-dn-sh-br-fs-se-in-c1,
+                      prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1)
+                    );
+                  }
+                  &[fill]:not([fill="none"]),
+                  [fill]:not([fill="none"]) {
+                    fill: prepareMediaVariable(
+                      --_ctm-dn-sh-br-fs-se-in-c1,
+                      prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1)
+                    );
+                  }
+                }
               }
             }
           }
@@ -915,6 +1072,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
               }
               .more__button {
+                // Padding of the More Button. The key was in the schema and the panel
+                // rendered it under Border Radius, but nothing here read it.
+                padding: prepareMediaVariable(--_ctm-dn-me-bn-dt-se-pg, 0);
+                &:hover {
+                  padding: prepareMediaVariable(
+                    --_ctm-dn-me-bn-hr-se-pg,
+                    prepareMediaVariable(--_ctm-dn-me-bn-dt-se-pg, 0)
+                  );
+                }
                 // font-size: 12px;
                 // text-transform: uppercase;
                 // font-weight: var(--_fw-500);
@@ -1581,7 +1747,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       // Input checkbox Starts
       .checkbox__radio {
         display: flex;
-        align-items: center;
+        // `flex-start`, not `center`: once the box can be resized or padded it is often
+        // taller than one line of label text, and centring made a wrapped label sit
+        // visibly off its box. Starting both at the top keeps the box level with the
+        // label's first line at any size.
+        align-items: flex-start;
         gap: 8px;
         position: relative;
         // margin-bottom: 12px;
@@ -1679,8 +1849,34 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
 
       .checkmark {
-        height: 18px;
-        width: 18px;
+        // Layout Options of the Checkbox Unchecked / Checked sections. These were
+        // hardcoded, so Width, Height and Padding wrote variables no rule read. 18px
+        // is the schema default and what was hardcoded here, so an untouched checkbox
+        // is unchanged. `box-sizing` keeps the configured Width the outer size once a
+        // padding or a border is added, and `flex-shrink: 0` stops a long option label
+        // squashing a box that has been made bigger — the row stays aligned.
+        box-sizing: border-box;
+        flex-shrink: 0;
+        width: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px);
+        height: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px);
+        padding: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0);
+
+        // Unchecked hover. The checkbox variant had no hover rule at all, so the
+        // Hover state of Checkbox Unchecked Style reached nothing here.
+        &:hover {
+          width: prepareMediaVariable(
+            --_ctm-dn-cx-ud-se-hr-se-wh,
+            prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
+          );
+          height: prepareMediaVariable(
+            --_ctm-dn-cx-ud-se-hr-se-ht,
+            prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
+          );
+          padding: prepareMediaVariable(
+            --_ctm-dn-cx-ud-se-hr-se-pg,
+            prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
+          );
+        }
         // border: 1px solid var(--_gray-500);
         // background-color: var(--_base-white);
         display: flex;
@@ -1820,6 +2016,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
 
       .checkbox__radio input:checked ~ .checkmark {
+        // Checked has its own Layout Options, falling back to the unchecked ones so a
+        // box that is only sized on one of the two sections stays a square.
+        width: prepareMediaVariable(
+          --_ctm-dn-cx-cd-se-dt-se-wh,
+          prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
+        );
+        height: prepareMediaVariable(
+          --_ctm-dn-cx-cd-se-dt-se-ht,
+          prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
+        );
+        padding: prepareMediaVariable(
+          --_ctm-dn-cx-cd-se-dt-se-pg,
+          prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
+        );
         background-color: var(
           --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
           var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
@@ -1876,6 +2086,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         &:hover {
+          // Hover carries its own Layout Options, each falling back to the default
+          // state so a box only sized on Default keeps that size on hover.
+          width: prepareMediaVariable(
+            --_ctm-dn-cx-cd-se-hr-se-wh,
+            prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-wh, 18px)
+          );
+          height: prepareMediaVariable(
+            --_ctm-dn-cx-cd-se-hr-se-ht,
+            prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-ht, 18px)
+          );
+          padding: prepareMediaVariable(
+            --_ctm-dn-cx-cd-se-hr-se-pg,
+            prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-pg, 0)
+          );
           background-color: var(
             --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
             var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
@@ -1941,15 +2165,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               justify-content: center;
             }
             svg {
-              // width: 13px;
-              // height: 13px;
-              width: var(
-                --_ctm-mob-dn-cx-cd-se-hr-se-se,
-                var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
+              // Icon Size of the hover state. These read a plain `-se`, a name nothing
+              // emits — iconSize becomes `in-se`. Falls back to the default state's
+              // size so an icon only sized on Default keeps that size on hover.
+              width: prepareMediaVariable(
+                --_ctm-dn-cx-cd-se-hr-se-in-se,
+                prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
               );
-              height: var(
-                --_ctm-mob-dn-cx-cd-se-hr-se-se,
-                var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
+              height: prepareMediaVariable(
+                --_ctm-dn-cx-cd-se-hr-se-in-se,
+                prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
               );
               path {
                 // stroke: var(--_base-white);
@@ -1981,16 +2206,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             display: none;
           }
           svg {
-            // width: 13px;
-            // height: 13px;
-            width: var(
-              --_ctm-mob-dn-cx-cd-se-dt-se-se,
-              var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
-            );
-            height: var(
-              --_ctm-mob-dn-cx-cd-se-dt-se-se,
-              var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
-            );
+            // Icon Size. `iconSize` carries `property: "iconSize"`, which
+            // splitCamelCaseAndJoin turns into `in-se` — these read plain `-se`, a
+            // name nothing emits, so the control moved a variable no rule used.
+            width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px);
+            height: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px);
             path {
               // stroke: var(--_base-white);
               stroke: var(
@@ -2025,7 +2245,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
       .filter__checkbox__radio {
         display: flex;
-        align-items: center;
+        // Same reasoning as .checkbox__radio above.
+        align-items: flex-start;
+        gap: 8px;
         cursor: pointer;
         position: relative;
 
@@ -2038,9 +2260,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         .filter__checkmark {
+          // The radio variant — what Selection Type "Single Select" renders, and the
+          // element's default. Its size was hardcoded, so the Checkbox sections' Layout
+          // Options only ever moved the checkbox variant. Same variables, same 18px
+          // fallback, and `flex-shrink: 0` so a resized box is not squeezed by a long
+          // option label beside it.
+          box-sizing: border-box;
+          flex-shrink: 0;
+          width: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px);
+          height: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px);
+          padding: prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0);
           display: inline-block;
-          height: 18px;
-          width: 18px;
           // border: 2px solid #ccc;
           // background-color: #fff;
           position: relative;
@@ -2100,6 +2330,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             );
           }
           &:hover {
+            // Layout Options of the hover state, falling back to the default state.
+            width: prepareMediaVariable(
+              --_ctm-dn-cx-ud-se-hr-se-wh,
+              prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
+            );
+            height: prepareMediaVariable(
+              --_ctm-dn-cx-ud-se-hr-se-ht,
+              prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
+            );
+            padding: prepareMediaVariable(
+              --_ctm-dn-cx-ud-se-hr-se-pg,
+              prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
+            );
             &[data-show-hover-unchecked-border="true"] {
               border-color: var(
                 --_sf-hr-br-cr,
@@ -2180,6 +2423,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         input[type="radio"]:checked ~ .filter__checkmark {
+          // Checked carries its own Layout Options, falling back to the unchecked ones
+          // so a radio sized on only one of the two sections stays round.
+          width: prepareMediaVariable(
+            --_ctm-dn-cx-cd-se-dt-se-wh,
+            prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
+          );
+          height: prepareMediaVariable(
+            --_ctm-dn-cx-cd-se-dt-se-ht,
+            prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
+          );
+          padding: prepareMediaVariable(
+            --_ctm-dn-cx-cd-se-dt-se-pg,
+            prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
+          );
           // border-color: #007bff;
           &[data-show-default-checked-shadow="true"] {
             box-shadow: var(
@@ -2283,15 +2540,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 display: block;
               }
               svg {
-                // width: 13px;
-                // height: 13px;
-                width: var(
-                  --_ctm-mob-dn-cx-cd-se-hr-se-se,
-                  var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
+                // Same `-se` / `in-se` mix-up as the checkbox copy above.
+                width: prepareMediaVariable(
+                  --_ctm-dn-cx-cd-se-hr-se-in-se,
+                  prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
                 );
-                height: var(
-                  --_ctm-mob-dn-cx-cd-se-hr-se-se,
-                  var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
+                height: prepareMediaVariable(
+                  --_ctm-dn-cx-cd-se-hr-se-in-se,
+                  prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
                 );
                 path {
                   // stroke: var(--_base-white);
@@ -2419,7 +2675,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         border-radius: 10px;
         //   padding: 20px;
         width: 100%;
-        max-width: 300px;
+        // max-width: 300px;
         padding-inline: 8px;
         // margin: auto;
       }
@@ -2428,7 +2684,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         position: relative;
         width: 100%;
         height: 5px;
-        margin: 16px 0 30px 0px;
+        // The 30px bottom used to reserve room for the two values, which hung off the
+        // track absolutely. They sit under it in normal flow now, so the track only
+        // needs its own breathing room.
+        margin: 16px 0 0 0;
         // background-color: var(--_primary-400);
         // background: linear-gradient(
         //   to right,
@@ -2601,13 +2860,26 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         text-align: center;
       }
 
+      // The two price values under the slider. They used to be absolutely positioned
+      // off the track at hardcoded offsets (left: 42px / right: 45px with a 50%
+      // translate), so at narrow widths they drifted over each other and over the
+      // thumbs, and neither sat at its end of the track. They are a flex row now, one
+      // value pinned to each end.
+      .range-values {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        margin-top: 8px;
+      }
+
       .min-tooltip,
       .max-tooltip {
-        position: absolute;
-        top: -35px;
+        display: flex;
+        align-items: center;
         font-size: 12px;
         color: var(--_thm-cs-be-se-1);
-        // background-color: #fff;
         border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 5px;
         white-space: nowrap;
@@ -2620,30 +2892,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
-        &:focus-within {
-          outline: 2px solid var(--_gray-200);
-          border: 1px solid var(--_gray-300);
-        }
-      }
-
-      .min-tooltip {
-        left: 42px;
-        top: 20px;
-        transform: translateX(-50%);
         input {
           padding-left: 0px !important;
           text-align: left !important;
         }
+        &:focus-within {
+          outline: 2px solid var(--_gray-200);
+          border: 1px solid var(--_gray-300);
+        }
       }
 
+      // The max value reads right-to-left against the end of the track.
       .max-tooltip {
-        right: 45px;
-        top: 20px;
-        transform: translateX(50%);
-        input {
-          padding-left: 0px !important;
-          text-align: left !important;
-        }
+        justify-content: flex-end;
       }
 
       .price-range-container {