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

package/dist/product-options.scss

@@ -17,73 +17,126 @@
 // flat variable, then the defaultState-nested one saved while the section still had the
 // picker, then the pre-split optionValueStyle.defaultState one.
 @function optionValueTextDefaultVar($flatVar, $stateVar, $legacyVar) {
-  @return prepareMediaVariable($flatVar,
-    prepareMediaVariable($stateVar, prepareMediaVariable($legacyVar)));
+  @return prepareMediaVariable(
+    $flatVar,
+    prepareMediaVariable($stateVar, prepareMediaVariable($legacyVar))
+  );
 }
 
 [data-div-type="element"] {
   &[data-element-type="productOptions"] {
-    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))))));
+    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)));
 
-    --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));
+    --_aspect-ratio: calc(
+      1 *
+        (
+          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
+            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
+        )
+    );
 
-    &>.wrapper {
+    & > .wrapper {
       // width: 100%;
       // height: 100%;
     }
-
     .product__option__element {
       display: flex;
       flex-direction: column;
       min-height: 30px;
-      gap: var(--_ctm-mob-lt-on-te-ve-sg,
-          var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)));
-
-      background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
-          var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
+      gap: var(
+        --_ctm-mob-lt-on-te-ve-sg,
+        var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
+      );
+
+      background-color: var(
+        --_ctm-mob-dn-wt-se-bd-cr,
+        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
+      );
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
 
       width: 100%;
       // height: 100%;
-      border-color: var(--_ctm-mob-dn-wt-se-br-cr,
-          var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
-      border-style: var(--_ctm-mob-dn-wt-se-br-se,
-          var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
-      border-width: var(--_ctm-mob-dn-wt-se-br-wh,
-          var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
-      border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
-          var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
-      box-shadow: var(--_show-shadow,
-          var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
+      border-color: var(
+        --_ctm-mob-dn-wt-se-br-cr,
+        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-dn-wt-se-br-se,
+        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-dn-wt-se-br-wh,
+        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-wt-se-br-rs,
+        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
+      );
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
+          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
+          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
+          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
+      );
 
       .title {
         margin-bottom: 4px;
         color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
-        font-family: var(--_ctm-mob-dn-on-te-ft-fy,
-            var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)));
-        text-transform: var(--_ctm-mob-dn-on-te-tt-tm,
-            var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)));
-        word-wrap: var(--_ctm-mob-dn-on-te-wd-wp,
-            var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)));
-        word-break: var(--_ctm-mob-dn-on-te-wd-bk,
-            var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)));
-        font-size: var(--_ctm-mob-dn-on-te-ft-se,
-            var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)));
-        font-weight: var(--_ctm-mob-dn-on-te-ft-wt,
-            var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)));
-        font-style: var(--_ctm-mob-dn-on-te-ft-se-ic,
-            var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic)));
-        text-align: var(--_ctm-mob-dn-on-te-tt-an,
-            var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)));
-        letter-spacing: var(--_ctm-mob-dn-on-te-lr-sg,
-            var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)));
-        line-height: var(--_ctm-mob-dn-on-te-le-ht,
-            var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)));
-        text-decoration: var(--_ctm-mob-dn-on-te-ue,
-            var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)));
+        font-family: var(
+          --_ctm-mob-dn-on-te-ft-fy,
+          var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
+        );
+        text-transform: var(
+          --_ctm-mob-dn-on-te-tt-tm,
+          var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
+        );
+        word-wrap: var(
+          --_ctm-mob-dn-on-te-wd-wp,
+          var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
+        );
+        word-break: var(
+          --_ctm-mob-dn-on-te-wd-bk,
+          var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
+        );
+        font-size: var(
+          --_ctm-mob-dn-on-te-ft-se,
+          var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-on-te-ft-wt,
+          var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
+        );
+        font-style: var(
+          --_ctm-mob-dn-on-te-ft-se-ic,
+          var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-on-te-tt-an,
+          var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-on-te-lr-sg,
+          var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-on-te-le-ht,
+          var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-on-te-ue,
+          var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
+        );
 
         // design.optionTitle container styling. The title is its own design schema, so it
         // carries the same Fill / Border / Border Radius / Shadow set as the value box.
@@ -93,8 +146,11 @@
         border-width: prepareMediaVariable(--_ctm-dn-on-te-br-wh, 0px);
         border-radius: prepareMediaVariable(--_ctm-dn-on-te-br-rs, 0px);
         // Same --_show-shadow gate the widget container uses in this file.
-        box-shadow: var(--_show-shadow,
-            prepareMediaVariable(--_ctm-dn-on-te-sw-ae) prepareMediaVariable(--_ctm-dn-on-te-sw-br) prepareMediaVariable(--_ctm-dn-on-te-sw-sd) prepareMediaVariable(--_ctm-dn-on-te-sw-cr));
+        box-shadow: var(
+          --_show-shadow,
+          prepareMediaVariable(--_ctm-dn-on-te-sw-ae) prepareMediaVariable(--_ctm-dn-on-te-sw-br)
+            prepareMediaVariable(--_ctm-dn-on-te-sw-sd) prepareMediaVariable(--_ctm-dn-on-te-sw-cr)
+        );
 
         // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as a
         // variable — the renderer adds `.flex__overflow` and publishes the line count as
@@ -109,8 +165,10 @@
         display: flex;
         align-items: flex-start;
         gap: 10px;
-        gap: var(--_ctm-mob-lt-on-te-ve-sg,
-            var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg)));
+        gap: var(
+          --_ctm-mob-lt-on-te-ve-sg,
+          var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
+        );
 
         // margin-top: 20px;
 
@@ -130,7 +188,6 @@
             flex-wrap: wrap;
           }
         }
-
         &[data-overflow-items="Scroll"] {
           .swatch__list {
             overflow-x: auto;
@@ -145,1143 +202,1243 @@
       }
 
       .swatch__item:hover {
-        --_sf-hr-bd-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr)));
-        --_sf-hr-br-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-br-cr,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr)));
-        --_sf-hr-br-se: var(--_ctm-mob-dn-on-ve-se-hr-se-br-se,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se)));
-        --_sf-hr-br-wh: var(--_ctm-mob-dn-on-ve-se-hr-se-br-wh,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh)));
-        --_sf-hr-br-rs: var(--_ctm-mob-dn-on-ve-se-hr-se-br-rs,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs)));
+        --_sf-hr-bd-cr: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
+        );
+        --_sf-hr-br-cr: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-br-cr,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
+        );
+        --_sf-hr-br-se: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-br-se,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
+        );
+        --_sf-hr-br-wh: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-br-wh,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
+        );
+        --_sf-hr-br-rs: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-br-rs,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
+        );
 
         // for shadow
-        --_sf-hr-sw-ae: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae)));
-        --_sf-hr-sw-br: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-br,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br)));
-        --_sf-hr-sw-hr: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-on-ve-se-hr-se-sw-hr)));
-        --_sf-hr-sw-cr: var(--_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
-            var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr)));
+        --_sf-hr-sw-ae: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
+        );
+        --_sf-hr-sw-br: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
+        );
+        --_sf-hr-sw-hr: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-on-ve-se-hr-se-sw-hr))
+        );
+        --_sf-hr-sw-cr: var(
+          --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
+          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
+        );
 
         // for font — from optionValueTextStyle.hoverState, falling back to the pre-split
         // optionValueStyle.hoverState keys.
         --_sf-hr-cr: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-cr,
