@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

package/dist/cart-details.scss

@@ -4,6 +4,7 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+
 // $defaultValues: (
 //   --_dm-flt: getListOfResponsive(flex-end, flex-start),
 // );
@@ -51,45 +52,55 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             cursor: pointer;
             margin-bottom: 16px;
             gap: 8px;
+
             h4 {
               font-size: 20px;
               color: var(--_gray-900);
               font-weight: 700;
               margin-right: 8px;
+
               .cart_items_length {
                 font-size: 14px;
                 color: var(--_gray-600);
                 margin-left: 4px;
               }
             }
+
             .toggle_btn {
               display: flex;
               margin-right: 6px;
+
               svg {
                 width: 24px;
                 height: 24px;
+
                 path {
                   stroke: var(--_gray-600);
                 }
               }
             }
           }
+
           .attr_header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 8px;
+
             .group_attr_info_sec {
               display: flex;
               align-items: center;
               gap: 8px;
+
               .attributes_validation_info_sec {
                 display: flex;
+
                 .attr_val_info_detail {
                   font-size: 14px;
                   color: #475467;
                   display: flex;
                   gap: 4px;
+
                   b {
                     color: #000;
                   }
@@ -98,8 +109,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         .cart_details_section {
           width: 100%;
+
           .cart_title_wrapper {
             display: flex;
             // padding: 0px 36px 0px 96px;
@@ -148,9 +161,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-ct-an-ss-pg,
                 var(--_ctm-tab-dn-ct-an-ss-pg, var(--_ctm-dn-ct-an-ss-pg))
               );
+
               &[data-has-link="true"] {
                 cursor: pointer;
               }
+
               // color: var(--_ctm-dn-ct-an-ss-cr);
               // font-size: var(--_ctm-dn-ct-an-ss-ft-se);
               // font-weight: var(--_ctm-dn-ct-an-ss-ft-wt);
@@ -185,23 +200,29 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-ct-an-ss-le-ht,
                 var(--_ctm-tab-dn-ct-an-ss-le-ht, var(--_ctm-dn-ct-an-ss-le-ht))
               );
+
               &:hover {
                 text-decoration: underline;
               }
+
               &.disabled {
                 opacity: 0.5;
                 pointer-events: none;
               }
+
               span {
                 display: flex;
                 transition: transform 0.4s ease-in-out;
+
                 &.rotate__180 {
                   transform: rotate(180deg);
                 }
+
                 &.rotate__0 {
                   transform: rotate(0deg);
                 }
               }
+
               &:has(span) {
                 gap: 4px;
               }
@@ -210,6 +231,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
+
     @media (max-width: 677px) {
       .cart_details_wrapper {
         width: 100%;
@@ -321,6 +343,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     display: flex;
     flex-direction: column;
     gap: 12px;
+
     .employee-row {
       display: flex;
       align-items: center;
@@ -424,9 +447,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           .delete-icon {
             cursor: pointer;
             display: flex;
+
             svg {
               width: 24px;
               height: 24px;
+
               path {
                 stroke: #6b7280; // gray-500
               }
@@ -499,6 +524,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
       gap: 1rem;
       margin-top: 24px;
+
       .attriTitle {
         font-weight: 600;
         font-size: 14px;
@@ -506,11 +532,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         color: #101828;
         padding-bottom: 6px;
       }
+
       .attriDes {
         font-weight: 400;
         font-size: 14px;
         line-height: 20px;
       }
+
       .attribute {
         width: 100%;
         display: flex;
@@ -522,19 +550,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         border: 1px solid var(--_thm-cs-be-se-3);
         background-color: var(--_base-white);
         border-radius: 4px;
+
         .label {
           display: block;
           color: var(--_gray-700);
           font-weight: 500;
           font-size: 14px;
           line-height: 20px;
+
           &.required::after {
             content: " *";
             color: var(--_error-500);
           }
         }
+
         .attribute_field {
           width: 100% !important;
+
           input {
             background-color: var(--_base-white);
             padding: 8px 12px;
@@ -545,12 +577,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               color 0.2s,
               border-color 0.2s,
               box-shadow 0.2s;
+
             &::placeholder {
               color: var(--_gray-500);
               font-weight: 500;
               font-size: 14px;
               line-height: 24px;
             }
+
             &:focus {
               outline: 0 none;
               outline-offset: 0;
@@ -561,13 +595,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border: 1px solid var(--primary-300);
             }
           }
+
           .date_picker_container {
             position: relative;
+
             .svg_icon {
               position: absolute;
               left: 8px;
               top: 9px;
             }
+
             .react-datepicker-wrapper {
               .react-datepicker__input-container {
                 input {
@@ -576,9 +613,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
           }
+
           .color-picker-container {
             .custom_hex_color_picker_div {
               margin-top: 8px;
+
               label {
                 display: inline-block;
                 margin-bottom: 4px;
@@ -588,6 +627,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 line-height: 20px;
               }
             }
+
             .custom__div {
               display: grid;
               grid-template-columns: repeat(4, 1fr);
@@ -642,6 +682,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
           }
+
           .attribute_form_field {
             background-color: var(--_base-white);
             padding: 8px 12px;
@@ -649,6 +690,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border-radius: 4px;
             height: 40px;
           }
+
           .attribute_text_area_field {
             width: 100% !important;
             transition:
@@ -656,6 +698,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               color 0.2s,
               border-color 0.2s,
               box-shadow 0.2s;
+
             &:focus {
               outline: 0 none;
               outline-offset: 0;
@@ -750,18 +793,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border-color: var(--_primary-400);
             outline: 2px solid var(--_primary-200);
           }
+
           &.error {
             border-color: #dc2626;
             background-color: #fef2f2;
           }
+
           .react-datepicker-wrapper {
             width: 100%;
+
             .react-datepicker__close-icon::after {
               background-color: transparent;
               font-size: 25px;
               color: var(--_gray-500);
             }
           }
+
           .custom-upload {
             display: flex;
             // flex-direction: column;
@@ -773,6 +820,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             background-color: var(--_base-white);
             border: 1px solid var(--_thm-cs-be-se-3);
             border-radius: 4px;
+
             .clear_upload_icon {
               // display: none;
               width: 30px;
@@ -783,6 +831,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-radius: 50%;
               margin-top: 3px;
               padding: 3px;
+
               .svg_icon {
                 // position: absolute;
                 // top: 4px;
@@ -792,6 +841,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: 20px;
                 }
               }
+
               &:hover {
                 .svg_icon {
                   svg {
@@ -802,16 +852,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
               }
             }
+
             .preview_image {
               display: flex;
               align-items: center;
               gap: 8px;
+
               img {
                 width: 40px;
                 height: 40px;
 
                 border-radius: 50%;
               }
+
               p {
                 color: var(--_gray-700);
                 font-size: 14px;
@@ -823,16 +876,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 overflow: hidden;
               }
             }
+
             &:hover {
               .clear_upload_icon {
                 display: block;
               }
             }
+
             .file_upload_text {
               text-align: center;
               display: flex;
               flex-direction: column;
               gap: 4px;
+
               p {
                 strong {
                   color: var(--_primary-400);
@@ -841,6 +897,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   line-height: 150%;
                 }
               }
+
               span {
                 color: var(--_gray-600);
                 font-size: 12px;
@@ -848,6 +905,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 line-height: 150%;
               }
             }
+
             .uploadicon {
               // padding: 10px;
               // background: #f2f4f7;
@@ -855,10 +913,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               // border-radius: 50%;
               // color: var(--_gray-600);
             }
+
             .preview_file {
               display: flex;
               align-items: center;
               gap: 8px;
+
               .file_extension {
                 color: var(--_gray-700);
                 font-size: 14px;
@@ -871,6 +931,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
           }
+
           .has-file {
             justify-content: space-between;
           }
@@ -878,6 +939,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         .input_percent_a {
           position: relative;
+
           .svg_icon {
             position: absolute;
             top: 12px;
@@ -885,10 +947,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             background-color: var(--_base-white);
           }
         }
+
         // toggle styles
         .input_toggle_switch_container {
           display: flex;
           gap: 10px;
+
           .input_toggle_switch {
             position: relative;
             display: inline-block;
@@ -933,16 +997,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
           }
+
           .input_toggle_switch_text {
             gap: 2px;
             display: flex;
             flex-direction: column;
+
             .checkbox_title {
               color: var(--_gray-700);
               font-size: 16px;
               font-weight: 500;
               line-height: 24px;
             }
+
             .checkbox_des {
               color: var(--_gray-600);
               font-size: 16px;
@@ -950,6 +1017,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               line-height: 24px;
             }
           }
+
           &.active {
             border: 1px solid var(--_primary-500);
             border-radius: 4px;
@@ -957,16 +1025,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
       .error-text {
         font-size: 12px;
         color: var(--_error-500);
       }
+
       .text_area_attribute {
         width: 100%;
+
         .input_textarea_a {
           width: 100%;
         }
       }
+
       .cart_item_attr_disabled {
         pointer-events: none;
 
@@ -979,6 +1051,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       //   height: 40px;
       // }
     }
+
     border-radius: 4px;
     box-shadow: var(--_ctm-dn-ct-im-ss-sw-ae) var(--_ctm-dn-ct-im-ss-sw-br)
       var(--_ctm-dn-ct-im-ss-sw-sd) var(--_ctm-dn-ct-im-ss-sw-cr);
@@ -1009,6 +1082,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         gap: 16px;
         // max-width: 60%;
         height: 100%;
+
         .checkbox_wrapper {
           width: fit-content;
         }
@@ -1146,6 +1220,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-in-ss-ue,
                   var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                 );
+
                 &:not(:last-child)::after {
                   content: "";
                   display: inline-block;
@@ -1168,6 +1243,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               align-self: stretch;
               flex-wrap: wrap;
               font-size: 14px;
+
               span {
                 white-space: nowrap;
                 color: var(
@@ -1209,10 +1285,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-in-ss-ue,
                   var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                 );
+
                 &::after {
                   content: "/";
                   padding-left: 4px;
                 }
+
                 &:last-of-type::after {
                   content: "";
                 }
@@ -1225,6 +1303,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             align-items: center;
             gap: 16px;
             min-height: 28px;
+
             .svg_icon {
               display: flex;
               // svg path {
@@ -1278,14 +1357,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-pt-as-ss-ue,
                 var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
               );
+
               .attr_val_info_detail {
                 b {
                   margin-right: 4px;
                 }
               }
+
               .svg_icon {
                 display: flex;
                 transition: all 400ms linear;
+
                 svg {
                   path {
                     // stroke: var(
@@ -1294,6 +1376,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     // );
                     stroke: var(--_thm-cs-tt-ls-as);
                   }
+
                   width: 18px;
                   height: 18px;
                   margin-top: 2px;
@@ -1301,25 +1384,30 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
               }
             }
+
             .attributes_validation_info_sec {
               display: flex;
               justify-content: center;
               align-items: center;
               gap: 4px;
               white-space: nowrap;
+
               b {
                 margin-right: 4px;
               }
             }
+
             .svg_icon svg {
               vertical-align: middle;
             }
+
             .svg_icon.down svg {
               transform: rotate(180deg);
               transition: transform 400ms linear;
               //  width: 20px;
               // height: 20px;
             }
+
             .customizationInfo_button {
               display: flex;
               justify-content: center;
@@ -1401,6 +1489,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               background: #fff;
               box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
               margin-top: 2px;
+
               &:focus-within {
                 outline: 2px solid var(--_gray-100);
                 border: 1px solid var(--_gray-300);
@@ -1411,6 +1500,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 padding: 8px 12px;
                 align-items: center;
                 border-radius: 8px 0px 0px 8px;
+
                 p {
                   color: var(--_thm-ty-p1-tt-cr);
                   font-size: var(--_thm-ty-p1-ft-se);
@@ -1419,6 +1509,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   line-height: var(--_thm-ty-p1-le-ht);
                 }
               }
+
               .product_qty_input_container {
                 height: 40px;
                 display: flex;
@@ -1428,10 +1519,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 background: #fff;
                 border-left: 1px solid var(--_thm-cs-be-se-3);
                 padding: 8px 12px;
+
                 .svg_icon {
                   position: absolute;
                   top: 8px;
                   right: 0px;
+
                   g {
                     rect {
                       fill: var(--_gray-500);
@@ -1441,6 +1534,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               .product_qty_number {
                 // display: flex;
                 // padding: 8px 12px;
@@ -1458,6 +1552,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 // max-width: 80px;
                 text-align: center;
                 width: 75%;
+
                 &::-webkit-outer-spin-button,
                 &::-webkit-inner-spin-button {
                   -webkit-appearance: none;
@@ -1520,18 +1615,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           display: flex;
           align-items: center;
           gap: 16px;
+
           & > a,
           span {
             cursor: pointer;
           }
+
           & > * {
             display: flex;
             align-items: center;
             justify-content: center;
           }
+
           button {
             display: flex;
           }
+
           & > a,
           & > span {
             width: 32px;
@@ -1542,14 +1641,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               background-color: var(--_gray-100);
             }
           }
+
           span:hover {
             background-color: var(--_gray-100);
           }
+
           .delete_cart_icon:hover {
             background-color: var(--_error-50);
           }
+
           .edit_icon {
             cursor: pointer;
+
             svg {
               width: var(
                 --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
@@ -1565,6 +1668,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
                 )
               );
+
               path {
                 // stroke: var(
                 //   --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
@@ -1573,6 +1677,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 stroke: var(--_thm-cs-be-se-1);
               }
             }
+
             &:hover {
               svg {
                 width: var(
@@ -1589,6 +1694,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
                   )
                 );
+
                 path {
                   stroke: var(--_thm-cs-at-py);
                   // stroke: var(
@@ -1599,8 +1705,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
           }
+
           .wishlist_icon {
             cursor: pointer;
+
             svg {
               width: var(
                 --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
@@ -1610,6 +1718,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                 var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
               );
+
               path {
                 // stroke: var(
                 //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
@@ -1618,6 +1727,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 stroke: var(--_thm-cs-be-se-1);
               }
             }
+
             &:hover {
               svg {
                 width: var(
@@ -1628,6 +1738,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                   var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                 );
+
                 path {
                   // stroke: var(
                   //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
@@ -1641,6 +1752,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           .delete_cart_icon {
             cursor: pointer;
+
             svg {
               width: var(
                 --_ctm-mob-dn-pt-an-pt-an-de-in-se,
@@ -1650,6 +1762,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 --_ctm-mob-dn-pt-an-pt-an-de-in-se,
                 var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
               );
+
               path {
                 stroke: var(
                   --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
@@ -1657,6 +1770,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 );
               }
             }
+
             &:hover {
               svg {
                 width: var(
@@ -1667,6 +1781,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   --_ctm-mob-dn-pt-an-pt-an-de-in-se,
                   var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
                 );
+
                 path {
                   stroke: var(
                     --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
@@ -1676,6 +1791,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
           }
+
           .svg_icon {
             display: flex;
             justify-content: center;
@@ -1694,6 +1810,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             //   }
             // }
           }
+
           .product_action_button {
             display: flex;
             justify-content: center;
@@ -1776,10 +1893,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               display: flex;
               align-items: center;
               justify-content: center;
+
               svg {
                 path {
                   stroke: var(--_thm-cs-tt-ls-as);
                 }
+
                 width: 18px;
                 height: 18px;
                 transition: transform 400ms linear;
@@ -1831,6 +1950,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             gap: 16px;
             border: 1px solid var(--_thm-cs-be-se-3);
             border-radius: 4px;
+
             .bundle-product-item {
               .product_qty_price_wrapper {
                 gap: 8px;
@@ -2334,19 +2454,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         grid-template-columns: 1fr;
         margin-top: 0px;
       }
+
       .cart_product_responsive_wrapper {
         display: flex;
         flex-direction: column;
         gap: 16px;
+
         .cart_product_top_section_wrapper {
           display: flex;
           align-items: flex-start;
           gap: 16px;
+
           .product_info_wrapper {
             .product_info_container {
               display: flex;
               flex-direction: column;
               gap: 2px;
+
               .product_title {
                 text-overflow: ellipsis;
                 line-height: 125%;
@@ -2434,6 +2558,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-in-ss-ue,
                     var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                   );
+
                   &:not(:last-child)::after {
                     content: "";
                     display: inline-block;
@@ -2456,6 +2581,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 align-self: stretch;
                 flex-wrap: wrap;
                 font-size: 14px;
+
                 span {
                   white-space: nowrap;
                   color: var(
@@ -2497,10 +2623,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-in-ss-ue,
                     var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
                   );
+
                   &::after {
                     content: "/";
                     padding-left: 4px;
                   }
+
                   &:last-of-type::after {
                     content: "";
                   }
@@ -2508,14 +2636,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
           }
+
           .cart_product_info_wrapper {
             display: flex;
             flex-direction: column;
             gap: 16px;
+
             .product_details_wrapper {
               display: flex;
               gap: 16px;
             }
+
             .product_qty_price_wrapper {
               display: flex;
               justify-content: space-between;
@@ -2545,6 +2676,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     align-items: center;
                     border-radius: 8px 0px 0px 8px;
                     height: 40px;
+
                     p {
                       color: var(--_thm-ty-p1-tt-cr);
                       font-size: var(--_thm-ty-p1-ft-se);
@@ -2553,6 +2685,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       line-height: var(--_thm-ty-p1-le-ht);
                     }
                   }
+
                   .product_qty_input_container {
                     height: 40px;
                     display: flex;
@@ -2562,10 +2695,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     background: #fff;
                     border-left: 1px solid var(--_thm-cs-be-se-3);
                     padding: 8px 12px;
+
                     .svg_icon {
                       position: absolute;
                       top: 8px;
                       right: 0px;
+
                       g {
                         rect {
                           fill: var(--_gray-500);
@@ -2575,6 +2710,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       }
                     }
                   }
+
                   .product_qty_number {
                     // display: flex;
                     // padding: 8px 12px;
@@ -2592,6 +2728,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     // max-width: 80px;
                     text-align: center;
                     width: 75%;
+
                     &::-webkit-outer-spin-button,
                     &::-webkit-inner-spin-button {
                       -webkit-appearance: none;
@@ -2649,19 +2786,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 min-width: 80px;
               }
             }
+
             .product_customization_container {
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding-top: 16px;
               border-top: 1px solid var(--_thm-cs-be-se-3);
+
               .product_customization_left_container {
                 display: flex;
                 align-items: center;
                 gap: 16px;
                 min-height: 28px;
+
                 .wishlist_icon {
                   cursor: pointer;
+
                   svg {
                     padding: 4px;
                     border-radius: 4px;
@@ -2673,6 +2814,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                       var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                     );
+
                     path {
                       // stroke: var(
                       //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
@@ -2681,6 +2823,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       stroke: var(--_thm-cs-be-se-1);
                     }
                   }
+
                   &:hover {
                     svg {
                       background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
@@ -2692,6 +2835,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                         --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                         var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                       );
+
                       path {
                         // stroke: var(
                         //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
@@ -2702,6 +2846,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     }
                   }
                 }
+
                 .svg_icon {
                   display: flex;
                   // svg path {
@@ -2755,14 +2900,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-as-ss-ue,
                     var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
                   );
+
                   .attr_val_info_detail {
                     b {
                       margin-right: 4px;
                     }
                   }
+
                   .svg_icon {
                     display: flex;
                     transition: all 400ms linear;
+
                     svg {
                       path {
                         // stroke: var(
@@ -2771,6 +2919,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                         // );
                         stroke: var(--_thm-cs-tt-ls-as);
                       }
+
                       width: 18px;
                       height: 18px;
                       // margin-top: 2px;
@@ -2778,25 +2927,30 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     }
                   }
                 }
+
                 .attributes_validation_info_sec {
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   gap: 4px;
                   white-space: nowrap;
+
                   b {
                     margin-right: 4px;
                   }
                 }
+
                 .svg_icon svg {
                   vertical-align: middle;
                 }
+
                 .svg_icon.down svg {
                   transform: rotate(180deg);
                   transition: transform 400ms linear;
                   //  width: 20px;
                   // height: 20px;
                 }
+
                 .customizationInfo_button {
                   display: flex;
                   justify-content: center;
@@ -2845,12 +2999,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
               }
             }
+
             .product_actions_wrapper {
               padding-block: 16px;
               border-block: 1px solid var(--_thm-cs-be-se-3);
               display: flex;
               align-items: center;
               gap: 16px;
+
               & > a,
               span {
                 cursor: pointer;
@@ -2858,21 +3014,26 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 align-items: center;
                 border-radius: 4px;
               }
+
               & > * {
                 display: flex;
                 align-items: center;
                 justify-content: center;
               }
+
               button {
                 display: flex;
               }
+
               & > a,
               & > span {
                 border-radius: 4px;
                 padding: 4px;
               }
+
               .edit_icon {
                 cursor: pointer;
+
                 svg {
                   width: var(
                     --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
@@ -2888,10 +3049,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
                     )
                   );
+
                   path {
                     stroke: var(--_thm-cs-be-se-1);
                   }
                 }
+
                 &:hover {
                   svg {
                     width: var(
@@ -2908,14 +3071,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                         var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
                       )
                     );
+
                     path {
                       stroke: var(--_thm-cs-at-py);
                     }
                   }
                 }
               }
+
               .wishlist_icon {
                 cursor: pointer;
+
                 svg {
                   width: var(
                     --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
@@ -2925,10 +3091,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                     var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                   );
+
                   path {
                     stroke: var(--_thm-cs-be-se-1);
                   }
                 }
+
                 &:hover {
                   svg {
                     width: var(
@@ -2939,6 +3107,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                       var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                     );
+
                     path {
                       stroke: var(--_thm-cs-at-py);
                     }
@@ -2958,6 +3127,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     --_ctm-mob-dn-pt-an-pt-an-de-in-se,
                     var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
                   );
+
                   path {
                     stroke: var(
                       --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
@@ -2965,8 +3135,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     );
                   }
                 }
+
                 &:hover {
                   background-color: var(--_error-50);
+
                   svg {
                     width: var(
                       --_ctm-mob-dn-pt-an-pt-an-de-in-se,
@@ -2976,6 +3148,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                       --_ctm-mob-dn-pt-an-pt-an-de-in-se,
                       var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
                     );
+
                     path {
                       stroke: var(
                         --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
@@ -2985,25 +3158,30 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               .svg_icon {
                 display: flex;
                 justify-content: center;
                 align-items: center;
               }
+
               .product_action_button {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 gap: 8px;
               }
+
               a {
                 width: 33%;
                 display: flex;
                 justify-content: center;
                 border-radius: 4px;
                 padding: 4px !important;
+
                 &:hover {
                   background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
+
                   svg {
                     path {
                       stroke: var(--_thm-cs-at-py);
@@ -3011,6 +3189,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               button {
                 width: 33%;
                 display: flex;
@@ -3018,22 +3197,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-radius: 4px;
                 padding: 4px !important;
               }
+
               span:has(.cart-dropdown-container) {
                 width: 33%;
                 display: flex;
                 justify-content: center;
                 border-radius: 4px;
+
                 button {
                   width: 100%;
                   padding: 0 !important;
+
                   span {
                     display: flex;
                     align-items: center;
                     border-radius: 4px;
                   }
                 }
+
                 &:hover {
                   background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
+
                   span {
                     svg {
                       path {
@@ -3043,11 +3227,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               .line_divider {
                 height: 12px;
                 background: var(--_thm-cs-be-se-3);
                 width: 1px;
               }
+
               .primary_link {
                 display: flex;
                 justify-content: center;
@@ -3059,6 +3245,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     var(--_ctm-tab-ty-bs-dt-se-tt-cr, var(--_thm-ty-bs-dt-se-tt-cr, inherit))
                   )
                 ) !important;
+
                 span {
                   svg {
                     path {
@@ -3073,11 +3260,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               .destructive {
                 color: var(--_gray-900);
                 display: flex;
                 align-items: center;
                 justify-content: center;
+
                 span {
                   svg {
                     path {
@@ -3085,9 +3274,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     }
                   }
                 }
+
                 &:hover {
                   color: var(--_error-500);
                   background-color: var(--_error-50);
+
                   span {
                     svg {
                       path {
@@ -3114,6 +3305,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
 .infinite-group-list-container {
   max-height: calc(100vh - 200px);
+
   &.cart_items_grouped {
     margin-left: 30px;
   }
@@ -3129,6 +3321,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
   .section {
     padding: 12px;
     border: 1px solid #d9d9d9;
+
     .section-title {
       font-size: 1rem;
       font-weight: 600;
@@ -3262,15 +3455,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     background-color: var(--_base-white);
   }
 }
+
 .cart_wrapper_container {
   display: flex;
   flex-direction: column;
   gap: 24px;
   height: 400px;
   background-color: var(--_base-white);
+
   h2 {
     margin-bottom: 24px;
   }
+
   .cart_wrapper_empty_styles {
     height: 400px;
     display: flex;
@@ -3279,6 +3475,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     font-size: 20px;
     color: var(--_gray-900);
   }
+
   .cart_wrapper_loading {
     height: 400px;
     display: flex;
@@ -3307,6 +3504,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     overflow: hidden;
     border-radius: 30px;
   }
+
   .cart_loader::before {
     content: "";
     box-sizing: border-box;
@@ -3329,6 +3527,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     background-size: 15px 15px;
     z-index: 10;
   }
+
   .cart_loader::after {
     content: "";
     box-sizing: border-box;
@@ -3346,8 +3545,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     0% {
       width: 0;
     }
+
     100% {
       width: 100%;
     }
   }
 }
+
+.product_qty_wrapper {
+  .product_qty_uom {
+    color: var(--_thm-ty-p3-tt-cr, var(--_gray-500));
+    font-size: var(--_thm-ty-p3-ft-se, 12px);
+    font-weight: var(--_thm-ty-p3-bd, 400);
+    line-height: var(--_thm-ty-p3-le-ht, 18px);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}