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

package/dist/order-status.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:list";
 @use "./functions.scss" as *;
+$overflowSelector: ".flex__overflow";
 $defaultValues: (
   --_column-count-two: getListOfResponsive(2, 1),
   --_column-count-three: getListOfResponsive(3, 1, 2),
@@ -69,8 +70,18 @@ $defaultValues: (
         var(--_ctm-tab-dn-or-wt-im-gp, var(--_ctm-dn-or-wt-im-gp))
       );
       @include prepareMediaQueries($defaultValues);
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-or-wt-sw-ae, var(--_ctm-tab-dn-or-wt-sw-ae, var(--_ctm-dn-or-wt-sw-ae)))
+          var(--_ctm-mob-dn-or-wt-sw-br, var(--_ctm-tab-dn-or-wt-sw-br, var(--_ctm-dn-or-wt-sw-br)))
+          var(--_ctm-mob-dn-or-wt-sw-sd, var(--_ctm-tab-dn-or-wt-sw-sd, var(--_ctm-dn-or-wt-sw-sd)))
+          var(--_ctm-mob-dn-or-wt-sw-cr, var(--_ctm-tab-dn-or-wt-sw-cr, var(--_ctm-dn-or-wt-sw-cr)))
+      );
 
       .each-order {
+        display: flex;
+        flex-direction: column;
+        gap: prepareMediaVariable(--_ctm-dn-or-wt-im-gp);
         // border: 1px solid var(--_gray-200);
         // border-radius: 8px;
         // padding: 16px;
@@ -102,25 +113,6 @@ $defaultValues: (
             --_ctm-mob-dn-hr-cr-hr-wr-br-rs,
             var(--_ctm-tab-dn-hr-cr-hr-wr-br-rs, var(--_ctm-dn-hr-cr-hr-wr-br-rs))
           );
-          box-shadow: var(
-            --_show-shadow,
-            var(
-                --_ctm-mob-dn-bd-ad-fl-sw-ae,
-                var(--_ctm-dn-hr-cr-hr-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-bd-ad-fl-sw-br,
-                var(--_ctm-dn-hr-cr-hr-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-bd-ad-fl-sw-sd,
-                var(--_ctm-dn-hr-cr-hr-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-bd-ad-fl-sw-cr,
-                var(--_ctm-dn-hr-cr-hr-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
-              )
-          );
 
           .user-info {
             display: flex;
@@ -176,6 +168,9 @@ $defaultValues: (
                 --_ctm-mob-dn-hr-cr-te-tt-an,
                 var(--_ctm-tab-dn-hr-cr-te-tt-an, var(--_ctm-dn-hr-cr-te-tt-an))
               );
+              text-transform: prepareMediaVariable(--_ctm-dn-hr-cr-te-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-hr-cr-te-wd-wr);
+              word-break: prepareMediaVariable(--_ctm-dn-hr-cr-te-wd-bk);
               margin-bottom: 6px;
               span {
                 margin-left: 6px;
@@ -245,6 +240,9 @@ $defaultValues: (
                     --_ctm-mob-dn-hr-cr-ee-ds-tt-an,
                     var(--_ctm-tab-dn-hr-cr-ee-ds-tt-an, var(--_ctm-dn-hr-cr-ee-ds-tt-an))
                   );
+                  text-transform: prepareMediaVariable(--_ctm-dn-hr-cr-ee-ds-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-hr-cr-ee-ds-wd-wr);
+                  word-break: prepareMediaVariable(--_ctm-dn-hr-cr-ee-ds-wd-bk);
                   padding-right: 7px;
                 }
                 &:not(:first-child)::before {
@@ -460,17 +458,26 @@ $defaultValues: (
           display: flex;
           flex-direction: column;
           gap: var(
-            --_ctm-mob-dn-or-io-or-io-cr-im-gp,
-            var(--_ctm-tab-dn-or-io-or-io-cr-im-gp, var(--_ctm-dn-or-io-or-io-cr-im-gp))
+            --_ctm-mob-dn-or-io-or-io-wr-im-gp,
+            var(--_ctm-tab-dn-or-io-or-io-wr-im-gp, var(--_ctm-dn-or-io-or-io-wr-im-gp))
           );
-          margin: var(
-            --_ctm-mob-dn-or-io-or-io-cr-mn,
-            var(--_ctm-tab-dn-or-io-or-io-cr-mn, var(--_ctm-dn-or-io-or-io-cr-mn))
-          );
-          padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-pg);
+          padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-wr-pg);
           background-color: var(
-            --_ctm-mob-dn-or-io-or-io-cr-bd-cr,
-            var(--_ctm-tab-dn-or-io-or-io-cr-bd-cr, var(--_ctm-dn-or-io-or-io-cr-bd-cr))
+            --_ctm-mob-dn-or-io-or-io-wr-bd-cr,
+            var(--_ctm-tab-dn-or-io-or-io-wr-bd-cr, var(--_ctm-dn-or-io-or-io-wr-bd-cr))
+          );
+          border-color: prepareMediaVariable(--_ctm-dn-or-io-or-io-wr-br-cr);
+          border-style: var(
+            --_ctm-mob-dn-or-io-or-io-wr-br-se,
+            var(--_ctm-tab-dn-or-io-or-io-wr-br-se, var(--_ctm-dn-or-io-or-io-wr-br-se))
+          );
+          border-width: var(
+            --_ctm-mob-dn-or-io-or-io-wr-br-wh,
+            var(--_ctm-tab-dn-or-io-or-io-wr-br-wh, var(--_ctm-dn-or-io-or-io-wr-br-wh))
+          );
+          border-radius: var(
+            --_ctm-mob-dn-or-io-or-io-wr-br-rs,
+            var(--_ctm-tab-dn-or-io-or-io-wr-br-rs, var(--_ctm-dn-or-io-or-io-wr-br-rs))
           );
           .order_info_header {
             font-family: var(
@@ -514,11 +521,10 @@ $defaultValues: (
               --_ctm-mob-dn-or-io-or-io-hr-bd-cr,
               var(--_ctm-tab-dn-or-io-or-io-hr-bd-cr, var(--_ctm-dn-or-io-or-io-hr-bd-cr))
             );
-            // border-color: var(
-            //   --_ctm-mob-dn-or-io-or-io-hr-br-cr,
-            //   var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr))
-            // );
-            border: 1px solid var(--_gray-200);
+            border-color: var(
+              --_ctm-mob-dn-or-io-or-io-hr-br-cr,
+              var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr))
+            );
             border-style: var(
               --_ctm-mob-dn-or-io-or-io-hr-br-se,
               var(--_ctm-tab-dn-or-io-or-io-hr-br-se, var(--_ctm-dn-or-io-or-io-hr-br-se))
@@ -531,6 +537,15 @@ $defaultValues: (
               --_ctm-mob-dn-or-io-or-io-hr-br-rs,
               var(--_ctm-tab-dn-or-io-or-io-hr-br-rs, var(--_ctm-dn-or-io-or-io-hr-br-rs))
             );
+            text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-wd-wr);
+            word-break: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-wd-bk);
+            // Order Info > Order Info Header > Text Overflow. `textOverflow` is a
+            // `controls` property, so the renderer adds the class and publishes the
+            // line count rather than emitting a variable for it.
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
             span {
               font-size: 14px;
               font-weight: 600;
@@ -542,29 +557,29 @@ $defaultValues: (
           display: flex;
           flex-direction: column;
           gap: var(
-            --_ctm-mob-dn-qk-as-cr-im-gp,
-            var(--_ctm-tab-dn-qk-as-cr-im-gp, var(--_ctm-dn-qk-as-cr-im-gp))
+            --_ctm-mob-dn-qk-as-qk-as-wr-im-gp,
+            var(--_ctm-tab-dn-qk-as-qk-as-wr-im-gp, var(--_ctm-dn-qk-as-qk-as-wr-im-gp))
           );
-          padding: prepareMediaVariable(--_ctm-dn-qk-as-cr-pg);
+          padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-wr-pg);
           background-color: var(
-            --_ctm-mob-dn-qk-as-cr-bd-cr,
-            var(--_ctm-tab-dn-qk-as-cr-bd-cr, var(--_ctm-dn-qk-as-cr-bd-cr))
+            --_ctm-mob-dn-qk-as-qk-as-wr-bd-cr,
+            var(--_ctm-tab-dn-qk-as-qk-as-wr-bd-cr, var(--_ctm-dn-qk-as-qk-as-wr-bd-cr))
           );
           border-color: var(
-            --_ctm-mob-dn-qk-as-cr-br-cr,
-            var(--_ctm-tab-dn-qk-as-cr-br-cr, var(--_ctm-dn-qk-as-cr-br-cr))
+            --_ctm-mob-dn-qk-as-qk-as-wr-br-cr,
+            var(--_ctm-tab-dn-qk-as-qk-as-wr-br-cr, var(--_ctm-dn-qk-as-qk-as-wr-br-cr))
           );
           border-style: var(
-            --_ctm-mob-dn-qk-as-cr-br-se,
-            var(--_ctm-tab-dn-qk-as-cr-br-se, var(--_ctm-dn-qk-as-cr-br-se))
+            --_ctm-mob-dn-qk-as-qk-as-wr-br-se,
+            var(--_ctm-tab-dn-qk-as-qk-as-wr-br-se, var(--_ctm-dn-qk-as-qk-as-wr-br-se))
           );
           border-width: var(
-            --_ctm-mob-dn-qk-as-cr-br-wh,
-            var(--_ctm-tab-dn-qk-as-cr-br-wh, var(--_ctm-dn-qk-as-cr-br-wh))
+            --_ctm-mob-dn-qk-as-qk-as-wr-br-wh,
+            var(--_ctm-tab-dn-qk-as-qk-as-wr-br-wh, var(--_ctm-dn-qk-as-qk-as-wr-br-wh))
           );
           border-radius: var(
-            --_ctm-mob-dn-qk-as-cr-br-rs,
-            var(--_ctm-tab-dn-qk-as-cr-br-rs, var(--_ctm-dn-qk-as-cr-br-rs))
+            --_ctm-mob-dn-qk-as-qk-as-wr-br-rs,
+            var(--_ctm-tab-dn-qk-as-qk-as-wr-br-rs, var(--_ctm-dn-qk-as-qk-as-wr-br-rs))
           );
           .quick_actions_header {
             padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-pg);
@@ -572,11 +587,10 @@ $defaultValues: (
               --_ctm-mob-dn-qk-as-qk-hr-bd-cr,
               var(--_ctm-tab-dn-qk-as-qk-hr-bd-cr, var(--_ctm-dn-qk-as-qk-hr-bd-cr))
             );
-            // border-color: var(
-            //   --_ctm-mob-dn-qk-as-qk-hr-br-cr,
-            //   var(--_ctm-tab-dn-qk-as-qk-hr-br-cr, var(--_ctm-dn-qk-as-qk-hr-br-cr))
-            // );
-            border-color: var(--_gray-200);
+            border-color: var(
+              --_ctm-mob-dn-qk-as-qk-hr-br-cr,
+              var(--_ctm-tab-dn-qk-as-qk-hr-br-cr, var(--_ctm-dn-qk-as-qk-hr-br-cr))
+            );
             border-style: var(
               --_ctm-mob-dn-qk-as-qk-hr-br-se,
               var(--_ctm-tab-dn-qk-as-qk-hr-br-se, var(--_ctm-dn-qk-as-qk-hr-br-se))
@@ -629,6 +643,12 @@ $defaultValues: (
                 --_ctm-mob-dn-qk-as-qk-hr-tt-an,
                 var(--_ctm-tab-dn-qk-as-qk-hr-tt-an, var(--_ctm-dn-qk-as-qk-hr-tt-an))
               );
+              text-transform: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-wd-wr);
+              word-break: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-wd-bk);
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
             }
           }
         }
@@ -638,51 +658,29 @@ $defaultValues: (
           flex-direction: column;
           /* space between the two rows */
           background-color: var(
-            --_ctm-mob-dn-or-io-or-io-wr-bd-cr,
-            var(--_ctm-tab-dn-or-io-or-io-wr-bd-cr, var(--_ctm-dn-or-io-or-io-wr-bd-cr))
-          );
-          margin: var(
-            --_ctm-mob-dn-or-io-or-io-wr-mn,
-            var(--_ctm-tab-dn-or-io-or-io-wr-mn, var(--_ctm-dn-or-io-or-io-wr-mn))
+            --_ctm-mob-dn-or-io-or-io-cr-bd-cr,
+            var(--_ctm-tab-dn-or-io-or-io-cr-bd-cr, var(--_ctm-dn-or-io-or-io-cr-bd-cr))
           );
+          gap: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-im-gp);
           padding: var(
-            --_ctm-mob-dn-or-io-or-io-wr-pg,
-            var(--_ctm-tab-dn-or-io-or-io-wr-pg, var(--_ctm-dn-or-io-or-io-wr-pg))
+            --_ctm-mob-dn-or-io-or-io-cr-pg,
+            var(--_ctm-tab-dn-or-io-or-io-cr-pg, var(--_ctm-dn-or-io-or-io-cr-pg))
           );
           border-color: var(
-            --_ctm-mob-dn-or-io-or-io-wr-br-cr,
-            var(--_ctm-tab-dn-or-io-or-io-wr-br-cr, var(--_ctm-dn-or-io-or-io-wr-br-cr))
+            --_ctm-mob-dn-or-io-or-io-cr-br-cr,
+            var(--_ctm-tab-dn-or-io-or-io-cr-br-cr, var(--_ctm-dn-or-io-or-io-cr-br-cr))
           );
           border-style: var(
-            --_ctm-mob-dn-or-io-or-io-wr-br-se,
-            var(--_ctm-tab-dn-or-io-or-io-wr-br-se, var(--_ctm-dn-or-io-or-io-wr-br-se))
+            --_ctm-mob-dn-or-io-or-io-cr-br-se,
+            var(--_ctm-tab-dn-or-io-or-io-cr-br-se, var(--_ctm-dn-or-io-or-io-cr-br-se))
           );
           border-width: var(
-            --_ctm-mob-dn-or-io-or-io-wr-br-wh,
-            var(--_ctm-tab-dn-or-io-or-io-wr-br-wh, var(--_ctm-dn-or-io-or-io-wr-br-wh))
+            --_ctm-mob-dn-or-io-or-io-cr-br-wh,
+            var(--_ctm-tab-dn-or-io-or-io-cr-br-wh, var(--_ctm-dn-or-io-or-io-cr-br-wh))
           );
           border-radius: var(
-            --_ctm-mob-dn-or-io-or-io-wr-br-rs,
-            var(--_ctm-mob-dn-or-io-or-io-wr-br-rs, var(--_ctm-mob-dn-or-io-or-io-wr-br-rs))
-          );
-          box-shadow: var(
-            --_show-shadow,
-            var(
-                --_ctm-mob-dn-bd-ad-fl-sw-ae,
-                var(--_ctm-dn-or-io-or-io-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-bd-ad-fl-sw-br,
-                var(--_ctm-dn-or-io-or-io-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-bd-ad-fl-sw-sd,
-                var(--_ctm-dn-or-io-or-io-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-bd-ad-fl-sw-cr,
-                var(--_ctm-dn-or-io-or-io-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
-              )
+            --_ctm-mob-dn-or-io-or-io-cr-br-rs,
+            var(--_ctm-tab-dn-or-io-or-io-cr-br-rs, var(--_ctm-dn-or-io-or-io-cr-br-rs))
           );
 
           .order-row {
@@ -694,14 +692,13 @@ $defaultValues: (
             &:first-child {
               grid-template-columns: repeat(2, 1fr);
               border-bottom: 1px dashed var(--_thm-cs-be-se-3);
-              padding-bottom: 24px;
+              padding-bottom: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-im-gp);
             }
 
             /* Second row: three equal columns */
             &:nth-child(2) {
               // grid-template-columns: repeat(3, 1fr);
               grid-template-columns: repeat(var(--_column-count, 3), 2fr);
-              margin-top: 24px;
             }
 
             /* Each individual info‐cell styling */
@@ -753,6 +750,13 @@ $defaultValues: (
                   --_ctm-mob-dn-or-io-or-ne-tt-an,
                   var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an))
                 );
+                text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-ne-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-wr);
+                word-break: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-bk);
+                padding: prepareMediaVariable(--_ctm-dn-or-io-or-ne-pg, 0);
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
               .order_number_skeleton {
                 display: inline-flex;
@@ -766,7 +770,11 @@ $defaultValues: (
                 // font-weight: 700;
                 // color: var(--_gray-900);
                 // line-height: 30px;
-                line-height: 24px;
+                line-height: prepareMediaVariable(--_ctm-dn-or-io-or-id-le-ht, 24px);
+                // The order number and its status badge are the two items this gap spaces.
+                display: inline-flex;
+                align-items: center;
+                gap: prepareMediaVariable(--_ctm-dn-or-io-or-id-im-gp, 0);
                 font-family: var(
                   --_ctm-mob-dn-or-io-or-id-ft-fy,
                   var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
@@ -801,6 +809,13 @@ $defaultValues: (
                   --_ctm-mob-dn-or-io-or-id-tt-an,
                   var(--_ctm-tab-dn-or-io-or-id-tt-an, var(--_ctm-dn-or-io-or-id-tt-an))
                 );
+                text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-id-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-id-wd-wr);
+                word-break: prepareMediaVariable(--_ctm-dn-or-io-or-id-wd-bk);
+                padding: prepareMediaVariable(--_ctm-dn-or-io-or-id-pg, 0);
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
               .delivery_address {
                 font-size: 14px;
@@ -925,6 +940,16 @@ $defaultValues: (
                   --_ctm-mob-dn-or-io-or-de-tt-an,
                   var(--_ctm-tab-dn-or-io-or-de-tt-an, var(--_ctm-dn-or-io-or-de-tt-an))
                 );
+                text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-de-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-de-wd-wr);
+                word-break: prepareMediaVariable(--_ctm-dn-or-io-or-de-wd-bk);
+                padding: prepareMediaVariable(--_ctm-dn-or-io-or-de-pg, 0);
+                display: flex;
+                align-items: center;
+                gap: prepareMediaVariable(--_ctm-dn-or-io-or-de-im-gp, 0);
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
               .expected_delivery {
                 line-height: prepareMediaVariable(--_ctm-dn-or-io-sg-md-le-ht);
@@ -938,9 +963,19 @@ $defaultValues: (
 
                 font-style: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se-ic);
                 text-align: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-an);
+                text-transform: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-wr);
+                word-break: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-bk);
+                padding: prepareMediaVariable(--_ctm-dn-or-io-sg-md-pg, 0);
+                display: flex;
+                align-items: center;
+                gap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-im-gp, 0);
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
               .total_amount {
-                line-height: 24px;
+                line-height: prepareMediaVariable(--_ctm-dn-or-io-sg-md-le-ht, 24px);
                 font-family: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-fy);
                 font-size: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se);
                 // font-size: 16px;
@@ -951,6 +986,16 @@ $defaultValues: (
 
                 font-style: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se-ic);
                 text-align: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-an);