-        --_ctm-dn-on-ve-se-hr-se-cr)
+            --_ctm-dn-on-ve-tt-se-hr-se-cr,
+            --_ctm-dn-on-ve-se-hr-se-cr
+          )};
+        --_sf-hr-ft-fy: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-fy,
+            --_ctm-dn-on-ve-se-hr-se-ft-fy
+          )};
+        --_sf-hr-tt-tm: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-tt-tm,
+            --_ctm-dn-on-ve-se-hr-se-tt-tm
+          )};
+        --_sf-hr-wd-wp: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-wd-wp,
+            --_ctm-dn-on-ve-se-hr-se-wd-wp
+          )};
+        --_sf-hr-wd-bk: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-wd-bk,
+            --_ctm-dn-on-ve-se-hr-se-wd-bk
+          )};
+        --_sf-hr-ft-se: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-se,
+            --_ctm-dn-on-ve-se-hr-se-ft-se
+          )};
+        --_sf-hr-ft-wt: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-wt,
+            --_ctm-dn-on-ve-se-hr-se-ft-wt
+          )};
+        --_sf-hr-ft-se-ic: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ft-se-ic,
+            --_ctm-dn-on-ve-se-hr-se-ft-se-ic
+          )};
+        --_sf-hr-tt-an: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-tt-an,
+            --_ctm-dn-on-ve-se-hr-se-tt-an
+          )};
+        --_sf-hr-lr-sg: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-lr-sg,
+            --_ctm-dn-on-ve-se-hr-se-lr-sg
+          )};
+        --_sf-hr-le-ht: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-le-ht,
+            --_ctm-dn-on-ve-se-hr-se-le-ht
+          )};
+
+        --_sf-hr-ue: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-hr-se-ue,
+            --_ctm-dn-on-ve-se-hr-se-ue
+          )};
       }
