@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.59

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 (149) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/allocationDetails.scss +3 -0
  5. package/dist/allocations.scss +1603 -1603
  6. package/dist/amount-estimator.scss +1083 -1083
  7. package/dist/animation-control.scss +23 -23
  8. package/dist/badge.scss +388 -388
  9. package/dist/brand-basic-elements.scss +292 -292
  10. package/dist/brand.scss +93 -93
  11. package/dist/breadcrumbs.scss +802 -802
  12. package/dist/bulk-order-pad.scss +677 -677
  13. package/dist/bulk-variant-picker copy.scss +1121 -1121
  14. package/dist/bulk-variant-picker.scss +3294 -3294
  15. package/dist/bundle copy.scss +2805 -2805
  16. package/dist/bundle.scss +2383 -2383
  17. package/dist/bundleDetails copy.scss +1431 -1431
  18. package/dist/button copy.scss +271 -271
  19. package/dist/button.scss +292 -292
  20. package/dist/buy-for-tab-container.scss +90 -90
  21. package/dist/buy-for-tabs-container-item.scss +80 -80
  22. package/dist/buyForHeaders.scss +6718 -6718
  23. package/dist/cart-products-sidebar.scss +211 -211
  24. package/dist/cart-summary.scss +2728 -2728
  25. package/dist/cart-wrapper.scss +127 -127
  26. package/dist/cartGrouping.scss +89 -89
  27. package/dist/category-groups-element.scss +138 -138
  28. package/dist/category.scss +73 -73
  29. package/dist/categoryDetails.scss +61 -61
  30. package/dist/categoryWidget.scss +34 -34
  31. package/dist/checkbox-radio.scss +124 -124
  32. package/dist/code-temp.scss +58 -58
  33. package/dist/colorpicker_v2.scss +52 -52
  34. package/dist/common-element.scss +35 -35
  35. package/dist/confirm-modal.scss +351 -351
  36. package/dist/confirmationModal.scss +139 -139
  37. package/dist/container.scss +114 -114
  38. package/dist/countdown.scss +751 -751
  39. package/dist/coupon.scss +1254 -1254
  40. package/dist/custom-fonts.scss +100 -100
  41. package/dist/customization-tree.scss +160 -160
  42. package/dist/default-dropdown.scss +240 -240
  43. package/dist/editCartItem.scss +111 -111
  44. package/dist/embed-temp.scss +72 -72
  45. package/dist/embroider-preview-element.scss +94 -94
  46. package/dist/embroider-template-1-v2.scss +937 -937
  47. package/dist/embroider-template-1.scss +482 -482
  48. package/dist/embroidery.scss +213 -213
  49. package/dist/employee-bulk-order.scss +4057 -4057
  50. package/dist/emtpy-templates.scss +165 -165
  51. package/dist/faq.scss +564 -564
  52. package/dist/fb-dropdown.scss +125 -125
  53. package/dist/filter-results.scss +323 -323
  54. package/dist/flex-text-editor.scss +271 -271
  55. package/dist/form-preview.scss +290 -290
  56. package/dist/form-zindex-module.scss +24 -24
  57. package/dist/gallery-slider-temp.scss +1234 -1234
  58. package/dist/global-styles.scss +86 -86
  59. package/dist/grid.scss +119 -119
  60. package/dist/hotspot.scss +397 -397
  61. package/dist/icon-library.scss +74 -74
  62. package/dist/image-for-product.scss +21 -21
  63. package/dist/image-temp.scss +168 -168
  64. package/dist/item-stock.scss +87 -87
  65. package/dist/layouter-item.scss +89 -89
  66. package/dist/layouter-pro-item.scss +80 -80
  67. package/dist/layouter-pro.scss +88 -88
  68. package/dist/light-box-v2.scss +105 -105
  69. package/dist/lightbox.scss +78 -78
  70. package/dist/line.scss +166 -166
  71. package/dist/loader.scss +37 -37
  72. package/dist/map.scss +962 -962
  73. package/dist/marchandiserSets.scss +60 -60
  74. package/dist/mega-menu-container.scss +99 -99
  75. package/dist/mega-menu.scss +838 -838
  76. package/dist/menu-item.scss +19 -19
  77. package/dist/menu.scss +162 -162
  78. package/dist/modal.scss +2267 -2267
  79. package/dist/multi-select-dropdown.scss +282 -282
  80. package/dist/my-wishlist.scss +17 -17
  81. package/dist/option-bar.scss +845 -845
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/overflow-module.scss +63 -63
  84. package/dist/past-orders.scss +975 -975
  85. package/dist/payment-methods.scss +289 -289
  86. package/dist/pickup-locations.scss +1167 -1167
  87. package/dist/position-module.scss +95 -95
  88. package/dist/prefix-list.scss +86 -86
  89. package/dist/product-actions copy.scss +2765 -2765
  90. package/dist/product-actions.scss +2286 -2286
  91. package/dist/product-basic-elements.scss +770 -770
  92. package/dist/product-customizations.scss +149 -149
  93. package/dist/product-highlights copy.scss +217 -217
  94. package/dist/product-highlights.scss +311 -311
  95. package/dist/product-image copy.scss +787 -787
  96. package/dist/product-image-allocation.scss +3 -0
  97. package/dist/product-inventory.scss +1378 -1378
  98. package/dist/product-options.scss +1144 -1144
  99. package/dist/product-price.scss +2598 -2598
  100. package/dist/product-promotions.scss +2759 -2759
  101. package/dist/product.scss +97 -97
  102. package/dist/productDetails.scss +70 -70
  103. package/dist/quick-links.scss +552 -552
  104. package/dist/quick-order-pad.scss +237 -237
  105. package/dist/quota-details.scss +263 -263
  106. package/dist/quotes.scss +737 -737
  107. package/dist/repeater copy.scss +635 -635
  108. package/dist/repeater-grid-toggle.scss +58 -58
  109. package/dist/repeater-item.scss +90 -90
  110. package/dist/request-for-quotes.scss +746 -746
  111. package/dist/responsive-behaviour.scss +29 -29
  112. package/dist/rfqs.scss +736 -736
  113. package/dist/scroll.scss +222 -222
  114. package/dist/search-results-heading.scss +279 -279
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2467 -2467
  118. package/dist/simple-list.scss +259 -259
  119. package/dist/skeleton.scss +74 -74
  120. package/dist/social.scss +276 -276
  121. package/dist/sort.scss +89 -89
  122. package/dist/spotlight.scss +1663 -1663
  123. package/dist/stack.scss +129 -129
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +64 -64
  126. package/dist/store-locations.scss +1398 -1398
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +89 -89
  131. package/dist/tab-v2.scss +583 -583
  132. package/dist/table-common.scss +506 -506
  133. package/dist/table.scss +685 -685
  134. package/dist/tabs.scss +395 -395
  135. package/dist/text-temp-v2.scss +139 -139
  136. package/dist/text-temp.scss +109 -109
  137. package/dist/toaster.scss +350 -350
  138. package/dist/toggle-button.scss +32 -32
  139. package/dist/transform-properties-module.scss +20 -20
  140. package/dist/uom-selector.scss +1169 -1169
  141. package/dist/user-elements copy.scss +1437 -1437
  142. package/dist/variant-picker.scss +2384 -2384
  143. package/dist/video.scss +476 -476
  144. package/dist/volume-pricing copy 2.scss +1468 -1468
  145. package/dist/volume-pricing copy.scss +1077 -1077
  146. package/dist/volume-pricing.scss +1175 -1175
  147. package/dist/widget.scss +148 -148
  148. package/dist/wishlist-overlay.scss +48 -48
  149. package/package.json +1 -1