+                text-transform: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-wr);
+                word-break: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-bk);
+                padding: prepareMediaVariable(--_ctm-dn-or-io-sg-md-pg, 0);
+                display: inline-flex;
+                align-items: center;
+                gap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-im-gp, 0);
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
               .inclusive-tax {
                 margin-left: 4px;
@@ -1006,9 +1051,16 @@ $defaultValues: (
               --_ctm-mob-dn-or-io-or-ne-tt-an,
               var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an))
             );
+            text-transform: prepareMediaVariable(--_ctm-dn-or-io-or-ne-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-wr);
+            word-break: prepareMediaVariable(--_ctm-dn-or-io-or-ne-wd-bk);
+            padding: prepareMediaVariable(--_ctm-dn-or-io-or-ne-pg, 0);
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
           }
           .sgmd_details {
-            line-height: 24px;
+            line-height: prepareMediaVariable(--_ctm-dn-or-io-sg-md-le-ht, 24px);
             font-family: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-fy);
             font-size: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se);
             // font-size: 16px;
@@ -1019,6 +1071,16 @@ $defaultValues: (
 
             font-style: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se-ic);
             text-align: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-an);
+            text-transform: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-wr);
+            word-break: prepareMediaVariable(--_ctm-dn-or-io-sg-md-wd-bk);
+            padding: prepareMediaVariable(--_ctm-dn-or-io-sg-md-pg, 0);
+            display: flex;
+            align-items: center;
+            gap: prepareMediaVariable(--_ctm-dn-or-io-sg-md-im-gp, 0);
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
           }
         }
       }