-
-      ;
-      --_sf-hr-ft-fy: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-ft-fy,
-      --_ctm-dn-on-ve-se-hr-se-ft-fy)
-    }
-
-    ;
-    --_sf-hr-tt-tm: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-tt-tm,
-    --_ctm-dn-on-ve-se-hr-se-tt-tm)
-  }
-
-  ;
-  --_sf-hr-wd-wp: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-wd-wp,
-  --_ctm-dn-on-ve-se-hr-se-wd-wp)
-}
-
-;
---_sf-hr-wd-bk: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-wd-bk,
---_ctm-dn-on-ve-se-hr-se-wd-bk)
-}
-
-;
---_sf-hr-ft-se: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-ft-se,
---_ctm-dn-on-ve-se-hr-se-ft-se)
-}
-
-;
---_sf-hr-ft-wt: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-ft-wt,
---_ctm-dn-on-ve-se-hr-se-ft-wt)
-}
-
-;
---_sf-hr-ft-se-ic: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-ft-se-ic,
---_ctm-dn-on-ve-se-hr-se-ft-se-ic)
-}
-
-;
---_sf-hr-tt-an: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-tt-an,
---_ctm-dn-on-ve-se-hr-se-tt-an)
-}
-
-;
---_sf-hr-lr-sg: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-lr-sg,
---_ctm-dn-on-ve-se-hr-se-lr-sg)
-}
-
-;
---_sf-hr-le-ht: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-le-ht,
---_ctm-dn-on-ve-se-hr-se-le-ht)
-}
-
-;
-
---_sf-hr-ue: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-hr-se-ue,
---_ctm-dn-on-ve-se-hr-se-ue)
-}
-
-;
-}
-
-.swatch__item[data-selected="true"] {
-  --_sf-sd-bd-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr)));
-  --_sf-sd-br-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-br-cr,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr)));
-  --_sf-sd-br-se: var(--_ctm-mob-dn-on-ve-se-sd-se-br-se,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se)));
-  --_sf-sd-br-wh: var(--_ctm-mob-dn-on-ve-se-sd-se-br-wh,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh)));
-  // new
-  --_sf-sd-sw-ae: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae)));
-  --_sf-sd-sw-br: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-br,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br)));
-  --_sf-sd-sw-sd: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd)));
-  --_sf-sd-sw-cr: var(--_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
-      var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr)));
-
-  // for font — from optionValueTextStyle.selectedState, falling back to the
-  // pre-split optionValueStyle.selectedState keys.
-  --_sf-hr-cr: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-cr,
-  --_ctm-dn-on-ve-se-sd-se-cr)
-}
-
-;
---_sf-hr-ft-fy: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-ft-fy,
---_ctm-dn-on-ve-se-sd-se-ft-fy)
-}
-
-;
---_sf-hr-tt-tm: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-tt-tm,
---_ctm-dn-on-ve-se-sd-se-tt-tm)
-}
-
-;
---_sf-hr-wd-wp: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-wd-wp,
---_ctm-dn-on-ve-se-sd-se-wd-wp)
-}
-
-;
---_sf-hr-wd-bk: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-wd-bk,
---_ctm-dn-on-ve-se-sd-se-wd-bk)
-}
-
-;
---_sf-hr-ft-se: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-ft-se,
---_ctm-dn-on-ve-se-sd-se-ft-se)
-}
-
-;
---_sf-hr-ft-wt: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-ft-wt,
---_ctm-dn-on-ve-se-sd-se-ft-wt)
-}
-
-;
---_sf-hr-ft-se-ic: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-ft-se-ic,
---_ctm-dn-on-ve-se-sd-se-ft-se-ic)
-}
-
-;
---_sf-hr-tt-an: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-tt-an,
---_ctm-dn-on-ve-se-sd-se-tt-an)
-}
-
-;
---_sf-hr-lr-sg: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-lr-sg,
---_ctm-dn-on-ve-se-sd-se-lr-sg)
-}
-
-;
---_sf-hr-le-ht: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-le-ht,
---_ctm-dn-on-ve-se-sd-se-le-ht)
-}
-
-;
-
---_sf-hr-ue: #{optionValueTextVar(
- --_ctm-dn-on-ve-tt-se-sd-se-ue,
---_ctm-dn-on-ve-se-sd-se-ue)
-}
-
-;
-}
-
-.swatch__item {
-  text-align: center;
-  overflow: hidden;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: width 0.3s ease;
-  // border: 1px solid gray;
-  width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
-  height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
-
-  // A Single Select value is text, not a swatch image. `white-space: nowrap` on
-  // .option__value__text keeps it on one line, but this box is fixed-size with
-  // overflow:hidden, so a value wider than Swatch Item Size was clipped instead.
-  // Grow to the content and keep Swatch Item Size as the floor, so short values look
-  // exactly as before and only the ones that would have been cut off get wider.
-  &[data-display-style="Single Select"] {
-    width: auto;
-    height: auto;
-    min-width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
-    min-height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
-  }
-
-  // &[data-display-style="Swatch"] {
-  //   height: prepareMediaVariable(--_ctm-lt-sh-im-se);
-  //   width: prepareMediaVariable(--_ctm-lt-sh-im-se);
-  // }
-  // &[data-display-style="Single Select"] {
-  //   // min-width: 20px;
-  //   // min-height: 20px;
-  //   box-sizing: content-box;
-  // }
-
-  gap: prepareMediaVariable(--_ctm-lt-im-gp);
-  padding: prepareMediaVariable(--_ctm-lt-sh-im-pg);
-
-  cursor: pointer;
-
-  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
-
-  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr));
-  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
-  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
-
-  box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
-
-  & div,
-  .product-select-image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-
-  &[data-background-shape="circle"] {
-    border-radius: 50%;
-  }
-
-  &[data-background-shape="square"] {
-    border-radius: 5px;
-  }
-
-  &[data-background-shape="capsule"] {
-    &:not([data-display-style="Single Select"]) {
-      --toggle-height: var(--_ctm-lt-sh-im-se);
-      --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
-
-      width: var(--toggle-width);
-      height: var(--toggle-height);
-    }
-
-    border-radius: var(--toggle-height);
-    /* Full pill shape */
-    box-sizing: border-box;
-  }
-
-  &[data-swatch-shape="circle"] {
-
-    & div,
-    .product-select-image {
-      border-radius: 50%;
-    }
-
-    // border-radius: 50%;
-  }
-
-  &[data-swatch-shape="capsule"] {
-
-    & div,
-    .product-select-image {
-      // border-radius: 50%;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-    }
-
-    // border-radius: 50%;
-  }
-
-  &:hover {
-    &[data-background-shape-hover="circle"] {
-      border-radius: 50%;
-    }
-
-    &[data-background-shape-hover="square"] {
-      border-radius: 5px;
-    }
-
-    &[data-background-shape-hover="capsule"] {
-      --toggle-height: var(--_ctm-lt-sh-im-se);
-      --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
-
-      width: var(--toggle-width);
-      height: var(--toggle-height);
-
-      border-radius: var(--toggle-height);
-      /* Full pill shape */
-      box-sizing: border-box;
-    }
-
-    &[data-swatch-shape-hover="circle"] {
-
-      & div,
-      .product-select-image {
-        border-radius: 50%;
-      }
-
-      // border-radius: 50%;
-    }
-
-    &[data-swatch-shape-hover="capsule"] {
-
-      & div,
-      .product-select-image {
-        // border-radius: 50%;
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-      }
-    }
-
-    &[data-swatch-shape-hover="square"] {
-
-      & div,
-      .product-select-image {
-        border-radius: 5px;
-      }
-    }
-  }
-
-  &[data-selected="true"] {
-    border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
-
-    background-color: var(--_sf-sd-bd-cr,
-        prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr));
-    border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
-    border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
-    box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
-
-    &[data-background-shape-selected="circle"] {
-      border-radius: 50%;
-    }
-
-    &[data-background-shape-selected="square"] {
-      border-radius: 5px;
-    }
-
-    &[data-background-shape-selected="capsule"] {
-      --toggle-height: #{prepareMediaVariable(--_ctm-lt-sh-im-se)};
-      --toggle-width: calc(#{prepareMediaVariable(--_ctm-lt-sh-im-se)} * 1.5);
-
-      width: var(--toggle-width);
-      // height: var(--toggle-height);
-
-      border-radius: var(--toggle-height);
-      /* Full pill shape */
-      box-sizing: border-box;
-    }
-
-    &[data-swatch-shape-selected="circle"] {
-
-      & div,
-      .product-select-image {
-        border-radius: 50%;
-      }
-    }
-
-    &[data-swatch-shape-selected="capsule"] {
-
-      & div,
-      .product-select-image {
-        // border-radius: 50%;
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-      }
-    }
-
-    &[data-swatch-shape-selected="square"] {
-
-      & div,
-      .product-select-image {
-        border-radius: 5px;
+      .swatch__item[data-selected="true"] {
+        --_sf-sd-bd-cr: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr))
+        );
+        --_sf-sd-br-cr: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-br-cr,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr))
+        );
+        --_sf-sd-br-se: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-br-se,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se))
+        );
+        --_sf-sd-br-wh: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-br-wh,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh))
+        );
+        // new
+        --_sf-sd-sw-ae: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae))
+        );
+        --_sf-sd-sw-br: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br))
+        );
+        --_sf-sd-sw-sd: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd))
+        );
+        --_sf-sd-sw-cr: var(
+          --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
+          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
+        );
+
+        // for font — from optionValueTextStyle.selectedState, falling back to the
+        // pre-split optionValueStyle.selectedState keys.
+        --_sf-hr-cr: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-cr,
+            --_ctm-dn-on-ve-se-sd-se-cr
+          )};
+        --_sf-hr-ft-fy: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-fy,
+            --_ctm-dn-on-ve-se-sd-se-ft-fy
+          )};
+        --_sf-hr-tt-tm: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-tt-tm,
+            --_ctm-dn-on-ve-se-sd-se-tt-tm
+          )};
+        --_sf-hr-wd-wp: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-wd-wp,
+            --_ctm-dn-on-ve-se-sd-se-wd-wp
+          )};
+        --_sf-hr-wd-bk: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-wd-bk,
+            --_ctm-dn-on-ve-se-sd-se-wd-bk
+          )};
+        --_sf-hr-ft-se: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-se,
+            --_ctm-dn-on-ve-se-sd-se-ft-se
+          )};
+        --_sf-hr-ft-wt: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-wt,
+            --_ctm-dn-on-ve-se-sd-se-ft-wt
+          )};
+        --_sf-hr-ft-se-ic: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ft-se-ic,
+            --_ctm-dn-on-ve-se-sd-se-ft-se-ic
+          )};
+        --_sf-hr-tt-an: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-tt-an,
+            --_ctm-dn-on-ve-se-sd-se-tt-an
+          )};
+        --_sf-hr-lr-sg: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-lr-sg,
+            --_ctm-dn-on-ve-se-sd-se-lr-sg
+          )};
+        --_sf-hr-le-ht: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-le-ht,
+            --_ctm-dn-on-ve-se-sd-se-le-ht
+          )};
+
+        --_sf-hr-ue: #{optionValueTextVar(
+            --_ctm-dn-on-ve-tt-se-sd-se-ue,
+            --_ctm-dn-on-ve-se-sd-se-ue
+          )};
       }
-    }
-  }
 
