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

package/dist/shipping-payments.scss

@@ -8,13 +8,14 @@ $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);
@@ -22,24 +23,45 @@ $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 {
@@ -63,19 +85,15 @@ $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;
@@ -109,7 +127,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                 display: flex;
               }
             }
-
             .edit-btn {
               cursor: pointer;
               color: var(--_primary-400);
@@ -127,7 +144,6 @@ $activeElementSelector: "[data-has-clicked='true']";
             max-height: 0px;
             overflow: hidden;
             padding: 0;
-
             // shipping address
             .shipping-address {
               transition: max-height 800ms ease-in;
@@ -138,7 +154,6 @@ $activeElementSelector: "[data-has-clicked='true']";
 
               .btn_link {
                 color: var(--_primary-400);
-
                 &:hover {
                   text-decoration: underline;
                 }
@@ -166,7 +181,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                 align-items: center;
                 font-weight: 600;
                 color: var(--_gray-900);
-
                 .icon {
                   display: flex;
                   align-items: center;
@@ -233,7 +247,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                 font-size: 12px;
                 color: #ff0000;
               }
-
               label {
                 display: flex;
                 align-items: center;
@@ -279,7 +292,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 }
               }
 
-              input[type="checkbox"]:checked+label {
+              input[type="checkbox"]:checked + label {
                 .custom-checkbox {
                   background-color: #004dff;
                   border-color: #004dff;
@@ -430,17 +443,14 @@ $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);
@@ -448,7 +458,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                   }
                 }
               }
-
               .chk_shiping_address_form_input {
                 padding: 8px 12px;
                 width: -webkit-fill-available;
@@ -538,15 +547,14 @@ $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;
                   }
@@ -588,7 +596,6 @@ $activeElementSelector: "[data-has-clicked='true']";
 
                 .custom_radio {
                   position: relative;
-
                   input[type="radio"] {
                     margin-right: 12px;
                     width: 16px;
@@ -597,7 +604,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                     cursor: pointer;
                     display: none;
                   }
-
                   .radio-style {
                     width: 20px;
                     height: 20px;
@@ -608,8 +614,7 @@ $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);
                   }
@@ -625,7 +630,6 @@ $activeElementSelector: "[data-has-clicked='true']";
               .order_level_shipping {
                 display: flex;
                 gap: 24px;
-
                 .order_level_shipping_img {
                   width: 120px;
                   height: 120px;
@@ -640,12 +644,10 @@ $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;
@@ -669,7 +671,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                       font-weight: 600;
                     }
                   }
-
                   .gc_tertiary_btn {
                     color: var(--_primary-400);
 
@@ -679,26 +680,21 @@ $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;
@@ -708,35 +704,28 @@ $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;
@@ -744,12 +733,10 @@ $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);
@@ -768,17 +755,14 @@ $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);
@@ -786,9 +770,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                   }
                 }
               }
-
               .payment_program {
-
                 // padding: 0 12px;
                 .payment_program_header {
                   display: flex;
@@ -802,19 +784,16 @@ $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);
@@ -841,29 +820,24 @@ $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;
@@ -1113,41 +1087,34 @@ $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%;
@@ -1155,16 +1122,13 @@ $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);
@@ -1172,12 +1136,10 @@ $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);
@@ -1189,15 +1151,12 @@ $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;
@@ -1205,7 +1164,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                             }
                           }
                         }
-
                         .cur_conversion {
                           font-size: 12px;
                         }
@@ -1225,31 +1183,24 @@ $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);
                                 }
@@ -1257,7 +1208,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                             }
                           }
                         }
-
                         .chk_pmnt_other_options_container {
                           padding: 16px;
                         }
@@ -1278,7 +1228,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                         display: flex;
                         gap: 12px;
                         align-items: flex-start;
-
                         .chk_payment_option__info_wrapper {
                           display: flex;
                           gap: 0px;
@@ -1394,15 +1343,12 @@ $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;
                         }
@@ -1426,48 +1372,39 @@ $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);
@@ -1482,7 +1419,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                     .chk_payment_remove_card {
                       padding-inline: 16px;
                       margin-bottom: 16px;
-
                       .error_msg {
                         font-size: 12px;
                         color: var(--_error-700);
@@ -1497,7 +1433,10 @@ $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);
@@ -1511,7 +1450,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                   font-size: 16px;
                   color: var(--_gray-900);
                   font-weight: 600;
-
                   &.pl_0 {
                     padding-left: 0px;
                   }
@@ -1548,7 +1486,6 @@ $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;
                   }