@@ -1028,40 +1090,18 @@ $defaultValues: (
         display: flex;
         flex-direction: column;
 
-        gap: 12px;
-        // gap: var(
-        //   --_ctm-mob-dn-qk-as-as-im-gp,
-        //   var(--_ctm-tab-dn-qk-as-as-im-gp, var(--_ctm-dn-qk-as-as-im-gp))
-        // );
-
-        background-color: prepareMediaVariable(--_ctm-dn-dn-qk-as-bd-cr);
-        margin: prepareMediaVariable(--_ctm-dn-dn-qk-as-mn);
-        padding: prepareMediaVariable(--_ctm-dn-dn-qk-as-pg);
-        border-color: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-cr);
+        gap: var(
+          --_ctm-mob-dn-qk-as-qk-as-cr-im-gp,
+          var(--_ctm-tab-dn-qk-as-qk-as-cr-im-gp, var(--_ctm-dn-qk-as-qk-as-cr-im-gp))
+        );
 
-        border-style: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-se);
-        border-width: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-wh);
-        border-radius: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-rs);
+        background-color: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-bd-cr);
+        padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-pg);
+        border-color: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-cr);
 
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-bd-ad-fl-sw-ae,
-              var(--_ctm-dn-dn-qk-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-bd-ad-fl-sw-br,
-              var(--_ctm-dn-dn-qk-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-bd-ad-fl-sw-sd,
-              var(--_ctm-dn-dn-qk-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-bd-ad-fl-sw-cr,
-              var(--_ctm-dn-dn-qk-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
-            )
-        );
+        border-style: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-wh);
+        border-radius: prepareMediaVariable(--_ctm-dn-qk-as-qk-as-cr-br-rs);
 
         .action-button {
           width: fit-content;
@@ -1149,6 +1189,12 @@ $defaultValues: (
             --_ctm-mob-dn-qk-as-as-dt-se-pg,
             var(--_ctm-tab-dn-qk-as-as-dt-se-pg, var(--_ctm-dn-qk-as-as-dt-se-pg))
           );
+          text-transform: prepareMediaVariable(--_ctm-dn-qk-as-as-dt-se-tt-tm);
+          word-wrap: prepareMediaVariable(--_ctm-dn-qk-as-as-dt-se-wd-wr);
+          word-break: prepareMediaVariable(--_ctm-dn-qk-as-as-dt-se-wd-bk);
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
           cursor: pointer;
           // text-align: start;
 
@@ -1240,6 +1286,9 @@ $defaultValues: (
               --_ctm-mob-dn-qk-as-as-hr-se-pg,
               var(--_ctm-tab-dn-qk-as-as-hr-se-pg, var(--_ctm-dn-qk-as-as-hr-se-pg))
             );
+            text-transform: prepareMediaVariable(--_ctm-dn-qk-as-as-hr-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-qk-as-as-hr-se-wd-wr);
+            word-break: prepareMediaVariable(--_ctm-dn-qk-as-as-hr-se-wd-bk);
           }
         }
       }