-  .option__value__text {
-    color: var(--_sf-hr-cr,
-      #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-cr,
-      --_ctm-dn-on-ve-tt-se-dt-se-cr,
-      --_ctm-dn-on-ve-se-dt-se-cr)
-  });
-  font-family: var(--_sf-hr-ft-fy,
-    #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-fy,
-    --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
-    --_ctm-dn-on-ve-se-dt-se-ft-fy)
-});
-text-transform: var(--_sf-hr-tt-tm,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-tt-tm,
-  --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
-  --_ctm-dn-on-ve-se-dt-se-tt-tm)
-});
-word-wrap: var(--_sf-hr-wd-wp,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-wd-wp,
-  --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
-  --_ctm-dn-on-ve-se-dt-se-wd-wp)
-});
-word-break: var(--_sf-hr-wd-bk,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-wd-bk,
-  --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
-  --_ctm-dn-on-ve-se-dt-se-wd-bk)
-});
-font-size: var(--_sf-hr-ft-se,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-se,
-  --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
-  --_ctm-dn-on-ve-se-dt-se-ft-se)
-});
-font-weight: var(--_sf-hr-ft-wt,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-wt,
-  --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
-  --_ctm-dn-on-ve-se-dt-se-ft-wt)
-});
-font-style: var(--_sf-hr-ft-se-ic,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-se-ic,
-  --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
-  --_ctm-dn-on-ve-se-dt-se-ft-se-ic)
-});
-text-align: var(--_sf-hr-tt-an,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-tt-an,
-  --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
-  --_ctm-dn-on-ve-se-dt-se-tt-an)
-});
-letter-spacing: var(--_sf-hr-lr-sg,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-lr-sg,
-  --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
-  --_ctm-dn-on-ve-se-dt-se-lr-sg)
-});
-// The pre-split key is `le-ht-dc`; the new section is read under both spellings
-// so whichever one the converter writes resolves.
-line-height: var(--_sf-hr-le-ht,
-  prepareMediaVariable(--_ctm-dn-on-ve-tt-se-dt-se-le-ht,
-    #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-le-ht-dc,
-    --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
-    --_ctm-dn-on-ve-se-dt-se-le-ht-dc)
-}));
-text-decoration: var(--_sf-hr-ue,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ue,
-  --_ctm-dn-on-ve-tt-se-dt-se-ue,
-  --_ctm-dn-on-ve-se-dt-se-ue)
-});
-// The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
-// broke onto a second line inside it. Keep it on one line.
-white-space: nowrap;
-}
-
-&.disabled {
-  color: #aaa;
-  background-color: #f9f9f9;
-  border-color: #ddd;
-  cursor: not-allowed;
-  opacity: 0.3;
-  overflow: hidden;
-  position: relative;
-}
-
-.cross-line {
-  position: absolute;
-  inset: 0;
-  background-color: #cccccc;
-  clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
-  pointer-events: none;
-}
-}
-
-// .disabled {
-//   cursor: not-allowed;
-//   opacity: 0.4;
-
-//   &[data-swatch-type="Swatch image"] {
-//     position: relative;
-//     overflow: hidden;
-//     &::after {
-//       content: "";
-//       width: 172%;
-//       height: 1px;
-//       position: absolute;
-//       background: #f00;
-//       left: -14px;
-//       transform: rotate(48deg);
-//       /* -webkit-transform: rotate(48deg); */
-//       -moz-transform: rotate(48deg);
-//       top: 14px;
-//       box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
-//     }
-//     &::before {
-//       content: "";
-//       width: 164%;
-//       height: 1px;
-//       position: absolute;
-//       background: #f00;
-//       left: -14px;
-//       transform: rotate(-48deg);
-//       -webkit-transform: rotate(-48deg);
-//       -moz-transform: rotate(-48deg);
-//       top: 14px;
-//       box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
-//     }
-//   }
-// }
-
-.option__value__text {
-  color: var(--_sf-hr-cr,
-    #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-cr,
-    --_ctm-dn-on-ve-tt-se-dt-se-cr,
-    --_ctm-dn-on-ve-se-dt-se-cr)
-});
-font-family: var(--_sf-hr-ft-fy,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-fy,
-  --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
-  --_ctm-dn-on-ve-se-dt-se-ft-fy)
-});
-text-transform: var(--_sf-hr-tt-tm,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-tt-tm,
-  --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
-  --_ctm-dn-on-ve-se-dt-se-tt-tm)
-});
-word-wrap: var(--_sf-hr-wd-wp,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-wd-wp,
-  --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
-  --_ctm-dn-on-ve-se-dt-se-wd-wp)
-});
-word-break: var(--_sf-hr-wd-bk,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-wd-bk,
-  --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
-  --_ctm-dn-on-ve-se-dt-se-wd-bk)
-});
-font-size: var(--_sf-hr-ft-se,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-se,
-  --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
-  --_ctm-dn-on-ve-se-dt-se-ft-se)
-});
-font-weight: var(--_sf-hr-ft-wt,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-wt,
-  --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
-  --_ctm-dn-on-ve-se-dt-se-ft-wt)
-});
-font-style: var(--_sf-hr-ft-se-ic,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ft-se-ic,
-  --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
-  --_ctm-dn-on-ve-se-dt-se-ft-se-ic)
-});
-text-align: var(--_sf-hr-tt-an,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-tt-an,
-  --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
-  --_ctm-dn-on-ve-se-dt-se-tt-an)
-});
-letter-spacing: var(--_sf-hr-lr-sg,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-lr-sg,
-  --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
-  --_ctm-dn-on-ve-se-dt-se-lr-sg)
-});
-// The pre-split key is `le-ht-dc`; the new section is read under both spellings
-// so whichever one the converter writes resolves.
-line-height: var(--_sf-hr-le-ht,
-  prepareMediaVariable(--_ctm-dn-on-ve-tt-se-dt-se-le-ht,
-    #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-le-ht-dc,
-    --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
-    --_ctm-dn-on-ve-se-dt-se-le-ht-dc)
-}));
-text-decoration: var(--_sf-hr-ue,
-  #{optionValueTextDefaultVar(
- --_ctm-dn-on-ve-tt-se-ue,
-  --_ctm-dn-on-ve-tt-se-dt-se-ue,
-  --_ctm-dn-on-ve-se-dt-se-ue)
-});
-// The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
-// broke onto a second line inside it. Keep it on one line.
-white-space: nowrap;
-}
-
-.product-select-image {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-//Dropdown
-.est__dropdown__main {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--_ctm-mob-lt-on-te-ve-sg,
-      var(--_ctm-tab-lt-on-te-ve-sg,
-        var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))));
-  padding: var(--_ctm-mob-lt-dn-dy-se-dn-os-pg,
-      var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-os-pg)));
-  margin-top: 10px;
-
-  label {
-    font-size: var(--_ctm-mob-dn-on-te-ft-se,
-        var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se)));
-    font-family: var(--_ctm-mob-dn-on-te-ft-fy,
-        var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy)));
-    text-transform: var(--_ctm-mob-dn-on-te-tt-tm,
-        var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm)));
-    word-wrap: var(--_ctm-mob-dn-on-te-wd-wp,
-        var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp)));
-    word-break: var(--_ctm-mob-dn-on-te-wd-bk,
-        var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk)));
-
-    &.flex__overflow {
-      white-space: normal;
-      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-    }
-
-    color: var(--_ctm-mob-dn-on-te-cr,
-      var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr))));
-    font-weight: var(--_ctm-mob-dn-on-te-ft-wt,
-      var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt)));
-    text-decoration: var(--_ctm-mob-dn-on-te-ue,
-      var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue)));
-    letter-spacing: var(--_ctm-mob-dn-on-te-lr-sg,
-      var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg)));
-    text-align: var(--_ctm-mob-dn-on-te-tt-an,
-      var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an)));
-    line-height: var(--_ctm-mob-dn-on-te-le-ht,
-      var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht)));
-    display: block;
-  }
-
-  .est__dropdown {
-    cursor: pointer;
-    position: relative;
-    color: var(--_gray-700);
+      .swatch__item {
+        text-align: center;
+        overflow: hidden;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: width 0.3s ease;
+        // border: 1px solid gray;
+        width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
+        height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
+
+        // A Single Select value is text, not a swatch image. `white-space: nowrap` on
+        // .option__value__text keeps it on one line, but this box is fixed-size with
+        // overflow:hidden, so a value wider than Swatch Item Size was clipped instead.
+        // Grow to the content and keep Swatch Item Size as the floor, so short values look
+        // exactly as before and only the ones that would have been cut off get wider.
+        &[data-display-style="Single Select"] {
+          width: auto;
+          height: auto;
+          min-width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
+          min-height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
+        }
 
-    border-radius: 6px;
-    background-color: #fff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+        // &[data-display-style="Swatch"] {
+        //   height: prepareMediaVariable(--_ctm-lt-sh-im-se);
+        //   width: prepareMediaVariable(--_ctm-lt-sh-im-se);
+        // }
+        // &[data-display-style="Single Select"] {
+        //   // min-width: 20px;
+        //   // min-height: 20px;
+        //   box-sizing: content-box;
+        // }
 
-    .value__selected {
-      width: 100%;
-    }
+        gap: prepareMediaVariable(--_ctm-lt-im-gp);
+        padding: prepareMediaVariable(--_ctm-lt-sh-im-pg);
 
-    &.open .list {
-      display: none;
-      margin-top: var(--_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
-          var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg)));
-      gap: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
-          var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)));
-      background-color: var(--_ctm-mob-dn-dn-se-bd-cr,
-          var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr)));
-    }
+        cursor: pointer;
 
