npm - @sc-360-v2/storefront-cms-library - Versions diffs - 0.4.49 → 0.4.50 - Mend

@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (183) hide show

package/dist/add-existing-form.scss +66 -66
package/dist/add-order.scss +377 -377
package/dist/add-products-tab copy.scss +1132 -1132
package/dist/add-products-tab-details.scss +3818 -0
package/dist/add-products-tab.scss +142 -3052
package/dist/allocationDetails.scss +2247 -2247
package/dist/allocations.scss +1603 -1603
package/dist/amount-estimator.scss +1083 -1083
package/dist/animation-control.scss +23 -23
package/dist/badge.scss +388 -388
package/dist/brand-basic-elements.scss +292 -292
package/dist/brand.scss +93 -93
package/dist/breadcrumbs.scss +802 -802
package/dist/builder.js +1 -1
package/dist/bulk-order-pad.scss +677 -677
package/dist/bulk-variant-picker copy.scss +1121 -1121
package/dist/bulk-variant-picker.scss +3294 -3294
package/dist/bundle copy.scss +2805 -2805
package/dist/bundle.scss +2383 -2383
package/dist/bundleDetails copy.scss +1431 -1431
package/dist/bundleDetails.scss +3320 -3285
package/dist/button copy.scss +271 -271
package/dist/button.scss +292 -292
package/dist/buy-for-tab-container.scss +90 -90
package/dist/buy-for-tab.scss +3 -4
package/dist/buy-for-tabs-container-item.scss +80 -80
package/dist/buyForHeaders.scss +6718 -6718
package/dist/buyForPopup.scss +70 -52
package/dist/cart-details.scss +3207 -3207
package/dist/cart-products-sidebar.scss +211 -211
package/dist/cart-summary.scss +2728 -2728
package/dist/cart-wrapper.scss +127 -127
package/dist/cart.scss +269 -269
package/dist/cartAttributes.scss +935 -935
package/dist/cartDropdownOverlay.scss +513 -237
package/dist/cartGrouping.scss +89 -89
package/dist/category-groups-element.scss +138 -138
package/dist/category.scss +73 -73
package/dist/categoryDetails.scss +61 -61
package/dist/categoryWidget.scss +34 -34
package/dist/checkbox-radio.scss +124 -124
package/dist/checkout.scss +6460 -6569
package/dist/code-temp.scss +58 -58
package/dist/colorpicker_v2.scss +52 -52
package/dist/common-element.scss +35 -35
package/dist/confirm-modal.scss +351 -351
package/dist/confirmationModal.scss +139 -139
package/dist/contact-us.scss +105 -105
package/dist/container.scss +114 -114
package/dist/countdown.scss +751 -751
package/dist/coupon.scss +1254 -1254
package/dist/custom-fonts.scss +100 -100
package/dist/customization-tree.scss +160 -160
package/dist/default-dropdown.scss +240 -240
package/dist/dropdownTemplate.scss +57 -43
package/dist/editCartItem.scss +111 -111
package/dist/embed-temp.scss +72 -72
package/dist/embroider-preview-element.scss +94 -94
package/dist/embroider-template-1-v2.scss +937 -937
package/dist/embroider-template-1.scss +482 -482
package/dist/embroidery.scss +213 -213
package/dist/employee-bulk-order.scss +4057 -4057
package/dist/emtpy-templates.scss +165 -165
package/dist/faq.scss +564 -564
package/dist/fb-dropdown.scss +125 -125
package/dist/filter-results.scss +323 -323
package/dist/filters.scss +2418 -2418
package/dist/flex-text-editor.scss +271 -271
package/dist/form-preview.scss +290 -290
package/dist/form-zindex-module.scss +24 -24
package/dist/gallery-slider-temp.scss +1234 -1234
package/dist/global-styles.scss +86 -86
package/dist/grid.scss +119 -119
package/dist/hotspot.scss +397 -397
package/dist/icon-library.scss +74 -74
package/dist/icon-list.scss +268 -268
package/dist/image-for-product.scss +21 -21
package/dist/image-temp.scss +168 -168
package/dist/item-stock.scss +87 -87
package/dist/language-selector.scss +528 -528
package/dist/layouter-item.scss +89 -89
package/dist/layouter-pro-item.scss +80 -80
package/dist/layouter-pro.scss +88 -88
package/dist/layouter.scss +294 -294
package/dist/light-box-v2.scss +105 -105
package/dist/lightbox.scss +78 -78
package/dist/line.scss +166 -166
package/dist/loader.scss +37 -37
package/dist/login.scss +1473 -1473
package/dist/map.scss +962 -962
package/dist/marchandiserSets.scss +60 -60
package/dist/mega-menu-container.scss +99 -99
package/dist/mega-menu.scss +838 -838
package/dist/menu-item.scss +19 -19
package/dist/menu-v2.scss +730 -730
package/dist/menu.scss +162 -162
package/dist/modal.scss +2267 -2267
package/dist/multi-select-dropdown.scss +282 -279
package/dist/my-templates.scss +463 -463
package/dist/my-wishlist.scss +17 -17
package/dist/option-bar.scss +845 -845
package/dist/order-processing.scss +61 -61
package/dist/order-status.scss +1856 -1856
package/dist/overflow-module.scss +63 -63
package/dist/past-orders.scss +975 -975
package/dist/payment-methods.scss +289 -289
package/dist/pickup-locations.scss +1167 -1167
package/dist/position-module.scss +95 -95
package/dist/prefix-list.scss +86 -86
package/dist/product-actions copy.scss +2765 -2765
package/dist/product-actions.scss +2286 -2286
package/dist/product-basic-elements.scss +770 -770
package/dist/product-customizations.scss +149 -149
package/dist/product-highlights copy.scss +217 -217
package/dist/product-highlights.scss +311 -311
package/dist/product-image copy.scss +787 -787
package/dist/product-image-bundles.scss +1512 -0
package/dist/product-image.scss +1 -1
package/dist/product-inventory.scss +1378 -1378
package/dist/product-options.scss +1144 -1144
package/dist/product-price.scss +2598 -2598
package/dist/product-promotions.scss +2759 -2759
package/dist/product-sizechart.scss +1826 -1826
package/dist/product.scss +97 -97
package/dist/productDetails.scss +70 -70
package/dist/profile.scss +3 -2
package/dist/quantity-selector.scss +3 -2
package/dist/quick-links.scss +552 -552
package/dist/quick-order-pad.scss +237 -237
package/dist/quota-details.scss +263 -263
package/dist/quotes.scss +737 -737
package/dist/repeater copy.scss +635 -635
package/dist/repeater-embla-controls.scss +6 -3
package/dist/repeater-grid-toggle.scss +58 -58
package/dist/repeater-item.scss +90 -90
package/dist/repeater.scss +915 -915
package/dist/request-for-quotes.scss +746 -746
package/dist/responsive-behaviour.scss +29 -29
package/dist/rfqs.scss +736 -736
package/dist/scroll.scss +222 -222
package/dist/search-results-heading.scss +279 -279
package/dist/search.scss +296 -296
package/dist/section.scss +209 -209
package/dist/shareCartSideBar.scss +254 -254
package/dist/shipping-estimator.scss +41 -41
package/dist/shipping-payments.scss +2467 -2467
package/dist/simple-list.scss +259 -259
package/dist/skeleton.scss +74 -74
package/dist/social.scss +276 -276
package/dist/sort.scss +89 -89
package/dist/spotlight.scss +1663 -1663
package/dist/stack.scss +129 -129
package/dist/static-global.scss +167 -0
package/dist/static-text.scss +52 -52
package/dist/stockStatus.scss +64 -64
package/dist/store-locations.scss +1398 -1398
package/dist/sub-category.scss +74 -74
package/dist/submit-quote.scss +275 -275
package/dist/tab-container-item.scss +80 -80
package/dist/tab-container.scss +89 -89
package/dist/tab-v2.scss +583 -583
package/dist/table-common.scss +506 -506
package/dist/table.scss +685 -685
package/dist/tabs.scss +395 -395
package/dist/text-temp-v2.scss +139 -139
package/dist/text-temp.scss +109 -109
package/dist/theme-classes.scss +296 -296
package/dist/toaster.scss +350 -350
package/dist/toggle-button.scss +32 -32
package/dist/transform-properties-module.scss +20 -20
package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1790 -441
package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
package/dist/uom-selector.scss +1169 -1169
package/dist/user-elements copy.scss +1437 -1437
package/dist/user-elements.scss +2471 -2471
package/dist/variant-picker.scss +2384 -2384
package/dist/video.scss +476 -476
package/dist/volume-pricing copy 2.scss +1468 -1468
package/dist/volume-pricing copy.scss +1077 -1077
package/dist/volume-pricing.scss +1175 -1175
package/dist/widget.scss +148 -148
package/dist/wishlist-overlay.scss +48 -48
package/package.json +1 -1