@@ -1634,12 +1571,10 @@ $activeElementSelector: "[data-has-clicked='true']";
                   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);
@@ -1671,7 +1606,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                   }
                 }
 
-                input[type="checkbox"]:checked+label {
+                input[type="checkbox"]:checked + label {
                   .custom-checkbox {
                     background-color: #004dff;
                     border-color: #004dff;
@@ -1716,10 +1651,8 @@ $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;
                   }
@@ -1735,21 +1668,17 @@ $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 {
@@ -1788,12 +1717,10 @@ $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;
@@ -1803,35 +1730,28 @@ $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;
@@ -1839,7 +1759,6 @@ $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);
@@ -1858,12 +1777,10 @@ $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);
@@ -1872,7 +1789,6 @@ $activeElementSelector: "[data-has-clicked='true']";
 
                   .chk_gft_crd_wrapper_btn {
                     color: var(--_primary-400);
-
                     &:hover {
                       text-decoration: un;
                     }
@@ -1885,31 +1801,24 @@ $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);
                           }
@@ -1917,7 +1826,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                       }
                     }
                   }
-
                   .chk_pmnt_other_options_container {
                     padding: 16px;
                   }
@@ -1938,8 +1846,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                   display: flex;
                   gap: 12px;
                   align-items: flex-start;
-
-                  &>div {
+                  & > div {
                     display: flex;
                     gap: 12px;
                   }
@@ -2065,7 +1972,8 @@ $activeElementSelector: "[data-has-clicked='true']";
               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);
             }
@@ -2079,7 +1987,6 @@ $activeElementSelector: "[data-has-clicked='true']";
               input[type="checkbox"] {
                 display: none;
               }
-
               .payment_program_title {
                 font-size: 14px;
                 font-weight: 500;
@@ -2096,12 +2003,10 @@ $activeElementSelector: "[data-has-clicked='true']";
                 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);
@@ -2143,12 +2048,10 @@ $activeElementSelector: "[data-has-clicked='true']";
                 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);
@@ -2180,7 +2083,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 }
               }
 
-              input[type="checkbox"]:checked+label {
+              input[type="checkbox"]:checked + label {
                 .custom-checkbox {
                   background-color: #004dff;
                   border-color: #004dff;
@@ -2191,12 +2094,10 @@ $activeElementSelector: "[data-has-clicked='true']";
                 }
               }
             }
-
             .chk_address_actions {
               display: flex;
               gap: 12px;
             }
-
             .chk_payment-card__note {
               padding: 8px 6px;
               display: flex;
@@ -2210,7 +2111,6 @@ $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.
@@ -2264,7 +2164,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                       color: var(--_gray-900);
                       font-size: 12px;
                     }
-
                     .address_skeletons {
                       display: flex;
                       gap: 8px;
@@ -2285,7 +2184,6 @@ $activeElementSelector: "[data-has-clicked='true']";
                   &:has(.chk_saved_address_button.selected) {
                     display: flex !important;
                   }
-
                   .chk_saved_address_button {
                     display: flex;
                     align-items: center;
@@ -2309,40 +2207,32 @@ $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;
             }
@@ -2356,24 +2246,20 @@ $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);
@@ -2395,7 +2281,7 @@ $activeElementSelector: "[data-has-clicked='true']";
               input[type="checkbox"] {
                 display: none;
 
-                &:checked+.custom-checkbox::after {
+                &:checked + .custom-checkbox::after {
                   opacity: 1;
                 }
               }
@@ -2425,11 +2311,9 @@ $activeElementSelector: "[data-has-clicked='true']";
               }
             }
           }
-
           .expiry_details {
             display: flex;
             gap: 12px;
-
             .cvv_inp {
               width: 110px;
             }
@@ -2441,13 +2325,11 @@ $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;
@@ -2457,45 +2339,37 @@ $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;
@@ -2503,29 +2377,24 @@ $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);
@@ -2538,13 +2407,11 @@ $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);
@@ -2552,12 +2419,10 @@ $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;
@@ -2597,12 +2462,10 @@ $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;
@@ -2615,21 +2478,18 @@ $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);
 
@@ -2655,4 +2515,4 @@ $activeElementSelector: "[data-has-clicked='true']";
     //   }
     // }
   }
-}
+}