@@ -1,1169 +1,1169 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- [data-div-type="element"] {
6
- &[data-element-type="uomSelector"] {
7
- // width: var(--_lt-wh);
8
- // height: var(--_lt-ht);
9
- // margin: var(--_lt-mn);
10
- // padding: var(--_lt-pg);
11
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
- // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
- // height: ;
16
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
- // --_aspect-ratio: calc(
18
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
- // );
20
-
21
- width: var(
22
- --_sf-el-wh-st-mx,
23
- calc(
24
- 1% *
25
- var(
26
- --_ctm-mob-ele-nw-wh-vl,
27
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
28
- )
29
- )
30
- );
31
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
32
-
33
- // --_aspect-ratio: calc(
34
- // 1 *
35
- // (
36
- // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
37
- // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
38
- // )
39
- // );
40
- & > .wrapper {
41
- width: 100%;
42
- // height: 100%;
43
- }
44
- &[data-show-shadow="false"] {
45
- --_show-shadow: none;
46
- }
47
- &[data-overflow-items="Wrap"] {
48
- .horizontal {
49
- flex-wrap: wrap;
50
- }
51
- }
52
- &[data-overflow-items="Scroll"] {
53
- .horizontal {
54
- width: 100%;
55
- overflow-x: auto;
56
- .item {
57
- width: 100%;
58
- flex-shrink: 0;
59
- }
60
- }
61
- .vertical {
62
- overflow-y: auto;
63
- max-height: 30%;
64
- }
65
- }
66
- .text-element {
67
- color: #333;
68
- font-family: Lato;
69
- font-size: 12px;
70
- font-style: normal;
71
- font-weight: 400;
72
- line-height: 18px;
73
- margin-bottom: 6px;
74
- }
75
-
76
- .uom__selector {
77
- padding: 10px;
78
- width: 100%;
79
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
80
- .uom__container {
81
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
82
- // height: 100%;
83
- width: 100%;
84
- // border: 1px solid rgba(75, 69, 70, 1);
85
- // border-radius: 20px;
86
-
87
- .each__wraper {
88
- background-color: var(
89
- --_ctm-mob-dn-um-te-se-bd-cr,
90
- var(--_ctm-tab-dn-um-te-se-bd-cr, var(--_ctm-dn-um-te-se-bd-cr))
91
- );
92
-
93
- border-color: var(
94
- --_ctm-mob-dn-um-te-se-br-cr,
95
- var(--_ctm-tab-dn-um-te-se-br-cr, var(--_ctm-dn-um-te-se-br-cr))
96
- );
97
-
98
- border-style: var(
99
- --_ctm-mob-dn-um-te-se-br-se,
100
- var(--_ctm-tab-dn-um-te-se-br-se, var(--_ctm-dn-um-te-se-br-se))
101
- );
102
-
103
- border-width: var(
104
- --_ctm-mob-dn-um-te-se-br-wh,
105
- var(--_ctm-tab-dn-um-te-se-br-wh, var(--_ctm-dn-um-te-se-br-wh))
106
- );
107
-
108
- border-radius: var(
109
- --_ctm-mob-dn-um-te-se-br-rs,
110
- var(--_ctm-tab-dn-um-te-se-br-rs, var(--_ctm-dn-um-te-se-br-rs))
111
- );
112
-
113
- box-shadow: var(
114
- --_show-shadow,
115
- var(
116
- --_ctm-mob-dn-um-te-se-sw-ae,
117
- var(--_ctm-tab-dn-um-te-se-sw-ae, var(--_ctm-dn-um-te-se-sw-ae))
118
- )
119
- var(
120
- --_ctm-mob-dn-um-te-se-sw-br,
121
- var(--_ctm-tab-dn-um-te-se-sw-br, var(--_ctm-dn-um-te-se-sw-br))
122
- )
123
- var(
124
- --_ctm-mob-dn-um-te-se-sw-sd,
125
- var(--_ctm-tab-dn-um-te-se-sw-sd, var(--_ctm-dn-um-te-se-sw-sd))
126
- )
127
- var(
128
- --_ctm-mob-dn-um-te-se-sw-cr,
129
- var(--_ctm-tab-dn-um-te-se-sw-cr, var(--_ctm-dn-um-te-se-sw-cr))
130
- )
131
- );
132
- white-space: nowrap;
133
-
134
- padding: prepareMediaVariable(--_ctm-dn-um-te-se-pg);
135
-
136
- .each {
137
- color: var(
138
- --_ctm-mob-dn-um-te-se-cr,
139
- var(--_ctm-tab-dn-um-te-se-cr, var(--_ctm-dn-um-te-se-cr))
140
- );
141
- font-family: var(
142
- --_ctm-mob-dn-um-te-se-ft-fy,
143
- var(--_ctm-tab-dn-um-te-se-ft-fy, var(--_ctm-dn-um-te-se-ft-fy))
144
- );
145
- font-size: var(
146
- --_ctm-mob-dn-um-te-se-ft-se,
147
- var(--_ctm-tab-dn-um-te-se-ft-se, var(--_ctm-dn-um-te-se-ft-se))
148
- );
149
- font-weight: var(
150
- --_ctm-mob-dn-um-te-se-ft-wt,
151
- var(--_ctm-tab-dn-um-te-se-ft-wt, var(--_ctm-dn-um-te-se-ft-wt))
152
- );
153
- font-style: var(
154
- --_ctm-mob-dn-um-te-se-ft-se-ic,
155
- var(--_ctm-tab-dn-um-te-se-ft-se-ic, var(--_ctm-dn-um-te-se-ft-se-ic))
156
- );
157
- text-align: var(
158
- --_ctm-mob-dn-um-te-se-tt-an,
159
- var(--_ctm-tab-dn-um-te-se-tt-an, var(--_ctm-dn-um-te-se-tt-an))
160
- );
161
- letter-spacing: var(
162
- --_ctm-mob-dn-um-te-se-lr-sg,
163
- var(--_ctm-tab-dn-um-te-se-lr-sg, var(--_ctm-dn-um-te-se-lr-sg))
164
- );
165
- line-height: var(
166
- --_ctm-mob-dn-um-te-se-le-ht,
167
- var(--_ctm-tab-dn-um-te-se-le-ht, var(--_ctm-dn-um-te-se-le-ht))
168
- );
169
- text-decoration: var(
170
- --_ctm-mob-dn-um-te-se-ue,
171
- var(--_ctm-tab-dn-um-te-se-ue, var(--_ctm-dn-um-te-se-ue))
172
- );
173
- }
174
- }
175
- .price__wraper {
176
- background-color: var(
177
- --_ctm-mob-dn-pt-pe-bd-cr,
178
- var(--_ctm-tab-dn-pt-pe-bd-cr, var(--_ctm-dn-pt-pe-bd-cr))
179
- );
180
-
181
- border-color: var(
182
- --_ctm-mob-dn-pt-pe-br-cr,
183
- var(--_ctm-tab-dn-pt-pe-br-cr, var(--_ctm-dn-pt-pe-br-cr))
184
- );
185
-
186
- border-style: var(
187
- --_ctm-mob-dn-pt-pe-br-se,
188
- var(--_ctm-tab-dn-pt-pe-br-se, var(--_ctm-dn-pt-pe-br-se))
189
- );
190
-
191
- border-width: var(
192
- --_ctm-mob-dn-pt-pe-br-wh,
193
- var(--_ctm-tab-dn-pt-pe-br-wh, var(--_ctm-dn-pt-pe-br-wh))
194
- );
195
-
196
- border-radius: var(
197
- --_ctm-mob-dn-pt-pe-br-rs,
198
- var(--_ctm-tab-dn-pt-pe-br-rs, var(--_ctm-dn-pt-pe-br-rs))
199
- );
200
-
201
- box-shadow: var(
202
- --_show-shadow,
203
- var(
204
- --_ctm-mob-dn-pt-pe-sw-ae,
205
- var(--_ctm-tab-dn-pt-pe-sw-ae, var(--_ctm-dn-pt-pe-sw-ae))
206
- )
207
- var(
208
- --_ctm-mob-dn-pt-pe-sw-br,
209
- var(--_ctm-tab-dn-pt-pe-sw-br, var(--_ctm-dn-pt-pe-sw-br))
210
- )
211
- var(
212
- --_ctm-mob-dn-pt-pe-sw-sd,
213
- var(--_ctm-tab-dn-pt-pe-sw-sd, var(--_ctm-dn-pt-pe-sw-sd))
214
- )
215
- var(
216
- --_ctm-mob-dn-pt-pe-sw-cr,
217
- var(--_ctm-tab-dn-pt-pe-sw-cr, var(--_ctm-dn-pt-pe-sw-cr))
218
- )
219
- );
220
- white-space: nowrap;
221
-
222
- padding: prepareMediaVariable(--_ctm-dn-pt-pe-pg);
223
-
224
- .price {
225
- color: var(
226
- --_ctm-mob-dn-pt-pe-cr,
227
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
228
- );
229
- font-family: var(
230
- --_ctm-mob-dn-pt-pe-ft-fy,
231
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
232
- );
233
- font-size: var(
234
- --_ctm-mob-dn-pt-pe-ft-se,
235
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
236
- );
237
- font-weight: var(
238
- --_ctm-mob-dn-pt-pe-ft-wt,
239
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
240
- );
241
- font-style: var(
242
- --_ctm-mob-dn-pt-pe-ft-se-ic,
243
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
244
- );
245
- text-align: var(
246
- --_ctm-mob-dn-pt-pe-tt-an,
247
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
248
- );
249
- letter-spacing: var(
250
- --_ctm-mob-dn-pt-pe-lr-sg,
251
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
252
- );
253
- line-height: var(
254
- --_ctm-mob-dn-pt-pe-le-ht,
255
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
256
- );
257
- text-decoration: var(
258
- --_ctm-mob-dn-pt-pe-ue,
259
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
260
- );
261
- }
262
- }
263
-
264
- .actual__price__wraper {
265
- background-color: var(
266
- --_ctm-mob-dn-al-pe-bd-cr,
267
- var(--_ctm-tab-dn-al-pe-bd-cr, var(--_ctm-dn-al-pe-bd-cr))
268
- );
269
-
270
- border-color: var(
271
- --_ctm-mob-dn-al-pe-br-cr,
272
- var(--_ctm-tab-dn-al-pe-br-cr, var(--_ctm-dn-al-pe-br-cr))
273
- );
274
-
275
- border-style: var(
276
- --_ctm-mob-dn-al-pe-br-se,
277
- var(--_ctm-tab-dn-al-pe-br-se, var(--_ctm-dn-al-pe-br-se))
278
- );
279
-
280
- border-width: var(
281
- --_ctm-mob-dn-al-pe-br-wh,
282
- var(--_ctm-tab-dn-al-pe-br-wh, var(--_ctm-dn-al-pe-br-wh))
283
- );
284
-
285
- border-radius: var(
286
- --_ctm-mob-dn-al-pe-br-rs,
287
- var(--_ctm-tab-dn-al-pe-br-rs, var(--_ctm-dn-al-pe-br-rs))
288
- );
289
-
290
- box-shadow: var(
291
- --_show-shadow,
292
- var(
293
- --_ctm-mob-dn-al-pe-sw-ae,
294
- var(--_ctm-tab-dn-al-pe-sw-ae, var(--_ctm-dn-al-pe-sw-ae))
295
- )
296
- var(
297
- --_ctm-mob-dn-al-pe-sw-br,
298
- var(--_ctm-tab-dn-al-pe-sw-br, var(--_ctm-dn-al-pe-sw-br))
299
- )
300
- var(
301
- --_ctm-mob-dn-al-pe-sw-sd,
302
- var(--_ctm-tab-dn-al-pe-sw-sd, var(--_ctm-dn-al-pe-sw-sd))
303
- )
304
- var(
305
- --_ctm-mob-dn-al-pe-sw-cr,
306
- var(--_ctm-tab-dn-al-pe-sw-cr, var(--_ctm-dn-al-pe-sw-cr))
307
- )
308
- );
309
- white-space: nowrap;
310
-
311
- padding: prepareMediaVariable(--_ctm-dn-al-pe-pg);
312
-
313
- .actual__price {
314
- color: var(
315
- --_ctm-mob-dn-al-pe-cr,
316
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
317
- );
318
- font-family: var(
319
- --_ctm-mob-dn-al-pe-ft-fy,
320
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
321
- );
322
- font-size: var(
323
- --_ctm-mob-dn-al-pe-ft-se,
324
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
325
- );
326
- font-weight: var(
327
- --_ctm-mob-dn-al-pe-ft-wt,
328
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
329
- );
330
- font-style: var(
331
- --_ctm-mob-dn-al-pe-ft-se-ic,
332
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
333
- );
334
- text-align: var(
335
- --_ctm-mob-dn-al-pe-tt-an,
336
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
337
- );
338
- letter-spacing: var(
339
- --_ctm-mob-dn-al-pe-lr-sg,
340
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
341
- );
342
- line-height: var(
343
- --_ctm-mob-dn-al-pe-le-ht,
344
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
345
- );
346
- text-decoration: var(
347
- --_ctm-mob-dn-al-pe-ue,
348
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
349
- );
350
- }
351
- }
352
- .saving__amount__wraper {
353
- background-color: var(
354
- --_ctm-mob-dn-ss-bd-cr,
355
- var(--_ctm-tab-dn-ss-bd-cr, var(--_ctm-dn-ss-bd-cr))
356
- );
357
-
358
- border-color: var(
359
- --_ctm-mob-dn-ss-br-cr,
360
- var(--_ctm-tab-dn-ss-br-cr, var(--_ctm-dn-ss-br-cr))
361
- );
362
-
363
- border-style: var(
364
- --_ctm-mob-dn-ss-br-se,
365
- var(--_ctm-tab-dn-ss-br-se, var(--_ctm-dn-ss-br-se))
366
- );
367
-
368
- border-width: var(
369
- --_ctm-mob-dn-ss-br-wh,
370
- var(--_ctm-tab-dn-ss-br-wh, var(--_ctm-dn-ss-br-wh))
371
- );
372
-
373
- border-radius: var(
374
- --_ctm-mob-dn-ss-br-rs,
375
- var(--_ctm-tab-dn-ss-br-rs, var(--_ctm-dn-ss-br-rs))
376
- );
377
-
378
- box-shadow: var(
379
- --_show-shadow,
380
- var(--_ctm-mob-dn-ss-sw-ae, var(--_ctm-tab-dn-ss-sw-ae, var(--_ctm-dn-ss-sw-ae)))
381
- var(--_ctm-mob-dn-ss-sw-br, var(--_ctm-tab-dn-ss-sw-br, var(--_ctm-dn-ss-sw-br)))
382
- var(--_ctm-mob-dn-ss-sw-sd, var(--_ctm-tab-dn-ss-sw-sd, var(--_ctm-dn-ss-sw-sd)))
383
- var(--_ctm-mob-dn-ss-sw-cr, var(--_ctm-tab-dn-ss-sw-cr, var(--_ctm-dn-ss-sw-cr)))
384
- );
385
- white-space: nowrap;
386
-
387
- padding: prepareMediaVariable(--_ctm-dn-ss-pg);
388
-
389
- .saving__amount {
390
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
391
- font-family: var(
392
- --_ctm-mob-dn-ss-ft-fy,
393
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
394
- );
395
- font-size: var(
396
- --_ctm-mob-dn-ss-ft-se,
397
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
398
- );
399
- font-weight: var(
400
- --_ctm-mob-dn-ss-ft-wt,
401
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
402
- );
403
- font-style: var(
404
- --_ctm-mob-dn-ss-ft-se-ic,
405
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
406
- );
407
- text-align: var(
408
- --_ctm-mob-dn-ss-tt-an,
409
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
410
- );
411
- letter-spacing: var(
412
- --_ctm-mob-dn-ss-lr-sg,
413
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
414
- );
415
- line-height: var(
416
- --_ctm-mob-dn-ss-le-ht,
417
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
418
- );
419
- text-decoration: var(
420
- --_ctm-mob-dn-ss-ue,
421
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
422
- );
423
- }
424
- }
425
- .units__wraper {
426
- background-color: var(
427
- --_ctm-mob-dn-pe-pr-ut-bd-cr,
428
- var(--_ctm-tab-dn-pe-pr-ut-bd-cr, var(--_ctm-dn-pe-pr-ut-bd-cr))
429
- );
430
-
431
- border-color: var(
432
- --_ctm-mob-dn-pe-pr-ut-br-cr,
433
- var(--_ctm-tab-dn-pe-pr-ut-br-cr, var(--_ctm-dn-pe-pr-ut-br-cr))
434
- );
435
-
436
- border-style: var(
437
- --_ctm-mob-dn-pe-pr-ut-br-se,
438
- var(--_ctm-tab-dn-pe-pr-ut-br-se, var(--_ctm-dn-pe-pr-ut-br-se))
439
- );
440
-
441
- border-width: var(
442
- --_ctm-mob-dn-pe-pr-ut-br-wh,
443
- var(--_ctm-tab-dn-pe-pr-ut-br-wh, var(--_ctm-dn-pe-pr-ut-br-wh))
444
- );
445
-
446
- border-radius: var(
447
- --_ctm-mob-dn-pe-pr-ut-br-rs,
448
- var(--_ctm-tab-dn-pe-pr-ut-br-rs, var(--_ctm-dn-pe-pr-ut-br-rs))
449
- );
450
-
451
- box-shadow: var(
452
- --_show-shadow,
453
- var(
454
- --_ctm-mob-dn-pe-pr-ut-sw-ae,
455
- var(--_ctm-tab-dn-pe-pr-ut-sw-ae, var(--_ctm-dn-pe-pr-ut-sw-ae))
456
- )
457
- var(
458
- --_ctm-mob-dn-pe-pr-ut-sw-br,
459
- var(--_ctm-tab-dn-pe-pr-ut-sw-br, var(--_ctm-dn-pe-pr-ut-sw-br))
460
- )
461
- var(
462
- --_ctm-mob-dn-pe-pr-ut-sw-sd,
463
- var(--_ctm-tab-dn-pe-pr-ut-sw-sd, var(--_ctm-dn-pe-pr-ut-sw-sd))
464
- )
465
- var(
466
- --_ctm-mob-dn-pe-pr-ut-sw-cr,
467
- var(--_ctm-tab-dn-pe-pr-ut-sw-cr, var(--_ctm-dn-pe-pr-ut-sw-cr))
468
- )
469
- );
470
- white-space: nowrap;
471
-
472
- padding: prepareMediaVariable(--_ctm-dn-pe-pr-ut-pg);
473
-
474
- .units {
475
- color: var(
476
- --_ctm-mob-dn-pe-pr-ut-cr,
477
- var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
478
- );
479
- font-family: var(
480
- --_ctm-mob-dn-pe-pr-ut-ft-fy,
481
- var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
482
- );
483
- font-size: var(
484
- --_ctm-mob-dn-pe-pr-ut-ft-se,
485
- var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
486
- );
487
- font-weight: var(
488
- --_ctm-mob-dn-pe-pr-ut-ft-wt,
489
- var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
490
- );
491
- font-style: var(
492
- --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
493
- var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
494
- );
495
- text-align: var(
496
- --_ctm-mob-dn-pe-pr-ut-tt-an,
497
- var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
498
- );
499
- letter-spacing: var(
500
- --_ctm-mob-dn-pe-pr-ut-lr-sg,
501
- var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
502
- );
503
- line-height: var(
504
- --_ctm-mob-dn-pe-pr-ut-le-ht,
505
- var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
506
- );
507
- text-decoration: var(
508
- --_ctm-mob-dn-pe-pr-ut-ue,
509
- var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
510
- );
511
- }
512
- }
513
- .stack {
514
- display: flex;
515
- flex-direction: column;
516
- // height: 100%;
517
- .static {
518
- color: var(
519
- --_ctm-mob-dn-um-te-se-cr,
520
- var(--_ctm-tab-dn-um-te-se-cr, var(--_ctm-dn-um-te-se-cr))
521
- );
522
- font-family: var(
523
- --_ctm-mob-dn-um-te-se-ft-fy,
524
- var(--_ctm-tab-dn-um-te-se-ft-fy, var(--_ctm-dn-um-te-se-ft-fy))
525
- );
526
- font-size: var(
527
- --_ctm-mob-dn-um-te-se-ft-se,
528
- var(--_ctm-tab-dn-um-te-se-ft-se, var(--_ctm-dn-um-te-se-ft-se))
529
- );
530
- font-weight: var(
531
- --_ctm-mob-dn-um-te-se-ft-wt,
532
- var(--_ctm-tab-dn-um-te-se-ft-wt, var(--_ctm-dn-um-te-se-ft-wt))
533
- );
534
- font-style: var(
535
- --_ctm-mob-dn-um-te-se-ft-se-ic,
536
- var(--_ctm-tab-dn-um-te-se-ft-se-ic, var(--_ctm-dn-um-te-se-ft-se-ic))
537
- );
538
- text-align: var(
539
- --_ctm-mob-dn-um-te-se-tt-an,
540
- var(--_ctm-tab-dn-um-te-se-tt-an, var(--_ctm-dn-um-te-se-tt-an))
541
- );
542
- letter-spacing: var(
543
- --_ctm-mob-dn-um-te-se-lr-sg,
544
- var(--_ctm-tab-dn-um-te-se-lr-sg, var(--_ctm-dn-um-te-se-lr-sg))
545
- );
546
- line-height: var(
547
- --_ctm-mob-dn-um-te-se-le-ht,
548
- var(--_ctm-tab-dn-um-te-se-le-ht, var(--_ctm-dn-um-te-se-le-ht))
549
- );
550
- text-decoration: var(
551
- --_ctm-mob-dn-um-te-se-ue,
552
- var(--_ctm-tab-dn-um-te-se-ue, var(--_ctm-dn-um-te-se-ue))
553
- );
554
- }
555
-
556
- .item {
557
- display: flex;
558
- align-items: center;
559
- justify-content: center;
560
- flex-direction: column;
561
- white-space: nowrap;
562
- gap: 4px;
563
- flex-shrink: 0;
564
- padding: var(
565
- --_ctm-mob-dn-im-se-dt-se-vl-pg,
566
- var(--_ctm-tab-dn-im-se-dt-se-vl-pg, var(--_ctm-dn-im-se-dt-se-vl-pg))
567
- )
568
- var(
569
- --_ctm-mob-dn-im-se-dt-se-hl-pg,
570
- var(--_ctm-tab-dn-im-se-dt-se-hl-pg, var(--_ctm-dn-im-se-dt-se-hl-pg))
571
- );
572
- cursor: pointer;
573
- background-color: var(
574
- --_ctm-mob-dn-im-se-dt-se-bd-cr,
575
- var(--_ctm-tab-dn-im-se-dt-se-bd-cr, var(--_ctm-dn-im-se-dt-se-bd-cr))
576
- );
577
-
578
- border-color: var(
579
- --_show-border-im-se,
580
- var(
581
- --_ctm-mob-dn-im-se-dt-se-br-cr,
582
- var(--_ctm-tab-dn-im-se-dt-se-br-cr, var(--_ctm-dn-im-se-dt-se-br-cr))
583
- )
584
- );
585
- border-style: var(
586
- --_show-border-im-se,
587
- var(
588
- --_ctm-mob-dn-im-se-dt-se-br-se,
589
- var(--_ctm-tab-dn-im-se-dt-se-br-se, var(--_ctm-dn-im-se-dt-se-br-se))
590
- )
591
- );
592
- border-width: var(
593
- --_show-border-im-se,
594
- var(
595
- --_ctm-mob-dn-im-se-dt-se-br-wh,
596
- var(--_ctm-tab-dn-im-se-dt-se-br-wh, var(--_ctm-dn-im-se-dt-se-br-wh))
597
- )
598
- );
599
- border-radius: var(
600
- --_ctm-mob-dn-im-se-dt-se-br-rs,
601
- var(--_ctm-tab-dn-im-se-dt-se-br-rs, var(--_ctm-dn-im-se-dt-se-br-rs))
602
- );
603
-
604
- box-shadow: var(
605
- --_show-shadow-im-se,
606
- var(
607
- --_ctm-mob-dn-im-se-dt-se-sw-ae,
608
- var(--_ctm-tab-dn-im-se-dt-se-sw-ae, var(--_ctm-dn-im-se-dt-se-sw-ae))
609
- )
610
- var(
611
- --_ctm-mob-dn-im-se-dt-se-sw-br,
612
- var(--_ctm-tab-dn-im-se-dt-se-sw-br, var(--_ctm-dn-im-se-dt-se-sw-br))
613
- )
614
- var(
615
- --_ctm-mob-dn-im-se-dt-se-sw-sd,
616
- var(--_ctm-tab-dn-im-se-dt-se-sw-sd, var(--_ctm-dn-im-se-dt-se-sw-sd))
617
- )
618
- var(
619
- --_ctm-mob-dn-im-se-dt-se-sw-cr,
620
- var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
621
- )
622
- );
623
- }
624
- .active {
625
- display: flex;
626
-
627
- // align-items: var(
628
- // --_ctm-mob-dn-im-se-sd-se-ct-at,
629
- // var(--_ctm-tab-dn-im-se-sd-se-ct-at, var(--_ctm-dn-im-se-sd-se-ct-at))
630
- // );
631
-
632
- justify-content: center;
633
- flex-direction: column;
634
- gap: 4px;
635
-
636
- padding: var(
637
- --_ctm-mob-dn-im-se-sd-se-vl-pg,
638
- var(--_ctm-tab-dn-im-se-sd-se-vl-pg, var(--_ctm-dn-im-se-sd-se-vl-pg))
639
- )
640
- var(
641
- --_ctm-mob-dn-im-se-sd-se-hl-pg,
642
- var(--_ctm-tab-dn-im-se-sd-se-hl-pg, var(--_ctm-dn-im-se-sd-se-hl-pg))
643
- );
644
-
645
- cursor: pointer;
646
-
647
- background-color: var(
648
- --_ctm-mob-dn-im-se-sd-se-bd-cr,
649
- var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
650
- );
651
-
652
- border-color: var(
653
- --_show-border-im-se,
654
- var(
655
- --_ctm-mob-dn-im-se-sd-se-br-cr,
656
- var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
657
- )
658
- );
659
-
660
- border-style: var(
661
- --_show-border-im-se,
662
- var(
663
- --_ctm-mob-dn-im-se-sd-se-br-se,
664
- var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
665
- )
666
- );
667
-
668
- border-width: var(
669
- --_show-border-im-se,
670
- var(
671
- --_ctm-mob-dn-im-se-sd-se-br-wh,
672
- var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
673
- )
674
- );
675
-
676
- border-radius: var(
677
- --_ctm-mob-dn-im-se-sd-se-br-rs,
678
- var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
679
- );
680
-
681
- box-shadow: var(
682
- --_show-shadow-im-se,
683
- var(
684
- --_ctm-mob-dn-im-se-sd-se-sw-ae,
685
- var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
686
- )
687
- var(
688
- --_ctm-mob-dn-im-se-sd-se-sw-br,
689
- var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
690
- )
691
- var(
692
- --_ctm-mob-dn-im-se-sd-se-sw-sd,
693
- var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
694
- )
695
- var(
696
- --_ctm-mob-dn-im-se-sd-se-sw-cr,
697
- var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
698
- )
699
- );
700
-
701
- .off__price {
702
- font-size: 12px;
703
- display: flex;
704
- justify-content: space-around;
705
- gap: 10px;
706
- align-items: center;
707
- }
708
- }
709
-
710
- .off__price {
711
- font-size: 12px;
712
- display: flex;
713
- justify-content: space-around;
714
- gap: 10px;
715
- align-items: center;
716
- }
717
-
718
- .horizontal {
719
- display: flex;
720
- flex-direction: row;
721
- overflow-y: auto;
722
- flex-wrap: wrap;
723
-
724
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
725
- &:not([data-overflow-items="Wrap"]) {
726
- flex-wrap: nowrap;
727
- // overflow-x: auto;
728
- .item {
729
- min-width: 120px;
730
- }
731
- }
732
- &[data-overflow-items="None"] {
733
- overflow: hidden;
734
- }
735
- }
736
-
737
- .vertical {
738
- display: flex;
739
- flex-direction: column;
740
- overflow-y: auto;
741
- // flex-wrap: wrap;
742
- row-gap: var(--_ctm-lt-im-sg);
743
- .item {
744
- flex-direction: row;
745
- justify-content: space-between;
746
- align-items: center;
747
- .right__side__content {
748
- display: flex;
749
- gap: 20px;
750
- align-items: center;
751
- div {
752
- display: flex;
753
- gap: 1px;
754
-
755
- flex-direction: column;
756
- justify-content: right;
757
- align-items: center;
758
- }
759
- }
760
- }
761
- }
762
- .grid {
763
- display: grid;
764
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
765
- gap: var(--_ctm-lt-im-sg);
766
- padding: var(--_ctm-lt-im-pg);
767
- &[data-overflow-items="Scroll"] {
768
- height: 200px;
769
- overflow-y: auto;
770
- }
771
- .item {
772
- display: flex;
773
- align-items: center;
774
- justify-content: center;
775
- flex-direction: column;
776
- gap: 4px;
777
- padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
778
- cursor: pointer;
779
- background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
780
- border-color: var(
781
- --_show-border-im-se,
782
- var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
783
- );
784
- border-style: var(
785
- --_show-border-im-se,
786
- var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
787
- );
788
- border-width: var(
789
- --_show-border-im-se,
790
- var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
791
- );
792
- border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
793
- box-shadow: var(
794
- --_show-shadow-im-se,
795
- var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
796
- var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
797
- var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
798
- var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
799
- );
800
- cursor: pointer;
801
-
802
- .off__price {
803
- font-size: 12px;
804
- display: flex;
805
- justify-content: space-around;
806
- gap: 10px;
807
- align-items: center;
808
- }
809
- }
810
- .active {
811
- display: flex;
812
-
813
- align-items: var(
814
- --_ctm-mob-dn-im-se-sd-se-ct-at,
815
- var(--_ctm-tab-dn-im-se-sd-se-ct-at, var(--_ctm-dn-im-se-sd-se-ct-at))
816
- );
817
-
818
- justify-content: center;
819
- flex-direction: column;
820
- gap: 4px;
821
-
822
- padding: var(
823
- --_ctm-mob-dn-im-se-sd-se-vl-pg,
824
- var(--_ctm-tab-dn-im-se-sd-se-vl-pg, var(--_ctm-dn-im-se-sd-se-vl-pg))
825
- )
826
- var(
827
- --_ctm-mob-dn-im-se-sd-se-hl-pg,
828
- var(--_ctm-tab-dn-im-se-sd-se-hl-pg, var(--_ctm-dn-im-se-sd-se-hl-pg))
829
- );
830
-
831
- cursor: pointer;
832
-
833
- background-color: var(
834
- --_ctm-mob-dn-im-se-sd-se-bd-cr,
835
- var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
836
- );
837
-
838
- border-color: var(
839
- --_show-border-im-se,
840
- var(
841
- --_ctm-mob-dn-im-se-sd-se-br-cr,
842
- var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
843
- )
844
- );
845
-
846
- border-style: var(
847
- --_show-border-im-se,
848
- var(
849
- --_ctm-mob-dn-im-se-sd-se-br-se,
850
- var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
851
- )
852
- );
853
-
854
- border-width: var(
855
- --_show-border-im-se,
856
- var(
857
- --_ctm-mob-dn-im-se-sd-se-br-wh,
858
- var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
859
- )
860
- );
861
-
862
- border-radius: var(
863
- --_ctm-mob-dn-im-se-sd-se-br-rs,
864
- var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
865
- );
866
-
867
- box-shadow: var(
868
- --_show-shadow-im-se,
869
- var(
870
- --_ctm-mob-dn-im-se-sd-se-sw-ae,
871
- var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
872
- )
873
- var(
874
- --_ctm-mob-dn-im-se-sd-se-sw-br,
875
- var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
876
- )
877
- var(
878
- --_ctm-mob-dn-im-se-sd-se-sw-sd,
879
- var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
880
- )
881
- var(
882
- --_ctm-mob-dn-im-se-sd-se-sw-cr,
883
- var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
884
- )
885
- );
886
-
887
- .off__price {
888
- font-size: 12px;
889
- display: flex;
890
- justify-content: space-around;
891
- gap: 10px;
892
- align-items: center;
893
- }
894
- }
895
- }
896
- }
897
- .table-content {
898
- border-collapse: collapse;
899
- background-color: var(
900
- --_ctm-mob-dn-te-bd-cr,
901
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
902
- );
903
- border-color: var(
904
- --_show-border-im-se,
905
- var(--_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))),
906
- var(--_tst-dn-br-cr)
907
- );
908
- border-style: var(
909
- --_show-border-im-se,
910
- var(--_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))),
911
- var(--_tst-dn-br-se)
912
- );
913
- border-width: var(
914
- --_show-border-im-se,
915
- var(--_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))),
916
- var(--_tst-dn-br-wh)
917
- );
918
- border-radius: var(
919
- --_ctm-mob-dn-te-br-rs,
920
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)),
921
- var(--_tst-dn-br-rs)
922
- );
923
- box-shadow: var(
924
- --_show-shadow-im-se,
925
- var(
926
- --_ctm-mob-dn-te-sw-ae,
927
- var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae)))
928
- )
929
- var(
930
- --_ctm-mob-dn-te-sw-br,
931
- var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br)))
932
- )
933
- var(
934
- --_ctm-mob-dn-te-sw-sd,
935
- var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd)))
936
- )
937
- var(
938
- --_ctm-mob-dn-te-sw-cr,
939
- var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr)))
940
- )
941
- );
942
- &[data-header-divider="true"] {
943
- thead tr th {
944
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
945
- }
946
- }
947
- &[data-row-divider="true"] {
948
- tbody tr td {
949
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
950
- }
951
- }
952
- &[data-column-divider="true"] {
953
- tbody tr td,
954
- thead tr th {
955
- border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
956
- }
957
-
958
- tbody tr td:last-child,
959
- thead tr th:last-child {
960
- border-right: none;
961
- }
962
- }
963
- &[data-alternative-row-colors="true"] {
964
- tbody tr:nth-child(odd) {
965
- background-color: var(--_gray-300);
966
- width: 100%;
967
- }
968
- }
969
- thead {
970
- height: var(--_ctm-lt-hr-ht);
971
- tr {
972
- th {
973
- padding: var(--_ctm-lt-hr-cl-pg);
974
- text-align: var(--_ctm-lt-ct-at, var(--_ctm-dn-hr-tt-tt-an));
975
- border: 0;
976
- background-color: var(--_ctm-dn-te-hr-bd-cr);
977
- color: var(--_ctm-dn-hr-tt-cr);
978
- font-family: var(--_ctm-dn-hr-tt-ft-fy);
979
- font-size: var(--_ctm-dn-hr-tt-ft-se);
980
- font-weight: var(--_ctm-dn-hr-tt-ft-wt);
981
- font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
982
- letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
983
- line-height: var(--_ctm-dn-hr-tt-le-ht);
984
- text-decoration: var(--_ctm-dn-hr-tt-ue);
985
- }
986
- }
987
- }
988
- tbody {
989
- tr {
990
- padding: var(--_ctm-lt-rw-cl-pg);
991
- height: var(--_ctm-lt-rw-ht);
992
- background-color: var(--_ctm-dn-te-rw-bd-cr);
993
- text-align: var(--_ctm-lt-ct-at);
994
- th,
995
- td {
996
- border: 0;
997
- padding: inherit;
998
- color: var(--_ctm-dn-te-rw-cr);
999
- font-family: var(--_ctm-dn-te-rw-ft-fy);
1000
- font-size: var(--_ctm-dn-te-rw-ft-se);
1001
- font-weight: var(--_ctm-dn-te-rw-ft-wt);
1002
- font-style: var(--_ctm-dn-te-rw-ft-se-ic);
1003
- text-align: var(--_ctm-dn-te-rw-tt-an);
1004
- letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
1005
- line-height: var(--_ctm-dn-te-rw-le-ht);
1006
- text-decoration: var(--_ctm-dn-te-rw-ue);
1007
- }
1008
- }
1009
- }
1010
- }
1011
- .pagination_container {
1012
- display: flex;
1013
- justify-content: center;
1014
- align-items: center;
1015
- gap: 10px;
1016
- button {
1017
- font-size: 16px;
1018
- // padding: 10px 20px;
1019
- // background-color: #000;
1020
- color: #fff;
1021
- border: none;
1022
- cursor: pointer;
1023
- // border-radius: 10px;
1024
- }
1025
- span {
1026
- cursor: pointer;
1027
- color: var(
1028
- --_ctm-mob-dn-pn-dt-se-cr,
1029
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
1030
- );
1031
- font-family: var(
1032
- --_ctm-mob-dn-pn-dt-se-ft-fy,
1033
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
1034
- );
1035
- font-size: var(
1036
- --_ctm-mob-dn-pn-dt-se-ft-se,
1037
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1038
- );
1039
- font-weight: var(
1040
- --_ctm-mob-dn-pn-dt-se-ft-wt,
1041
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1042
- );
1043
- font-style: var(
1044
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1045
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1046
- );
1047
- text-align: var(
1048
- --_ctm-mob-dn-pn-dt-se-tt-an,
1049
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1050
- );
1051
- letter-spacing: var(
1052
- --_ctm-mob-dn-pn-dt-se-lr-sg,
1053
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1054
- );
1055
- line-height: var(
1056
- --_ctm-mob-dn-pn-dt-se-le-ht,
1057
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1058
- );
1059
- text-decoration: var(
1060
- --_ctm-mob-dn-pn-dt-se-ue,
1061
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1062
- );
1063
- }
1064
- .active {
1065
- span {
1066
- background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
1067
- padding: 2px;
1068
- }
1069
- }
1070
- }
1071
- .loadmore_conatiner {
1072
- display: flex;
1073
- justify-content: center;
1074
- align-items: center;
1075
- gap: 10px;
1076
- margin-top: 10px;
1077
- button {
1078
- padding: 10px;
1079
- cursor: pointer;
1080
- color: var(
1081
- --_ctm-mob-dn-sw-me-is-bn-cr,
1082
- var(--_ctm-tab-dn-sw-me-is-bn-cr, var(--_ctm-dn-sw-me-is-bn-cr))
1083
- );
1084
- font-family: var(
1085
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1086
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1087
- );
1088
- font-size: var(
1089
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
1090
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1091
- );
1092
- font-weight: var(
1093
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1094
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1095
- );
1096
- font-style: var(
1097
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1098
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1099
- );
1100
- text-align: var(
1101
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
1102
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1103
- );
1104
- letter-spacing: var(
1105
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1106
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1107
- );
1108
- line-height: var(
1109
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
1110
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1111
- );
1112
- text-decoration: var(
1113
- --_ctm-mob-dn-sw-me-is-bn-ue,
1114
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1115
- );
1116
- background-color: var(
1117
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1118
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1119
- );
1120
- border-color: var(
1121
- --_show-border-im-se,
1122
- var(
1123
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
1124
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1125
- )
1126
- );
1127
- border-style: var(
1128
- --_show-border-im-se,
1129
- var(
1130
- --_ctm-mob-dn-sw-me-is-bn-br-se,
1131
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1132
- )
1133
- );
1134
- border-width: var(
1135
- --_show-border-im-se,
1136
- var(
1137
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
1138
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1139
- )
1140
- );
1141
- border-radius: var(
1142
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
1143
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1144
- );
1145
- box-shadow: var(
1146
- --_show-shadow-im-se,
1147
- var(
1148
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1149
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1150
- )
1151
- var(
1152
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
1153
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1154
- )
1155
- var(
1156
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1157
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1158
- )
1159
- var(
1160
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1161
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1162
- )
1163
- );
1164
- }
1165
- }
1166
- }
1167
- }
1168
- }
1169
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ [data-div-type="element"] {
6
+ &[data-element-type="uomSelector"] {
7
+ // width: var(--_lt-wh);
8
+ // height: var(--_lt-ht);
9
+ // margin: var(--_lt-mn);
10
+ // padding: var(--_lt-pg);
11
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
+ // height: ;
16
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
+ // --_aspect-ratio: calc(
18
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
+ // );
20
+
21
+ width: var(
22
+ --_sf-el-wh-st-mx,
23
+ calc(
24
+ 1% *
25
+ var(
26
+ --_ctm-mob-ele-nw-wh-vl,
27
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
28
+ )
29
+ )
30
+ );
31
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
32
+
33
+ // --_aspect-ratio: calc(
34
+ // 1 *
35
+ // (
36
+ // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
37
+ // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
38
+ // )
39
+ // );
40
+ & > .wrapper {
41
+ width: 100%;
42
+ // height: 100%;
43
+ }
44
+ &[data-show-shadow="false"] {
45
+ --_show-shadow: none;
46
+ }
47
+ &[data-overflow-items="Wrap"] {
48
+ .horizontal {
49
+ flex-wrap: wrap;
50
+ }
51
+ }
52
+ &[data-overflow-items="Scroll"] {
53
+ .horizontal {
54
+ width: 100%;
55
+ overflow-x: auto;
56
+ .item {
57
+ width: 100%;
58
+ flex-shrink: 0;
59
+ }
60
+ }
61
+ .vertical {
62
+ overflow-y: auto;
63
+ max-height: 30%;
64
+ }
65
+ }
66
+ .text-element {
67
+ color: #333;
68
+ font-family: Lato;
69
+ font-size: 12px;
70
+ font-style: normal;
71
+ font-weight: 400;
72
+ line-height: 18px;
73
+ margin-bottom: 6px;
74
+ }
75
+
76
+ .uom__selector {
77
+ padding: 10px;
78
+ width: 100%;
79
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
80
+ .uom__container {
81
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
82
+ // height: 100%;
83
+ width: 100%;
84
+ // border: 1px solid rgba(75, 69, 70, 1);
85
+ // border-radius: 20px;
86
+
87
+ .each__wraper {
88
+ background-color: var(
89
+ --_ctm-mob-dn-um-te-se-bd-cr,
90
+ var(--_ctm-tab-dn-um-te-se-bd-cr, var(--_ctm-dn-um-te-se-bd-cr))
91
+ );
92
+
93
+ border-color: var(
94
+ --_ctm-mob-dn-um-te-se-br-cr,
95
+ var(--_ctm-tab-dn-um-te-se-br-cr, var(--_ctm-dn-um-te-se-br-cr))
96
+ );
97
+
98
+ border-style: var(
99
+ --_ctm-mob-dn-um-te-se-br-se,
100
+ var(--_ctm-tab-dn-um-te-se-br-se, var(--_ctm-dn-um-te-se-br-se))
101
+ );
102
+
103
+ border-width: var(
104
+ --_ctm-mob-dn-um-te-se-br-wh,
105
+ var(--_ctm-tab-dn-um-te-se-br-wh, var(--_ctm-dn-um-te-se-br-wh))
106
+ );
107
+
108
+ border-radius: var(
109
+ --_ctm-mob-dn-um-te-se-br-rs,
110
+ var(--_ctm-tab-dn-um-te-se-br-rs, var(--_ctm-dn-um-te-se-br-rs))
111
+ );
112
+
113
+ box-shadow: var(
114
+ --_show-shadow,
115
+ var(
116
+ --_ctm-mob-dn-um-te-se-sw-ae,
117
+ var(--_ctm-tab-dn-um-te-se-sw-ae, var(--_ctm-dn-um-te-se-sw-ae))
118
+ )
119
+ var(
120
+ --_ctm-mob-dn-um-te-se-sw-br,
121
+ var(--_ctm-tab-dn-um-te-se-sw-br, var(--_ctm-dn-um-te-se-sw-br))
122
+ )
123
+ var(
124
+ --_ctm-mob-dn-um-te-se-sw-sd,
125
+ var(--_ctm-tab-dn-um-te-se-sw-sd, var(--_ctm-dn-um-te-se-sw-sd))
126
+ )
127
+ var(
128
+ --_ctm-mob-dn-um-te-se-sw-cr,
129
+ var(--_ctm-tab-dn-um-te-se-sw-cr, var(--_ctm-dn-um-te-se-sw-cr))
130
+ )
131
+ );
132
+ white-space: nowrap;
133
+
134
+ padding: prepareMediaVariable(--_ctm-dn-um-te-se-pg);
135
+
136
+ .each {
137
+ color: var(
138
+ --_ctm-mob-dn-um-te-se-cr,
139
+ var(--_ctm-tab-dn-um-te-se-cr, var(--_ctm-dn-um-te-se-cr))
140
+ );
141
+ font-family: var(
142
+ --_ctm-mob-dn-um-te-se-ft-fy,
143
+ var(--_ctm-tab-dn-um-te-se-ft-fy, var(--_ctm-dn-um-te-se-ft-fy))
144
+ );
145
+ font-size: var(
146
+ --_ctm-mob-dn-um-te-se-ft-se,
147
+ var(--_ctm-tab-dn-um-te-se-ft-se, var(--_ctm-dn-um-te-se-ft-se))
148
+ );
149
+ font-weight: var(
150
+ --_ctm-mob-dn-um-te-se-ft-wt,
151
+ var(--_ctm-tab-dn-um-te-se-ft-wt, var(--_ctm-dn-um-te-se-ft-wt))
152
+ );
153
+ font-style: var(
154
+ --_ctm-mob-dn-um-te-se-ft-se-ic,
155
+ var(--_ctm-tab-dn-um-te-se-ft-se-ic, var(--_ctm-dn-um-te-se-ft-se-ic))
156
+ );
157
+ text-align: var(
158
+ --_ctm-mob-dn-um-te-se-tt-an,
159
+ var(--_ctm-tab-dn-um-te-se-tt-an, var(--_ctm-dn-um-te-se-tt-an))
160
+ );
161
+ letter-spacing: var(
162
+ --_ctm-mob-dn-um-te-se-lr-sg,
163
+ var(--_ctm-tab-dn-um-te-se-lr-sg, var(--_ctm-dn-um-te-se-lr-sg))
164
+ );
165
+ line-height: var(
166
+ --_ctm-mob-dn-um-te-se-le-ht,
167
+ var(--_ctm-tab-dn-um-te-se-le-ht, var(--_ctm-dn-um-te-se-le-ht))
168
+ );
169
+ text-decoration: var(
170
+ --_ctm-mob-dn-um-te-se-ue,
171
+ var(--_ctm-tab-dn-um-te-se-ue, var(--_ctm-dn-um-te-se-ue))
172
+ );
173
+ }
174
+ }
175
+ .price__wraper {
176
+ background-color: var(
177
+ --_ctm-mob-dn-pt-pe-bd-cr,
178
+ var(--_ctm-tab-dn-pt-pe-bd-cr, var(--_ctm-dn-pt-pe-bd-cr))
179
+ );
180
+
181
+ border-color: var(
182
+ --_ctm-mob-dn-pt-pe-br-cr,
183
+ var(--_ctm-tab-dn-pt-pe-br-cr, var(--_ctm-dn-pt-pe-br-cr))
184
+ );
185
+
186
+ border-style: var(
187
+ --_ctm-mob-dn-pt-pe-br-se,
188
+ var(--_ctm-tab-dn-pt-pe-br-se, var(--_ctm-dn-pt-pe-br-se))
189
+ );
190
+
191
+ border-width: var(
192
+ --_ctm-mob-dn-pt-pe-br-wh,
193
+ var(--_ctm-tab-dn-pt-pe-br-wh, var(--_ctm-dn-pt-pe-br-wh))
194
+ );
195
+
196
+ border-radius: var(
197
+ --_ctm-mob-dn-pt-pe-br-rs,
198
+ var(--_ctm-tab-dn-pt-pe-br-rs, var(--_ctm-dn-pt-pe-br-rs))
199
+ );
200
+
201
+ box-shadow: var(
202
+ --_show-shadow,
203
+ var(
204
+ --_ctm-mob-dn-pt-pe-sw-ae,
205
+ var(--_ctm-tab-dn-pt-pe-sw-ae, var(--_ctm-dn-pt-pe-sw-ae))
206
+ )
207
+ var(
208
+ --_ctm-mob-dn-pt-pe-sw-br,
209
+ var(--_ctm-tab-dn-pt-pe-sw-br, var(--_ctm-dn-pt-pe-sw-br))
210
+ )
211
+ var(
212
+ --_ctm-mob-dn-pt-pe-sw-sd,
213
+ var(--_ctm-tab-dn-pt-pe-sw-sd, var(--_ctm-dn-pt-pe-sw-sd))
214
+ )
215
+ var(
216
+ --_ctm-mob-dn-pt-pe-sw-cr,
217
+ var(--_ctm-tab-dn-pt-pe-sw-cr, var(--_ctm-dn-pt-pe-sw-cr))
218
+ )
219
+ );
220
+ white-space: nowrap;
221
+
222
+ padding: prepareMediaVariable(--_ctm-dn-pt-pe-pg);
223
+
224
+ .price {
225
+ color: var(
226
+ --_ctm-mob-dn-pt-pe-cr,
227
+ var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
228
+ );
229
+ font-family: var(
230
+ --_ctm-mob-dn-pt-pe-ft-fy,
231
+ var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
232
+ );
233
+ font-size: var(
234
+ --_ctm-mob-dn-pt-pe-ft-se,
235
+ var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
236
+ );
237
+ font-weight: var(
238
+ --_ctm-mob-dn-pt-pe-ft-wt,
239
+ var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
240
+ );
241
+ font-style: var(
242
+ --_ctm-mob-dn-pt-pe-ft-se-ic,
243
+ var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
244
+ );
245
+ text-align: var(
246
+ --_ctm-mob-dn-pt-pe-tt-an,
247
+ var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
248
+ );
249
+ letter-spacing: var(
250
+ --_ctm-mob-dn-pt-pe-lr-sg,
251
+ var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
252
+ );
253
+ line-height: var(
254
+ --_ctm-mob-dn-pt-pe-le-ht,
255
+ var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
256
+ );
257
+ text-decoration: var(
258
+ --_ctm-mob-dn-pt-pe-ue,
259
+ var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
260
+ );
261
+ }
262
+ }
263
+
264
+ .actual__price__wraper {
265
+ background-color: var(
266
+ --_ctm-mob-dn-al-pe-bd-cr,
267
+ var(--_ctm-tab-dn-al-pe-bd-cr, var(--_ctm-dn-al-pe-bd-cr))
268
+ );
269
+
270
+ border-color: var(
271
+ --_ctm-mob-dn-al-pe-br-cr,
272
+ var(--_ctm-tab-dn-al-pe-br-cr, var(--_ctm-dn-al-pe-br-cr))
273
+ );
274
+
275
+ border-style: var(
276
+ --_ctm-mob-dn-al-pe-br-se,
277
+ var(--_ctm-tab-dn-al-pe-br-se, var(--_ctm-dn-al-pe-br-se))
278
+ );
279
+
280
+ border-width: var(
281
+ --_ctm-mob-dn-al-pe-br-wh,
282
+ var(--_ctm-tab-dn-al-pe-br-wh, var(--_ctm-dn-al-pe-br-wh))
283
+ );
284
+
285
+ border-radius: var(
286
+ --_ctm-mob-dn-al-pe-br-rs,
287
+ var(--_ctm-tab-dn-al-pe-br-rs, var(--_ctm-dn-al-pe-br-rs))
288
+ );
289
+
290
+ box-shadow: var(
291
+ --_show-shadow,
292
+ var(
293
+ --_ctm-mob-dn-al-pe-sw-ae,
294
+ var(--_ctm-tab-dn-al-pe-sw-ae, var(--_ctm-dn-al-pe-sw-ae))
295
+ )
296
+ var(
297
+ --_ctm-mob-dn-al-pe-sw-br,
298
+ var(--_ctm-tab-dn-al-pe-sw-br, var(--_ctm-dn-al-pe-sw-br))
299
+ )
300
+ var(
301
+ --_ctm-mob-dn-al-pe-sw-sd,
302
+ var(--_ctm-tab-dn-al-pe-sw-sd, var(--_ctm-dn-al-pe-sw-sd))
303
+ )
304
+ var(
305
+ --_ctm-mob-dn-al-pe-sw-cr,
306
+ var(--_ctm-tab-dn-al-pe-sw-cr, var(--_ctm-dn-al-pe-sw-cr))
307
+ )
308
+ );
309
+ white-space: nowrap;
310
+
311
+ padding: prepareMediaVariable(--_ctm-dn-al-pe-pg);
312
+
313
+ .actual__price {
314
+ color: var(
315
+ --_ctm-mob-dn-al-pe-cr,
316
+ var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
317
+ );
318
+ font-family: var(
319
+ --_ctm-mob-dn-al-pe-ft-fy,
320
+ var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
321
+ );
322
+ font-size: var(
323
+ --_ctm-mob-dn-al-pe-ft-se,
324
+ var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
325
+ );
326
+ font-weight: var(
327
+ --_ctm-mob-dn-al-pe-ft-wt,
328
+ var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
329
+ );
330
+ font-style: var(
331
+ --_ctm-mob-dn-al-pe-ft-se-ic,
332
+ var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
333
+ );
334
+ text-align: var(
335
+ --_ctm-mob-dn-al-pe-tt-an,
336
+ var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
337
+ );
338
+ letter-spacing: var(
339
+ --_ctm-mob-dn-al-pe-lr-sg,
340
+ var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
341
+ );
342
+ line-height: var(
343
+ --_ctm-mob-dn-al-pe-le-ht,
344
+ var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
345
+ );
346
+ text-decoration: var(
347
+ --_ctm-mob-dn-al-pe-ue,
348
+ var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
349
+ );
350
+ }
351
+ }
352
+ .saving__amount__wraper {
353
+ background-color: var(
354
+ --_ctm-mob-dn-ss-bd-cr,
355
+ var(--_ctm-tab-dn-ss-bd-cr, var(--_ctm-dn-ss-bd-cr))
356
+ );
357
+
358
+ border-color: var(
359
+ --_ctm-mob-dn-ss-br-cr,
360
+ var(--_ctm-tab-dn-ss-br-cr, var(--_ctm-dn-ss-br-cr))
361
+ );
362
+
363
+ border-style: var(
364
+ --_ctm-mob-dn-ss-br-se,
365
+ var(--_ctm-tab-dn-ss-br-se, var(--_ctm-dn-ss-br-se))
366
+ );
367
+
368
+ border-width: var(
369
+ --_ctm-mob-dn-ss-br-wh,
370
+ var(--_ctm-tab-dn-ss-br-wh, var(--_ctm-dn-ss-br-wh))
371
+ );
372
+
373
+ border-radius: var(
374
+ --_ctm-mob-dn-ss-br-rs,
375
+ var(--_ctm-tab-dn-ss-br-rs, var(--_ctm-dn-ss-br-rs))
376
+ );
377
+
378
+ box-shadow: var(
379
+ --_show-shadow,
380
+ var(--_ctm-mob-dn-ss-sw-ae, var(--_ctm-tab-dn-ss-sw-ae, var(--_ctm-dn-ss-sw-ae)))
381
+ var(--_ctm-mob-dn-ss-sw-br, var(--_ctm-tab-dn-ss-sw-br, var(--_ctm-dn-ss-sw-br)))
382
+ var(--_ctm-mob-dn-ss-sw-sd, var(--_ctm-tab-dn-ss-sw-sd, var(--_ctm-dn-ss-sw-sd)))
383
+ var(--_ctm-mob-dn-ss-sw-cr, var(--_ctm-tab-dn-ss-sw-cr, var(--_ctm-dn-ss-sw-cr)))
384
+ );
385
+ white-space: nowrap;
386
+
387
+ padding: prepareMediaVariable(--_ctm-dn-ss-pg);
388
+
389
+ .saving__amount {
390
+ color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
391
+ font-family: var(
392
+ --_ctm-mob-dn-ss-ft-fy,
393
+ var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
394
+ );
395
+ font-size: var(
396
+ --_ctm-mob-dn-ss-ft-se,
397
+ var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
398
+ );
399
+ font-weight: var(
400
+ --_ctm-mob-dn-ss-ft-wt,
401
+ var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
402
+ );
403
+ font-style: var(
404
+ --_ctm-mob-dn-ss-ft-se-ic,
405
+ var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
406
+ );
407
+ text-align: var(
408
+ --_ctm-mob-dn-ss-tt-an,
409
+ var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
410
+ );
411
+ letter-spacing: var(
412
+ --_ctm-mob-dn-ss-lr-sg,
413
+ var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
414
+ );
415
+ line-height: var(
416
+ --_ctm-mob-dn-ss-le-ht,
417
+ var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
418
+ );
419
+ text-decoration: var(
420
+ --_ctm-mob-dn-ss-ue,
421
+ var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
422
+ );
423
+ }
424
+ }
425
+ .units__wraper {
426
+ background-color: var(
427
+ --_ctm-mob-dn-pe-pr-ut-bd-cr,
428
+ var(--_ctm-tab-dn-pe-pr-ut-bd-cr, var(--_ctm-dn-pe-pr-ut-bd-cr))
429
+ );
430
+
431
+ border-color: var(
432
+ --_ctm-mob-dn-pe-pr-ut-br-cr,
433
+ var(--_ctm-tab-dn-pe-pr-ut-br-cr, var(--_ctm-dn-pe-pr-ut-br-cr))
434
+ );
435
+
436
+ border-style: var(
437
+ --_ctm-mob-dn-pe-pr-ut-br-se,
438
+ var(--_ctm-tab-dn-pe-pr-ut-br-se, var(--_ctm-dn-pe-pr-ut-br-se))
439
+ );
440
+
441
+ border-width: var(
442
+ --_ctm-mob-dn-pe-pr-ut-br-wh,
443
+ var(--_ctm-tab-dn-pe-pr-ut-br-wh, var(--_ctm-dn-pe-pr-ut-br-wh))
444
+ );
445
+
446
+ border-radius: var(
447
+ --_ctm-mob-dn-pe-pr-ut-br-rs,
448
+ var(--_ctm-tab-dn-pe-pr-ut-br-rs, var(--_ctm-dn-pe-pr-ut-br-rs))
449
+ );
450
+
451
+ box-shadow: var(
452
+ --_show-shadow,
453
+ var(
454
+ --_ctm-mob-dn-pe-pr-ut-sw-ae,
455
+ var(--_ctm-tab-dn-pe-pr-ut-sw-ae, var(--_ctm-dn-pe-pr-ut-sw-ae))
456
+ )
457
+ var(
458
+ --_ctm-mob-dn-pe-pr-ut-sw-br,
459
+ var(--_ctm-tab-dn-pe-pr-ut-sw-br, var(--_ctm-dn-pe-pr-ut-sw-br))
460
+ )
461
+ var(
462
+ --_ctm-mob-dn-pe-pr-ut-sw-sd,
463
+ var(--_ctm-tab-dn-pe-pr-ut-sw-sd, var(--_ctm-dn-pe-pr-ut-sw-sd))
464
+ )
465
+ var(
466
+ --_ctm-mob-dn-pe-pr-ut-sw-cr,
467
+ var(--_ctm-tab-dn-pe-pr-ut-sw-cr, var(--_ctm-dn-pe-pr-ut-sw-cr))
468
+ )
469
+ );
470
+ white-space: nowrap;
471
+
472
+ padding: prepareMediaVariable(--_ctm-dn-pe-pr-ut-pg);
473
+
474
+ .units {
475
+ color: var(
476
+ --_ctm-mob-dn-pe-pr-ut-cr,
477
+ var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
478
+ );
479
+ font-family: var(
480
+ --_ctm-mob-dn-pe-pr-ut-ft-fy,
481
+ var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
482
+ );
483
+ font-size: var(
484
+ --_ctm-mob-dn-pe-pr-ut-ft-se,
485
+ var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
486
+ );
487
+ font-weight: var(
488
+ --_ctm-mob-dn-pe-pr-ut-ft-wt,
489
+ var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
490
+ );
491
+ font-style: var(
492
+ --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
493
+ var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
494
+ );
495
+ text-align: var(
496
+ --_ctm-mob-dn-pe-pr-ut-tt-an,
497
+ var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
498
+ );
499
+ letter-spacing: var(
500
+ --_ctm-mob-dn-pe-pr-ut-lr-sg,
501
+ var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
502
+ );
503
+ line-height: var(
504
+ --_ctm-mob-dn-pe-pr-ut-le-ht,
505
+ var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
506
+ );
507
+ text-decoration: var(
508
+ --_ctm-mob-dn-pe-pr-ut-ue,
509
+ var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
510
+ );
511
+ }
512
+ }
513
+ .stack {
514
+ display: flex;
515
+ flex-direction: column;
516
+ // height: 100%;
517
+ .static {
518
+ color: var(
519
+ --_ctm-mob-dn-um-te-se-cr,
520
+ var(--_ctm-tab-dn-um-te-se-cr, var(--_ctm-dn-um-te-se-cr))
521
+ );
522
+ font-family: var(
523
+ --_ctm-mob-dn-um-te-se-ft-fy,
524
+ var(--_ctm-tab-dn-um-te-se-ft-fy, var(--_ctm-dn-um-te-se-ft-fy))
525
+ );
526
+ font-size: var(
527
+ --_ctm-mob-dn-um-te-se-ft-se,
528
+ var(--_ctm-tab-dn-um-te-se-ft-se, var(--_ctm-dn-um-te-se-ft-se))
529
+ );
530
+ font-weight: var(
531
+ --_ctm-mob-dn-um-te-se-ft-wt,
532
+ var(--_ctm-tab-dn-um-te-se-ft-wt, var(--_ctm-dn-um-te-se-ft-wt))
533
+ );
534
+ font-style: var(
535
+ --_ctm-mob-dn-um-te-se-ft-se-ic,
536
+ var(--_ctm-tab-dn-um-te-se-ft-se-ic, var(--_ctm-dn-um-te-se-ft-se-ic))
537
+ );
538
+ text-align: var(
539
+ --_ctm-mob-dn-um-te-se-tt-an,
540
+ var(--_ctm-tab-dn-um-te-se-tt-an, var(--_ctm-dn-um-te-se-tt-an))
541
+ );
542
+ letter-spacing: var(
543
+ --_ctm-mob-dn-um-te-se-lr-sg,
544
+ var(--_ctm-tab-dn-um-te-se-lr-sg, var(--_ctm-dn-um-te-se-lr-sg))
545
+ );
546
+ line-height: var(
547
+ --_ctm-mob-dn-um-te-se-le-ht,
548
+ var(--_ctm-tab-dn-um-te-se-le-ht, var(--_ctm-dn-um-te-se-le-ht))
549
+ );
550
+ text-decoration: var(
551
+ --_ctm-mob-dn-um-te-se-ue,
552
+ var(--_ctm-tab-dn-um-te-se-ue, var(--_ctm-dn-um-te-se-ue))
553
+ );
554
+ }
555
+
556
+ .item {
557
+ display: flex;
558
+ align-items: center;
559
+ justify-content: center;
560
+ flex-direction: column;
561
+ white-space: nowrap;
562
+ gap: 4px;
563
+ flex-shrink: 0;
564
+ padding: var(
565
+ --_ctm-mob-dn-im-se-dt-se-vl-pg,
566
+ var(--_ctm-tab-dn-im-se-dt-se-vl-pg, var(--_ctm-dn-im-se-dt-se-vl-pg))
567
+ )
568
+ var(
569
+ --_ctm-mob-dn-im-se-dt-se-hl-pg,
570
+ var(--_ctm-tab-dn-im-se-dt-se-hl-pg, var(--_ctm-dn-im-se-dt-se-hl-pg))
571
+ );
572
+ cursor: pointer;
573
+ background-color: var(
574
+ --_ctm-mob-dn-im-se-dt-se-bd-cr,
575
+ var(--_ctm-tab-dn-im-se-dt-se-bd-cr, var(--_ctm-dn-im-se-dt-se-bd-cr))
576
+ );
577
+
578
+ border-color: var(
579
+ --_show-border-im-se,
580
+ var(
581
+ --_ctm-mob-dn-im-se-dt-se-br-cr,
582
+ var(--_ctm-tab-dn-im-se-dt-se-br-cr, var(--_ctm-dn-im-se-dt-se-br-cr))
583
+ )
584
+ );
585
+ border-style: var(
586
+ --_show-border-im-se,
587
+ var(
588
+ --_ctm-mob-dn-im-se-dt-se-br-se,
589
+ var(--_ctm-tab-dn-im-se-dt-se-br-se, var(--_ctm-dn-im-se-dt-se-br-se))
590
+ )
591
+ );
592
+ border-width: var(
593
+ --_show-border-im-se,
594
+ var(
595
+ --_ctm-mob-dn-im-se-dt-se-br-wh,
596
+ var(--_ctm-tab-dn-im-se-dt-se-br-wh, var(--_ctm-dn-im-se-dt-se-br-wh))
597
+ )
598
+ );
599
+ border-radius: var(
600
+ --_ctm-mob-dn-im-se-dt-se-br-rs,
601
+ var(--_ctm-tab-dn-im-se-dt-se-br-rs, var(--_ctm-dn-im-se-dt-se-br-rs))
602
+ );
603
+
604
+ box-shadow: var(
605
+ --_show-shadow-im-se,
606
+ var(
607
+ --_ctm-mob-dn-im-se-dt-se-sw-ae,
608
+ var(--_ctm-tab-dn-im-se-dt-se-sw-ae, var(--_ctm-dn-im-se-dt-se-sw-ae))
609
+ )
610
+ var(
611
+ --_ctm-mob-dn-im-se-dt-se-sw-br,
612
+ var(--_ctm-tab-dn-im-se-dt-se-sw-br, var(--_ctm-dn-im-se-dt-se-sw-br))
613
+ )
614
+ var(
615
+ --_ctm-mob-dn-im-se-dt-se-sw-sd,
616
+ var(--_ctm-tab-dn-im-se-dt-se-sw-sd, var(--_ctm-dn-im-se-dt-se-sw-sd))
617
+ )
618
+ var(
619
+ --_ctm-mob-dn-im-se-dt-se-sw-cr,
620
+ var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
621
+ )
622
+ );
623
+ }
624
+ .active {
625
+ display: flex;
626
+
627
+ // align-items: var(
628
+ // --_ctm-mob-dn-im-se-sd-se-ct-at,
629
+ // var(--_ctm-tab-dn-im-se-sd-se-ct-at, var(--_ctm-dn-im-se-sd-se-ct-at))
630
+ // );
631
+
632
+ justify-content: center;
633
+ flex-direction: column;
634
+ gap: 4px;
635
+
636
+ padding: var(
637
+ --_ctm-mob-dn-im-se-sd-se-vl-pg,
638
+ var(--_ctm-tab-dn-im-se-sd-se-vl-pg, var(--_ctm-dn-im-se-sd-se-vl-pg))
639
+ )
640
+ var(
641
+ --_ctm-mob-dn-im-se-sd-se-hl-pg,
642
+ var(--_ctm-tab-dn-im-se-sd-se-hl-pg, var(--_ctm-dn-im-se-sd-se-hl-pg))
643
+ );
644
+
645
+ cursor: pointer;
646
+
647
+ background-color: var(
648
+ --_ctm-mob-dn-im-se-sd-se-bd-cr,
649
+ var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
650
+ );
651
+
652
+ border-color: var(
653
+ --_show-border-im-se,
654
+ var(
655
+ --_ctm-mob-dn-im-se-sd-se-br-cr,
656
+ var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
657
+ )
658
+ );
659
+
660
+ border-style: var(
661
+ --_show-border-im-se,
662
+ var(
663
+ --_ctm-mob-dn-im-se-sd-se-br-se,
664
+ var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
665
+ )
666
+ );
667
+
668
+ border-width: var(
669
+ --_show-border-im-se,
670
+ var(
671
+ --_ctm-mob-dn-im-se-sd-se-br-wh,
672
+ var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
673
+ )
674
+ );
675
+
676
+ border-radius: var(
677
+ --_ctm-mob-dn-im-se-sd-se-br-rs,
678
+ var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
679
+ );
680
+
681
+ box-shadow: var(
682
+ --_show-shadow-im-se,
683
+ var(
684
+ --_ctm-mob-dn-im-se-sd-se-sw-ae,
685
+ var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
686
+ )
687
+ var(
688
+ --_ctm-mob-dn-im-se-sd-se-sw-br,
689
+ var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
690
+ )
691
+ var(
692
+ --_ctm-mob-dn-im-se-sd-se-sw-sd,
693
+ var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
694
+ )
695
+ var(
696
+ --_ctm-mob-dn-im-se-sd-se-sw-cr,
697
+ var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
698
+ )
699
+ );
700
+
701
+ .off__price {
702
+ font-size: 12px;
703
+ display: flex;
704
+ justify-content: space-around;
705
+ gap: 10px;
706
+ align-items: center;
707
+ }
708
+ }
709
+
710
+ .off__price {
711
+ font-size: 12px;
712
+ display: flex;
713
+ justify-content: space-around;
714
+ gap: 10px;
715
+ align-items: center;
716
+ }
717
+
718
+ .horizontal {
719
+ display: flex;
720
+ flex-direction: row;
721
+ overflow-y: auto;
722
+ flex-wrap: wrap;
723
+
724
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
725
+ &:not([data-overflow-items="Wrap"]) {
726
+ flex-wrap: nowrap;
727
+ // overflow-x: auto;
728
+ .item {
729
+ min-width: 120px;
730
+ }
731
+ }
732
+ &[data-overflow-items="None"] {
733
+ overflow: hidden;
734
+ }
735
+ }
736
+
737
+ .vertical {
738
+ display: flex;
739
+ flex-direction: column;
740
+ overflow-y: auto;
741
+ // flex-wrap: wrap;
742
+ row-gap: var(--_ctm-lt-im-sg);
743
+ .item {
744
+ flex-direction: row;
745
+ justify-content: space-between;
746
+ align-items: center;
747
+ .right__side__content {
748
+ display: flex;
749
+ gap: 20px;
750
+ align-items: center;
751
+ div {
752
+ display: flex;
753
+ gap: 1px;
754
+
755
+ flex-direction: column;
756
+ justify-content: right;
757
+ align-items: center;
758
+ }
759
+ }
760
+ }
761
+ }
762
+ .grid {
763
+ display: grid;
764
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
765
+ gap: var(--_ctm-lt-im-sg);
766
+ padding: var(--_ctm-lt-im-pg);
767
+ &[data-overflow-items="Scroll"] {
768
+ height: 200px;
769
+ overflow-y: auto;
770
+ }
771
+ .item {
772
+ display: flex;
773
+ align-items: center;
774
+ justify-content: center;
775
+ flex-direction: column;
776
+ gap: 4px;
777
+ padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
778
+ cursor: pointer;
779
+ background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
780
+ border-color: var(
781
+ --_show-border-im-se,
782
+ var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
783
+ );
784
+ border-style: var(
785
+ --_show-border-im-se,
786
+ var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
787
+ );
788
+ border-width: var(
789
+ --_show-border-im-se,
790
+ var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
791
+ );
792
+ border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
793
+ box-shadow: var(
794
+ --_show-shadow-im-se,
795
+ var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
796
+ var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
797
+ var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
798
+ var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
799
+ );
800
+ cursor: pointer;
801
+
802
+ .off__price {
803
+ font-size: 12px;
804
+ display: flex;
805
+ justify-content: space-around;
806
+ gap: 10px;
807
+ align-items: center;
808
+ }
809
+ }
810
+ .active {
811
+ display: flex;
812
+
813
+ align-items: var(
814
+ --_ctm-mob-dn-im-se-sd-se-ct-at,
815
+ var(--_ctm-tab-dn-im-se-sd-se-ct-at, var(--_ctm-dn-im-se-sd-se-ct-at))
816
+ );
817
+
818
+ justify-content: center;
819
+ flex-direction: column;
820
+ gap: 4px;
821
+
822
+ padding: var(
823
+ --_ctm-mob-dn-im-se-sd-se-vl-pg,
824
+ var(--_ctm-tab-dn-im-se-sd-se-vl-pg, var(--_ctm-dn-im-se-sd-se-vl-pg))
825
+ )
826
+ var(
827
+ --_ctm-mob-dn-im-se-sd-se-hl-pg,
828
+ var(--_ctm-tab-dn-im-se-sd-se-hl-pg, var(--_ctm-dn-im-se-sd-se-hl-pg))
829
+ );
830
+
831
+ cursor: pointer;
832
+
833
+ background-color: var(
834
+ --_ctm-mob-dn-im-se-sd-se-bd-cr,
835
+ var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
836
+ );
837
+
838
+ border-color: var(
839
+ --_show-border-im-se,
840
+ var(
841
+ --_ctm-mob-dn-im-se-sd-se-br-cr,
842
+ var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
843
+ )
844
+ );
845
+
846
+ border-style: var(
847
+ --_show-border-im-se,
848
+ var(
849
+ --_ctm-mob-dn-im-se-sd-se-br-se,
850
+ var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
851
+ )
852
+ );
853
+
854
+ border-width: var(
855
+ --_show-border-im-se,
856
+ var(
857
+ --_ctm-mob-dn-im-se-sd-se-br-wh,
858
+ var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
859
+ )
860
+ );
861
+
862
+ border-radius: var(
863
+ --_ctm-mob-dn-im-se-sd-se-br-rs,
864
+ var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
865
+ );
866
+
867
+ box-shadow: var(
868
+ --_show-shadow-im-se,
869
+ var(
870
+ --_ctm-mob-dn-im-se-sd-se-sw-ae,
871
+ var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
872
+ )
873
+ var(
874
+ --_ctm-mob-dn-im-se-sd-se-sw-br,
875
+ var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
876
+ )
877
+ var(
878
+ --_ctm-mob-dn-im-se-sd-se-sw-sd,
879
+ var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
880
+ )
881
+ var(
882
+ --_ctm-mob-dn-im-se-sd-se-sw-cr,
883
+ var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
884
+ )
885
+ );
886
+
887
+ .off__price {
888
+ font-size: 12px;
889
+ display: flex;
890
+ justify-content: space-around;
891
+ gap: 10px;
892
+ align-items: center;
893
+ }
894
+ }
895
+ }
896
+ }
897
+ .table-content {
898
+ border-collapse: collapse;
899
+ background-color: var(
900
+ --_ctm-mob-dn-te-bd-cr,
901
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
902
+ );
903
+ border-color: var(
904
+ --_show-border-im-se,
905
+ var(--_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))),
906
+ var(--_tst-dn-br-cr)
907
+ );
908
+ border-style: var(
909
+ --_show-border-im-se,
910
+ var(--_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))),
911
+ var(--_tst-dn-br-se)
912
+ );
913
+ border-width: var(
914
+ --_show-border-im-se,
915
+ var(--_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))),
916
+ var(--_tst-dn-br-wh)
917
+ );
918
+ border-radius: var(
919
+ --_ctm-mob-dn-te-br-rs,
920
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)),
921
+ var(--_tst-dn-br-rs)
922
+ );
923
+ box-shadow: var(
924
+ --_show-shadow-im-se,
925
+ var(
926
+ --_ctm-mob-dn-te-sw-ae,
927
+ var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae)))
928
+ )
929
+ var(
930
+ --_ctm-mob-dn-te-sw-br,
931
+ var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br)))
932
+ )
933
+ var(
934
+ --_ctm-mob-dn-te-sw-sd,
935
+ var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd)))
936
+ )
937
+ var(
938
+ --_ctm-mob-dn-te-sw-cr,
939
+ var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr)))
940
+ )
941
+ );
942
+ &[data-header-divider="true"] {
943
+ thead tr th {
944
+ border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
945
+ }
946
+ }
947
+ &[data-row-divider="true"] {
948
+ tbody tr td {
949
+ border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
950
+ }
951
+ }
952
+ &[data-column-divider="true"] {
953
+ tbody tr td,
954
+ thead tr th {
955
+ border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
956
+ }
957
+
958
+ tbody tr td:last-child,
959
+ thead tr th:last-child {
960
+ border-right: none;
961
+ }
962
+ }
963
+ &[data-alternative-row-colors="true"] {
964
+ tbody tr:nth-child(odd) {
965
+ background-color: var(--_gray-300);
966
+ width: 100%;
967
+ }
968
+ }
969
+ thead {
970
+ height: var(--_ctm-lt-hr-ht);
971
+ tr {
972
+ th {
973
+ padding: var(--_ctm-lt-hr-cl-pg);
974
+ text-align: var(--_ctm-lt-ct-at, var(--_ctm-dn-hr-tt-tt-an));
975
+ border: 0;
976
+ background-color: var(--_ctm-dn-te-hr-bd-cr);
977
+ color: var(--_ctm-dn-hr-tt-cr);
978
+ font-family: var(--_ctm-dn-hr-tt-ft-fy);
979
+ font-size: var(--_ctm-dn-hr-tt-ft-se);
980
+ font-weight: var(--_ctm-dn-hr-tt-ft-wt);
981
+ font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
982
+ letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
983
+ line-height: var(--_ctm-dn-hr-tt-le-ht);
984
+ text-decoration: var(--_ctm-dn-hr-tt-ue);
985
+ }
986
+ }
987
+ }
988
+ tbody {
989
+ tr {
990
+ padding: var(--_ctm-lt-rw-cl-pg);
991
+ height: var(--_ctm-lt-rw-ht);
992
+ background-color: var(--_ctm-dn-te-rw-bd-cr);
993
+ text-align: var(--_ctm-lt-ct-at);
994
+ th,
995
+ td {
996
+ border: 0;
997
+ padding: inherit;
998
+ color: var(--_ctm-dn-te-rw-cr);
999
+ font-family: var(--_ctm-dn-te-rw-ft-fy);
1000
+ font-size: var(--_ctm-dn-te-rw-ft-se);
1001
+ font-weight: var(--_ctm-dn-te-rw-ft-wt);
1002
+ font-style: var(--_ctm-dn-te-rw-ft-se-ic);
1003
+ text-align: var(--_ctm-dn-te-rw-tt-an);
1004
+ letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
1005
+ line-height: var(--_ctm-dn-te-rw-le-ht);
1006
+ text-decoration: var(--_ctm-dn-te-rw-ue);
1007
+ }
1008
+ }
1009
+ }
1010
+ }
1011
+ .pagination_container {
1012
+ display: flex;
1013
+ justify-content: center;
1014
+ align-items: center;
1015
+ gap: 10px;
1016
+ button {
1017
+ font-size: 16px;
1018
+ // padding: 10px 20px;
1019
+ // background-color: #000;
1020
+ color: #fff;
1021
+ border: none;
1022
+ cursor: pointer;
1023
+ // border-radius: 10px;
1024
+ }
1025
+ span {
1026
+ cursor: pointer;
1027
+ color: var(
1028
+ --_ctm-mob-dn-pn-dt-se-cr,
1029
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
1030
+ );
1031
+ font-family: var(
1032
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
1033
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
1034
+ );
1035
+ font-size: var(
1036
+ --_ctm-mob-dn-pn-dt-se-ft-se,
1037
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1038
+ );
1039
+ font-weight: var(
1040
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
1041
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1042
+ );
1043
+ font-style: var(
1044
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1045
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1046
+ );
1047
+ text-align: var(
1048
+ --_ctm-mob-dn-pn-dt-se-tt-an,
1049
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1050
+ );
1051
+ letter-spacing: var(
1052
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
1053
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1054
+ );
1055
+ line-height: var(
1056
+ --_ctm-mob-dn-pn-dt-se-le-ht,
1057
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1058
+ );
1059
+ text-decoration: var(
1060
+ --_ctm-mob-dn-pn-dt-se-ue,
1061
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1062
+ );
1063
+ }
1064
+ .active {
1065
+ span {
1066
+ background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
1067
+ padding: 2px;
1068
+ }
1069
+ }
1070
+ }
1071
+ .loadmore_conatiner {
1072
+ display: flex;
1073
+ justify-content: center;
1074
+ align-items: center;
1075
+ gap: 10px;
1076
+ margin-top: 10px;
1077
+ button {
1078
+ padding: 10px;
1079
+ cursor: pointer;
1080
+ color: var(
1081
+ --_ctm-mob-dn-sw-me-is-bn-cr,
1082
+ var(--_ctm-tab-dn-sw-me-is-bn-cr, var(--_ctm-dn-sw-me-is-bn-cr))
1083
+ );
1084
+ font-family: var(
1085
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1086
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1087
+ );
1088
+ font-size: var(
1089
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
1090
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1091
+ );
1092
+ font-weight: var(
1093
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1094
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1095
+ );
1096
+ font-style: var(
1097
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1098
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1099
+ );
1100
+ text-align: var(
1101
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
1102
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1103
+ );
1104
+ letter-spacing: var(
1105
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1106
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1107
+ );
1108
+ line-height: var(
1109
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
1110
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1111
+ );
1112
+ text-decoration: var(
1113
+ --_ctm-mob-dn-sw-me-is-bn-ue,
1114
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1115
+ );
1116
+ background-color: var(
1117
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1118
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1119
+ );
1120
+ border-color: var(
1121
+ --_show-border-im-se,
1122
+ var(
1123
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
1124
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1125
+ )
1126
+ );
1127
+ border-style: var(
1128
+ --_show-border-im-se,
1129
+ var(
1130
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
1131
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1132
+ )
1133
+ );
1134
+ border-width: var(
1135
+ --_show-border-im-se,
1136
+ var(
1137
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
1138
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1139
+ )
1140
+ );
1141
+ border-radius: var(
1142
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
1143
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1144
+ );
1145
+ box-shadow: var(
1146
+ --_show-shadow-im-se,
1147
+ var(
1148
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1149
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1150
+ )
1151
+ var(
1152
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
1153
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1154
+ )
1155
+ var(
1156
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1157
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1158
+ )
1159
+ var(
1160
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1161
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1162
+ )
1163
+ );
1164
+ }
1165
+ }
1166
+ }
1167
+ }
1168
+ }
1169
+ }