-    .list {
-      display: flex !important;
-      flex-direction: column;
-      gap: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
-          var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)));
-      border: var(--_ctm-mob-dn-dn-se-br-wh,
-          var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))) var(--_ctm-mob-dn-dn-se-br-se,
-          var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))) var(--_gray-200,
-          var(--_ctm-mob-dn-dn-se-br-cr,
-            var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))));
-      border-radius: var(--_ctm-mob-dn-dn-se-br-rs,
-          var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs)));
-      box-shadow: var(--_show-shadow-dn-se,
-          var(--_ctm-mob-dn-dn-se-sw-ae,
-            var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae)))) var(--_ctm-mob-dn-dn-se-sw-br,
-            var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br)))) var(--_ctm-mob-dn-dn-se-sw-sd,
-            var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd)))) var(--_ctm-mob-dn-dn-se-sw-cr,
-            var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr)))));
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      background-color: var(--_ctm-mob-dn-dn-se-bd-cr,
-          var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr)));
-      border-radius: 4px;
-      z-index: var(--_higher-zIndex);
-      max-height: 200px;
-      overflow-y: auto;
-
-      &.top {
-        bottom: 100%;
-        top: auto;
-      }
+        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
 
-      .list__option {
-        padding: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
-            var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg)));
-        cursor: pointer;
+        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr));
+        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
+        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
 
-        &:hover {
-          background-color: var(--_primary-25);
-          color: var(--_primary-400);
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
+        & div,
+        .product-select-image {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
         }
 
-        &.disabled {
-          cursor: not-allowed;
-          opacity: 0.4;
+        &[data-background-shape="circle"] {
+          border-radius: 50%;
         }
-      }
-    }
-  }
-}
+        &[data-background-shape="square"] {
+          border-radius: 5px;
+        }
+        &[data-background-shape="capsule"] {
+          &:not([data-display-style="Single Select"]) {
+            --toggle-height: var(--_ctm-lt-sh-im-se);
+            --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
 
-// variant dropdown selection
-.var__drop__selection {
-  display: flex;
-  width: 100%;
-  gap: var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
-      var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
-        var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))));
+            width: var(--toggle-width);
+            height: var(--toggle-height);
+          }
 
-  flex-direction: row;
+          border-radius: var(--toggle-height); /* Full pill shape */
+          box-sizing: border-box;
+        }
+        &[data-swatch-shape="circle"] {
+          & div,
+          .product-select-image {
+            border-radius: 50%;
+          }
+          // border-radius: 50%;
+        }
+        &[data-swatch-shape="capsule"] {
+          & div,
+          .product-select-image {
+            // border-radius: 50%;
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+          }
+          // border-radius: 50%;
+        }
 
-  &[data-dropdown-style="Vertical List"] {
-    flex-direction: column;
-    gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
-  }
+        &:hover {
+          &[data-background-shape-hover="circle"] {
+            border-radius: 50%;
+          }
+          &[data-background-shape-hover="square"] {
+            border-radius: 5px;
+          }
+          &[data-background-shape-hover="capsule"] {
+            --toggle-height: var(--_ctm-lt-sh-im-se);
+            --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
 
-  .dropdown_wrapper {
-    position: relative;
+            width: var(--toggle-width);
+            height: var(--toggle-height);
 
-    &[data-show-divider="true"] {
-      &:not(:last-child)::after {
-        content: "";
-        position: relative;
-        background-color: #000;
-        height: 1px;
-        width: 100%;
-        display: flex;
-        top: calc(calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px) / 2);
-      }
-    }
+            border-radius: var(--toggle-height); /* Full pill shape */
+            box-sizing: border-box;
+          }
 
-    &[data-show-item-divider="true"] {
-      .est__dropdown__main {
-        .est__dropdown {
-          .list {
-            :not(:last-child).list__option {
-              &::after {
-                content: "";
-                position: relative;
-                background-color: #000;
-                height: 1px;
-                width: 100%;
-                display: flex;
-                top: calc(var(--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
-                      var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
-                        var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))) / 2);
-              }
+          &[data-swatch-shape-hover="circle"] {
+            & div,
+            .product-select-image {
+              border-radius: 50%;
+            }
+            // border-radius: 50%;
+          }
+          &[data-swatch-shape-hover="capsule"] {
+            & div,
+            .product-select-image {
+              // border-radius: 50%;
+              width: 100%;
+              height: 100%;
+              border-radius: inherit;
+            }
+          }
+          &[data-swatch-shape-hover="square"] {
+            & div,
+            .product-select-image {
+              border-radius: 5px;
             }
           }
         }
-      }
-    }
-  }
-
-  &>div {
-    width: 100%;
-  }
-}
-
-.embla {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  // overflow: hidden;
+        &[data-selected="true"] {
+          border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
+
+          background-color: var(
+            --_sf-sd-bd-cr,
+            prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr)
+          );
+          border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
+          border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
+          box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
+            var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
+            var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
+            var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
+
+          &[data-background-shape-selected="circle"] {
+            border-radius: 50%;
+          }
+          &[data-background-shape-selected="square"] {
+            border-radius: 5px;
+          }
+          &[data-background-shape-selected="capsule"] {
+            --toggle-height: #{prepareMediaVariable(--_ctm-lt-sh-im-se)};
+            --toggle-width: calc(#{prepareMediaVariable(--_ctm-lt-sh-im-se)} * 1.5);
 
-  .embla__viewport {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: column;
+            width: var(--toggle-width);
+            // height: var(--toggle-height);
 
-    overflow: hidden;
+            border-radius: var(--toggle-height); /* Full pill shape */
+            box-sizing: border-box;
+          }
+          &[data-swatch-shape-selected="circle"] {
+            & div,
+            .product-select-image {
+              border-radius: 50%;
+            }
+          }
+          &[data-swatch-shape-selected="capsule"] {
+            & div,
+            .product-select-image {
+              // border-radius: 50%;
+              width: 100%;
+              height: 100%;
+              border-radius: inherit;
+            }
+          }
+          &[data-swatch-shape-selected="square"] {
+            & div,
+            .product-select-image {
+              border-radius: 5px;
+            }
+          }
+        }
 
-    .embla__container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      grid-template-rows: 100%;
-      // grid-template-columns: 100%;
-      // grid-template-columns: repeat(
-      //   var(--_ctm-lt-is-pr-se),
-      //   calc(100% / var(--_ctm-lt-is-pr-se))
-      // );
-      // grid-auto-flow: column;
-      gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
-
-      &[data-control-type="Bottom"][data-slider-control="Arrows"] {
-        height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
-                var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 8px));
-      }
+        .option__value__text {
+          color: var(
+            --_sf-hr-cr,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-cr,
+                --_ctm-dn-on-ve-tt-se-dt-se-cr,
+                --_ctm-dn-on-ve-se-dt-se-cr
+              )}
+          );
+          font-family: var(
+            --_sf-hr-ft-fy,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-fy,
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
+                --_ctm-dn-on-ve-se-dt-se-ft-fy
+              )}
+          );
+          text-transform: var(
+            --_sf-hr-tt-tm,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-tt-tm,
+                --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
+                --_ctm-dn-on-ve-se-dt-se-tt-tm
+              )}
+          );
+          word-wrap: var(
+            --_sf-hr-wd-wp,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-wd-wp,
+                --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
+                --_ctm-dn-on-ve-se-dt-se-wd-wp
+              )}
+          );
+          word-break: var(
+            --_sf-hr-wd-bk,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-wd-bk,
+                --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
+                --_ctm-dn-on-ve-se-dt-se-wd-bk
+              )}
+          );
+          font-size: var(
+            --_sf-hr-ft-se,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-se,
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
+                --_ctm-dn-on-ve-se-dt-se-ft-se
+              )}
+          );
+          font-weight: var(
+            --_sf-hr-ft-wt,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-wt,
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
+                --_ctm-dn-on-ve-se-dt-se-ft-wt
+              )}
+          );
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-se-ic,
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
+                --_ctm-dn-on-ve-se-dt-se-ft-se-ic
+              )}
+          );
+          text-align: var(
+            --_sf-hr-tt-an,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-tt-an,
+                --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
+                --_ctm-dn-on-ve-se-dt-se-tt-an
+              )}
+          );
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-lr-sg,
+                --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
+                --_ctm-dn-on-ve-se-dt-se-lr-sg
+              )}
+          );
+          // The pre-split key is `le-ht-dc`; the new section is read under both spellings
+          // so whichever one the converter writes resolves.
+          line-height: var(
+            --_sf-hr-le-ht,
+            prepareMediaVariable(
+              --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
+              #{optionValueTextDefaultVar(
+                  --_ctm-dn-on-ve-tt-se-le-ht-dc,
+                  --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
+                  --_ctm-dn-on-ve-se-dt-se-le-ht-dc
+                )}
+            )
+          );
+          text-decoration: var(
+            --_sf-hr-ue,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ue,
+                --_ctm-dn-on-ve-tt-se-dt-se-ue,
+                --_ctm-dn-on-ve-se-dt-se-ue
+              )}
+          );
+          // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
+          // broke onto a second line inside it. Keep it on one line.
+          white-space: nowrap;
+        }
+        &.disabled {
+          color: #aaa;
+          background-color: #f9f9f9;
+          border-color: #ddd;
+          cursor: not-allowed;
+          opacity: 0.3;
+          overflow: hidden;
+          position: relative;
+        }
 