package/dist/cartAttributes.scss CHANGED Viewed

@@ -1,935 +1,935 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-[data-div-type="element"] {
-  &[data-element-type="cartAttributes"] {
-    // width: var(
-    //   --_ctm-mob-ele-nw-wh-st-mx,
-    //   var(
-    //     --_ctm-tab-ele-nw-wh-st-mx,
-    //     var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
-    //   )
-    // );
-    // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    height: max-content;
-    min-width: 240px;
-    // aspect-ratio: var(
-    //   --_ctm-mob-aspect-ratio,
-    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
-    // );
-    & > .wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 100%;
-      max-width: 100%;
-      height: auto;
-    }
-    .cart__section {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      gap: 8px;
-    }
-    .cart-attribute-container {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      background-color: var(
-        --_ctm-mob-dn-as-wt-bd-cr,
-        var(--_ctm-tab-dn-as-wt-bd-cr, var(--_ctm-dn-as-wt-bd-cr))
-      );
-      padding: var(--_ctm-mob-dn-as-wt-pg, var(--_ctm-tab-dn-as-wt-pg, var(--_ctm-dn-as-wt-pg)));
-      border-color: var(
-        --_ctm-mob-dn-as-wt-br-cr,
-        var(--_ctm-tab-dn-as-wt-br-cr, var(--_ctm-dn-as-wt-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-dn-as-wt-br-se,
-        var(--_ctm-tab-dn-as-wt-br-se, var(--_ctm-dn-as-wt-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-dn-as-wt-br-wh,
-        var(--_ctm-tab-dn-as-wt-br-wh, var(--_ctm-dn-as-wt-br-wh))
-      );
-      border-radius: var(
-        --_ctm-mob-dn-as-wt-br-rs,
-        var(--_ctm-tab-dn-as-wt-br-rs, var(--_ctm-dn-as-wt-br-rs))
-      );
-      box-shadow: var(
-          --_ctm-mob-dn-as-wt-sw-ae,
-          var(--_ctm-tab-dn-as-wt-sw-ae, var(--_ctm-dn-as-wt-sw-ae))
-        )
-        var(
-          --_ctm-mob-dn--as-wt-sw-br,
-          var(--_ctm-tab-dn--as-wt-sw-br, var(--_ctm-dn--as-wt-sw-br))
-        )
-        var(--_ctm-mob-dn-as-wt-sw-sd, var(--_ctm-tab-dn-as-wt-sw-sd, var(--_ctm-dn-as-wt-sw-sd)))
-        var(--_ctm-mob-dn-as-wt-sw-cr, var(--_ctm-tab-dn-as-wt-sw-cr, var(--_ctm-dn-as-wt-sw-cr)));
-    }
-    .cart-attribute-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background-color: var(
-        --_ctm-mob-dn-as-hr-bd-cr,
-        var(--_ctm-tab-dn-as-hr-bd-cr, var(--_ctm-dn-as-hr-bd-cr))
-      );
-      padding: var(--_ctm-mob-dn-as-hr-pg, var(--_ctm-tab-dn-as-hr-pg, var(--_ctm-dn-as-hr-pg)));
-      border-color: var(
-        --_ctm-mob-dn-as-hr-br-cr,
-        var(--_ctm-tab-dn-as-hr-br-cr, var(--_ctm-dn-as-hr-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-dn-as-hr-br-se,
-        var(--_ctm-tab-dn-as-hr-br-se, var(--_ctm-dn-as-hr-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-dn-as-hr-br-wh,
-        var(--_ctm-tab-dn-as-hr-br-wh, var(--_ctm-dn-as-hr-br-wh))
-      );
-      border-radius: var(
-        --_ctm-mob-dn-as-hr-br-rs,
-        var(--_ctm-tab-dn-as-hr-br-rs, var(--_ctm-dn-as-hr-br-rs))
-      );
-      .cart_attribute_title {
-        font-family: var(
-          --_ctm-mob-dn-as-hr-ft-fy,
-          var(--_ctm-tab-dn-as-hr-ft-fy, var(--_ctm-dn-as-hr-ft-fy))
-        );
-        color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr)));
-        font-weight: var(
-          --_ctm-mob-dn-as-hr-ft-wt,
-          var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt))
-        );
-        font-size: var(
-          --_ctm-mob-dn-as-hr-ft-se,
-          var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se))
-        );
-        text-decoration: var(
-          --_ctm-mob-dn-as-hr-ue,
-          var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue))
-        );
-        letter-spacing: var(
-          --_ctm-mob-dn-as-hr-lr-sg,
-          var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg))
-        );
-        line-height: var(
-          --_ctm-mob-dn-as-hr-le-ht,
-          var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht))
-        );
-        font-style: var(
-          --_ctm-mob-dn-as-hr-ft-se-ic,
-          var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic))
-        );
-        text-align: var(
-          --_ctm-mob-dn-as-hr-tt-an,
-          var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an))
-        );
-      }
-      .icon svg {
-        path {
-          stroke: var(
-            --_ctm-mob-dn-an-as-im-in-c1,
-            var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1))
-          );
-        }
-        width: var(
-          --_ctm-mob-dn-an-as-im-in-se,
-          var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
-        );
-        height: var(
-          --_ctm-mob-dn-an-as-im-in-se,
-          var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
-        );
-      }
-      .iconDesc svg {
-        path {
-          stroke: var(
-            --_ctm-mob-dn-an-as-im-in-c1-dc,
-            var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc))
-          );
-        }
-        width: var(
-          --_ctm-mob-dn-an-as-im-in-se-dc,
-          var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
-        );
-        height: var(
-          --_ctm-mob-dn-an-as-im-in-se-dc,
-          var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
-        );
-      }
-    }
-    .attributes-section-body {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      overflow-y: auto;
-      background-color: var(
-        --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr,
-        var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr))
-      );
-      padding: var(
-        --_ctm-mob-dn-as-cr-ae-is-wr-pg,
-        var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg))
-      );
-      gap: var(
-        --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
-        var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp))
-      );
-      border-color: var(
-        --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
-        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-dn-as-cr-ae-is-wr-br-se,
-        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-dn-as-cr-ae-is-wr-br-wh,
-        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh))
-      );
-      border-radius: var(
-        --_ctm-mob-dn-as-cr-ae-is-wr-br-rs,
-        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs))
-      );
-      .attriTitle {
-        // font-weight: 600;
-        // font-size: 14px;
-        // line-height: 20px;
-        // color: #101828;
-        // padding-bottom: 6px;
-        font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy);
-        color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr);
-        font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt);
-        font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se);
-        text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue);
-        letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg);
-        line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht);
-        font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic);
-        text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an);
-        padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg);
-      }
-      .attriDes {
-        // font-weight: 400;
-        // font-size: 14px;
-        // line-height: 20px;
-        font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy);
-        color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr);
-        font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt);
-        font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se);
-        text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue);
-        letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg);
-        line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht);
-        font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic);
-        text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
-        padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
-      }
-      .attribute {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        padding: var(
-          --_ctm-mob-dn-as-cr-as-fs-pg,
-          var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg))
-        );
-        gap: var(
-          --_ctm-mob-dn-as-cr-as-fs-im-gp,
-          var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp))
-        );
-        .label {
-          display: block;
-          padding: var(
-            --_ctm-mob-dn-as-cr-as-ls-pg,
-            var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg))
-          );
-          font-family: var(
-            --_ctm-mob-dn-as-cr-as-ls-ft-fy,
-            var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy))
-          );
-          color: var(
-            --_ctm-mob-dn-as-cr-as-ls-cr,
-            var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-as-cr-as-ls-ft-wt,
-            var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt))
-          );
-          font-size: var(
-            --_ctm-mob-dn-as-cr-as-ls-ft-se,
-            var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-as-cr-as-ls-ue,
-            var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-as-cr-as-ls-lr-sg,
-            var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg))
-          );
-          line-height: var(
-            --_ctm-mob-dn-as-cr-as-ls-le-ht,
-            var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht))
-          );
-          font-style: var(
-            --_ctm-mob-dn-as-cr-as-ls-ft-se-ic,
-            var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-as-cr-as-ls-tt-an,
-            var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an))
-          );
-          &.required::after {
-            content: " *";
-            color: var(--_error-500);
-          }
-        }
-        .attribute_field {
-          width: 100% !important;
-          input {
-            background-color: var(
-              --_ctm-mob-dn-as-cr-as-is-bd-cr,
-              var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
-            );
-            padding: var(
-              --_ctm-mob-dn-as-cr-as-is-pg,
-              var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
-            );
-            gap: var(
-              --_ctm-mob-dn-as-cr-as-is-im-gp,
-              var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp))
-            );
-            border-color: var(
-              --_ctm-mob-dn-as-cr-as-is-br-cr,
-              var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
-            );
-            border-style: var(
-              --_ctm-mob-dn-as-cr-as-is-br-se,
-              var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
-            );
-            border-width: var(
-              --_ctm-mob-dn-as-cr-as-is-br-wh,
-              var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
-            );
-            border-radius: var(
-              --_ctm-mob-dn-as-cr-as-is-br-rs,
-              var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
-            );
-            &::placeholder {
-              font-family: var(
-                --_ctm-mob-dn-as-cr-as-is-ft-fy,
-                var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
-              );
-              color: var(
-                --_ctm-mob-dn-as-cr-as-is-cr,
-                var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
-              );
-              font-weight: var(
-                --_ctm-mob-dn-as-cr-as-is-ft-wt,
-                var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
-              );
-              font-size: var(
-                --_ctm-mob-dn-as-cr-as-is-ft-se,
-                var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
-              );
-              text-decoration: var(
-                --_ctm-mob-dn-as-cr-as-is-ue,
-                var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
-              );
-              letter-spacing: var(
-                --_ctm-mob-dn-as-cr-as-is-lr-sg,
-                var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
-              );
-              line-height: var(
-                --_ctm-mob-dn-as-cr-as-is-le-ht,
-                var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
-              );
-              font-style: var(
-                --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
-                var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
-              );
-              text-align: var(
-                --_ctm-mob-dn-as-cr-as-is-tt-an,
-                var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
-              );
-            }
-          }
-          .attribute_form_field {
-            font-family: var(
-              --_ctm-mob-dn-as-cr-as-is-ft-fy,
-              var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
-            );
-            color: var(
-              --_ctm-mob-dn-as-cr-as-is-cr,
-              var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
-            );
-            font-weight: var(
-              --_ctm-mob-dn-as-cr-as-is-ft-wt,
-              var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
-            );
-            font-size: var(
-              --_ctm-mob-dn-as-cr-as-is-ft-se,
-              var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
-            );
-            text-decoration: var(
-              --_ctm-mob-dn-as-cr-as-is-ue,
-              var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
-            );
-            letter-spacing: var(
-              --_ctm-mob-dn-as-cr-as-is-lr-sg,
-              var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
-            );
-            line-height: var(
-              --_ctm-mob-dn-as-cr-as-is-le-ht,
-              var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
-            );
-            font-style: var(
-              --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
-              var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
-            );
-            text-align: var(
-              --_ctm-mob-dn-as-cr-as-is-tt-an,
-              var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
-            );
-            transition:
-              background-color 0.2s,
-              color 0.2s,
-              border-color 0.2s,
-              box-shadow 0.2s;
-            &:focus {
-              box-shadow:
-                0px 1px 2px rgba(16, 24, 40, 0.05),
-                0px 0px 0px 2px var(--primary-100);
-              border: 1px solid var(--primary-300);
-            }
-          }
-          .dropdown-input-section {
-            height: auto !important;
-            background-color: var(
-              --_ctm-mob-dn-as-cr-as-is-bd-cr,
-              var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
-            );
-            padding: var(
-              --_ctm-mob-dn-as-cr-as-is-pg,
-              var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
-            );
-            border-color: var(
-              --_ctm-mob-dn-as-cr-as-is-br-cr,
-              var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
-            );
-            border-style: var(
-              --_ctm-mob-dn-as-cr-as-is-br-se,
-              var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
-            );
-            border-width: var(
-              --_ctm-mob-dn-as-cr-as-is-br-wh,
-              var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
-            );
-            border-radius: var(
-              --_ctm-mob-dn-as-cr-as-is-br-rs,
-              var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
-            );
-            font-family: var(
-              --_ctm-mob-dn-as-cr-as-dn-ft-fy,
-              var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy))
-            );
-            color: var(
-              --_ctm-mob-dn-as-cr-as-dn-cr,
-              var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr))
-            );
-            font-weight: var(
-              --_ctm-mob-dn-as-cr-as-dn-ft-wt,
-              var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt))
-            );
-            font-size: var(
-              --_ctm-mob-dn-as-cr-as-dn-ft-se,
-              var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se))
-            );
-            text-decoration: var(
-              --_ctm-mob-dn-as-cr-as-dn-ue,
-              var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue))
-            );
-            letter-spacing: var(
-              --_ctm-mob-dn-as-cr-as-dn-lr-sg,
-              var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg))
-            );
-            line-height: var(
-              --_ctm-mob-dn-as-cr-as-dn-le-ht,
-              var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht))
-            );
-            font-style: var(
-              --_ctm-mob-dn-as-cr-as-dn-ft-se-ic,
-              var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic))
-            );
-            text-align: var(
-              --_ctm-mob-dn-as-cr-as-dn-tt-an,
-              var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
-            );
-            .selected-display {
-              .selected-item {
-                display: flex;
-                align-items: center;
-                .color-swatch {
-                  position: relative;
-                  // top: 1px;
-                }
-                .svg_icon svg {
-                  width: 16px;
-                  height: 16px;
-                }
-              }
-            }
-          }
-          &:focus {
-            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;
-            align-items: center;
-            align-self: stretch;
-            background-color: var(
-              --_ctm-mob-dn-as-cr-us-bd-cr,
-              var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr))
-            );
-            padding: var(
-              --_ctm-mob-dn-as-cr-us-pg,
-              var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg))
-            );
-            gap: var(
-              --_ctm-mob-dn-as-cr-us-im-gp,
-              var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp))
-            );
-            border-color: var(
-              --_ctm-mob-dn-as-cr-us-br-cr,
-              var(--_ctm-tab-dn-as-cr-us-br-cr, var(--_ctm-dn-as-cr-us-br-cr))
-            );
-            border-style: var(
-              --_ctm-mob-dn-as-cr-us-br-se,
-              var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se))
-            );
-            border-width: var(
-              --_ctm-mob-dn-as-cr-us-br-wh,
-              var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh))
-            );
-            border-radius: var(
-              --_ctm-mob-dn-as-cr-us-br-rs,
-              var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs))
-            );
-            .file_upload_text {
-              text-align: center;
-              display: flex;
-              flex-direction: column;
-              gap: 6px;
-              p {
-                strong {
-                  font-family: var(
-                    --_ctm-mob-dn-as-cr-us-ft-fy,
-                    var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
-                  );
-                  // color: var(
-                  //   --_ctm-mob-dn-as-cr-us-cr,
-                  //   var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
-                  // );
-                  color: var(--_thm-cs-tt-ls-as);
-                  font-weight: var(
-                    --_ctm-mob-dn-as-cr-us-ft-wt,
-                    var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
-                  );
-                  font-size: var(
-                    --_ctm-mob-dn-as-cr-us-ft-se,
-                    var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se))
-                  );
-                  text-decoration: var(
-                    --_ctm-mob-dn-as-cr-us-ue,
-                    var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue))
-                  );
-                  letter-spacing: var(
-                    --_ctm-mob-dn-as-cr-us-lr-sg,
-                    var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg))
-                  );
-                  line-height: var(
-                    --_ctm-mob-dn-as-cr-us-le-ht,
-                    var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht))
-                  );
-                  font-style: var(
-                    --_ctm-mob-dn-as-cr-us-ft-se-ic,
-                    var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic))
-                  );
-                  text-align: var(
-                    --_ctm-mob-dn-as-cr-us-tt-an,
-                    var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an))
-                  );
-                }
-              }
-              span {
-                font-family: var(
-                  --_ctm-mob-dn-as-cr-us-ft-fy-dc,
-                  var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc))
-                );
-                color: var(
-                  --_ctm-mob-dn-as-cr-us-cr-dc,
-                  var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc))
-                );
-                font-weight: var(
-                  --_ctm-mob-dn-as-cr-us-ft-wt-dc,
-                  var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc))
-                );
-                font-size: var(
-                  --_ctm-mob-dn-as-cr-us-ft-se-dc,
-                  var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc))
-                );
-                text-decoration: var(
-                  --_ctm-mob-dn-as-cr-us-ue-dc,
-                  var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc))
-                );
-                letter-spacing: var(
-                  --_ctm-mob-dn-as-cr-us-lr-sg-dc,
-                  var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc))
-                );
-                line-height: var(
-                  --_ctm-mob-dn-as-cr-us-le-ht-dc,
-                  var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc))
-                );
-                font-style: var(
-                  --_ctm-mob-dn-as-cr-us-ft-se-ic-dc,
-                  var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc))
-                );
-                text-align: var(
-                  --_ctm-mob-dn-as-cr-us-tt-an-dc,
-                  var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc))
-                );
-              }
-            }
-            .uploadicon {
-              // padding: 10px;
-              // background: #f2f4f7;
-              display: inline-block;
-              // border-radius: 50%;
-              // color: var(--_gray-600);
-            }
-          }
-        }
-      }
-      .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;
-        opacity: 0.5;
-        cursor: auto;
-      }
-    }
-  }
-}
-// toggle styles
-.input_toggle_switch_container {
-  display: flex;
-  background-color: var(
-    --_ctm-mob-dn-as-cr-as-bs-bd-cr,
-    var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr))
-  );
-  border-color: var(
-    --_ctm-mob-dn-as-cr-as-bs-br-cr,
-    var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr))
-  );
-  border-style: var(
-    --_ctm-mob-dn-as-cr-as-bs-br-se,
-    var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se))
-  );
-  border-width: var(
-    --_ctm-mob-dn-as-cr-as-bs-br-wh,
-    var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh))
-  );
-  border-radius: var(
-    --_ctm-mob-dn-as-cr-as-bs-br-rs,
-    var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs))
-  );
-  padding: var(
-    --_ctm-mob-dn-as-cr-as-bs-pg,
-    var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg))
-  );
-  gap: var(
-    --_ctm-mob-dn-as-cr-as-bs-im-gp,
-    var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp))
-  );
-  .input_toggle_switch {
-    position: relative;
-    display: inline-block;
-    width: 50px;
-    height: 28px;
-    input[type="checkbox"] {
-      opacity: 0;
-      width: 0;
-      height: 0;
-      &:checked + .slider {
-        background-color: #4caf50;
-        &::before {
-          transform: translateX(22px);
-        }
-      }
-    }
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: #ccc;
-      transition: 0.4s;
-      border-radius: 28px;
-      &::before {
-        position: absolute;
-        content: "";
-        height: 22px;
-        width: 22px;
-        left: 3px;
-        bottom: 3px;
-        background-color: white;
-        border-radius: 50%;
-        transition: 0.4s;
-      }
-    }
-  }
-  .input_toggle_switch_text {
-    gap: 4px;
-    display: flex;
-    flex-direction: column;
-    .checkbox_title {
-      font-family: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-fy,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy))
-      );
-      color: var(
-        --_ctm-mob-dn-as-cr-as-bs-cr,
-        var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr))
-      );
-      font-weight: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-wt,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt))
-      );
-      font-size: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-se,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se))
-      );
-      text-decoration: var(
-        --_ctm-mob-dn-as-cr-as-bs-ue,
-        var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue))
-      );
-      letter-spacing: var(
-        --_ctm-mob-dn-as-cr-as-bs-lr-sg,
-        var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg))
-      );
-      line-height: var(
-        --_ctm-mob-dn-as-cr-as-bs-le-ht,
-        var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht))
-      );
-      font-style: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-se-ic,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic))
-      );
-      text-align: var(
-        --_ctm-mob-dn-as-cr-as-bs-tt-an,
-        var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an))
-      );
-    }
-    .checkbox_des {
-      font-family: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc))
-      );
-      color: var(
-        --_ctm-mob-dn-as-cr-as-bs-cr-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc))
-      );
-      font-weight: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc))
-      );
-      font-size: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-se-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc))
-      );
-      text-decoration: var(
-        --_ctm-mob-dn-as-cr-as-bs-ue-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc))
-      );
-      letter-spacing: var(
-        --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc))
-      );
-      line-height: var(
-        --_ctm-mob-dn-as-cr-as-bs-le-ht-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc))
-      );
-      font-style: var(
-        --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc))
-      );
-      text-align: var(
-        --_ctm-mob-dn-as-cr-as-bs-tt-an-dc,
-        var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc))
-      );
-    }
-  }
-}
-// input radio styles
-.input_radio_a {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  height: 20px;
-  width: 20px;
-  input[type="radio"] {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    &:checked + .custom_radio::after {
-      display: block;
-    }
-  }
-  .custom_radio {
-    height: 18px;
-    width: 18px;
-    border-radius: 50%;
-    background-color: var(--_base-white);
-    border: 2px solid var(--_gray-600);
-    position: relative;
-    transition: border-color 0.3s ease;
-    &::after {
-      content: "";
-      position: absolute;
-      top: 3px;
-      left: 3px;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background-color: var(--_primary-400);
-      display: none;
-    }
-  }
-  input[type="radio"]:checked + .custom_radio {
-    border-color: var(--_primary-400);
-  }
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-// .custom-upload {
-//   // text-align: center;
-//   // border: 1px solid var(--_gray-200);
-//   // border-radius: 6px;
-//   // padding: 16px;
-//   border-radius: 6px;
-//   border: 1px solid var(--Gray-200, #eaecf0);
-//   background: var(--Base-White, #fff);
-//   display: flex;
-//   padding: 16px 24px;
-//   flex-direction: column;
-//   align-items: center;
-//   gap: 4px;
-//   align-self: stretch;
-//   &:hover {
-//     cursor: pointer;
-//     border: 1px solid var(--_primary-200);
-//     background: var(--_primary-25);
-//   }
-//   .uploadicon {
-//     padding: 10px;
-//     background: #f2f4f7;
-//     display: inline-block;
-//     border-radius: 50%;
-//     margin-bottom: 12px;
-//     color: var(--_gray-600);
-//   }
-//   p {
-//     padding-bottom: 4px;
-//     color: var(--_gray-600);
-//     font-size: 14px;
-//     strong {
-//       // color: var(--_primary-400);
-//       // font-weight: 600;
-//       color: var(--Primary-400, #243dc6);
-//       font-size: 14px;
-//       font-weight: 600;
-//       // line-height: 20px;
-//     }
-//   }
-//   span {
-//     color: var(--Gray-600, #475467);
-//     font-size: 14px;
-//     font-weight: 400;
-//     // line-height: 20px;
-//   }
-// }
-.input_color_picker_a {
-  width: 100% !important;
-  height: 48px;
-  border-radius: 4px;
-  border: 1px solid var(--Gray-300, #d0d5dd);
-  background: var(--Base-White, #fff);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  outline: none;
-  transition: border-color 0.2s ease-in-out;
-  font-size: 14px;
-  cursor: pointer;
-}
-.attribute_currency_field {
-  position: relative;
-  input {
-    padding: 12px 12px 12px 32px !important;
-  }
-  svg {
-    position: absolute;
-    left: 8px;
-    top: 10px;
-    background: #fff;
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+[data-div-type="element"] {
+  &[data-element-type="cartAttributes"] {
+    // width: var(
+    //   --_ctm-mob-ele-nw-wh-st-mx,
+    //   var(
+    //     --_ctm-tab-ele-nw-wh-st-mx,
+    //     var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
+    //   )
+    // );
+    // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    height: max-content;
+    min-width: 240px;
+    // aspect-ratio: var(
+    //   --_ctm-mob-aspect-ratio,
+    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
+    // );
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 100%;
+      max-width: 100%;
+      height: auto;
+    }
+    .cart__section {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      gap: 8px;
+    }
+    .cart-attribute-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: var(
+        --_ctm-mob-dn-as-wt-bd-cr,
+        var(--_ctm-tab-dn-as-wt-bd-cr, var(--_ctm-dn-as-wt-bd-cr))
+      );
+      padding: var(--_ctm-mob-dn-as-wt-pg, var(--_ctm-tab-dn-as-wt-pg, var(--_ctm-dn-as-wt-pg)));
+      border-color: var(
+        --_ctm-mob-dn-as-wt-br-cr,
+        var(--_ctm-tab-dn-as-wt-br-cr, var(--_ctm-dn-as-wt-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-dn-as-wt-br-se,
+        var(--_ctm-tab-dn-as-wt-br-se, var(--_ctm-dn-as-wt-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-dn-as-wt-br-wh,
+        var(--_ctm-tab-dn-as-wt-br-wh, var(--_ctm-dn-as-wt-br-wh))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-as-wt-br-rs,
+        var(--_ctm-tab-dn-as-wt-br-rs, var(--_ctm-dn-as-wt-br-rs))
+      );
+      box-shadow: var(
+          --_ctm-mob-dn-as-wt-sw-ae,
+          var(--_ctm-tab-dn-as-wt-sw-ae, var(--_ctm-dn-as-wt-sw-ae))
+        )
+        var(
+          --_ctm-mob-dn--as-wt-sw-br,
+          var(--_ctm-tab-dn--as-wt-sw-br, var(--_ctm-dn--as-wt-sw-br))
+        )
+        var(--_ctm-mob-dn-as-wt-sw-sd, var(--_ctm-tab-dn-as-wt-sw-sd, var(--_ctm-dn-as-wt-sw-sd)))
+        var(--_ctm-mob-dn-as-wt-sw-cr, var(--_ctm-tab-dn-as-wt-sw-cr, var(--_ctm-dn-as-wt-sw-cr)));
+    }
+    .cart-attribute-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: var(
+        --_ctm-mob-dn-as-hr-bd-cr,
+        var(--_ctm-tab-dn-as-hr-bd-cr, var(--_ctm-dn-as-hr-bd-cr))
+      );
+      padding: var(--_ctm-mob-dn-as-hr-pg, var(--_ctm-tab-dn-as-hr-pg, var(--_ctm-dn-as-hr-pg)));
+      border-color: var(
+        --_ctm-mob-dn-as-hr-br-cr,
+        var(--_ctm-tab-dn-as-hr-br-cr, var(--_ctm-dn-as-hr-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-dn-as-hr-br-se,
+        var(--_ctm-tab-dn-as-hr-br-se, var(--_ctm-dn-as-hr-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-dn-as-hr-br-wh,
+        var(--_ctm-tab-dn-as-hr-br-wh, var(--_ctm-dn-as-hr-br-wh))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-as-hr-br-rs,
+        var(--_ctm-tab-dn-as-hr-br-rs, var(--_ctm-dn-as-hr-br-rs))
+      );
+      .cart_attribute_title {
+        font-family: var(
+          --_ctm-mob-dn-as-hr-ft-fy,
+          var(--_ctm-tab-dn-as-hr-ft-fy, var(--_ctm-dn-as-hr-ft-fy))
+        );
+        color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr)));
+        font-weight: var(
+          --_ctm-mob-dn-as-hr-ft-wt,
+          var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt))
+        );
+        font-size: var(
+          --_ctm-mob-dn-as-hr-ft-se,
+          var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-as-hr-ue,
+          var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-as-hr-lr-sg,
+          var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-as-hr-le-ht,
+          var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht))
+        );
+        font-style: var(
+          --_ctm-mob-dn-as-hr-ft-se-ic,
+          var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-as-hr-tt-an,
+          var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an))
+        );
+      }
+      .icon svg {
+        path {
+          stroke: var(
+            --_ctm-mob-dn-an-as-im-in-c1,
+            var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1))
+          );
+        }
+        width: var(
+          --_ctm-mob-dn-an-as-im-in-se,
+          var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
+        );
+        height: var(
+          --_ctm-mob-dn-an-as-im-in-se,
+          var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
+        );
+      }
+      .iconDesc svg {
+        path {
+          stroke: var(
+            --_ctm-mob-dn-an-as-im-in-c1-dc,
+            var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc))
+          );
+        }
+        width: var(
+          --_ctm-mob-dn-an-as-im-in-se-dc,
+          var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
+        );
+        height: var(
+          --_ctm-mob-dn-an-as-im-in-se-dc,
+          var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
+        );
+      }
+    }
+    .attributes-section-body {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      overflow-y: auto;
+      background-color: var(
+        --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr,
+        var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr))
+      );
+      padding: var(
+        --_ctm-mob-dn-as-cr-ae-is-wr-pg,
+        var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg))
+      );
+      gap: var(
+        --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
+        var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp))
+      );
+      border-color: var(
+        --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
+        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-dn-as-cr-ae-is-wr-br-se,
+        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-dn-as-cr-ae-is-wr-br-wh,
+        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-as-cr-ae-is-wr-br-rs,
+        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs))
+      );
+      .attriTitle {
+        // font-weight: 600;
+        // font-size: 14px;
+        // line-height: 20px;
+        // color: #101828;
+        // padding-bottom: 6px;
+        font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy);
+        color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr);
+        font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt);
+        font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se);
+        text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue);
+        letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg);
+        line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht);
+        font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic);
+        text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an);
+        padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg);
+      }
+      .attriDes {
+        // font-weight: 400;
+        // font-size: 14px;
+        // line-height: 20px;
+        font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy);
+        color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr);
+        font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt);
+        font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se);
+        text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue);
+        letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg);
+        line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht);
+        font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic);
+        text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
+        padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
+      }
+      .attribute {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: var(
+          --_ctm-mob-dn-as-cr-as-fs-pg,
+          var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg))
+        );
+        gap: var(
+          --_ctm-mob-dn-as-cr-as-fs-im-gp,
+          var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp))
+        );
+        .label {
+          display: block;
+          padding: var(
+            --_ctm-mob-dn-as-cr-as-ls-pg,
+            var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg))
+          );
+          font-family: var(
+            --_ctm-mob-dn-as-cr-as-ls-ft-fy,
+            var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy))
+          );
+          color: var(
+            --_ctm-mob-dn-as-cr-as-ls-cr,
+            var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-as-cr-as-ls-ft-wt,
+            var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt))
+          );
+          font-size: var(
+            --_ctm-mob-dn-as-cr-as-ls-ft-se,
+            var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-as-cr-as-ls-ue,
+            var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-as-cr-as-ls-lr-sg,
+            var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-as-cr-as-ls-le-ht,
+            var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht))
+          );
+          font-style: var(
+            --_ctm-mob-dn-as-cr-as-ls-ft-se-ic,
+            var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-as-cr-as-ls-tt-an,
+            var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an))
+          );
+          &.required::after {
+            content: " *";
+            color: var(--_error-500);
+          }
+        }
+        .attribute_field {
+          width: 100% !important;
+          input {
+            background-color: var(
+              --_ctm-mob-dn-as-cr-as-is-bd-cr,
+              var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
+            );
+            padding: var(
+              --_ctm-mob-dn-as-cr-as-is-pg,
+              var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
+            );
+            gap: var(
+              --_ctm-mob-dn-as-cr-as-is-im-gp,
+              var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp))
+            );
+            border-color: var(
+              --_ctm-mob-dn-as-cr-as-is-br-cr,
+              var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
+            );
+            border-style: var(
+              --_ctm-mob-dn-as-cr-as-is-br-se,
+              var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-as-cr-as-is-br-wh,
+              var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
+            );
+            border-radius: var(
+              --_ctm-mob-dn-as-cr-as-is-br-rs,
+              var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
+            );
+            &::placeholder {
+              font-family: var(
+                --_ctm-mob-dn-as-cr-as-is-ft-fy,
+                var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
+              );
+              color: var(
+                --_ctm-mob-dn-as-cr-as-is-cr,
+                var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
+              );
+              font-weight: var(
+                --_ctm-mob-dn-as-cr-as-is-ft-wt,
+                var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
+              );
+              font-size: var(
+                --_ctm-mob-dn-as-cr-as-is-ft-se,
+                var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
+              );
+              text-decoration: var(
+                --_ctm-mob-dn-as-cr-as-is-ue,
+                var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
+              );
+              letter-spacing: var(
+                --_ctm-mob-dn-as-cr-as-is-lr-sg,
+                var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
+              );
+              line-height: var(
+                --_ctm-mob-dn-as-cr-as-is-le-ht,
+                var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
+              );
+              font-style: var(
+                --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
+                var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
+              );
+              text-align: var(
+                --_ctm-mob-dn-as-cr-as-is-tt-an,
+                var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
+              );
+            }
+          }
+          .attribute_form_field {
+            font-family: var(
+              --_ctm-mob-dn-as-cr-as-is-ft-fy,
+              var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
+            );
+            color: var(
+              --_ctm-mob-dn-as-cr-as-is-cr,
+              var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-as-cr-as-is-ft-wt,
+              var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
+            );
+            font-size: var(
+              --_ctm-mob-dn-as-cr-as-is-ft-se,
+              var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-as-cr-as-is-ue,
+              var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-as-cr-as-is-lr-sg,
+              var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
+            );
+            line-height: var(
+              --_ctm-mob-dn-as-cr-as-is-le-ht,
+              var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
+            );
+            font-style: var(
+              --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
+              var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
+            );
+            text-align: var(
+              --_ctm-mob-dn-as-cr-as-is-tt-an,
+              var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
+            );
+            transition:
+              background-color 0.2s,
+              color 0.2s,
+              border-color 0.2s,
+              box-shadow 0.2s;
+            &:focus {
+              box-shadow:
+                0px 1px 2px rgba(16, 24, 40, 0.05),
+                0px 0px 0px 2px var(--primary-100);
+              border: 1px solid var(--primary-300);
+            }
+          }
+          .dropdown-input-section {
+            height: auto !important;
+            background-color: var(
+              --_ctm-mob-dn-as-cr-as-is-bd-cr,
+              var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
+            );
+            padding: var(
+              --_ctm-mob-dn-as-cr-as-is-pg,
+              var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
+            );
+            border-color: var(
+              --_ctm-mob-dn-as-cr-as-is-br-cr,
+              var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
+            );
+            border-style: var(
+              --_ctm-mob-dn-as-cr-as-is-br-se,
+              var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-as-cr-as-is-br-wh,
+              var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
+            );
+            border-radius: var(
+              --_ctm-mob-dn-as-cr-as-is-br-rs,
+              var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
+            );
+            font-family: var(
+              --_ctm-mob-dn-as-cr-as-dn-ft-fy,
+              var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy))
+            );
+            color: var(
+              --_ctm-mob-dn-as-cr-as-dn-cr,
+              var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-as-cr-as-dn-ft-wt,
+              var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt))
+            );
+            font-size: var(
+              --_ctm-mob-dn-as-cr-as-dn-ft-se,
+              var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-as-cr-as-dn-ue,
+              var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-as-cr-as-dn-lr-sg,
+              var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg))
+            );
+            line-height: var(
+              --_ctm-mob-dn-as-cr-as-dn-le-ht,
+              var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht))
+            );
+            font-style: var(
+              --_ctm-mob-dn-as-cr-as-dn-ft-se-ic,
+              var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic))
+            );
+            text-align: var(
+              --_ctm-mob-dn-as-cr-as-dn-tt-an,
+              var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
+            );
+            .selected-display {
+              .selected-item {
+                display: flex;
+                align-items: center;
+                .color-swatch {
+                  position: relative;
+                  // top: 1px;
+                }
+                .svg_icon svg {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+            }
+          }
+          &:focus {
+            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;
+            align-items: center;
+            align-self: stretch;
+            background-color: var(
+              --_ctm-mob-dn-as-cr-us-bd-cr,
+              var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr))
+            );
+            padding: var(
+              --_ctm-mob-dn-as-cr-us-pg,
+              var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg))
+            );
+            gap: var(
+              --_ctm-mob-dn-as-cr-us-im-gp,
+              var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp))
+            );
+            border-color: var(
+              --_ctm-mob-dn-as-cr-us-br-cr,
+              var(--_ctm-tab-dn-as-cr-us-br-cr, var(--_ctm-dn-as-cr-us-br-cr))
+            );
+            border-style: var(
+              --_ctm-mob-dn-as-cr-us-br-se,
+              var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-as-cr-us-br-wh,
+              var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh))
+            );
+            border-radius: var(
+              --_ctm-mob-dn-as-cr-us-br-rs,
+              var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs))
+            );
+            .file_upload_text {
+              text-align: center;
+              display: flex;
+              flex-direction: column;
+              gap: 6px;
+              p {
+                strong {
+                  font-family: var(
+                    --_ctm-mob-dn-as-cr-us-ft-fy,
+                    var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
+                  );
+                  // color: var(
+                  //   --_ctm-mob-dn-as-cr-us-cr,
+                  //   var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
+                  // );
+                  color: var(--_thm-cs-tt-ls-as);
+                  font-weight: var(
+                    --_ctm-mob-dn-as-cr-us-ft-wt,
+                    var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
+                  );
+                  font-size: var(
+                    --_ctm-mob-dn-as-cr-us-ft-se,
+                    var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se))
+                  );
+                  text-decoration: var(
+                    --_ctm-mob-dn-as-cr-us-ue,
+                    var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue))
+                  );
+                  letter-spacing: var(
+                    --_ctm-mob-dn-as-cr-us-lr-sg,
+                    var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg))
+                  );
+                  line-height: var(
+                    --_ctm-mob-dn-as-cr-us-le-ht,
+                    var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht))
+                  );
+                  font-style: var(
+                    --_ctm-mob-dn-as-cr-us-ft-se-ic,
+                    var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic))
+                  );
+                  text-align: var(
+                    --_ctm-mob-dn-as-cr-us-tt-an,
+                    var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an))
+                  );
+                }
+              }
+              span {
+                font-family: var(
+                  --_ctm-mob-dn-as-cr-us-ft-fy-dc,
+                  var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc))
+                );
+                color: var(
+                  --_ctm-mob-dn-as-cr-us-cr-dc,
+                  var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc))
+                );
+                font-weight: var(
+                  --_ctm-mob-dn-as-cr-us-ft-wt-dc,
+                  var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc))
+                );
+                font-size: var(
+                  --_ctm-mob-dn-as-cr-us-ft-se-dc,
+                  var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc))
+                );
+                text-decoration: var(
+                  --_ctm-mob-dn-as-cr-us-ue-dc,
+                  var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc))
+                );
+                letter-spacing: var(
+                  --_ctm-mob-dn-as-cr-us-lr-sg-dc,
+                  var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc))
+                );
+                line-height: var(
+                  --_ctm-mob-dn-as-cr-us-le-ht-dc,
+                  var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc))
+                );
+                font-style: var(
+                  --_ctm-mob-dn-as-cr-us-ft-se-ic-dc,
+                  var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc))
+                );
+                text-align: var(
+                  --_ctm-mob-dn-as-cr-us-tt-an-dc,
+                  var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc))
+                );
+              }
+            }
+            .uploadicon {
+              // padding: 10px;
+              // background: #f2f4f7;
+              display: inline-block;
+              // border-radius: 50%;
+              // color: var(--_gray-600);
+            }
+          }
+        }
+      }
+      .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;
+        opacity: 0.5;
+        cursor: auto;
+      }
+    }
+  }
+}
+// toggle styles
+.input_toggle_switch_container {
+  display: flex;
+  background-color: var(
+    --_ctm-mob-dn-as-cr-as-bs-bd-cr,
+    var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr))
+  );
+  border-color: var(
+    --_ctm-mob-dn-as-cr-as-bs-br-cr,
+    var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr))
+  );
+  border-style: var(
+    --_ctm-mob-dn-as-cr-as-bs-br-se,
+    var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se))
+  );
+  border-width: var(
+    --_ctm-mob-dn-as-cr-as-bs-br-wh,
+    var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh))
+  );
+  border-radius: var(
+    --_ctm-mob-dn-as-cr-as-bs-br-rs,
+    var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs))
+  );
+  padding: var(
+    --_ctm-mob-dn-as-cr-as-bs-pg,
+    var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg))
+  );
+  gap: var(
+    --_ctm-mob-dn-as-cr-as-bs-im-gp,
+    var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp))
+  );
+  .input_toggle_switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 28px;
+    input[type="checkbox"] {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      &:checked + .slider {
+        background-color: #4caf50;
+        &::before {
+          transform: translateX(22px);
+        }
+      }
+    }
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      transition: 0.4s;
+      border-radius: 28px;
+      &::before {
+        position: absolute;
+        content: "";
+        height: 22px;
+        width: 22px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        border-radius: 50%;
+        transition: 0.4s;
+      }
+    }
+  }
+  .input_toggle_switch_text {
+    gap: 4px;
+    display: flex;
+    flex-direction: column;
+    .checkbox_title {
+      font-family: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-fy,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy))
+      );
+      color: var(
+        --_ctm-mob-dn-as-cr-as-bs-cr,
+        var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr))
+      );
+      font-weight: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-wt,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt))
+      );
+      font-size: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-se,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se))
+      );
+      text-decoration: var(
+        --_ctm-mob-dn-as-cr-as-bs-ue,
+        var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue))
+      );
+      letter-spacing: var(
+        --_ctm-mob-dn-as-cr-as-bs-lr-sg,
+        var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg))
+      );
+      line-height: var(
+        --_ctm-mob-dn-as-cr-as-bs-le-ht,
+        var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht))
+      );
+      font-style: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-se-ic,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic))
+      );
+      text-align: var(
+        --_ctm-mob-dn-as-cr-as-bs-tt-an,
+        var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an))
+      );
+    }
+    .checkbox_des {
+      font-family: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc))
+      );
+      color: var(
+        --_ctm-mob-dn-as-cr-as-bs-cr-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc))
+      );
+      font-weight: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc))
+      );
+      font-size: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-se-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc))
+      );
+      text-decoration: var(
+        --_ctm-mob-dn-as-cr-as-bs-ue-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc))
+      );
+      letter-spacing: var(
+        --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc))
+      );
+      line-height: var(
+        --_ctm-mob-dn-as-cr-as-bs-le-ht-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc))
+      );
+      font-style: var(
+        --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc))
+      );
+      text-align: var(
+        --_ctm-mob-dn-as-cr-as-bs-tt-an-dc,
+        var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc))
+      );
+    }
+  }
+}
+// input radio styles
+.input_radio_a {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  height: 20px;
+  width: 20px;
+  input[type="radio"] {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    &:checked + .custom_radio::after {
+      display: block;
+    }
+  }
+  .custom_radio {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background-color: var(--_base-white);
+    border: 2px solid var(--_gray-600);
+    position: relative;
+    transition: border-color 0.3s ease;
+    &::after {
+      content: "";
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--_primary-400);
+      display: none;
+    }
+  }
+  input[type="radio"]:checked + .custom_radio {
+    border-color: var(--_primary-400);
+  }
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+// .custom-upload {
+//   // text-align: center;
+//   // border: 1px solid var(--_gray-200);
+//   // border-radius: 6px;
+//   // padding: 16px;
+//   border-radius: 6px;
+//   border: 1px solid var(--Gray-200, #eaecf0);
+//   background: var(--Base-White, #fff);
+//   display: flex;
+//   padding: 16px 24px;
+//   flex-direction: column;
+//   align-items: center;
+//   gap: 4px;
+//   align-self: stretch;
+//   &:hover {
+//     cursor: pointer;
+//     border: 1px solid var(--_primary-200);
+//     background: var(--_primary-25);
+//   }
+//   .uploadicon {
+//     padding: 10px;
+//     background: #f2f4f7;
+//     display: inline-block;
+//     border-radius: 50%;
+//     margin-bottom: 12px;
+//     color: var(--_gray-600);
+//   }
+//   p {
+//     padding-bottom: 4px;
+//     color: var(--_gray-600);
+//     font-size: 14px;
+//     strong {
+//       // color: var(--_primary-400);
+//       // font-weight: 600;
+//       color: var(--Primary-400, #243dc6);
+//       font-size: 14px;
+//       font-weight: 600;
+//       // line-height: 20px;
+//     }
+//   }
+//   span {
+//     color: var(--Gray-600, #475467);
+//     font-size: 14px;
+//     font-weight: 400;
+//     // line-height: 20px;
+//   }
+// }
+.input_color_picker_a {
+  width: 100% !important;
+  height: 48px;
+  border-radius: 4px;
+  border: 1px solid var(--Gray-300, #d0d5dd);
+  background: var(--Base-White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  outline: none;
+  transition: border-color 0.2s ease-in-out;
+  font-size: 14px;
+  cursor: pointer;
+}
+.attribute_currency_field {
+  position: relative;
+  input {
+    padding: 12px 12px 12px 32px !important;
+  }
+  svg {
+    position: absolute;
+    left: 8px;
+    top: 10px;
+    background: #fff;
+  }
+}