@@ -1340,16 +1389,16 @@ $defaultValues: (
             --_ctm-mob-dn-pt-wt-pt-te-tt-an,
             var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an))
           );
+          text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-te-tt-tm);
+          word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-te-wd-wr);
+          word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-te-wd-bk);
         }
 
         .items-grid {
           display: grid;
           // grid-template-columns: repeat(3, 1fr);
           grid-template-columns: repeat(var(--_column-count-three, 3), 1fr);
-          gap: var(
-            --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
-            var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
-          );
+          gap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-wt-wr-im-gp, 16px);
           background-color: var(
             --_ctm-mob-dn-pt-wt-pt-wt-wr-bd-cr,
             var(--_ctm-tab-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-bd-cr))
@@ -1420,6 +1469,15 @@ $defaultValues: (
           display: flex;
           align-items: flex-start;
           flex-wrap: wrap;
+          .cart_item_img {
+            background-color: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-bd-cr);
+            border-radius: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-rs);
+            border-color: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-cr);
+            border-style: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-se);
+            border-width: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-br-wh);
+            padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ie-pg);
+            object-fit: cover;
+          }
 
           .cart_item_accordians {
             display: flex;
@@ -1582,20 +1640,12 @@ $defaultValues: (
             flex: 1;
 
             .item-name {
-              display: -webkit-box;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
-              overflow: hidden;
-              text-overflow: ellipsis;
               // margin: 0 0 4px;
               // font-size: 14px;
               // font-weight: 600;
               // color: var(--_gray-900);
               // line-height: 20px;
-              // padding: var(
-              //   --_ctm-mob-dn-pt-wt-pt-ne-pg,
-              //   var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
-              // );
+              padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-pg, 0);
               font-family: var(
                 --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
                 var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
@@ -1632,6 +1682,12 @@ $defaultValues: (
                 --_ctm-mob-dn-pt-wt-pt-ne-tt-an,
                 var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an))
               );
+              text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-wd-wr);
+              word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-wd-bk);
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
             }
 
             .item-specs,