-      &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-        height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
-                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
+        .cross-line {
+          position: absolute;
+          inset: 0;
+          background-color: #cccccc;
+          clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
+          pointer-events: none;
+        }
       }
 
-      &[data-control-type="Bottom"][data-slider-control="Dots"] {
-        height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
-                var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
+      // .disabled {
+      //   cursor: not-allowed;
+      //   opacity: 0.4;
+
+      //   &[data-swatch-type="Swatch image"] {
+      //     position: relative;
+      //     overflow: hidden;
+      //     &::after {
+      //       content: "";
+      //       width: 172%;
+      //       height: 1px;
+      //       position: absolute;
+      //       background: #f00;
+      //       left: -14px;
+      //       transform: rotate(48deg);
+      //       /* -webkit-transform: rotate(48deg); */
+      //       -moz-transform: rotate(48deg);
+      //       top: 14px;
+      //       box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
+      //     }
+      //     &::before {
+      //       content: "";
+      //       width: 164%;
+      //       height: 1px;
+      //       position: absolute;
+      //       background: #f00;
+      //       left: -14px;
+      //       transform: rotate(-48deg);
+      //       -webkit-transform: rotate(-48deg);
+      //       -moz-transform: rotate(-48deg);
+      //       top: 14px;
+      //       box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
+      //     }
+      //   }
+      // }
+
+      .option__value__text {
+        color: var(
+          --_sf-hr-cr,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-cr,
+              --_ctm-dn-on-ve-tt-se-dt-se-cr,
+              --_ctm-dn-on-ve-se-dt-se-cr
+            )}
+        );
+        font-family: var(
+          --_sf-hr-ft-fy,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-fy,
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
+              --_ctm-dn-on-ve-se-dt-se-ft-fy
+            )}
+        );
+        text-transform: var(
+          --_sf-hr-tt-tm,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-tt-tm,
+              --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
+              --_ctm-dn-on-ve-se-dt-se-tt-tm
+            )}
+        );
+        word-wrap: var(
+          --_sf-hr-wd-wp,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-wd-wp,
+              --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
+              --_ctm-dn-on-ve-se-dt-se-wd-wp
+            )}
+        );
+        word-break: var(
+          --_sf-hr-wd-bk,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-wd-bk,
+              --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
+              --_ctm-dn-on-ve-se-dt-se-wd-bk
+            )}
+        );
+        font-size: var(
+          --_sf-hr-ft-se,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-se,
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
+              --_ctm-dn-on-ve-se-dt-se-ft-se
+            )}
+        );
+        font-weight: var(
+          --_sf-hr-ft-wt,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-wt,
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
+              --_ctm-dn-on-ve-se-dt-se-ft-wt
+            )}
+        );
+        font-style: var(
+          --_sf-hr-ft-se-ic,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-se-ic,
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
+              --_ctm-dn-on-ve-se-dt-se-ft-se-ic
+            )}
+        );
+        text-align: var(
+          --_sf-hr-tt-an,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-tt-an,
+              --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
+              --_ctm-dn-on-ve-se-dt-se-tt-an
+            )}
+        );
+        letter-spacing: var(
+          --_sf-hr-lr-sg,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-lr-sg,
+              --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
+              --_ctm-dn-on-ve-se-dt-se-lr-sg
+            )}
+        );
+        // The pre-split key is `le-ht-dc`; the new section is read under both spellings
+        // so whichever one the converter writes resolves.
+        line-height: var(
+          --_sf-hr-le-ht,
+          prepareMediaVariable(
+            --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-le-ht-dc,
+                --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
+                --_ctm-dn-on-ve-se-dt-se-le-ht-dc
+              )}
+          )
+        );
+        text-decoration: var(
+          --_sf-hr-ue,
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ue,
+              --_ctm-dn-on-ve-tt-se-dt-se-ue,
+              --_ctm-dn-on-ve-se-dt-se-ue
+            )}
+        );
+        // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
+        // broke onto a second line inside it. Keep it on one line.
+        white-space: nowrap;
       }
 
