@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/shipping-payments.scss

@@ -8,14 +8,13 @@ $light-color: #f5f5f5;
 $dark-color: #343a40;
 
 $activeElementSelector: "[data-has-clicked='true']";
+
 [data-div-type="element"] {
   &[data-element-type="shipping-payment"] {
-    width: calc(
-      1% *
-        var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
-    );
+    width: calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto))));
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_ctm-lt-mn))));
-    & > div {
+
+    &>div {
       &.wrapper {
         width: 100%;
         min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
@@ -23,45 +22,24 @@ $activeElementSelector: "[data-has-clicked='true']";
 
         background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
         background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
-        background-attachment: var(
-          --_ctm-mob-dn-bd-at,
-          var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))
-        );
-        background-position: var(
-          --_ctm-mob-dn-bd-pn,
-          var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn))
-        );
+        background-attachment: var(--_ctm-mob-dn-bd-at,
+            var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at)));
+        background-position: var(--_ctm-mob-dn-bd-pn,
+            var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
         background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
         background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
         border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
         border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
         border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
         border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
-        box-shadow: var(
-          --_hover-show-shadow,
-          var(
-            --_sf-hr-bx-sw,
-            var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-dn-dt-se-sw-ae,
-                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-dt-se-sw-br,
-                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-dt-se-sw-sd,
-                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-dt-se-sw-cr,
-                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
-                )
-            )
-          )
-        );
+        box-shadow: var(--_hover-show-shadow,
+            var(--_sf-hr-bx-sw,
+              var(--_show-shadow,
+                var(--_ctm-mob-dn-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))) var(--_ctm-mob-dn-dt-se-sw-br,
+                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))) var(--_ctm-mob-dn-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))) var(--_ctm-mob-dn-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))))));
       }
 
       .chk_checkout_accordion {
@@ -85,15 +63,19 @@ $activeElementSelector: "[data-has-clicked='true']";
           // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
           flex-direction: column;
           transition: max-height 800ms ease-in;
+
           &.open {
             transition: max-height 800ms ease-in;
+
             .accordion-header {
               background-color: var(--_gray-200);
             }
+
             .accordion-body {
               transition: max-height 800ms ease-in;
               max-height: 2000px;
               padding-block: 12px 24px;
+
               .shipping-address {
                 max-height: fit-content;
                 transition: max-height 800ms ease-in;
@@ -127,6 +109,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 display: flex;
               }
             }
+
             .edit-btn {
               cursor: pointer;
               color: var(--_primary-400);
@@ -144,6 +127,7 @@ $activeElementSelector: "[data-has-clicked='true']";
             max-height: 0px;
             overflow: hidden;
             padding: 0;
+
             // shipping address
             .shipping-address {
               transition: max-height 800ms ease-in;
@@ -154,6 +138,7 @@ $activeElementSelector: "[data-has-clicked='true']";
 
               .btn_link {
                 color: var(--_primary-400);
+
                 &:hover {
                   text-decoration: underline;
                 }
@@ -181,6 +166,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 align-items: center;
                 font-weight: 600;
                 color: var(--_gray-900);
+
                 .icon {
                   display: flex;
                   align-items: center;
@@ -247,6 +233,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 font-size: 12px;
                 color: #ff0000;
               }
+
               label {
                 display: flex;
                 align-items: center;
@@ -292,7 +279,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 }
               }
 
-              input[type="checkbox"]:checked + label {
+              input[type="checkbox"]:checked+label {
                 .custom-checkbox {
                   background-color: #004dff;
                   border-color: #004dff;
@@ -443,14 +430,17 @@ $activeElementSelector: "[data-has-clicked='true']";
                 svg {
                   width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
                   height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
+
                   path {
                     stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
                     // Overrides the stroke-width presentation attribute baked into the icon markup.
                     stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
                   }
                 }
+
                 &:hover {
                   cursor: pointer;
+
                   svg {
                     path {
                       stroke: var(--_error-700);
@@ -458,6 +448,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                   }
                 }
               }
+
               .chk_shiping_address_form_input {
                 padding: 8px 12px;
                 width: -webkit-fill-available;
@@ -547,14 +538,15 @@ $activeElementSelector: "[data-has-clicked='true']";
                   width: 20px;
                   margin-right: 12px;
                   height: 20px;
-                  border: 1px solid transparent; /* blue ring */
+                  border: 1px solid transparent;
+                  /* blue ring */
                   border-radius: 50%;
                   display: inline-block;
                   box-sizing: border-box;
                   background-color: white;
                   transition: all 0.2s ease;
 
-                  input[type="radio"]:checked + .radio-style {
+                  input[type="radio"]:checked+.radio-style {
                     background-color: var(--_thm-py-bs-dt-se-bd-cr);
                     border: 6px solid;
                   }
@@ -574,6 +566,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                 .chk_shipping_method_value {
                   color: var(--_gray-900);
                   font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
+                  text-transform: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-tt-tm);
+                  word-wrap: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-wp);
+                  word-break: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-bk);
                   font-size: 14px;
                   font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
                   font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
@@ -593,6 +588,7 @@ $activeElementSelector: "[data-has-clicked='true']";
 
                 .custom_radio {
                   position: relative;
+
                   input[type="radio"] {
                     margin-right: 12px;
                     width: 16px;
@@ -601,6 +597,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                     cursor: pointer;
                     display: none;
                   }
+
                   .radio-style {
                     width: 20px;
                     height: 20px;
@@ -611,7 +608,8 @@ $activeElementSelector: "[data-has-clicked='true']";
                     box-sizing: border-box;
                     transition: all 0.2s;
                   }
-                  input[type="radio"]:checked + .radio-style {
+
+                  input[type="radio"]:checked+.radio-style {
                     background-color: var(--_base-white);
                     border: 5px solid var(--_thm-py-bs-dt-se-br-cr);
                   }
@@ -627,6 +625,7 @@ $activeElementSelector: "[data-has-clicked='true']";
               .order_level_shipping {
                 display: flex;
                 gap: 24px;
+
                 .order_level_shipping_img {
                   width: 120px;
                   height: 120px;
@@ -641,10 +640,12 @@ $activeElementSelector: "[data-has-clicked='true']";
               display: flex;
               flex-direction: column;
               gap: var(--_ctm-lt-pt-os-gp-bn-cs);
+
               .gift_crd_chk_payment_option {
                 border: 1px solid var(--_gray-300);
                 border-radius: 4px;
                 margin-bottom: 12px;
+
                 .add_gift_card {
                   display: flex;
                   gap: 12px;
@@ -668,6 +669,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                       font-weight: 600;
                     }
                   }
+
                   .gc_tertiary_btn {
                     color: var(--_primary-400);
 
@@ -677,21 +679,26 @@ $activeElementSelector: "[data-has-clicked='true']";
                     }
                   }
                 }
+
                 .chk_gft_crd_wrapper {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   padding: 16px;
-                  & > button {
+
+                  &>button {
                     color: var(--_primary-400);
+
                     &:hover {
                       text-decoration: underline;
                     }
                   }
+
                   &_item {
                     display: flex;
                     align-items: center;
                     gap: 16px;
+
                     &_icon {
                       width: 40px;
                       height: 40px;
@@ -701,28 +708,35 @@ $activeElementSelector: "[data-has-clicked='true']";
                       justify-content: center;
                       align-items: center;
                     }
+
                     &_info {
                       display: flex;
                       flex-direction: column;
+
                       &_title {
                         font-size: 14px;
                         margin-bottom: 4px;
                         font-weight: 600;
                       }
+
                       &_desc {
                         display: flex;
+
                         &_value {
                           font-size: 12px;
                           color: var(--_gray-600);
                         }
+
                         &_label {
                           font-size: 12px;
                           color: var(--_gray-900);
                         }
                       }
                     }
+
                     &_pin {
                       margin-left: 36px;
+
                       input[type="number"] {
                         border: 1px solid var(--_gray-300);
                         border-radius: 4px;
@@ -730,10 +744,12 @@ $activeElementSelector: "[data-has-clicked='true']";
                         width: 95px;
                         height: 44px;
                         padding-inline: 10px;
+
                         &:disabled {
                           opacity: 0.8;
                           cursor: not-allowed;
                         }
+
                         &:focus {
                           outline: 2px solid var(--_primary-100);
                           border: 1px solid var(--_primary-300);
@@ -752,14 +768,17 @@ $activeElementSelector: "[data-has-clicked='true']";
                     align-items: center;
                     gap: 8px;
                     padding-left: 10px;
+
                     input[type="number"] {
                       background-color: var(--_base-white);
                       padding-right: 10px;
+
                       &:disabled {
                         opacity: 0.8;
                         cursor: not-allowed;
                       }
                     }
+
                     &:focus-within {
                       outline: 2px solid var(--_primary-100);
                       border: 1px solid var(--_primary-300);
@@ -767,7 +786,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                   }
                 }
               }
+
               .payment_program {
+
                 // padding: 0 12px;
                 .payment_program_header {
                   display: flex;
@@ -781,16 +802,19 @@ $activeElementSelector: "[data-has-clicked='true']";
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
+
                     &_title {
                       font-size: 14px;
                       font-weight: 600;
                       color: var(--_gray-600);
                     }
+
                     .payment_program_header_pds {
                       &_label {
                         font-size: 14px;
                         color: var(--_gray-600);
                       }
+
                       &_value {
                         font-size: 14px;
                         color: var(--_gray-900);
@@ -817,24 +841,29 @@ $activeElementSelector: "[data-has-clicked='true']";
                     display: flex;
                     justify-content: space-between;
                     gap: 8px;
+
                     &:not(:first-child) {
                       border-top: 1px solid var(--_gray-200);
                     }
+
                     .pp_ppm_section_label {
                       font-size: 14px;
                       font-weight: 700;
                       color: var(--_gray-900);
                     }
+
                     .pp_ppm_section_value {
                       font-size: 14px;
                       font-weight: 700;
                       color: var(--_gray-600);
+
                       .pp_ppm_section_value_lable {
                         font-weight: 500;
                         color: var(--_gray-500);
                       }
                     }
                   }
+
                   .payment_methods {
                     // padding: 12px;
                     display: grid;
@@ -1084,34 +1113,41 @@ $activeElementSelector: "[data-has-clicked='true']";
                       align-items: center;
                       width: 100%;
                       padding: 16px;
+
                       .chk_payment_section_col_left {
                         display: flex;
                         gap: 12px;
+
                         svg {
                           width: 24px;
                           height: 24px;
                         }
+
                         .chk_payment_section_method {
                           display: flex;
                           flex-direction: column;
                           gap: 12px;
+
                           .chk_payment_section_method_name {
                             font-size: 14px;
                             font-weight: 700;
                             line-height: 20px;
                             color: var(--_gray-700);
                           }
+
                           .po-container {
                             .po-grid {
                               display: flex;
                               gap: 8px;
-                              & > div {
+
+                              &>div {
                                 border: 1px solid var(--_gray-300);
                                 background-color: var(--_base-white);
                                 border-radius: 4px;
                                 width: 90px;
                                 height: 28px;
                                 overflow: hidden;
+
                                 input {
                                   padding-inline: 10px;
                                   height: 100%;
@@ -1119,13 +1155,16 @@ $activeElementSelector: "[data-has-clicked='true']";
                               }
                             }
                           }
-                          & > div {
+
+                          &>div {
                             display: flex;
                             gap: 16px;
+
                             .label {
                               font-size: 12px;
                               color: var(--_gray-500);
                             }
+
                             .price {
                               font-size: 12px;
                               color: var(--_gray-900);
@@ -1133,10 +1172,12 @@ $activeElementSelector: "[data-has-clicked='true']";
                           }
                         }
                       }
+
                       &_col_right {
                         .chk_currency_inp_sec {
                           display: flex;
                           justify-content: end;
+
                           .chk_currency_inp {
                             height: 44px;
                             border: 1px solid var(--_gray-200);
@@ -1148,12 +1189,15 @@ $activeElementSelector: "[data-has-clicked='true']";
                             align-items: center;
                             padding-inline: 12px;
                             gap: 12px;
+
                             &:focus-within {
                               border: 1px solid var(--_primary-200);
                               outline: 2px solid var(--_primary-50);
                             }
+
                             input {
                               height: inherit;
+
                               &:disabled {
                                 opacity: 0.8;
                                 cursor: not-allowed;
@@ -1161,6 +1205,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                             }
                           }
                         }
+
                         .cur_conversion {
                           font-size: 12px;
                         }
@@ -1180,24 +1225,31 @@ $activeElementSelector: "[data-has-clicked='true']";
                         justify-content: space-between;
                         gap: 80px;
                         padding: 16px;
+
                         .chk_pmnt_other_options_left_container {
                           display: flex;
                           gap: 12px;
+
                           .chk_pmnt_option_info_wrapper {
                             display: flex;
                             gap: 12px;
+
                             .cards {
                               display: flex;
                               flex-direction: column;
                               gap: 8px;
+
                               .chk_payment_options_name {
                                 font-weight: 600;
                               }
+
                               span {
                                 font-size: 12px;
+
                                 .chk_payment_options_label {
                                   color: var(--_gray-600);
                                 }
+
                                 .chk_payment_options_value {
                                   color: var(--_gray-900);
                                 }
@@ -1205,6 +1257,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                             }
                           }
                         }
+
                         .chk_pmnt_other_options_container {
                           padding: 16px;
                         }
@@ -1225,6 +1278,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                         display: flex;
                         gap: 12px;
                         align-items: flex-start;
+
                         .chk_payment_option__info_wrapper {
                           display: flex;
                           gap: 0px;
@@ -1254,6 +1308,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                         .chk_payment_options_name {
                           color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
                           font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
+                          text-transform: var(--_ctm-dn-pt-os-dn-pt-ne-dn-tt-tm);
+                          word-wrap: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-wp);
+                          word-break: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-bk);
                           font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
                           font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
                           font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
@@ -1265,6 +1322,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                         .chk_payment_options_label {
                           color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
                           font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
+                          text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
+                          word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
+                          word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
                           font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
                           font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
                           font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
@@ -1276,6 +1336,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                         .chk_payment_options_value {
                           color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
                           font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
+                          text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
+                          word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
+                          word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
                           font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
                           font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
                           font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
@@ -1331,12 +1394,15 @@ $activeElementSelector: "[data-has-clicked='true']";
                         }
                       }
                     }
+
                     .add_new_credit_card {
                       padding: 16px 16px 0px 16px;
                       display: flex;
                       justify-content: space-between;
+
                       .cc_tertiary_btn {
                         color: var(--_primary-400);
+
                         &:hover {
                           text-decoration: underline;
                         }
@@ -1360,39 +1426,48 @@ $activeElementSelector: "[data-has-clicked='true']";
                         align-items: center;
                         padding-inline: 12px;
                         gap: 12px;
+
                         &:focus-within {
                           border: 1px solid var(--_primary-200);
                           outline: 2px solid var(--_primary-50);
                         }
+
                         input {
                           height: inherit;
                         }
                       }
+
                       .chk_payment_cred_section_col_left {
                         .chk_payment_cred_section_col_left_crd_details {
                           display: flex;
                           gap: 80px;
                           align-items: center;
-                          & > div {
+
+                          &>div {
                             display: flex;
                             gap: 12px;
+
                             .card_icon {
                               width: 60px;
                               height: 40px;
                               border-radius: 4px;
                             }
+
                             .card_details {
                               .card_details_num {
                                 font-size: 12px;
                                 font-weight: 600;
                                 color: var(--_gray-900);
                               }
-                              & > div {
+
+                              &>div {
                                 display: flex;
+
                                 .card_details_label {
                                   font-size: 12px;
                                   color: var(--_gray-500);
                                 }
+
                                 .card_details_value {
                                   font-size: 12px;
                                   color: var(--_gray-900);
@@ -1407,6 +1482,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                     .chk_payment_remove_card {
                       padding-inline: 16px;
                       margin-bottom: 16px;
+
                       .error_msg {
                         font-size: 12px;
                         color: var(--_error-700);
@@ -1421,10 +1497,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 display: flex;
                 flex-direction: column;
                 background-color: var(--_base-white);
-                box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
-                  var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
-                  var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
-                  var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
+                box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae) var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br) var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd) var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
 
                 &_form_container {
                   border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
@@ -1438,6 +1511,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                   font-size: 16px;
                   color: var(--_gray-900);
                   font-weight: 600;
+
                   &.pl_0 {
                     padding-left: 0px;
                   }
@@ -1464,6 +1538,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                   .chk_heading_info {
                     color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
                     font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
+                    text-transform: var(--_ctm-dn-sg-md-dn-hg-dn-tt-tm);
+                    word-wrap: var(--_ctm-dn-sg-md-dn-hg-dn-wd-wp);
+                    word-break: var(--_ctm-dn-sg-md-dn-hg-dn-wd-bk);
                     font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
                     font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
                     font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
@@ -1471,6 +1548,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                     letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
                     text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
                   }
+
                   .icon {
                     cursor: pointer;
                   }
@@ -1553,6 +1631,15 @@ $activeElementSelector: "[data-has-clicked='true']";
                   gap: 0.5rem;
                   color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
                   font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
+                  text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
+                  word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
+                  word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
+
+                  &.flex__overflow {
+                    white-space: normal;
+                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                  }
+
                   font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
                   font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
                   font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
@@ -1584,7 +1671,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                   }
                 }
 
-                input[type="checkbox"]:checked + label {
+                input[type="checkbox"]:checked+label {
                   .custom-checkbox {
                     background-color: #004dff;
                     border-color: #004dff;
@@ -1605,6 +1692,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                 &_same_as_billing_address_chkbx {
                   color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
                   font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
+                  text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
+                  word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
+                  word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
                   font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
                   font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
                   font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
@@ -1626,8 +1716,10 @@ $activeElementSelector: "[data-has-clicked='true']";
                 justify-content: space-between;
                 border-bottom: 1px solid var(--_gray-100);
                 font-weight: 600;
+
                 .gc_tertiary_btn {
                   color: var(--_primary-400);
+
                   &:hover {
                     text-decoration: underline;
                   }
@@ -1643,17 +1735,21 @@ $activeElementSelector: "[data-has-clicked='true']";
                   border-bottom: 1px solid var(--_gray-200);
                   display: flex;
                   justify-content: space-between;
+
                   .payment_options_heading {
                     font-size: 14px;
                     font-weight: 600;
                   }
+
                   .chk_primary_btn_link {
                     color: var(--_primary-400);
+
                     &:hover {
                       text-decoration: underline;
                     }
                   }
                 }
+
                 // gift card styles
 
                 // .chk_gft_crd_wrapper {
@@ -1692,10 +1788,12 @@ $activeElementSelector: "[data-has-clicked='true']";
                   justify-content: space-between;
                   align-items: center;
                   padding: 16px 16px 0 16px;
+
                   &_item {
                     display: flex;
                     align-items: center;
                     gap: 16px;
+
                     &_icon {
                       width: 40px;
                       height: 40px;
@@ -1705,28 +1803,35 @@ $activeElementSelector: "[data-has-clicked='true']";
                       justify-content: center;
                       align-items: center;
                     }
+
                     &_info {
                       display: flex;
                       flex-direction: column;
+
                       &_title {
                         font-size: 14px;
                         margin-bottom: 4px;
                         font-weight: 600;
                       }
+
                       &_desc {
                         display: flex;
+
                         &_value {
                           font-size: 12px;
                           color: var(--_gray-600);
                         }
+
                         &_label {
                           font-size: 12px;
                           color: var(--_gray-900);
                         }
                       }
                     }
+
                     &_pin {
                       margin-left: 36px;
+
                       input[type="number"] {
                         border: 1px solid var(--_gray-300);
                         border-radius: 4px;
@@ -1734,6 +1839,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                         width: 95px;
                         height: 44px;
                         padding-inline: 10px;
+
                         &:focus {
                           outline: 2px solid var(--_primary-100);
                           border: 1px solid var(--_primary-300);
@@ -1752,10 +1858,12 @@ $activeElementSelector: "[data-has-clicked='true']";
                     align-items: center;
                     gap: 8px;
                     padding-left: 10px;
+
                     input[type="number"] {
                       background-color: var(--_base-white);
                       padding-right: 10px;
                     }
+
                     &:focus-within {
                       outline: 2px solid var(--_primary-100);
                       border: 1px solid var(--_primary-300);
@@ -1764,6 +1872,7 @@ $activeElementSelector: "[data-has-clicked='true']";
 
                   .chk_gft_crd_wrapper_btn {
                     color: var(--_primary-400);
+
                     &:hover {
                       text-decoration: un;
                     }
@@ -1776,24 +1885,31 @@ $activeElementSelector: "[data-has-clicked='true']";
                   justify-content: space-between;
                   gap: 80px;
                   padding: 16px;
+
                   .chk_pmnt_other_options_left_container {
                     display: flex;
                     gap: 12px;
+
                     .chk_pmnt_option_info_wrapper {
                       display: flex;
                       gap: 12px;
+
                       .cards {
                         display: flex;
                         flex-direction: column;
                         gap: 8px;
+
                         .chk_payment_options_name {
                           font-weight: 600;
                         }
+
                         span {
                           font-size: 12px;
+
                           .chk_payment_options_label {
                             color: var(--_gray-600);
                           }
+
                           .chk_payment_options_value {
                             color: var(--_gray-900);
                           }
@@ -1801,6 +1917,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                       }
                     }
                   }
+
                   .chk_pmnt_other_options_container {
                     padding: 16px;
                   }
@@ -1821,7 +1938,8 @@ $activeElementSelector: "[data-has-clicked='true']";
                   display: flex;
                   gap: 12px;
                   align-items: flex-start;
-                  & > div {
+
+                  &>div {
                     display: flex;
                     gap: 12px;
                   }
@@ -1856,6 +1974,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                   .chk_payment_options_label {
                     color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
                     font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
+                    text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
+                    word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
+                    word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
                     font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
                     font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
                     font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
@@ -1867,6 +1988,9 @@ $activeElementSelector: "[data-has-clicked='true']";
                   .chk_payment_options_value {
                     color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
                     font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
+                    text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
+                    word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
+                    word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
                     font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
                     font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
                     font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
@@ -1933,13 +2057,15 @@ $activeElementSelector: "[data-has-clicked='true']";
               border: none !important;
               color: var(--_ctm-dn-it-bx-dn-cr);
               font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
+              text-transform: var(--_ctm-dn-it-bx-dn-tt-tm);
+              word-wrap: var(--_ctm-dn-it-bx-dn-wd-wp);
+              word-break: var(--_ctm-dn-it-bx-dn-wd-bk);
               font-size: var(--_ctm-dn-it-bx-dn-ft-se);
               font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
               font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
               line-height: var(--_ctm-dn-it-bx-dn-le-ht);
               letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
-              box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
-                var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
+              box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br) var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
               text-align: var(--_ctm-dn-it-bx-dn-tt-an);
               text-decoration: var(--_ctm-dn-it-bx-dn-ue);
             }
@@ -1953,6 +2079,7 @@ $activeElementSelector: "[data-has-clicked='true']";
               input[type="checkbox"] {
                 display: none;
               }
+
               .payment_program_title {
                 font-size: 14px;
                 font-weight: 500;
@@ -1966,6 +2093,15 @@ $activeElementSelector: "[data-has-clicked='true']";
                 gap: 10px;
                 color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
                 font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
+                text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
+                word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
+                word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
+
+                &.flex__overflow {
+                  white-space: normal;
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
+
                 font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
                 font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
                 font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
@@ -2004,6 +2140,15 @@ $activeElementSelector: "[data-has-clicked='true']";
                 gap: 10px;
                 color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
                 font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
+                text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
+                word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
+                word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
+
+                &.flex__overflow {
+                  white-space: normal;
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
+
                 font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
                 font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
                 font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
@@ -2035,7 +2180,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 }
               }
 
-              input[type="checkbox"]:checked + label {
+              input[type="checkbox"]:checked+label {
                 .custom-checkbox {
                   background-color: #004dff;
                   border-color: #004dff;
@@ -2046,10 +2191,12 @@ $activeElementSelector: "[data-has-clicked='true']";
                 }
               }
             }
+
             .chk_address_actions {
               display: flex;
               gap: 12px;
             }
+
             .chk_payment-card__note {
               padding: 8px 6px;
               display: flex;
@@ -2063,6 +2210,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 svg {
                   width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
                   height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
+
                   path {
                     stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
                     // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -2116,6 +2264,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                       color: var(--_gray-900);
                       font-size: 12px;
                     }
+
                     .address_skeletons {
                       display: flex;
                       gap: 8px;
@@ -2136,6 +2285,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                   &:has(.chk_saved_address_button.selected) {
                     display: flex !important;
                   }
+
                   .chk_saved_address_button {
                     display: flex;
                     align-items: center;
@@ -2159,32 +2309,40 @@ $activeElementSelector: "[data-has-clicked='true']";
       .chk_cred_form_details {
         border-top: 1px solid var(--_gray-100);
         padding: 16px;
+
         .chk_basic_form_title {
           font-size: 14px;
           margin-bottom: 16px;
           font-weight: 600;
         }
+
         .chk_form_fields {
           h3 {
             font-size: 14px;
             margin-bottom: 8px;
           }
+
           display: flex;
           flex-direction: column;
           gap: 24px;
           width: 500px;
+
           .chk_form_field {
             width: 100%;
+
             .est__dropdown {
               align-items: start;
+
               .est__dropdown__button {
                 width: 100%;
+
                 .value__selected {
                   align-items: center;
                   justify-content: start;
                 }
               }
             }
+
             &.expiry_details {
               width: 80px;
             }
@@ -2198,20 +2356,24 @@ $activeElementSelector: "[data-has-clicked='true']";
               font-size: 14px;
               color: var(--_gray-600);
             }
+
             .chk_form_field_inp {
               height: 40px;
               border: 1px solid var(--_gray-300);
               border-radius: 4px;
               padding-inline: 10px;
+
               &:placeholder-shown {
                 color: var(--_gray-400);
                 padding-left: 16px;
               }
+
               &:focus {
                 border: 1px solid var(--_primary-300);
                 outline: 2px solid var(--_primary-100);
               }
             }
+
             .error_msg {
               display: block;
               color: var(--_error-700);
@@ -2233,7 +2395,7 @@ $activeElementSelector: "[data-has-clicked='true']";
               input[type="checkbox"] {
                 display: none;
 
-                &:checked + .custom-checkbox::after {
+                &:checked+.custom-checkbox::after {
                   opacity: 1;
                 }
               }
@@ -2263,9 +2425,11 @@ $activeElementSelector: "[data-has-clicked='true']";
               }
             }
           }
+
           .expiry_details {
             display: flex;
             gap: 12px;
+
             .cvv_inp {
               width: 110px;
             }
@@ -2277,11 +2441,13 @@ $activeElementSelector: "[data-has-clicked='true']";
       .chk_gift_card_details {
         border-top: 1px solid var(--_gray-300);
         padding: 16px;
+
         .chk_gift_card_form {
           display: flex;
           flex-direction: column;
           gap: 16px;
           max-width: 480px;
+
           .chk_gift_cart_form_title {
             font-size: 14px;
             font-weight: 600;
@@ -2291,37 +2457,45 @@ $activeElementSelector: "[data-has-clicked='true']";
             display: flex;
             gap: 12px;
             width: 100%;
+
             .chk_gift_inp_field {
               display: flex;
               flex-direction: column;
               gap: 6px;
               width: 100%;
+
               label {
                 color: var(--_gray-600);
               }
+
               .chk_gift_inp {
                 border: 1px solid var(--_gray-300);
                 border-radius: 6px;
                 height: 40px;
                 padding-inline: 10px;
+
                 &:placeholder-shown {
                   padding-left: 10px;
                   color: var(--_gray-400);
                 }
+
                 &:focus {
                   border: 1px solid var(--_primary-300);
                   outline: 2px solid var(--_primary-100);
                 }
               }
+
               &.pin {
                 width: 110px;
               }
+
               .error_msg {
                 display: block;
                 color: var(--_error-700);
                 font-size: 12px;
               }
             }
+
             .error_msg {
               color: var(--_error-700);
               font-size: 14px;
@@ -2329,24 +2503,29 @@ $activeElementSelector: "[data-has-clicked='true']";
           }
         }
       }
+
       .chk_form_actions {
         display: flex;
         gap: 12px;
+
         .chk_sav_btn {
           padding: 12px 16px;
           background-color: var(--_primary-400);
           border-radius: 6px;
           color: var(--_base-white);
+
           &:hover {
             background-color: var(--_primary-500);
           }
         }
+
         .chk_can_btn {
           padding: 12px 16px;
           background-color: transparent;
           border-radius: 6px;
           color: var(--_gray-600);
           padding-inline: 10px;
+
           &:hover {
             background-color: var(--_gray-50);
             color: var(--_gray-900);
@@ -2359,11 +2538,13 @@ $activeElementSelector: "[data-has-clicked='true']";
         color: var(--_primary-400);
         display: inline-flex;
         width: fit-content;
+
         &:hover {
           color: var(--_primary-500);
           text-decoration: underline;
         }
       }
+
       .chk_primary_bnt {
         padding: 12px 24px;
         background-color: var(--_primary-400);
@@ -2371,10 +2552,12 @@ $activeElementSelector: "[data-has-clicked='true']";
         font-weight: 600;
         border-radius: 6px;
         width: max-content;
+
         &:hover {
           background-color: var(--_primary-500);
         }
       }
+
       .chk_secondary_bnt {
         padding: 16px 24px;
         background-color: transparent;
@@ -2414,10 +2597,12 @@ $activeElementSelector: "[data-has-clicked='true']";
           font-size: 14px;
           font-weight: 600;
         }
+
         .chk_payment_cred_section_col_right {
           .chk_currency_inp_sec {
             display: flex;
             justify-content: end;
+
             .chk_currency_inp {
               border: 1px solid var(--_gray-200);
               min-width: 100px;
@@ -2430,18 +2615,21 @@ $activeElementSelector: "[data-has-clicked='true']";
               padding-inline: 12px;
             }
           }
+
           .cur_conversion {
             font-size: 14px;
           }
         }
       }
     }
+
     .add_new_credit_card {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding-inline: 16px;
     }
+
     .cc_tertiary_btn {
       color: var(--_primary-400);
 
@@ -2467,4 +2655,4 @@ $activeElementSelector: "[data-has-clicked='true']";
     //   }
     // }
   }
-}
+}