@@ -1678,6 +1734,12 @@ $defaultValues: (
                 --_ctm-mob-dn-pt-wt-pt-ce-tt-an,
                 var(--_ctm-tab-dn-pt-wt-pt-ce-tt-an, var(--_ctm-dn-pt-wt-pt-ce-tt-an))
               );
+              text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-wd-wr);
+              word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-wd-bk);
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
             }
             .item-qty {
               padding: var(
@@ -1721,6 +1783,12 @@ $defaultValues: (
                 --_ctm-mob-dn-pt-wt-pt-qy-tt-an,
                 var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an))
               );
+              text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-wr);
+              word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-bk);
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
               span {
                 font-family: var(
                   --_ctm-mob-dn-pt-wt-pt-qy-ft-fy-dc,
@@ -1758,6 +1826,12 @@ $defaultValues: (
                   --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc,
                   var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc))
                 );
+                text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm-dc);
+                word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-wr-dc);
+                word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-wd-bk-dc);
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
             }
             .estimated-delivery {
@@ -1806,6 +1880,12 @@ $defaultValues: (
                 --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
                 var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an))
               );
+              text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-wr);
+              word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-bk);
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
             }
 
             .delivery-date {
@@ -1854,6 +1934,12 @@ $defaultValues: (
                 --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc,
                 var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc))
               );
+              text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm-dc);
+              word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-wr-dc);
+              word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-wd-bk-dc);
+              &#{$overflowSelector} {
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
             }
           }
 
@@ -1897,6 +1983,12 @@ $defaultValues: (
               --_ctm-mob-dn-pt-wt-pt-pe-tt-an,
               var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an))
             );
+            text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-wd-wr);
+            word-break: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-wd-bk);
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
             // margin-left: 12px;
           }
         }