-      .embla__slide {
-        // width: 100%;
+      .product-select-image {
         height: 100%;
+        width: 100%;
+        object-fit: cover;
       }
-    }
-  }
+      //Dropdown
+      .est__dropdown__main {
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: var(
+          --_ctm-mob-lt-on-te-ve-sg,
+          var(
+            --_ctm-tab-lt-on-te-ve-sg,
+            var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
+          )
+        );
+        padding: var(
+          --_ctm-mob-lt-dn-dy-se-dn-os-pg,
+          var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-os-pg))
+        );
+        margin-top: 10px;
+
+        label {
+          font-size: var(
+            --_ctm-mob-dn-on-te-ft-se,
+            var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
+          );
+          font-family: var(
+            --_ctm-mob-dn-on-te-ft-fy,
+            var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-on-te-tt-tm,
+            var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-on-te-wd-wp,
+            var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-on-te-wd-bk,
+            var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
+          );
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+          color: var(
+            --_ctm-mob-dn-on-te-cr,
+            var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-on-te-ft-wt,
+            var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-on-te-ue,
+            var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-on-te-lr-sg,
+            var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
+          );
+          text-align: var(
+            --_ctm-mob-dn-on-te-tt-an,
+            var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
+          );
+          line-height: var(
+            --_ctm-mob-dn-on-te-le-ht,
+            var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
+          );
+          display: block;
+        }
 
-  .arrow-navigation {
-    display: flex;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    justify-content: space-between;
-    transform: translate(-50%, -50%);
-
-    //   padding-left: 20px;
-    &[data-control-type="Side"] {
-
-      .left-button,
-      .right-button {
-        background-color: transparent;
-      }
-    }
+        .est__dropdown {
+          cursor: pointer;
+          position: relative;
+          color: var(--_gray-700);
 
-    &[data-background-shape="Round"] {
+          border-radius: 6px;
+          background-color: #fff;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          .value__selected {
+            width: 100%;
+          }
 
-      .left-button,
-      .right-button {
-        background-color: #f2f5f5;
-        box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
-      }
-    }
+          &.open .list {
+            display: none;
+            margin-top: var(
+              --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
+              var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
+            );
+            gap: var(
+              --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+              var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
+            );
+            background-color: var(
+              --_ctm-mob-dn-dn-se-bd-cr,
+              var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
+            );
+          }
 
-    &[data-control-type="Bottom-Overflow"] {
-      transform: translateX(-50%);
-      width: 100%;
-      justify-content: center;
-      gap: 12px;
-      top: unset;
-      bottom: 6px;
-    }
+          .list {
+            display: flex !important;
+            flex-direction: column;
+            gap: var(
+              --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+              var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
+            );
+            border: var(
+                --_ctm-mob-dn-dn-se-br-wh,
+                var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
+              )
+              var(
+                --_ctm-mob-dn-dn-se-br-se,
+                var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
+              )
+              var(
+                --_gray-200,
+                var(
+                  --_ctm-mob-dn-dn-se-br-cr,
+                  var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
+                )
+              );
+            border-radius: var(
+              --_ctm-mob-dn-dn-se-br-rs,
+              var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
+            );
+            box-shadow: var(
+              --_show-shadow-dn-se,
+              var(
+                  --_ctm-mob-dn-dn-se-sw-ae,
+                  var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae)))
+                )
+                var(
+                  --_ctm-mob-dn-dn-se-sw-br,
+                  var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br)))
+                )
+                var(
+                  --_ctm-mob-dn-dn-se-sw-sd,
+                  var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd)))
+                )
+                var(
+                  --_ctm-mob-dn-dn-se-sw-cr,
+                  var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr)))
+                )
+            );
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            background-color: var(
+              --_ctm-mob-dn-dn-se-bd-cr,
+              var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
+            );
+            border-radius: 4px;
+            z-index: var(--_higher-zIndex);
+            max-height: 200px;
+            overflow-y: auto;
+
+            &.top {
+              bottom: 100%;
+              top: auto;
+            }
 
-    &[data-control-type="Bottom"] {
-      transform: unset;
-      position: static;
-      width: 100%;
-      justify-content: center;
-      gap: 12px;
-      margin-top: 10px;
-    }
+            .list__option {
+              padding: var(
+                --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
+                var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
+              );
+              cursor: pointer;
 
-    .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)));
+              &:hover {
+                background-color: var(--_primary-25);
+                color: var(--_primary-400);
+              }
 
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      outline: none;
-      margin-left: 12px;
-
-      &:disabled {
-        & svg {
-          path {
-            stroke: rgb(192, 192, 192);
+              &.disabled {
+                cursor: not-allowed;
+                opacity: 0.4;
+              }
+            }
           }
         }
       }
-    }
 
-    .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)));
+      // variant dropdown selection
+      .var__drop__selection {
+        display: flex;
+        width: 100%;
+        gap: var(
+          --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+          var(
+            --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
+            var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
+          )
+        );
+
+        flex-direction: row;
+        &[data-dropdown-style="Vertical List"] {
+          flex-direction: column;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+        }
+        .dropdown_wrapper {
+          position: relative;
+          &[data-show-divider="true"] {
+            &:not(:last-child)::after {
+              content: "";
+              position: relative;
+              background-color: #000;
+              height: 1px;
+              width: 100%;
+              display: flex;
+              top: calc(
+                calc(
+                    var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px
+                  ) /
+                  2
+              );
+            }
+          }
 
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      outline: none;
-      margin-right: 12px;
-      padding: 10px;
-
-      &:disabled {
-        & svg {
-          path {
-            stroke: rgb(192, 192, 192);
+          &[data-show-item-divider="true"] {
+            .est__dropdown__main {
+              .est__dropdown {
+                .list {
+                  :not(:last-child).list__option {
+                    &::after {
+                      content: "";
+                      position: relative;
+                      background-color: #000;
+                      height: 1px;
+                      width: 100%;
+                      display: flex;
+                      top: calc(
+                        var(
+                            --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+                            var(
+                              --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
+                              var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
+                            )
+                          ) /
+                          2
+                      );
+                    }
+                  }
+                }
+              }
+            }
           }
         }
-      }
-    }
-
-    .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: var(--_ctm-mob-dn-pn-as-aw-cr,
-              var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
+        & > div {
+          width: 100%;
         }
       }
-    }
-  }
-
-  &[data-thumbnail-placement="top"] {
-    flex-direction: column-reverse;
-  }
-
-  &[data-thumbnail-placement="bottom"] {
-    flex-direction: column;
-  }
-
-  &[data-thumbnail-placement="left"] {
-    flex-direction: row-reverse;
-
-    .embla__thumbs {
-      width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-      height: 100%;
-
-      & .embla__thumbs__container {
-        flex-direction: column;
+      .embla {
+        width: 100%;
         height: 100%;
-      }
-    }
-  }
-
-  &[data-thumbnail-placement="right"] {
-    flex-direction: row;
-
-    .embla__thumbs {
-      width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-      height: 100%;
-
-      & .embla__thumbs__container {
+        position: relative;
+        display: flex;
         flex-direction: column;
-        height: 100%;
-      }
-    }
-  }
-
-  &[data-control-type="Side"] {
-    display: flex;
-    align-self: center;
-    flex-direction: row;
-
-    .left-button:disabled,
-    .right-button:disabled {
-      display: none;
-    }
-  }
-
-  .embla__dots {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
-    gap: 6px;
-    margin-top: 16px;
-
-    &[data-control-type="Bottom-Overflow"] {
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 75%;
-    }
 
-    .embla__dot {
-      -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-      -webkit-appearance: none;
-      appearance: none;
-      background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
-      touch-action: manipulation;
-      display: inline-flex;
-      text-decoration: none;
-      cursor: pointer;
-      border: 0;
-      padding: 0;
-      margin: 0;
-      // width: 0.6rem;
-      // height: 0.6rem;
-      width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-      height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-    }
+        // overflow: hidden;
 
-    .embla__dot:after {
-      // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-      width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-      height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      content: "";
-    }
-
-    .embla__dot--selected:after {
-      box-shadow: inset 0 0 0 1px var(--text-body);
-      background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
-    }
+        .embla__viewport {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+
+          .embla__container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            grid-template-rows: 100%;
+            // grid-template-columns: 100%;
+            // grid-template-columns: repeat(
+            //   var(--_ctm-lt-is-pr-se),
+            //   calc(100% / var(--_ctm-lt-is-pr-se))
+            // );
+            // grid-auto-flow: column;
+            gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
+
+            &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+              height: calc(
+                100% - calc(
+                    var(
+                        --_ctm-mob-dn-pn-as-aw-se,
+                        var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                      ) +
+                      8px
+                  )
+              );
+            }
+            &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+              height: calc(
+                100% - calc(
+                    var(
+                        --_ctm-mob-dn-pn-le-le-ht,
+                        var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+                      ) +
+                      20px
+                  )
+              );
+            }
+            &[data-control-type="Bottom"][data-slider-control="Dots"] {
+              height: calc(
+                100% - calc(
+                    var(
+                        --_ctm-mob-dn-pn-ds-dt-se,
+                        var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+                      ) +
+                      20px
+                  )
+              );
+            }
 
-    &[data-slider-control="Pagination Line"] {
-      .embla__dot {
-        width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
-        height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
-        background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
+            .embla__slide {
+              // width: 100%;
+              height: 100%;
+            }
+          }
+        }
 
-        border-radius: 6px;
-      }
+        .arrow-navigation {
+          display: flex;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 100%;
+          justify-content: space-between;
+          transform: translate(-50%, -50%);
+          //   padding-left: 20px;
+          &[data-control-type="Side"] {
+            .left-button,
+            .right-button {
+              background-color: transparent;
+            }
+          }
+          &[data-background-shape="Round"] {
+            .left-button,
+            .right-button {
+              background-color: #f2f5f5;
+              box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+            }
+          }
+          &[data-control-type="Bottom-Overflow"] {
+            transform: translateX(-50%);
+            width: 100%;
+            justify-content: center;
+            gap: 12px;
+            top: unset;
+            bottom: 6px;
+          }
+          &[data-control-type="Bottom"] {
+            transform: unset;
+            position: static;
+            width: 100%;
+            justify-content: center;
+            gap: 12px;
+            margin-top: 10px;
+          }
+          .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))
+            );
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            outline: none;
+            margin-left: 12px;
+            &:disabled {
+              & svg {
+                path {
+                  stroke: rgb(192, 192, 192);
+                }
+              }
+            }
+          }
+          .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;
+
+            &:disabled {
+              & svg {
+                path {
+                  stroke: rgb(192, 192, 192);
+                }
+              }
+            }
+          }
+          .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: var(
+                  --_ctm-mob-dn-pn-as-aw-cr,
+                  var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+                );
+              }
+            }
+          }
+        }
 
-      .embla__dot--selected:after {
-        box-shadow: inset 0 0 0 1px var(--text-body);
-        border-radius: 6px;
-        width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
-        height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
-        // background-color: #fff;
-        background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
-      }
-    }
-  }
+        &[data-thumbnail-placement="top"] {
+          flex-direction: column-reverse;
+        }
+        &[data-thumbnail-placement="bottom"] {
+          flex-direction: column;
+        }
+        &[data-thumbnail-placement="left"] {
+          flex-direction: row-reverse;
 
-  .embla__thumbs {
-    width: 100%;
-    height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+          .embla__thumbs {
+            width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
 
-    position: relative;
-    display: grid;
-    grid-template-columns: 1fr;
-    overflow: hidden;
-    // margin: 10px;
-    padding: 10px;
+            height: 100%;
 
-    .embla__thumbs__viewport {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      display: flex;
-      flex-direction: column;
+            & .embla__thumbs__container {
+              flex-direction: column;
+              height: 100%;
+            }
+          }
+        }
+        &[data-thumbnail-placement="right"] {
+          flex-direction: row;
+          .embla__thumbs {
+            width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
 
-      overflow: hidden;
-    }
+            height: 100%;
 
-    .embla__thumbs__container {
-      display: flex;
-      flex-direction: row;
-      margin-left: calc(var(--thumbs-slide-spacing) * -1);
-      gap: var(--_ctm-lt-tl-sg);
-      width: 100%;
-      // justify-content: center;
-      // height: 200px;
+            & .embla__thumbs__container {
+              flex-direction: column;
+              height: 100%;
+            }
+          }
+        }
+        &[data-control-type="Side"] {
+          display: flex;
+          align-self: center;
+          flex-direction: row;
+          .left-button:disabled,
+          .right-button:disabled {
+            display: none;
+          }
+        }
+        .embla__dots {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          align-items: center;
+          margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+          gap: 6px;
+          margin-top: 16px;
+
+          &[data-control-type="Bottom-Overflow"] {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 75%;
+          }
+          .embla__dot {
+            -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+            -webkit-appearance: none;
+            appearance: none;
+            background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
+            touch-action: manipulation;
+            display: inline-flex;
+            text-decoration: none;
+            cursor: pointer;
+            border: 0;
+            padding: 0;
+            margin: 0;
+            // width: 0.6rem;
+            // height: 0.6rem;
+            width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+            height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+          }
+          .embla__dot:after {
+            // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+            width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+            height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            content: "";
+          }
+          .embla__dot--selected:after {
+            box-shadow: inset 0 0 0 1px var(--text-body);
+            background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
+          }
+          &[data-slider-control="Pagination Line"] {
+            .embla__dot {
+              width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
+              height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
+              background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
 
-      .embla__thumbs__slide {
-        min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-        max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+              border-radius: 6px;
+            }
+            .embla__dot--selected:after {
+              box-shadow: inset 0 0 0 1px var(--text-body);
+              border-radius: 6px;
+              width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
+              height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
+              // background-color: #fff;
+              background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
+            }
+          }
+        }
 
-        & img {
+        .embla__thumbs {
           width: 100%;
-          height: 100%;
+          height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+          position: relative;
+          display: grid;
+          grid-template-columns: 1fr;
+          overflow: hidden;
+          // margin: 10px;
+          padding: 10px;
+
+          .embla__thumbs__viewport {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+
+            overflow: hidden;
+          }
+          .embla__thumbs__container {
+            display: flex;
+            flex-direction: row;
+            margin-left: calc(var(--thumbs-slide-spacing) * -1);
+            gap: var(--_ctm-lt-tl-sg);
+            width: 100%;
+            // justify-content: center;
+            // height: 200px;
+
+            .embla__thumbs__slide {
+              min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+              max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+              height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+              & img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
         }
       }
     }
   }
 }
-}
-}
-}