@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.28

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 (58) hide show
  1. package/dist/add-order.scss +14 -12
  2. package/dist/add-products-tab.scss +179 -105
  3. package/dist/allocationDetails.scss +2 -2
  4. package/dist/allocations.scss +6 -6
  5. package/dist/builder.js +1 -1
  6. package/dist/bundleDetails copy.scss +1431 -0
  7. package/dist/bundleDetails.scss +3054 -107
  8. package/dist/button.scss +5 -2
  9. package/dist/buy-for-tab-container.scss +2 -1
  10. package/dist/buy-for-tab.scss +32 -21
  11. package/dist/buyForHeaders.scss +4544 -4082
  12. package/dist/buyForPopup.scss +154 -117
  13. package/dist/cart-details.scss +1 -1
  14. package/dist/cart-products-sidebar.scss +18 -56
  15. package/dist/cart-summary.scss +14 -12
  16. package/dist/coupon.scss +85 -0
  17. package/dist/dropdownTemplate.scss +5 -0
  18. package/dist/embroider-template-1-v2.scss +597 -0
  19. package/dist/embroider-template-1.scss +14 -5
  20. package/dist/embroidery.scss +25 -2
  21. package/dist/filters.scss +50 -15
  22. package/dist/functions.js +1 -1
  23. package/dist/functions.scss +4 -0
  24. package/dist/icons.js +1 -1
  25. package/dist/index.js +1 -1
  26. package/dist/language-selector.scss +4 -1
  27. package/dist/layouter-pro.scss +8 -0
  28. package/dist/modal.scss +37 -27
  29. package/dist/multi-select-dropdown.scss +53 -41
  30. package/dist/option-bar.scss +2 -2
  31. package/dist/order-status.scss +18 -14
  32. package/dist/product-actions.scss +27 -27
  33. package/dist/product-image.scss +14 -4
  34. package/dist/product-options.scss +1 -0
  35. package/dist/product-price.scss +1910 -1437
  36. package/dist/product-sizechart.scss +5 -2
  37. package/dist/profile.scss +3 -3
  38. package/dist/quantity-selector.scss +6 -6
  39. package/dist/quick-order-pad.scss +106 -42
  40. package/dist/repeater-embla-controls.scss +4 -2
  41. package/dist/repeater.scss +3 -3
  42. package/dist/search.scss +11 -1
  43. package/dist/section.scss +9 -9
  44. package/dist/shipping-payments.scss +5 -0
  45. package/dist/stack.scss +13 -3
  46. package/dist/types/builder/elements/common.d.ts +1 -0
  47. package/dist/types/builder/elements/light-box-v2/index.d.ts +1 -0
  48. package/dist/types/builder/elements/section/index.d.ts +1 -0
  49. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +481 -0
  50. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +5 -0
  51. package/dist/types/builder/tools/element-edit/filters.d.ts +5 -0
  52. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  53. package/dist/types/builder/tools/element-edit/productPrice.d.ts +2 -1
  54. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +2 -0
  55. package/dist/types/website/constants/data-connector-souces.d.ts +13 -6
  56. package/dist/variant-picker.scss +1 -0
  57. package/dist/website.js +1 -1
  58. package/package.json +1 -1
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss";
3
4
 
4
5
  [data-div-type="element"] {
5
6
  &[data-element-type="productPrice"] {
@@ -45,1542 +46,2011 @@
45
46
  font-weight: 700;
46
47
  line-height: 150%; /* 48px */
47
48
  }
48
- .price-text-element {
49
- // background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
50
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
+
50
+ .product-price {
51
51
  display: flex;
52
52
  flex-direction: column;
53
- gap: 10px;
54
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
55
- // row-gap: var(--_sf-gp);
56
53
  width: 100%;
57
- // height: 100%;
58
- border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
59
- border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
60
- border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
61
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
54
+
55
+ border-color: var(
56
+ --_show-border,
57
+ var(--_ctm-mob-dn-pt-pe-br-cr, var(--_ctm-tab-dn-pt-pe-br-cr, var(--_ctm-dn-pt-pe-br-cr)))
58
+ );
59
+ border-style: var(
60
+ --_show-border,
61
+ var(--_ctm-mob-dn-pt-pe-br-se, var(--_ctm-tab-dn-pt-pe-br-se, var(--_ctm-dn-pt-pe-br-se)))
62
+ );
63
+ border-width: var(
64
+ --_show-border,
65
+ var(--_ctm-mob-dn-pt-pe-br-wh, var(--_ctm-tab-dn-pt-pe-br-wh, var(--_ctm-dn-pt-pe-br-wh)))
66
+ );
67
+ border-radius: var(
68
+ --_ctm-mob-dn-pt-pe-br-rs,
69
+ var(--_ctm-tab-dn-pt-pe-br-rs, var(--_ctm-dn-pt-pe-br-rs))
70
+ );
71
+
62
72
  box-shadow: var(
63
73
  --_show-shadow,
64
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
65
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
66
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
67
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
74
+ var(--_ctm-mob-dn-pt-pe-sw-ae, var(--_ctm-tab-dn-pt-pe-sw-ae, var(--_ctm-dn-pt-pe-sw-ae)))
75
+ var(--_ctm-mob-dn-pt-pe-sw-br, var(--_ctm-tab-dn-pt-pe-sw-br, var(--_ctm-dn-pt-pe-sw-br)))
76
+ var(--_ctm-mob-dn-pt-pe-sw-sd, var(--_ctm-tab-dn-pt-pe-sw-sd, var(--_ctm-dn-pt-pe-sw-sd)))
77
+ var(--_ctm-mob-dn-pt-pe-sw-cr, var(--_ctm-tab-dn-pt-pe-sw-cr, var(--_ctm-dn-pt-pe-sw-cr)))
68
78
  );
79
+ background-color: var(
80
+ --_ctm-mob-dn-pt-pe-bd-cr,
81
+ var(--_ctm-tab-dn-pt-pe-bd-cr, var(--_ctm-dn-pt-pe-bd-cr))
82
+ );
83
+ .price-loader {
84
+ display: inline-block;
85
+ width: var(--_ctm-lt-wh, 100px);
86
+ height: 16px;
87
+ border-radius: 4px;
88
+ background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
89
+ background-size: 200% 100%;
90
+ animation: shimmer 1.4s infinite;
91
+ }
69
92
 
70
- // transform: scale(var(--_ctm-dn-zm-ie));
71
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
93
+ @keyframes shimmer {
94
+ 0% {
95
+ background-position: -200% 0;
96
+ }
97
+ 100% {
98
+ background-position: 200% 0;
99
+ }
100
+ }
72
101
 
73
- &[data-flip-x="true"] {
74
- transform: scaleX(-1);
102
+ .price-span {
103
+ color: var(--_ctm-mob-dn-pt-pe-cr, var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr)));
104
+ font-family:
105
+ var(
106
+ --_ctm-mob-dn-pt-pe-ft-fy,
107
+ var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
108
+ ),
109
+ sans-serif;
110
+ font-size: var(
111
+ --_ctm-mob-dn-pt-pe-ft-se,
112
+ var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
113
+ );
114
+ font-weight: var(
115
+ --_ctm-mob-dn-pt-pe-ft-wt,
116
+ var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
117
+ );
118
+ font-style: var(
119
+ --_ctm-mob-dn-pt-pe-ft-se-ic,
120
+ var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
121
+ );
122
+ text-align: var(
123
+ --_ctm-mob-dn-pt-pe-tt-an,
124
+ var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
125
+ );
126
+ letter-spacing: var(
127
+ --_ctm-mob-dn-pt-pe-lr-sg,
128
+ var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
129
+ );
130
+ line-height: var(
131
+ --_ctm-mob-dn-pt-pe-le-ht,
132
+ var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
133
+ );
134
+ text-decoration: var(
135
+ --_ctm-mob-dn-pt-pe-ue,
136
+ var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
137
+ );
75
138
  }
76
- &[data-flip-y="true"] {
77
- transform: scaleY(-1);
139
+ .strike-price {
140
+ color: var(
141
+ --_ctm-mob-dn-pt-pe-cr-dc,
142
+ var(--_ctm-tab-dn-pt-pe-cr-dc, var(--_ctm-dn-pt-pe-cr-dc))
143
+ );
144
+ font-family: var(
145
+ --_sf-hr-ff,
146
+ var(
147
+ --_ctm-mob-dn-pt-pe-ft-fy-dc,
148
+ var(--_ctm-tab-dn-pt-pe-ft-fy-dc, var(--_ctm-dn-pt-pe-ft-fy-dc))
149
+ )
150
+ );
151
+ font-size: var(
152
+ --_ctm-mob-dn-pt-pe-ft-se-dc,
153
+ var(--_ctm-tab-dn-pt-pe-ft-se-dc, var(--_ctm-dn-pt-pe-ft-se-dc))
154
+ );
155
+ font-weight: var(
156
+ --_ctm-mob-dn-pt-pe-ft-wt-dc,
157
+ var(--_ctm-tab-dn-pt-pe-ft-wt-dc, var(--_ctm-dn-pt-pe-ft-wt-dc))
158
+ );
159
+ font-style: var(
160
+ --_ctm-mob-dn-pt-pe-ft-se-ic-dc,
161
+ var(--_ctm-tab-dn-pt-pe-ft-se-ic-dc, var(--_ctm-dn-pt-pe-ft-se-ic-dc))
162
+ );
163
+ text-align: var(
164
+ --_ctm-mob-dn-pt-pe-tt-an-dc,
165
+ var(--_ctm-tab-dn-pt-pe-tt-an-dc, var(--_ctm-dn-pt-pe-tt-an-dc))
166
+ );
167
+ letter-spacing: var(
168
+ --_ctm-mob-dn-pt-pe-lr-sg-dc,
169
+ var(--_ctm-tab-dn-pt-pe-lr-sg-dc, var(--_ctm-dn-pt-pe-lr-sg-dc))
170
+ );
171
+ line-height: var(
172
+ --_ctm-mob-dn-pt-pe-le-ht-dc,
173
+ var(--_ctm-tab-dn-pt-pe-le-ht-dc, var(--_ctm-dn-pt-pe-le-ht-dc))
174
+ );
175
+ text-decoration: var(
176
+ --_ctm-mob-dn-pt-pe-ue-dc,
177
+ var(--_ctm-tab-dn-pt-pe-ue-dc, var(--_ctm-dn-pt-pe-ue-dc))
178
+ );
78
179
  }
79
- .meta_text_element {
80
- color: green;
81
- //styleName: Text md/Medium;
82
- font-family: Lato;
83
- font-size: 16px;
84
- font-weight: 500;
85
- line-height: 24px;
86
- text-align: left;
87
- text-underline-position: from-font;
88
- text-decoration-skip-ink: none;
180
+
181
+ .code-span {
182
+ background-color: var(
183
+ --_ctm-mob-dn-cy-ce-se-bd-cr,
184
+ var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
185
+ );
186
+ color: var(
187
+ --_ctm-mob-dn-cy-ce-se-cr,
188
+ var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
189
+ );
190
+ font-family:
191
+ var(
192
+ --_ctm-mob-dn-cy-ce-se-ft-fy,
193
+ var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
194
+ ),
195
+ sans-serif;
196
+ font-size: var(
197
+ --_ctm-mob-dn-cy-ce-se-ft-se,
198
+ var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
199
+ );
200
+ font-weight: var(
201
+ --_ctm-mob-dn-cy-ce-se-ft-wt,
202
+ var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
203
+ );
204
+ font-style: var(
205
+ --_ctm-mob-dn-cy-ce-se-ft-se-ic,
206
+ var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
207
+ );
208
+ text-align: var(
209
+ --_ctm-mob-dn-cy-ce-se-tt-an,
210
+ var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
211
+ );
212
+ letter-spacing: var(
213
+ --_ctm-mob-dn-cy-ce-se-lr-sg,
214
+ var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
215
+ );
216
+ line-height: var(
217
+ --_ctm-mob-dn-cy-ce-se-le-ht,
218
+ var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
219
+ );
220
+ text-decoration: var(
221
+ --_ctm-mob-dn-cy-ce-se-ue,
222
+ var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
223
+ );
224
+
225
+ border-color: var(
226
+ --_show-border,
227
+ var(
228
+ --_ctm-mob-dn-cy-ce-se-br-cr,
229
+ var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
230
+ )
231
+ );
232
+ border-style: var(
233
+ --_show-border,
234
+ var(
235
+ --_ctm-mob-dn-cy-ce-se-br-se,
236
+ var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
237
+ )
238
+ );
239
+ border-width: var(
240
+ --_show-border,
241
+ var(
242
+ --_ctm-mob-dn-cy-ce-se-br-wh,
243
+ var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
244
+ )
245
+ );
246
+ border-radius: var(
247
+ --_ctm-mob-dn-cy-ce-se-br-rs,
248
+ var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
249
+ );
250
+
251
+ box-shadow: var(
252
+ --_show-shadow,
253
+ var(
254
+ --_ctm-mob-dn-cy-ce-se-sw-ae,
255
+ var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
256
+ )
257
+ var(
258
+ --_ctm-mob-dn-cy-ce-se-sw-br,
259
+ var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
260
+ )
261
+ var(
262
+ --_ctm-mob-dn-cy-ce-se-sw-sd,
263
+ var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
264
+ )
265
+ var(
266
+ --_ctm-mob-dn-cy-ce-se-sw-cr,
267
+ var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
268
+ )
269
+ );
89
270
  }
90
- .price-container {
271
+
272
+ .uom-span {
273
+ background-color: var(
274
+ --_ctm-mob-dn-um-se-bd-cr,
275
+ var(--_ctm-tab-dn-um-se-bd-cr, var(--_ctm-dn-um-se-bd-cr))
276
+ );
277
+ color: var(--_ctm-mob-dn-um-se-cr, var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr)));
278
+ font-family:
279
+ var(
280
+ --_ctm-mob-dn-um-se-ft-fy,
281
+ var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
282
+ ),
283
+ sans-serif;
284
+ font-size: var(
285
+ --_ctm-mob-dn-um-se-ft-se,
286
+ var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
287
+ );
288
+ font-weight: var(
289
+ --_ctm-mob-dn-um-se-ft-wt,
290
+ var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
291
+ );
292
+ font-style: var(
293
+ --_ctm-mob-dn-um-se-ft-se-ic,
294
+ var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
295
+ );
296
+ text-align: var(
297
+ --_ctm-mob-dn-um-se-tt-an,
298
+ var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
299
+ );
300
+ letter-spacing: var(
301
+ --_ctm-mob-dn-um-se-lr-sg,
302
+ var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
303
+ );
304
+ line-height: var(
305
+ --_ctm-mob-dn-um-se-le-ht,
306
+ var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
307
+ );
308
+ text-decoration: var(
309
+ --_ctm-mob-dn-um-se-ue,
310
+ var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
311
+ );
312
+
313
+ border-color: var(
314
+ --_show-border,
315
+ var(--_ctm-mob-dn-um-se-br-cr, var(--_ctm-tab-dn-um-se-br-cr, var(--_ctm-dn-um-se-br-cr)))
316
+ );
317
+ border-style: var(
318
+ --_show-border,
319
+ var(--_ctm-mob-dn-um-se-br-se, var(--_ctm-tab-dn-um-se-br-se, var(--_ctm-dn-um-se-br-se)))
320
+ );
321
+ border-width: var(
322
+ --_show-border,
323
+ var(--_ctm-mob-dn-um-se-br-wh, var(--_ctm-tab-dn-um-se-br-wh, var(--_ctm-dn-um-se-br-wh)))
324
+ );
325
+ border-radius: var(
326
+ --_ctm-mob-dn-um-se-br-rs,
327
+ var(--_ctm-tab-dn-um-se-br-rs, var(--_ctm-dn-um-se-br-rs))
328
+ );
329
+
330
+ box-shadow: var(
331
+ --_show-shadow,
332
+ var(--_ctm-mob-dn-um-se-sw-ae, var(--_ctm-tab-dn-um-se-sw-ae, var(--_ctm-dn-um-se-sw-ae)))
333
+ var(
334
+ --_ctm-mob-dn-um-se-sw-br,
335
+ var(--_ctm-tab-dn-um-se-sw-br, var(--_ctm-dn-um-se-sw-br))
336
+ )
337
+ var(
338
+ --_ctm-mob-dn-um-se-sw-sd,
339
+ var(--_ctm-tab-dn-um-se-sw-sd, var(--_ctm-dn-um-se-sw-sd))
340
+ )
341
+ var(
342
+ --_ctm-mob-dn-um-se-sw-cr,
343
+ var(--_ctm-tab-dn-um-se-sw-cr, var(--_ctm-dn-um-se-sw-cr))
344
+ )
345
+ );
346
+ }
347
+ .denominations_container {
348
+ // font-size: 16px;
91
349
  display: flex;
92
- align-items: center;
93
- gap: 5px;
94
- .element-container {
350
+ flex-direction: column;
351
+ // gap: 6px;
352
+ // padding-bottom: 14px;
353
+
354
+ background-color: var(
355
+ --_ctm-mob-dn-gt-cd-cd-wr-bd-cr,
356
+ var(--_ctm-tab-dn-gt-cd-cd-wr-bd-cr, var(--_ctm-dn-gt-cd-cd-wr-bd-cr))
357
+ );
358
+ border-color: var(
359
+ --_ctm-mob-dn-gt-cd-cd-wr-br-cr,
360
+ var(--_ctm-tab-dn-gt-cd-cd-wr-br-cr, var(--_ctm-dn-gt-cd-cd-wr-br-cr))
361
+ );
362
+ border-radius: var(
363
+ --_ctm-mob-dn-gt-cd-cd-wr-br-rs,
364
+ var(--_ctm-tab-dn-gt-cd-cd-wr-br-rs, var(--_ctm-dn-gt-cd-cd-wr-br-rs))
365
+ );
366
+ border-style: var(
367
+ --_ctm-mob-dn-gt-cd-cd-wr-br-se,
368
+ var(--_ctm-tab-dn-gt-cd-cd-wr-br-se, var(--_ctm-dn-gt-cd-cd-wr-br-se))
369
+ );
370
+ border-width: var(
371
+ --_ctm-mob-dn-gt-cd-cd-wr-br-wh,
372
+ var(--_ctm-tab-dn-gt-cd-cd-wr-br-wh, var(--_ctm-dn-gt-cd-cd-wr-br-wh))
373
+ );
374
+ box-shadow: var(
375
+ --_ctm-mob-dn-gt-cd-cd-wr-sw-ae,
376
+ var(--_ctm-tab-dn-gt-cd-cd-wr-sw-ae, var(--_ctm-dn-gt-cd-cd-wr-sw-ae))
377
+ )
378
+ var(
379
+ --_ctm-mob-dn-gt-cd-cd-wr-sw-br,
380
+ var(--_ctm-tab-dn-gt-cd-cd-wr-sw-br, var(--_ctm-dn-gt-cd-cd-wr-sw-br))
381
+ )
382
+ var(
383
+ --_ctm-mob-dn-gt-cd-cd-wr-sw-sd,
384
+ var(--_ctm-tab-dn-gt-cd-cd-wr-sw-sd, var(--_ctm-dn-gt-cd-cd-wr-sw-sd))
385
+ )
386
+ var(
387
+ --_ctm-mob-dn-gt-cd-cd-wr-sw-cr,
388
+ var(--_ctm-tab-dn-gt-cd-cd-wr-sw-cr, var(--_ctm-dn-gt-cd-cd-wr-sw-cr))
389
+ );
390
+ padding: var(
391
+ --_ctm-mob-dn-gt-cd-cd-wr-pg,
392
+ var(--_ctm-tab-dn-gt-cd-cd-wr-pg, var(--_ctm-dn-gt-cd-cd-wr-pg))
393
+ );
394
+ gap: var(
395
+ --_ctm-mob-dn-gt-cd-cd-wr-im-gp,
396
+ var(--_ctm-tab-dn-gt-cd-cd-wr-im-gp, var(--_ctm-dn-gt-cd-cd-wr-im-gp))
397
+ );
398
+ .denominations_title {
399
+ // margin-bottom: 4px;
400
+ // font-size: 16px;
401
+ // color: #000000;
402
+ // font-weight: 500;
403
+ // line-height: 150%;
404
+ font-family: var(
405
+ --_ctm-mob-dn-gt-cd-ts-ft-fy,
406
+ var(--_ctm-tab-dn-gt-cd-ts-ft-fy, var(--_ctm-dn-gt-cd-ts-ft-fy))
407
+ );
408
+ color: var(
409
+ --_ctm-mob-dn-gt-cd-ts-cr,
410
+ var(--_ctm-tab-dn-gt-cd-ts-cr, var(--_ctm-dn-gt-cd-ts-cr))
411
+ );
412
+ font-weight: var(
413
+ --_ctm-mob-dn-gt-cd-ts-ft-wt,
414
+ var(--_ctm-tab-dn-gt-cd-ts-ft-wt, var(--_ctm-dn-gt-cd-ts-ft-wt))
415
+ );
416
+ font-size: var(
417
+ --_ctm-mob-dn-gt-cd-ts-ft-se,
418
+ var(--_ctm-tab-dn-gt-cd-ts-ft-se, var(--_ctm-dn-gt-cd-ts-ft-se))
419
+ );
420
+ text-decoration: var(
421
+ --_ctm-mob-dn-gt-cd-ts-ue,
422
+ var(--_ctm-tab-dn-gt-cd-ts-ue, var(--_ctm-dn-gt-cd-ts-ue))
423
+ );
424
+ letter-spacing: var(
425
+ --_ctm-mob-dn-gt-cd-ts-lr-sg,
426
+ var(--_ctm-tab-dn-gt-cd-ts-lr-sg, var(--_ctm-dn-gt-cd-ts-lr-sg))
427
+ );
428
+ line-height: var(
429
+ --_ctm-mob-dn-gt-cd-ts-le-ht,
430
+ var(--_ctm-tab-dn-gt-cd-ts-le-ht, var(--_ctm-dn-gt-cd-ts-le-ht))
431
+ );
432
+ font-style: var(
433
+ --_ctm-mob-dn-gt-cd-ts-ft-se-ic,
434
+ var(--_ctm-tab-dn-gt-cd-ts-ft-se-ic, var(--_ctm-dn-gt-cd-ts-ft-se-ic))
435
+ );
436
+ text-align: var(
437
+ --_ctm-mob-dn-gt-cd-ts-tt-an,
438
+ var(--_ctm-tab-dn-gt-cd-ts-tt-an, var(--_ctm-dn-gt-cd-ts-tt-an))
439
+ );
440
+ }
441
+ .denominations_grid {
95
442
  display: flex;
96
- align-items: flex-start;
97
- gap: 10px;
98
- flex-direction: column;
99
- width: 100%;
100
- .product-price {
443
+ // gap: 8px;
444
+ flex-wrap: wrap;
445
+ margin-top: 12px;
446
+ flex-direction: row;
447
+ gap: 12px;
448
+ // gap: var(
449
+ // --_ctm-mob-dn-gt-cd-cd-dt-se-im-gp,
450
+ // var(--_ctm-tab-dn-gt-cd-cd-dt-se-im-gp, var(--_ctm-dn-gt-cd-cd-dt-se-im-gp))
451
+ // );
452
+ .amount_btn {
453
+ transition: color 0.3s ease;
454
+ cursor: pointer;
101
455
  display: flex;
102
- flex-direction: column;
103
- width: 100%;
104
-
456
+ align-items: center;
457
+ justify-content: center;
458
+ // padding: 4px;
459
+ min-width: 20px;
460
+ min-height: 20px;
461
+ box-sizing: content-box;
462
+ // font-size: 16px;
463
+ // font-weight: 600;
464
+ // line-height: 150%;
465
+ // background-color: #ffffff;
466
+ // border: 1px solid #d6d6d6;
467
+ background-color: var(
468
+ --_ctm-mob-dn-gt-cd-cd-dt-se-bd-cr,
469
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-bd-cr, var(--_ctm-dn-gt-cd-cd-dt-se-bd-cr))
470
+ );
471
+ font-family: var(
472
+ --_ctm-mob-dn-gt-cd-cd-dt-se-ft-fy,
473
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-ft-fy, var(--_ctm-dn-gt-cd-cd-dt-se-ft-fy))
474
+ );
475
+ color: var(
476
+ --_ctm-mob-dn-gt-cd-cd-dt-se-cr,
477
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-cr, var(--_ctm-dn-gt-cd-cd-dt-se-cr))
478
+ );
479
+ font-weight: var(
480
+ --_ctm-mob-dn-gt-cd-cd-dt-se-ft-wt,
481
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-ft-wt, var(--_ctm-dn-gt-cd-cd-dt-se-ft-wt))
482
+ );
483
+ font-size: var(
484
+ --_ctm-mob-dn-gt-cd-cd-dt-se-ft-se,
485
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-ft-se, var(--_ctm-dn-gt-cd-cd-dt-se-ft-se))
486
+ );
487
+ text-decoration: var(
488
+ --_ctm-mob-dn-gt-cd-cd-dt-se-ue,
489
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-ue, var(--_ctm-dn-gt-cd-cd-dt-se-ue))
490
+ );
491
+ letter-spacing: var(
492
+ --_ctm-mob-dn-gt-cd-cd-dt-se-lr-sg,
493
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-lr-sg, var(--_ctm-dn-gt-cd-cd-dt-se-lr-sg))
494
+ );
495
+ line-height: var(
496
+ --_ctm-mob-dn-gt-cd-cd-dt-se-le-ht,
497
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-le-ht, var(--_ctm-dn-gt-cd-cd-dt-se-le-ht))
498
+ );
499
+ font-style: var(
500
+ --_ctm-mob-dn-gt-cd-cd-dt-se-ft-se-ic,
501
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-ft-se-ic, var(--_ctm-dn-gt-cd-cd-dt-se-ft-se-ic))
502
+ );
503
+ text-align: var(
504
+ --_ctm-mob-dn-gt-cd-cd-dt-se-tt-an,
505
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-tt-an, var(--_ctm-dn-gt-cd-cd-dt-se-tt-an))
506
+ );
105
507
  border-color: var(
106
- --_show-border,
107
- var(
108
- --_ctm-mob-dn-pt-pe-br-cr,
109
- var(--_ctm-tab-dn-pt-pe-br-cr, var(--_ctm-dn-pt-pe-br-cr))
110
- )
508
+ --_ctm-mob-dn-gt-cd-cd-dt-se-br-cr,
509
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-br-cr, var(--_ctm-dn-gt-cd-cd-dt-se-br-cr))
510
+ );
511
+ border-radius: var(
512
+ --_ctm-mob-dn-gt-cd-cd-dt-se-br-rs,
513
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-br-rs, var(--_ctm-dn-gt-cd-cd-dt-se-br-rs))
111
514
  );
112
515
  border-style: var(
113
- --_show-border,
114
- var(
115
- --_ctm-mob-dn-pt-pe-br-se,
116
- var(--_ctm-tab-dn-pt-pe-br-se, var(--_ctm-dn-pt-pe-br-se))
117
- )
516
+ --_ctm-mob-dn-gt-cd-cd-dt-se-br-se,
517
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-br-se, var(--_ctm-dn-gt-cd-cd-dt-se-br-se))
118
518
  );
119
519
  border-width: var(
120
- --_show-border,
121
- var(
122
- --_ctm-mob-dn-pt-pe-br-wh,
123
- var(--_ctm-tab-dn-pt-pe-br-wh, var(--_ctm-dn-pt-pe-br-wh))
124
- )
520
+ --_ctm-mob-dn-gt-cd-cd-dt-se-br-wh,
521
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-br-wh, var(--_ctm-dn-gt-cd-cd-dt-se-br-wh))
125
522
  );
126
- border-radius: var(
127
- --_ctm-mob-dn-pt-pe-br-rs,
128
- var(--_ctm-tab-dn-pt-pe-br-rs, var(--_ctm-dn-pt-pe-br-rs))
129
- );
130
-
131
523
  box-shadow: var(
132
- --_show-shadow,
524
+ --_ctm-mob-dn-gt-cd-cd-dt-se-sw-ae,
525
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-sw-ae, var(--_ctm-dn-gt-cd-cd-dt-se-sw-ae))
526
+ )
133
527
  var(
134
- --_ctm-mob-dn-pt-pe-sw-ae,
135
- var(--_ctm-tab-dn-pt-pe-sw-ae, var(--_ctm-dn-pt-pe-sw-ae))
136
- )
137
- var(
138
- --_ctm-mob-dn-pt-pe-sw-br,
139
- var(--_ctm-tab-dn-pt-pe-sw-br, var(--_ctm-dn-pt-pe-sw-br))
140
- )
141
- var(
142
- --_ctm-mob-dn-pt-pe-sw-sd,
143
- var(--_ctm-tab-dn-pt-pe-sw-sd, var(--_ctm-dn-pt-pe-sw-sd))
144
- )
145
- var(
146
- --_ctm-mob-dn-pt-pe-sw-cr,
147
- var(--_ctm-tab-dn-pt-pe-sw-cr, var(--_ctm-dn-pt-pe-sw-cr))
148
- )
149
- );
150
- background-color: var(
151
- --_ctm-mob-dn-pt-pe-bd-cr,
152
- var(--_ctm-tab-dn-pt-pe-bd-cr, var(--_ctm-dn-pt-pe-bd-cr))
528
+ --_ctm-mob-dn-gt-cd-cd-dt-se-sw-br,
529
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-sw-br, var(--_ctm-dn-gt-cd-cd-dt-se-sw-br))
530
+ )
531
+ var(
532
+ --_ctm-mob-dn-gt-cd-cd-dt-se-sw-sd,
533
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-sw-sd, var(--_ctm-dn-gt-cd-cd-dt-se-sw-sd))
534
+ )
535
+ var(
536
+ --_ctm-mob-dn-gt-cd-cd-dt-se-sw-cr,
537
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-sw-cr, var(--_ctm-dn-gt-cd-cd-dt-se-sw-cr))
538
+ );
539
+ padding: var(
540
+ --_ctm-mob-dn-gt-cd-cd-dt-se-pg,
541
+ var(--_ctm-tab-dn-gt-cd-cd-dt-se-pg, var(--_ctm-dn-gt-cd-cd-dt-se-pg))
153
542
  );
154
- .price-loader {
155
- display: inline-block;
156
- width: var(--_ctm-lt-wh, 100px);
157
- height: 16px;
158
- border-radius: 4px;
159
- background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
160
- background-size: 200% 100%;
161
- animation: shimmer 1.4s infinite;
162
- }
163
-
164
- @keyframes shimmer {
165
- 0% {
166
- background-position: -200% 0;
167
- }
168
- 100% {
169
- background-position: 200% 0;
170
- }
171
- }
172
-
173
- .price-span {
174
- color: var(
175
- --_ctm-mob-dn-pt-pe-cr,
176
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
543
+ &.active {
544
+ background-color: var(
545
+ --_ctm-mob-dn-gt-cd-cd-sd-se-bd-cr,
546
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-bd-cr, var(--_ctm-dn-gt-cd-cd-sd-se-bd-cr))
177
547
  );
178
548
  font-family: var(
179
- --_ctm-mob-dn-pt-pe-ft-fy,
180
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
181
- ),
182
- sans-serif;
183
- font-size: var(
184
- --_ctm-mob-dn-pt-pe-ft-se,
185
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
186
- );
187
- font-weight: var(
188
- --_ctm-mob-dn-pt-pe-ft-wt,
189
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
190
- );
191
- font-style: var(
192
- --_ctm-mob-dn-pt-pe-ft-se-ic,
193
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
194
- );
195
- text-align: var(
196
- --_ctm-mob-dn-pt-pe-tt-an,
197
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
549
+ --_ctm-mob-dn-gt-cd-cd-sd-se-ft-fy,
550
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-ft-fy, var(--_ctm-dn-gt-cd-cd-sd-se-ft-fy))
198
551
  );
199
- letter-spacing: var(
200
- --_ctm-mob-dn-pt-pe-lr-sg,
201
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
202
- );
203
- line-height: var(
204
- --_ctm-mob-dn-pt-pe-le-ht,
205
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
206
- );
207
- text-decoration: var(
208
- --_ctm-mob-dn-pt-pe-ue,
209
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
210
- );
211
- }
212
- .strike-price {
213
552
  color: var(
214
- --_ctm-mob-dn-pt-pe-cr-dc,
215
- var(--_ctm-tab-dn-pt-pe-cr-dc, var(--_ctm-dn-pt-pe-cr-dc))
216
- );
217
- font-family: var(
218
- --_sf-hr-ff,
219
- var(
220
- --_ctm-mob-dn-pt-pe-ft-fy-dc,
221
- var(--_ctm-tab-dn-pt-pe-ft-fy-dc, var(--_ctm-dn-pt-pe-ft-fy-dc))
222
- )
223
- );
224
- font-size: var(
225
- --_ctm-mob-dn-pt-pe-ft-se-dc,
226
- var(--_ctm-tab-dn-pt-pe-ft-se-dc, var(--_ctm-dn-pt-pe-ft-se-dc))
553
+ --_ctm-mob-dn-gt-cd-cd-sd-se-cr,
554
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-cr, var(--_ctm-dn-gt-cd-cd-sd-se-cr))
227
555
  );
228
556
  font-weight: var(
229
- --_ctm-mob-dn-pt-pe-ft-wt-dc,
230
- var(--_ctm-tab-dn-pt-pe-ft-wt-dc, var(--_ctm-dn-pt-pe-ft-wt-dc))
557
+ --_ctm-mob-dn-gt-cd-cd-sd-se-ft-wt,
558
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-ft-wt, var(--_ctm-dn-gt-cd-cd-sd-se-ft-wt))
231
559
  );
232
- font-style: var(
233
- --_ctm-mob-dn-pt-pe-ft-se-ic-dc,
234
- var(--_ctm-tab-dn-pt-pe-ft-se-ic-dc, var(--_ctm-dn-pt-pe-ft-se-ic-dc))
560
+ font-size: var(
561
+ --_ctm-mob-dn-gt-cd-cd-sd-se-ft-se,
562
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-ft-se, var(--_ctm-dn-gt-cd-cd-sd-se-ft-se))
235
563
  );
236
- text-align: var(
237
- --_ctm-mob-dn-pt-pe-tt-an-dc,
238
- var(--_ctm-tab-dn-pt-pe-tt-an-dc, var(--_ctm-dn-pt-pe-tt-an-dc))
564
+ text-decoration: var(
565
+ --_ctm-mob-dn-gt-cd-cd-sd-se-ue,
566
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-ue, var(--_ctm-dn-gt-cd-cd-sd-se-ue))
239
567
  );
240
568
  letter-spacing: var(
241
- --_ctm-mob-dn-pt-pe-lr-sg-dc,
242
- var(--_ctm-tab-dn-pt-pe-lr-sg-dc, var(--_ctm-dn-pt-pe-lr-sg-dc))
569
+ --_ctm-mob-dn-gt-cd-cd-sd-se-lr-sg,
570
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-lr-sg, var(--_ctm-dn-gt-cd-cd-sd-se-lr-sg))
243
571
  );
244
572
  line-height: var(
245
- --_ctm-mob-dn-pt-pe-le-ht-dc,
246
- var(--_ctm-tab-dn-pt-pe-le-ht-dc, var(--_ctm-dn-pt-pe-le-ht-dc))
247
- );
248
- text-decoration: var(
249
- --_ctm-mob-dn-pt-pe-ue-dc,
250
- var(--_ctm-tab-dn-pt-pe-ue-dc, var(--_ctm-dn-pt-pe-ue-dc))
251
- );
252
- }
253
-
254
- .code-span {
255
- background-color: var(
256
- --_ctm-mob-dn-cy-ce-se-bd-cr,
257
- var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
258
- );
259
- color: var(
260
- --_ctm-mob-dn-cy-ce-se-cr,
261
- var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
262
- );
263
- font-family: var(
264
- --_ctm-mob-dn-cy-ce-se-ft-fy,
265
- var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
266
- ),
267
- sans-serif;
268
- font-size: var(
269
- --_ctm-mob-dn-cy-ce-se-ft-se,
270
- var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
271
- );
272
- font-weight: var(
273
- --_ctm-mob-dn-cy-ce-se-ft-wt,
274
- var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
573
+ --_ctm-mob-dn-gt-cd-cd-sd-se-le-ht,
574
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-le-ht, var(--_ctm-dn-gt-cd-cd-sd-se-le-ht))
275
575
  );
276
576
  font-style: var(
277
- --_ctm-mob-dn-cy-ce-se-ft-se-ic,
278
- var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
577
+ --_ctm-mob-dn-gt-cd-cd-sd-se-ft-se-ic,
578
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-ft-se-ic, var(--_ctm-dn-gt-cd-cd-sd-se-ft-se-ic))
279
579
  );
280
580
  text-align: var(
281
- --_ctm-mob-dn-cy-ce-se-tt-an,
282
- var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
581
+ --_ctm-mob-dn-gt-cd-cd-sd-se-tt-an,
582
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-tt-an, var(--_ctm-dn-gt-cd-cd-sd-se-tt-an))
283
583
  );
284
- letter-spacing: var(
285
- --_ctm-mob-dn-cy-ce-se-lr-sg,
286
- var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
287
- );
288
- line-height: var(
289
- --_ctm-mob-dn-cy-ce-se-le-ht,
290
- var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
291
- );
292
- text-decoration: var(
293
- --_ctm-mob-dn-cy-ce-se-ue,
294
- var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
295
- );
296
-
297
584
  border-color: var(
298
- --_show-border,
299
- var(
300
- --_ctm-mob-dn-cy-ce-se-br-cr,
301
- var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
302
- )
585
+ --_ctm-mob-dn-gt-cd-cd-sd-se-br-cr,
586
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-br-cr, var(--_ctm-dn-gt-cd-cd-sd-se-br-cr))
587
+ );
588
+ border-radius: var(
589
+ --_ctm-mob-dn-gt-cd-cd-sd-se-br-rs,
590
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-br-rs, var(--_ctm-dn-gt-cd-cd-sd-se-br-rs))
303
591
  );
304
592
  border-style: var(
305
- --_show-border,
306
- var(
307
- --_ctm-mob-dn-cy-ce-se-br-se,
308
- var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
309
- )
593
+ --_ctm-mob-dn-gt-cd-cd-sd-se-br-se,
594
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-br-se, var(--_ctm-dn-gt-cd-cd-sd-se-br-se))
310
595
  );
311
596
  border-width: var(
312
- --_show-border,
313
- var(
314
- --_ctm-mob-dn-cy-ce-se-br-wh,
315
- var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
316
- )
317
- );
318
- border-radius: var(
319
- --_ctm-mob-dn-cy-ce-se-br-rs,
320
- var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
597
+ --_ctm-mob-dn-gt-cd-cd-sd-se-br-wh,
598
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-br-wh, var(--_ctm-dn-gt-cd-cd-sd-se-br-wh))
321
599
  );
322
-
323
600
  box-shadow: var(
324
- --_show-shadow,
325
- var(
326
- --_ctm-mob-dn-cy-ce-se-sw-ae,
327
- var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
328
- )
329
- var(
330
- --_ctm-mob-dn-cy-ce-se-sw-br,
331
- var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
332
- )
333
- var(
334
- --_ctm-mob-dn-cy-ce-se-sw-sd,
335
- var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
336
- )
337
- var(
338
- --_ctm-mob-dn-cy-ce-se-sw-cr,
339
- var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
340
- )
341
- );
342
- }
343
-
344
- .uom-span {
345
- background-color: var(
346
- --_ctm-mob-dn-um-se-bd-cr,
347
- var(--_ctm-tab-dn-um-se-bd-cr, var(--_ctm-dn-um-se-bd-cr))
348
- );
349
- color: var(
350
- --_ctm-mob-dn-um-se-cr,
351
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
352
- );
353
- font-family: var(
354
- --_ctm-mob-dn-um-se-ft-fy,
355
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
356
- ),
357
- sans-serif;
358
- font-size: var(
359
- --_ctm-mob-dn-um-se-ft-se,
360
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
361
- );
362
- font-weight: var(
363
- --_ctm-mob-dn-um-se-ft-wt,
364
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
365
- );
366
- font-style: var(
367
- --_ctm-mob-dn-um-se-ft-se-ic,
368
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
369
- );
370
- text-align: var(
371
- --_ctm-mob-dn-um-se-tt-an,
372
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
373
- );
374
- letter-spacing: var(
375
- --_ctm-mob-dn-um-se-lr-sg,
376
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
377
- );
378
- line-height: var(
379
- --_ctm-mob-dn-um-se-le-ht,
380
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
381
- );
382
- text-decoration: var(
383
- --_ctm-mob-dn-um-se-ue,
384
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
385
- );
386
-
387
- border-color: var(
388
- --_show-border,
389
- var(
390
- --_ctm-mob-dn-um-se-br-cr,
391
- var(--_ctm-tab-dn-um-se-br-cr, var(--_ctm-dn-um-se-br-cr))
601
+ --_ctm-mob-dn-gt-cd-cd-sd-se-sw-ae,
602
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-sw-ae, var(--_ctm-dn-gt-cd-cd-sd-se-sw-ae))
392
603
  )
393
- );
394
- border-style: var(
395
- --_show-border,
396
604
  var(
397
- --_ctm-mob-dn-um-se-br-se,
398
- var(--_ctm-tab-dn-um-se-br-se, var(--_ctm-dn-um-se-br-se))
605
+ --_ctm-mob-dn-gt-cd-cd-sd-se-sw-br,
606
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-sw-br, var(--_ctm-dn-gt-cd-cd-sd-se-sw-br))
399
607
  )
400
- );
401
- border-width: var(
402
- --_show-border,
403
608
  var(
404
- --_ctm-mob-dn-um-se-br-wh,
405
- var(--_ctm-tab-dn-um-se-br-wh, var(--_ctm-dn-um-se-br-wh))
609
+ --_ctm-mob-dn-gt-cd-cd-sd-se-sw-sd,
610
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-sw-sd, var(--_ctm-dn-gt-cd-cd-sd-se-sw-sd))
406
611
  )
407
- );
408
- border-radius: var(
409
- --_ctm-mob-dn-um-se-br-rs,
410
- var(--_ctm-tab-dn-um-se-br-rs, var(--_ctm-dn-um-se-br-rs))
411
- );
412
-
413
- box-shadow: var(
414
- --_show-shadow,
415
612
  var(
416
- --_ctm-mob-dn-um-se-sw-ae,
417
- var(--_ctm-tab-dn-um-se-sw-ae, var(--_ctm-dn-um-se-sw-ae))
418
- )
419
- var(
420
- --_ctm-mob-dn-um-se-sw-br,
421
- var(--_ctm-tab-dn-um-se-sw-br, var(--_ctm-dn-um-se-sw-br))
422
- )
423
- var(
424
- --_ctm-mob-dn-um-se-sw-sd,
425
- var(--_ctm-tab-dn-um-se-sw-sd, var(--_ctm-dn-um-se-sw-sd))
426
- )
427
- var(
428
- --_ctm-mob-dn-um-se-sw-cr,
429
- var(--_ctm-tab-dn-um-se-sw-cr, var(--_ctm-dn-um-se-sw-cr))
430
- )
613
+ --_ctm-mob-dn-gt-cd-cd-sd-se-sw-cr,
614
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-sw-cr, var(--_ctm-dn-gt-cd-cd-sd-se-sw-cr))
615
+ );
616
+ padding: var(
617
+ --_ctm-mob-dn-gt-cd-cd-sd-se-pg,
618
+ var(--_ctm-tab-dn-gt-cd-cd-sd-se-pg, var(--_ctm-dn-gt-cd-cd-sd-se-pg))
431
619
  );
432
- }
433
- .denominations_container {
434
- font-size: 16px;
435
- display: flex;
436
- flex-direction: column;
437
- gap: 6px;
438
- padding-bottom: 14px;
439
- .denominations_title {
440
- margin-bottom: 4px;
441
- font-size: 16px;
442
- color: #000000;
443
- font-weight: 500;
444
- line-height: 150%;
445
- }
446
- .denominations_grid {
447
- display: flex;
448
- gap: 8px;
449
- flex-wrap: wrap;
450
- margin-bottom: 10px;
451
- flex-direction: row;
452
- gap: 12px;
453
- .amount_btn {
454
- transition: color 0.3s ease;
455
- cursor: pointer;
456
- display: flex;
457
- align-items: center;
458
- justify-content: center;
459
- padding: 4px;
460
- min-width: 20px;
461
- min-height: 20px;
462
- box-sizing: content-box;
463
- font-size: 16px;
464
- font-weight: 600;
465
- line-height: 150%;
466
- background-color: #ffffff;
467
- border: 1px solid #d6d6d6;
468
-
469
- &.active {
470
- background-color: #f5f5f5;
471
- border: 1px solid #3e4784;
472
- color: #000080;
473
- }
474
- }
475
- }
476
- .custom_amount_input {
477
- height: 40px;
478
- display: flex;
479
- position: relative;
480
- gap: 6px;
481
- align-items: center;
482
- border-radius: 4px;
483
- background: #fff;
484
- border: 1px solid #d0d5dd;
485
- padding: 8px 12px;
486
- width: 220px;
487
- transition:
488
- background-color 0.2s,
489
- color 0.2s,
490
- border-color 0.2s,
491
- box-shadow 0.2s;
492
- .svg_icon {
493
- color: var(--_gray-700);
494
- font-weight: 500;
495
- font-size: 14px;
496
- line-height: 24px;
497
- white-space: nowrap;
498
- }
499
- input {
500
- color: var(--_gray-700);
501
- margin-top: 2px;
502
- &::placeholder {
503
- color: var(--_gray-500);
504
- font-weight: 500;
505
- font-size: 14px;
506
- line-height: 24px;
507
- }
508
- }
509
- &:focus-within {
510
- outline: 0 none;
511
- outline-offset: 0;
512
- border-radius: 4px;
513
- box-shadow:
514
- 0px 1px 2px rgba(16, 24, 40, 0.05),
515
- 0px 0px 0px 2px var(--_primary-100);
516
- border: 1px solid var(--_primary-300);
517
- }
518
- }
519
- .delivery_details_container {
520
- .delivery_details_title {
521
- display: inline-block;
522
- margin-top: 8px;
523
- margin-bottom: 4px;
524
- font-size: 16px;
525
- color: #000000;
526
- font-weight: 500;
527
- line-height: 150%;
528
- }
529
- .input_container {
530
- display: flex;
531
- flex-direction: column;
532
- gap: 4px;
533
- margin-bottom: 12px;
534
-
535
- &:last-child {
536
- margin-bottom: 0;
537
- }
538
- label {
539
- display: block;
540
- color: var(--_gray-700);
541
- font-weight: 400;
542
- font-size: 14px;
543
- line-height: 20px;
544
- }
545
- .message_text {
546
- resize: none;
547
- background-color: var(--_base-white);
548
- padding: 5px 12px;
549
- border: 1px solid var(--_gray-300);
550
- border-radius: 4px;
551
- transition:
552
- background-color 0.2s,
553
- color 0.2s,
554
- border-color 0.2s,
555
- box-shadow 0.2s;
556
- height: 90px;
557
- &::placeholder {
558
- color: var(--_gray-500);
559
- font-weight: 500;
560
- font-size: 14px;
561
- line-height: 24px;
562
- }
563
- &:focus {
564
- outline: 0 none;
565
- outline-offset: 0;
566
- border-radius: 4px;
567
- box-shadow:
568
- 0px 1px 2px rgba(16, 24, 40, 0.05),
569
- 0px 0px 0px 2px var(--_primary-100);
570
- border: 1px solid var(--_primary-300);
571
- }
572
- }
573
- input {
574
- background-color: var(--_base-white);
575
- padding: 8px 12px;
576
- border: 1px solid var(--_gray-300);
577
- border-radius: 4px;
578
- height: 40px;
579
- transition:
580
- background-color 0.2s,
581
- color 0.2s,
582
- border-color 0.2s,
583
- box-shadow 0.2s;
584
- &::placeholder {
585
- color: var(--_gray-500);
586
- font-weight: 500;
587
- font-size: 14px;
588
- line-height: 24px;
589
- }
590
- &:focus {
591
- outline: 0 none;
592
- outline-offset: 0;
593
- border-radius: 4px;
594
- box-shadow:
595
- 0px 1px 2px rgba(16, 24, 40, 0.05),
596
- 0px 0px 0px 2px var(--_primary-100);
597
- border: 1px solid var(--_primary-300);
598
- }
599
- }
600
- }
601
- }
620
+ // background-color: #f5f5f5;
621
+ // border: 1px solid #3e4784;
622
+ // color: #000080;
602
623
  }
603
624
  }
604
- .product-actual-price-container {
605
- .product-actual-discount {
606
- .discount-percentage {
607
- background-color: var(
608
- --_ctm-mob-dn-dt-bd-cr,
609
- var(--_ctm-tab-dn-dt-bd-cr, var(--_ctm-dn-dt-bd-cr))
610
- );
611
- color: var(--_ctm-mob-dn-dt-cr, var(--_ctm-tab-dn-dt-cr, var(--_ctm-dn-dt-cr)));
612
- font-family: var(
613
- --_ctm-mob-dn-dt-ft-fy,
614
- var(--_ctm-tab-dn-dt-ft-fy, var(--_ctm-dn-dt-ft-fy))
615
- ),
616
- sans-serif;
617
- font-size: var(
618
- --_ctm-mob-dn-dt-ft-se,
619
- var(--_ctm-tab-dn-dt-ft-se, var(--_ctm-dn-dt-ft-se))
620
- );
621
- font-weight: var(
622
- --_ctm-mob-dn-dt-ft-wt,
623
- var(--_ctm-tab-dn-dt-ft-wt, var(--_ctm-dn-dt-ft-wt))
624
- );
625
- font-style: var(
626
- --_ctm-mob-dn-dt-ft-se-ic,
627
- var(--_ctm-tab-dn-dt-ft-se-ic, var(--_ctm-dn-dt-ft-se-ic))
628
- );
629
- text-align: var(
630
- --_ctm-mob-dn-dt-tt-an,
631
- var(--_ctm-tab-dn-dt-tt-an, var(--_ctm-dn-dt-tt-an))
632
- );
633
- letter-spacing: var(
634
- --_ctm-mob-dn-dt-lr-sg,
635
- var(--_ctm-tab-dn-dt-lr-sg, var(--_ctm-dn-dt-lr-sg))
636
- );
637
- line-height: var(
638
- --_ctm-mob-dn-dt-le-ht,
639
- var(--_ctm-tab-dn-dt-le-ht, var(--_ctm-dn-dt-le-ht))
640
- );
641
- text-decoration: var(
642
- --_ctm-mob-dn-dt-ue,
643
- var(--_ctm-tab-dn-dt-ue, var(--_ctm-dn-dt-ue))
644
- );
645
-
646
- border-color: var(
647
- --_show-border,
648
- var(--_ctm-mob-dn-dt-br-cr, var(--_ctm-tab-dn-dt-br-cr, var(--_ctm-dn-dt-br-cr)))
649
- );
650
- border-style: var(
651
- --_show-border,
652
- var(--_ctm-mob-dn-dt-br-se, var(--_ctm-tab-dn-dt-br-se, var(--_ctm-dn-dt-br-se)))
653
- );
654
- border-width: var(
655
- --_show-border,
656
- var(--_ctm-mob-dn-dt-br-wh, var(--_ctm-tab-dn-dt-br-wh, var(--_ctm-dn-dt-br-wh)))
657
- );
658
- border-radius: var(
659
- --_ctm-mob-dn-dt-br-rs,
660
- var(--_ctm-tab-dn-dt-br-rs, var(--_ctm-dn-dt-br-rs))
661
- );
662
-
663
- box-shadow: var(
664
- --_show-shadow,
665
- var(--_ctm-mob-dn-dt-sw-ae, var(--_ctm-tab-dn-dt-sw-ae, var(--_ctm-dn-dt-sw-ae)))
666
- var(
667
- --_ctm-mob-dn-dt-sw-br,
668
- var(--_ctm-tab-dn-dt-sw-br, var(--_ctm-dn-dt-sw-br))
669
- )
670
- var(
671
- --_ctm-mob-dn-dt-sw-sd,
672
- var(--_ctm-tab-dn-dt-sw-sd, var(--_ctm-dn-dt-sw-sd))
673
- )
674
- var(
675
- --_ctm-mob-dn-dt-sw-cr,
676
- var(--_ctm-tab-dn-dt-sw-cr, var(--_ctm-dn-dt-sw-cr))
677
- )
678
- );
679
- }
680
-
681
- .discount-value-percentage {
682
- background-color: var(
683
- --_ctm-mob-dn-dt-ve-bd-cr,
684
- var(--_ctm-tab-dn-dt-ve-bd-cr, var(--_ctm-dn-dt-ve-bd-cr))
685
- );
686
- color: var(
687
- --_ctm-mob-dn-dt-ve-cr,
688
- var(--_ctm-tab-dn-dt-ve-cr, var(--_ctm-dn-dt-ve-cr))
689
- );
690
- font-family: var(
691
- --_ctm-mob-dn-dt-ve-ft-fy,
692
- var(--_ctm-tab-dn-dt-ve-ft-fy, var(--_ctm-dn-dt-ve-ft-fy))
693
- ),
694
- sans-serif;
695
- font-size: var(
696
- --_ctm-mob-dn-dt-ve-ft-se,
697
- var(--_ctm-tab-dn-dt-ve-ft-se, var(--_ctm-dn-dt-ve-ft-se))
698
- );
699
- font-weight: var(
700
- --_ctm-mob-dn-dt-ve-ft-wt,
701
- var(--_ctm-tab-dn-dt-ve-ft-wt, var(--_ctm-dn-dt-ve-ft-wt))
702
- );
703
- font-style: var(
704
- --_ctm-mob-dn-dt-ve-ft-se-ic,
705
- var(--_ctm-tab-dn-dt-ve-ft-se-ic, var(--_ctm-dn-dt-ve-ft-se-ic))
706
- );
707
- text-align: var(
708
- --_ctm-mob-dn-dt-ve-tt-an,
709
- var(--_ctm-tab-dn-dt-ve-tt-an, var(--_ctm-dn-dt-ve-tt-an))
710
- );
711
- letter-spacing: var(
712
- --_ctm-mob-dn-dt-ve-lr-sg,
713
- var(--_ctm-tab-dn-dt-ve-lr-sg, var(--_ctm-dn-dt-ve-lr-sg))
714
- );
715
- line-height: var(
716
- --_ctm-mob-dn-dt-ve-le-ht,
717
- var(--_ctm-tab-dn-dt-ve-le-ht, var(--_ctm-dn-dt-ve-le-ht))
718
- );
719
- text-decoration: var(
720
- --_ctm-mob-dn-dt-ve-ue,
721
- var(--_ctm-tab-dn-dt-ve-ue, var(--_ctm-dn-dt-ve-ue))
722
- );
723
-
724
- border-color: var(
725
- --_show-border,
726
- var(
727
- --_ctm-mob-dn-dt-ve-br-cr,
728
- var(--_ctm-tab-dn-dt-ve-br-cr, var(--_ctm-dn-dt-ve-br-cr))
729
- )
730
- );
731
- border-style: var(
732
- --_show-border,
733
- var(
734
- --_ctm-mob-dn-dt-ve-br-se,
735
- var(--_ctm-tab-dn-dt-ve-br-se, var(--_ctm-dn-dt-ve-br-se))
736
- )
737
- );
738
- border-width: var(
739
- --_show-border,
740
- var(
741
- --_ctm-mob-dn-dt-ve-br-wh,
742
- var(--_ctm-tab-dn-dt-ve-br-wh, var(--_ctm-dn-dt-ve-br-wh))
743
- )
744
- );
745
- border-radius: var(
746
- --_ctm-mob-dn-dt-ve-br-rs,
747
- var(--_ctm-tab-dn-dt-ve-br-rs, var(--_ctm-dn-dt-ve-br-rs))
748
- );
625
+ }
626
+ .custom_amount_container {
627
+ display: flex;
628
+ flex-direction: column;
629
+ gap: 8px;
630
+ .custom_amount_label {
631
+ font-family: var(
632
+ --_ctm-mob-dn-gt-cd-ls-ft-fy,
633
+ var(--_ctm-tab-dn-gt-cd-ls-ft-fy, var(--_ctm-dn-gt-cd-ls-ft-fy))
634
+ );
635
+ color: var(
636
+ --_ctm-mob-dn-gt-cd-ls-cr,
637
+ var(--_ctm-tab-dn-gt-cd-ls-cr, var(--_ctm-dn-gt-cd-ls-cr))
638
+ );
639
+ font-weight: var(
640
+ --_ctm-mob-dn-gt-cd-ls-ft-wt,
641
+ var(--_ctm-tab-dn-gt-cd-ls-ft-wt, var(--_ctm-dn-gt-cd-ls-ft-wt))
642
+ );
643
+ font-size: var(
644
+ --_ctm-mob-dn-gt-cd-ls-ft-se,
645
+ var(--_ctm-tab-dn-gt-cd-ls-ft-se, var(--_ctm-dn-gt-cd-ls-ft-se))
646
+ );
647
+ text-decoration: var(
648
+ --_ctm-mob-dn-gt-cd-ls-ue,
649
+ var(--_ctm-tab-dn-gt-cd-ls-ue, var(--_ctm-dn-gt-cd-ls-ue))
650
+ );
651
+ letter-spacing: var(
652
+ --_ctm-mob-dn-gt-cd-ls-lr-sg,
653
+ var(--_ctm-tab-dn-gt-cd-ls-lr-sg, var(--_ctm-dn-gt-cd-ls-lr-sg))
654
+ );
655
+ line-height: var(
656
+ --_ctm-mob-dn-gt-cd-ls-le-ht,
657
+ var(--_ctm-tab-dn-gt-cd-ls-le-ht, var(--_ctm-dn-gt-cd-ls-le-ht))
658
+ );
659
+ font-style: var(
660
+ --_ctm-mob-dn-gt-cd-ls-ft-se-ic,
661
+ var(--_ctm-tab-dn-gt-cd-ls-ft-se-ic, var(--_ctm-dn-gt-cd-ls-ft-se-ic))
662
+ );
663
+ text-align: var(
664
+ --_ctm-mob-dn-gt-cd-ls-tt-an,
665
+ var(--_ctm-tab-dn-gt-cd-ls-tt-an, var(--_ctm-dn-gt-cd-ls-tt-an))
666
+ );
667
+ padding: var(
668
+ --_ctm-mob-dn-gt-cd-ls-pg,
669
+ var(--_ctm-tab-dn-gt-cd-ls-pg, var(--_ctm-dn-gt-cd-ls-pg))
670
+ );
671
+ }
672
+ .custom_amount_input {
673
+ height: 40px;
674
+ display: flex;
675
+ position: relative;
676
+ // gap: 6px;
677
+ align-items: center;
678
+ // border-radius: 4px;
679
+ // background: #fff;
680
+ // border: 1px solid #d0d5dd;
681
+ // padding: 8px 12px;
682
+ background-color: var(
683
+ --_ctm-mob-dn-gt-cd-is-bd-cr,
684
+ var(--_ctm-tab-dn-gt-cd-is-bd-cr, var(--_ctm-dn-gt-cd-is-bd-cr))
685
+ );
749
686
 
750
- box-shadow: var(
751
- --_show-shadow,
752
- var(
753
- --_ctm-mob-dn-dt-ve-sw-ae,
754
- var(--_ctm-tab-dn-dt-ve-sw-ae, var(--_ctm-dn-dt-ve-sw-ae))
755
- )
756
- var(
757
- --_ctm-mob-dn-dt-ve-sw-br,
758
- var(--_ctm-tab-dn-dt-ve-sw-br, var(--_ctm-dn-dt-ve-sw-br))
759
- )
760
- var(
761
- --_ctm-mob-dn-dt-ve-sw-sd,
762
- var(--_ctm-tab-dn-dt-ve-sw-sd, var(--_ctm-dn-dt-ve-sw-sd))
763
- )
764
- var(
765
- --_ctm-mob-dn-dt-ve-sw-cr,
766
- var(--_ctm-tab-dn-dt-ve-sw-cr, var(--_ctm-dn-dt-ve-sw-cr))
767
- )
768
- );
769
- }
687
+ border-color: var(
688
+ --_ctm-mob-dn-gt-cd-is-br-cr,
689
+ var(--_ctm-tab-dn-gt-cd-is-br-cr, var(--_ctm-dn-gt-cd-is-br-cr))
690
+ );
691
+ border-radius: var(
692
+ --_ctm-mob-dn-gt-cd-is-br-rs,
693
+ var(--_ctm-tab-dn-gt-cd-is-br-rs, var(--_ctm-dn-gt-cd-is-br-rs))
694
+ );
695
+ border-style: var(
696
+ --_ctm-mob-dn-gt-cd-is-br-se,
697
+ var(--_ctm-tab-dn-gt-cd-is-br-se, var(--_ctm-dn-gt-cd-is-br-se))
698
+ );
699
+ border-width: var(
700
+ --_ctm-mob-dn-gt-cd-is-br-wh,
701
+ var(--_ctm-tab-dn-gt-cd-is-br-wh, var(--_ctm-dn-gt-cd-is-br-wh))
702
+ );
703
+ padding: var(
704
+ --_ctm-mob-dn-gt-cd-is-pg,
705
+ var(--_ctm-tab-dn-gt-cd-is-pg, var(--_ctm-dn-gt-cd-is-pg))
706
+ );
707
+ // width: 220px;
708
+ transition:
709
+ background-color 0.2s,
710
+ color 0.2s,
711
+ border-color 0.2s,
712
+ box-shadow 0.2s;
713
+ .svg_icon {
714
+ color: var(--_gray-700);
715
+ font-weight: 500;
716
+ font-size: 14px;
717
+ line-height: 24px;
718
+ white-space: nowrap;
770
719
  }
771
- .product-actual-price {
772
- .actual-price-span {
773
- background-color: var(
774
- --_ctm-mob-dn-al-pe-bd-cr,
775
- var(--_ctm-tab-dn-al-pe-bd-cr, var(--_ctm-dn-al-pe-bd-cr))
776
- );
777
- color: var(
778
- --_ctm-mob-dn-al-pe-cr,
779
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
780
- );
720
+ input {
721
+ color: var(--_gray-700);
722
+ margin-top: 2px;
723
+ &::placeholder {
781
724
  font-family: var(
782
- --_ctm-mob-dn-al-pe-ft-fy,
783
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
784
- ),
785
- sans-serif;
786
- font-size: var(
787
- --_ctm-mob-dn-al-pe-ft-se,
788
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
789
- );
790
- font-weight: var(
791
- --_ctm-mob-dn-al-pe-ft-wt,
792
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
793
- );
794
- font-style: var(
795
- --_ctm-mob-dn-al-pe-ft-se-ic,
796
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
797
- );
798
- text-align: var(
799
- --_ctm-mob-dn-al-pe-tt-an,
800
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
801
- );
802
- letter-spacing: var(
803
- --_ctm-mob-dn-al-pe-lr-sg,
804
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
805
- );
806
- line-height: var(
807
- --_ctm-mob-dn-al-pe-le-ht,
808
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
809
- );
810
- text-decoration: var(
811
- --_ctm-mob-dn-al-pe-ue,
812
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
813
- );
814
-
815
- border-color: var(
816
- --_show-border,
817
- var(
818
- --_ctm-mob-dn-al-pe-br-cr,
819
- var(--_ctm-tab-dn-al-pe-br-cr, var(--_ctm-dn-al-pe-br-cr))
820
- )
821
- );
822
- border-style: var(
823
- --_show-border,
824
- var(
825
- --_ctm-mob-dn-al-pe-br-se,
826
- var(--_ctm-tab-dn-al-pe-br-se, var(--_ctm-dn-al-pe-br-se))
827
- )
828
- );
829
- border-width: var(
830
- --_show-border,
831
- var(
832
- --_ctm-mob-dn-al-pe-br-wh,
833
- var(--_ctm-tab-dn-al-pe-br-wh, var(--_ctm-dn-al-pe-br-wh))
834
- )
835
- );
836
- border-radius: var(
837
- --_ctm-mob-dn-al-pe-br-rs,
838
- var(--_ctm-tab-dn-al-pe-br-rs, var(--_ctm-dn-al-pe-br-rs))
839
- );
840
-
841
- box-shadow: var(
842
- --_show-shadow,
843
- var(
844
- --_ctm-mob-dn-al-pe-sw-ae,
845
- var(--_ctm-tab-dn-al-pe-sw-ae, var(--_ctm-dn-al-pe-sw-ae))
846
- )
847
- var(
848
- --_ctm-mob-dn-al-pe-sw-br,
849
- var(--_ctm-tab-dn-al-pe-sw-br, var(--_ctm-dn-al-pe-sw-br))
850
- )
851
- var(
852
- --_ctm-mob-dn-al-pe-sw-sd,
853
- var(--_ctm-tab-dn-al-pe-sw-sd, var(--_ctm-dn-al-pe-sw-sd))
854
- )
855
- var(
856
- --_ctm-mob-dn-al-pe-sw-cr,
857
- var(--_ctm-tab-dn-al-pe-sw-cr, var(--_ctm-dn-al-pe-sw-cr))
858
- )
859
- );
860
- }
861
-
862
- .code-span {
863
- background-color: var(
864
- --_ctm-mob-dn-cy-ce-se-bd-cr,
865
- var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
866
- );
867
- color: var(
868
- --_ctm-mob-dn-cy-ce-se-cr,
869
- var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
870
- );
871
- font-family: var(
872
- --_ctm-mob-dn-cy-ce-se-ft-fy,
873
- var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
874
- ),
875
- sans-serif;
876
- font-size: var(
877
- --_ctm-mob-dn-cy-ce-se-ft-se,
878
- var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
879
- );
880
- font-weight: var(
881
- --_ctm-mob-dn-cy-ce-se-ft-wt,
882
- var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
883
- );
884
- font-style: var(
885
- --_ctm-mob-dn-cy-ce-se-ft-se-ic,
886
- var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
887
- );
888
- text-align: var(
889
- --_ctm-mob-dn-cy-ce-se-tt-an,
890
- var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
891
- );
892
- letter-spacing: var(
893
- --_ctm-mob-dn-cy-ce-se-lr-sg,
894
- var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
895
- );
896
- line-height: var(
897
- --_ctm-mob-dn-cy-ce-se-le-ht,
898
- var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
899
- );
900
- text-decoration: var(
901
- --_ctm-mob-dn-cy-ce-se-ue,
902
- var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
903
- );
904
-
905
- border-color: var(
906
- --_show-border,
907
- var(
908
- --_ctm-mob-dn-cy-ce-se-br-cr,
909
- var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
910
- )
911
- );
912
- border-style: var(
913
- --_show-border,
914
- var(
915
- --_ctm-mob-dn-cy-ce-se-br-se,
916
- var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
917
- )
918
- );
919
- border-width: var(
920
- --_show-border,
921
- var(
922
- --_ctm-mob-dn-cy-ce-se-br-wh,
923
- var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
924
- )
925
- );
926
- border-radius: var(
927
- --_ctm-mob-dn-cy-ce-se-br-rs,
928
- var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
929
- );
930
-
931
- box-shadow: var(
932
- --_show-shadow,
933
- var(
934
- --_ctm-mob-dn-cy-ce-se-sw-ae,
935
- var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
936
- )
937
- var(
938
- --_ctm-mob-dn-cy-ce-se-sw-br,
939
- var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
940
- )
941
- var(
942
- --_ctm-mob-dn-cy-ce-se-sw-sd,
943
- var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
944
- )
945
- var(
946
- --_ctm-mob-dn-cy-ce-se-sw-cr,
947
- var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
948
- )
949
- );
950
- }
951
-
952
- .uom-span {
953
- background-color: var(
954
- --_ctm-mob-dn-um-se-bd-cr,
955
- var(--_ctm-tab-dn-um-se-bd-cr, var(--_ctm-dn-um-se-bd-cr))
725
+ --_ctm-mob-dn-gt-cd-is-ft-fy,
726
+ var(--_ctm-tab-dn-gt-cd-is-ft-fy, var(--_ctm-dn-gt-cd-is-ft-fy))
956
727
  );
957
728
  color: var(
958
- --_ctm-mob-dn-um-se-cr,
959
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
960
- );
961
- font-family: var(
962
- --_ctm-mob-dn-um-se-ft-fy,
963
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
964
- ),
965
- sans-serif;
966
- font-size: var(
967
- --_ctm-mob-dn-um-se-ft-se,
968
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
729
+ --_ctm-mob-dn-gt-cd-is-cr,
730
+ var(--_ctm-tab-dn-gt-cd-is-cr, var(--_ctm-dn-gt-cd-is-cr))
969
731
  );
970
732
  font-weight: var(
971
- --_ctm-mob-dn-um-se-ft-wt,
972
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
973
- );
974
- font-style: var(
975
- --_ctm-mob-dn-um-se-ft-se-ic,
976
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
977
- );
978
- text-align: var(
979
- --_ctm-mob-dn-um-se-tt-an,
980
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
981
- );
982
- letter-spacing: var(
983
- --_ctm-mob-dn-um-se-lr-sg,
984
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
985
- );
986
- line-height: var(
987
- --_ctm-mob-dn-um-se-le-ht,
988
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
989
- );
990
- text-decoration: var(
991
- --_ctm-mob-dn-um-se-ue,
992
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
993
- );
994
-
995
- border-color: var(
996
- --_show-border,
997
- var(
998
- --_ctm-mob-dn-um-se-br-cr,
999
- var(--_ctm-tab-dn-um-se-br-cr, var(--_ctm-dn-um-se-br-cr))
1000
- )
1001
- );
1002
- border-style: var(
1003
- --_show-border,
1004
- var(
1005
- --_ctm-mob-dn-um-se-br-se,
1006
- var(--_ctm-tab-dn-um-se-br-se, var(--_ctm-dn-um-se-br-se))
1007
- )
733
+ --_ctm-mob-dn-gt-cd-is-ft-wt,
734
+ var(--_ctm-tab-dn-gt-cd-is-ft-wt, var(--_ctm-dn-gt-cd-is-ft-wt))
1008
735
  );
1009
- border-width: var(
1010
- --_show-border,
1011
- var(
1012
- --_ctm-mob-dn-um-se-br-wh,
1013
- var(--_ctm-tab-dn-um-se-br-wh, var(--_ctm-dn-um-se-br-wh))
1014
- )
1015
- );
1016
- border-radius: var(
1017
- --_ctm-mob-dn-um-se-br-rs,
1018
- var(--_ctm-tab-dn-um-se-br-rs, var(--_ctm-dn-um-se-br-rs))
1019
- );
1020
-
1021
- box-shadow: var(
1022
- --_show-shadow,
1023
- var(
1024
- --_ctm-mob-dn-um-se-sw-ae,
1025
- var(--_ctm-tab-dn-um-se-sw-ae, var(--_ctm-dn-um-se-sw-ae))
1026
- )
1027
- var(
1028
- --_ctm-mob-dn-um-se-sw-br,
1029
- var(--_ctm-tab-dn-um-se-sw-br, var(--_ctm-dn-um-se-sw-br))
1030
- )
1031
- var(
1032
- --_ctm-mob-dn-um-se-sw-sd,
1033
- var(--_ctm-tab-dn-um-se-sw-sd, var(--_ctm-dn-um-se-sw-sd))
1034
- )
1035
- var(
1036
- --_ctm-mob-dn-um-se-sw-cr,
1037
- var(--_ctm-tab-dn-um-se-sw-cr, var(--_ctm-dn-um-se-sw-cr))
1038
- )
1039
- );
1040
- }
1041
- }
1042
- }
1043
- .product-savings {
1044
- .product-savings-wrapper {
1045
- .savings-percent-span {
1046
- background-color: var(
1047
- --_ctm-mob-dn-ss-bd-cr,
1048
- var(--_ctm-tab-dn-ss-bd-cr, var(--_ctm-dn-ss-bd-cr))
1049
- );
1050
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
1051
- font-family: var(
1052
- --_ctm-mob-dn-ss-ft-fy,
1053
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
1054
- ),
1055
- sans-serif;
1056
736
  font-size: var(
1057
- --_ctm-mob-dn-ss-ft-se,
1058
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
1059
- );
1060
- font-weight: var(
1061
- --_ctm-mob-dn-ss-ft-wt,
1062
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
1063
- );
1064
- font-style: var(
1065
- --_ctm-mob-dn-ss-ft-se-ic,
1066
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
1067
- );
1068
- text-align: var(
1069
- --_ctm-mob-dn-ss-tt-an,
1070
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
1071
- );
1072
- letter-spacing: var(
1073
- --_ctm-mob-dn-ss-lr-sg,
1074
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
1075
- );
1076
- line-height: var(
1077
- --_ctm-mob-dn-ss-le-ht,
1078
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
737
+ --_ctm-mob-dn-gt-cd-is-ft-se,
738
+ var(--_ctm-tab-dn-gt-cd-is-ft-se, var(--_ctm-dn-gt-cd-is-ft-se))
1079
739
  );
1080
740
  text-decoration: var(
1081
- --_ctm-mob-dn-ss-ue,
1082
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
1083
- );
1084
-
1085
- border-color: var(
1086
- --_show-border,
1087
- var(--_ctm-mob-dn-ss-br-cr, var(--_ctm-tab-dn-ss-br-cr, var(--_ctm-dn-ss-br-cr)))
1088
- );
1089
- border-style: var(
1090
- --_show-border,
1091
- var(--_ctm-mob-dn-ss-br-se, var(--_ctm-tab-dn-ss-br-se, var(--_ctm-dn-ss-br-se)))
1092
- );
1093
- border-width: var(
1094
- --_show-border,
1095
- var(--_ctm-mob-dn-ss-br-wh, var(--_ctm-tab-dn-ss-br-wh, var(--_ctm-dn-ss-br-wh)))
1096
- );
1097
- border-radius: var(
1098
- --_ctm-mob-dn-ss-br-rs,
1099
- var(--_ctm-tab-dn-ss-br-rs, var(--_ctm-dn-ss-br-rs))
1100
- );
1101
-
1102
- box-shadow: var(
1103
- --_show-shadow,
1104
- var(--_ctm-mob-dn-ss-sw-ae, var(--_ctm-tab-dn-ss-sw-ae, var(--_ctm-dn-ss-sw-ae)))
1105
- var(
1106
- --_ctm-mob-dn-ss-sw-br,
1107
- var(--_ctm-tab-dn-ss-sw-br, var(--_ctm-dn-ss-sw-br))
1108
- )
1109
- var(
1110
- --_ctm-mob-dn-ss-sw-sd,
1111
- var(--_ctm-tab-dn-ss-sw-sd, var(--_ctm-dn-ss-sw-sd))
1112
- )
1113
- var(
1114
- --_ctm-mob-dn-ss-sw-cr,
1115
- var(--_ctm-tab-dn-ss-sw-cr, var(--_ctm-dn-ss-sw-cr))
1116
- )
1117
- );
1118
- }
1119
- .savings-value-span {
1120
- background-color: var(
1121
- --_ctm-mob-dn-ss-ve-bd-cr,
1122
- var(--_ctm-tab-dn-ss-ve-bd-cr, var(--_ctm-dn-ss-ve-bd-cr))
1123
- );
1124
- color: var(
1125
- --_ctm-mob-dn-ss-ve-cr,
1126
- var(--_ctm-tab-dn-ss-ve-cr, var(--_ctm-dn-ss-ve-cr))
1127
- );
1128
- font-family: var(
1129
- --_ctm-mob-dn-ss-ve-ft-fy,
1130
- var(--_ctm-tab-dn-ss-ve-ft-fy, var(--_ctm-dn-ss-ve-ft-fy))
1131
- ),
1132
- sans-serif;
1133
- font-size: var(
1134
- --_ctm-mob-dn-ss-ve-ft-se,
1135
- var(--_ctm-tab-dn-ss-ve-ft-se, var(--_ctm-dn-ss-ve-ft-se))
1136
- );
1137
- font-weight: var(
1138
- --_ctm-mob-dn-ss-ve-ft-wt,
1139
- var(--_ctm-tab-dn-ss-ve-ft-wt, var(--_ctm-dn-ss-ve-ft-wt))
1140
- );
1141
- font-style: var(
1142
- --_ctm-mob-dn-ss-ve-ft-se-ic,
1143
- var(--_ctm-tab-dn-ss-ve-ft-se-ic, var(--_ctm-dn-ss-ve-ft-se-ic))
1144
- );
1145
- text-align: var(
1146
- --_ctm-mob-dn-ss-ve-tt-an,
1147
- var(--_ctm-tab-dn-ss-ve-tt-an, var(--_ctm-dn-ss-ve-tt-an))
741
+ --_ctm-mob-dn-gt-cd-is-ue,
742
+ var(--_ctm-tab-dn-gt-cd-is-ue, var(--_ctm-dn-gt-cd-is-ue))
1148
743
  );
1149
744
  letter-spacing: var(
1150
- --_ctm-mob-dn-ss-ve-lr-sg,
1151
- var(--_ctm-tab-dn-ss-ve-lr-sg, var(--_ctm-dn-ss-ve-lr-sg))
745
+ --_ctm-mob-dn-gt-cd-is-lr-sg,
746
+ var(--_ctm-tab-dn-gt-cd-is-lr-sg, var(--_ctm-dn-gt-cd-is-lr-sg))
1152
747
  );
1153
748
  line-height: var(
1154
- --_ctm-mob-dn-ss-ve-le-ht,
1155
- var(--_ctm-tab-dn-ss-ve-le-ht, var(--_ctm-dn-ss-ve-le-ht))
1156
- );
1157
- text-decoration: var(
1158
- --_ctm-mob-dn-ss-ve-ue,
1159
- var(--_ctm-tab-dn-ss-ve-ue, var(--_ctm-dn-ss-ve-ue))
1160
- );
1161
-
1162
- border-color: var(
1163
- --_show-border,
1164
- var(
1165
- --_ctm-mob-dn-ss-ve-br-cr,
1166
- var(--_ctm-tab-dn-ss-ve-br-cr, var(--_ctm-dn-ss-ve-br-cr))
1167
- )
1168
- );
1169
- border-style: var(
1170
- --_show-border,
1171
- var(
1172
- --_ctm-mob-dn-ss-ve-br-se,
1173
- var(--_ctm-tab-dn-ss-ve-br-se, var(--_ctm-dn-ss-ve-br-se))
1174
- )
1175
- );
1176
- border-width: var(
1177
- --_show-border,
1178
- var(
1179
- --_ctm-mob-dn-ss-ve-br-wh,
1180
- var(--_ctm-tab-dn-ss-ve-br-wh, var(--_ctm-dn-ss-ve-br-wh))
1181
- )
1182
- );
1183
- border-radius: var(
1184
- --_ctm-mob-dn-ss-ve-br-rs,
1185
- var(--_ctm-tab-dn-ss-ve-br-rs, var(--_ctm-dn-ss-ve-br-rs))
1186
- );
1187
-
1188
- box-shadow: var(
1189
- --_show-shadow,
1190
- var(
1191
- --_ctm-mob-dn-ss-ve-sw-ae,
1192
- var(--_ctm-tab-dn-ss-ve-sw-ae, var(--_ctm-dn-ss-ve-sw-ae))
1193
- )
1194
- var(
1195
- --_ctm-mob-dn-ss-ve-sw-br,
1196
- var(--_ctm-tab-dn-ss-ve-sw-br, var(--_ctm-dn-ss-ve-sw-br))
1197
- )
1198
- var(
1199
- --_ctm-mob-dn-ss-ve-sw-sd,
1200
- var(--_ctm-tab-dn-ss-ve-sw-sd, var(--_ctm-dn-ss-ve-sw-sd))
1201
- )
1202
- var(
1203
- --_ctm-mob-dn-ss-ve-sw-cr,
1204
- var(--_ctm-tab-dn-ss-ve-sw-cr, var(--_ctm-dn-ss-ve-sw-cr))
1205
- )
1206
- );
1207
- }
1208
- .code-span {
1209
- background-color: var(
1210
- --_ctm-mob-dn-cy-ce-se-bd-cr,
1211
- var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
1212
- );
1213
- color: var(
1214
- --_ctm-mob-dn-cy-ce-se-cr,
1215
- var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
1216
- );
1217
- font-family: var(
1218
- --_ctm-mob-dn-cy-ce-se-ft-fy,
1219
- var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
1220
- ),
1221
- sans-serif;
1222
- font-size: var(
1223
- --_ctm-mob-dn-cy-ce-se-ft-se,
1224
- var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
1225
- );
1226
- font-weight: var(
1227
- --_ctm-mob-dn-cy-ce-se-ft-wt,
1228
- var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
749
+ --_ctm-mob-dn-gt-cd-is-le-ht,
750
+ var(--_ctm-tab-dn-gt-cd-is-le-ht, var(--_ctm-dn-gt-cd-is-le-ht))
1229
751
  );
1230
752
  font-style: var(
1231
- --_ctm-mob-dn-cy-ce-se-ft-se-ic,
1232
- var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
753
+ --_ctm-mob-dn-gt-cd-is-ft-se-ic,
754
+ var(--_ctm-tab-dn-gt-cd-is-ft-se-ic, var(--_ctm-dn-gt-cd-is-ft-se-ic))
1233
755
  );
1234
756
  text-align: var(
1235
- --_ctm-mob-dn-cy-ce-se-tt-an,
1236
- var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
1237
- );
1238
- letter-spacing: var(
1239
- --_ctm-mob-dn-cy-ce-se-lr-sg,
1240
- var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
1241
- );
1242
- line-height: var(
1243
- --_ctm-mob-dn-cy-ce-se-le-ht,
1244
- var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
1245
- );
1246
- text-decoration: var(
1247
- --_ctm-mob-dn-cy-ce-se-ue,
1248
- var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
1249
- );
1250
-
1251
- border-color: var(
1252
- --_show-border,
1253
- var(
1254
- --_ctm-mob-dn-cy-ce-se-br-cr,
1255
- var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
1256
- )
1257
- );
1258
- border-style: var(
1259
- --_show-border,
1260
- var(
1261
- --_ctm-mob-dn-cy-ce-se-br-se,
1262
- var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
1263
- )
1264
- );
1265
- border-width: var(
1266
- --_show-border,
1267
- var(
1268
- --_ctm-mob-dn-cy-ce-se-br-wh,
1269
- var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
1270
- )
1271
- );
1272
- border-radius: var(
1273
- --_ctm-mob-dn-cy-ce-se-br-rs,
1274
- var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
1275
- );
1276
-
1277
- box-shadow: var(
1278
- --_show-shadow,
1279
- var(
1280
- --_ctm-mob-dn-cy-ce-se-sw-ae,
1281
- var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
1282
- )
1283
- var(
1284
- --_ctm-mob-dn-cy-ce-se-sw-br,
1285
- var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
1286
- )
1287
- var(
1288
- --_ctm-mob-dn-cy-ce-se-sw-sd,
1289
- var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
1290
- )
1291
- var(
1292
- --_ctm-mob-dn-cy-ce-se-sw-cr,
1293
- var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
1294
- )
757
+ --_ctm-mob-dn-gt-cd-is-tt-an,
758
+ var(--_ctm-tab-dn-gt-cd-is-tt-an, var(--_ctm-dn-gt-cd-is-tt-an))
1295
759
  );
760
+ // color: var(--_gray-500);
761
+ // font-weight: 500;
762
+ // font-size: 14px;
763
+ // line-height: 24px;
1296
764
  }
1297
765
  }
1298
- }
1299
- .total-price-container {
1300
- .tax-box {
1301
- display: flex;
1302
- align-items: center;
1303
- justify-content: space-between;
1304
- gap: 5px;
1305
-
1306
- background-color: var(
1307
- --_ctm-mob-dn-pt-tx-bd-cr,
1308
- var(--_ctm-tab-dn-pt-tx-bd-cr, var(--_ctm-dn-pt-tx-bd-cr))
1309
- );
1310
- color: var(
1311
- --_ctm-mob-dn-pt-tx-cr,
1312
- var(--_ctm-tab-dn-pt-tx-cr, var(--_ctm-dn-pt-tx-cr))
1313
- );
1314
- font-family: var(
1315
- --_ctm-mob-dn-pt-tx-ft-fy,
1316
- var(--_ctm-tab-dn-pt-tx-ft-fy, var(--_ctm-dn-pt-tx-ft-fy))
1317
- ),
1318
- sans-serif;
1319
- font-size: var(
1320
- --_ctm-mob-dn-pt-tx-ft-se,
1321
- var(--_ctm-tab-dn-pt-tx-ft-se, var(--_ctm-dn-pt-tx-ft-se))
1322
- );
1323
- font-weight: var(
1324
- --_ctm-mob-dn-pt-tx-ft-wt,
1325
- var(--_ctm-tab-dn-pt-tx-ft-wt, var(--_ctm-dn-pt-tx-ft-wt))
1326
- );
1327
- font-style: var(
1328
- --_ctm-mob-dn-pt-tx-ft-se-ic,
1329
- var(--_ctm-tab-dn-pt-tx-ft-se-ic, var(--_ctm-dn-pt-tx-ft-se-ic))
1330
- );
1331
- text-align: var(
1332
- --_ctm-mob-dn-pt-tx-tt-an,
1333
- var(--_ctm-tab-dn-pt-tx-tt-an, var(--_ctm-dn-pt-tx-tt-an))
1334
- );
1335
- letter-spacing: var(
1336
- --_ctm-mob-dn-pt-tx-lr-sg,
1337
- var(--_ctm-tab-dn-pt-tx-lr-sg, var(--_ctm-dn-pt-tx-lr-sg))
1338
- );
1339
- line-height: var(
1340
- --_ctm-mob-dn-pt-tx-le-ht,
1341
- var(--_ctm-tab-dn-pt-tx-le-ht, var(--_ctm-dn-pt-tx-le-ht))
1342
- );
1343
- text-decoration: var(
1344
- --_ctm-mob-dn-pt-tx-ue,
1345
- var(--_ctm-tab-dn-pt-tx-ue, var(--_ctm-dn-pt-tx-ue))
1346
- );
1347
-
1348
- border-color: var(
1349
- --_show-border,
1350
- var(
1351
- --_ctm-mob-dn-pt-tx-br-cr,
1352
- var(--_ctm-tab-dn-pt-tx-br-cr, var(--_ctm-dn-pt-tx-br-cr))
1353
- )
1354
- );
1355
- border-style: var(
1356
- --_show-border,
1357
- var(
1358
- --_ctm-mob-dn-pt-tx-br-se,
1359
- var(--_ctm-tab-dn-pt-tx-br-se, var(--_ctm-dn-pt-tx-br-se))
1360
- )
1361
- );
1362
- border-width: var(
1363
- --_show-border,
1364
- var(
1365
- --_ctm-mob-dn-pt-tx-br-wh,
1366
- var(--_ctm-tab-dn-pt-tx-br-wh, var(--_ctm-dn-pt-tx-br-wh))
1367
- )
1368
- );
1369
- border-radius: var(
1370
- --_ctm-mob-dn-pt-tx-br-rs,
1371
- var(--_ctm-tab-dn-pt-tx-br-rs, var(--_ctm-dn-pt-tx-br-rs))
1372
- );
1373
-
1374
- box-shadow: var(
1375
- --_show-shadow,
1376
- var(
1377
- --_ctm-mob-dn-pt-tx-sw-ae,
1378
- var(--_ctm-tab-dn-pt-tx-sw-ae, var(--_ctm-dn-pt-tx-sw-ae))
1379
- )
1380
- var(
1381
- --_ctm-mob-dn-pt-tx-sw-br,
1382
- var(--_ctm-tab-dn-pt-tx-sw-br, var(--_ctm-dn-pt-tx-sw-br))
1383
- )
1384
- var(
1385
- --_ctm-mob-dn-pt-tx-sw-sd,
1386
- var(--_ctm-tab-dn-pt-tx-sw-sd, var(--_ctm-dn-pt-tx-sw-sd))
1387
- )
1388
- var(
1389
- --_ctm-mob-dn-pt-tx-sw-cr,
1390
- var(--_ctm-tab-dn-pt-tx-sw-cr, var(--_ctm-dn-pt-tx-sw-cr))
1391
- )
1392
- );
1393
- }
1394
- .shipping-box {
1395
- display: flex;
1396
- align-items: center;
1397
- justify-content: space-between;
1398
- gap: 5px;
1399
-
1400
- background-color: var(
1401
- --_ctm-mob-dn-pt-sg-pe-bd-cr,
1402
- var(--_ctm-tab-dn-pt-sg-pe-bd-cr, var(--_ctm-dn-pt-sg-pe-bd-cr))
1403
- );
1404
- color: var(
1405
- --_ctm-mob-dn-pt-sg-pe-cr,
1406
- var(--_ctm-tab-dn-pt-sg-pe-cr, var(--_ctm-dn-pt-sg-pe-cr))
1407
- );
1408
- font-family: var(
1409
- --_ctm-mob-dn-pt-sg-pe-ft-fy,
1410
- var(--_ctm-tab-dn-pt-sg-pe-ft-fy, var(--_ctm-dn-pt-sg-pe-ft-fy))
1411
- ),
1412
- sans-serif;
1413
- font-size: var(
1414
- --_ctm-mob-dn-pt-sg-pe-ft-se,
1415
- var(--_ctm-tab-dn-pt-sg-pe-ft-se, var(--_ctm-dn-pt-sg-pe-ft-se))
1416
- );
1417
- font-weight: var(
1418
- --_ctm-mob-dn-pt-sg-pe-ft-wt,
1419
- var(--_ctm-tab-dn-pt-sg-pe-ft-wt, var(--_ctm-dn-pt-sg-pe-ft-wt))
1420
- );
1421
- font-style: var(
1422
- --_ctm-mob-dn-pt-sg-pe-ft-se-ic,
1423
- var(--_ctm-tab-dn-pt-sg-pe-ft-se-ic, var(--_ctm-dn-pt-sg-pe-ft-se-ic))
1424
- );
1425
- text-align: var(
1426
- --_ctm-mob-dn-pt-sg-pe-tt-an,
1427
- var(--_ctm-tab-dn-pt-sg-pe-tt-an, var(--_ctm-dn-pt-sg-pe-tt-an))
1428
- );
1429
- letter-spacing: var(
1430
- --_ctm-mob-dn-pt-sg-pe-lr-sg,
1431
- var(--_ctm-tab-dn-pt-sg-pe-lr-sg, var(--_ctm-dn-pt-sg-pe-lr-sg))
1432
- );
1433
- line-height: var(
1434
- --_ctm-mob-dn-pt-sg-pe-le-ht,
1435
- var(--_ctm-tab-dn-pt-sg-pe-le-ht, var(--_ctm-dn-pt-sg-pe-le-ht))
1436
- );
1437
- text-decoration: var(
1438
- --_ctm-mob-dn-pt-sg-pe-ue,
1439
- var(--_ctm-tab-dn-pt-sg-pe-ue, var(--_ctm-dn-pt-sg-pe-ue))
1440
- );
1441
-
1442
- border-color: var(
1443
- --_show-border,
1444
- var(
1445
- --_ctm-mob-dn-pt-sg-pe-br-cr,
1446
- var(--_ctm-tab-dn-pt-sg-pe-br-cr, var(--_ctm-dn-pt-sg-pe-br-cr))
1447
- )
1448
- );
1449
- border-style: var(
1450
- --_show-border,
1451
- var(
1452
- --_ctm-mob-dn-pt-sg-pe-br-se,
1453
- var(--_ctm-tab-dn-pt-sg-pe-br-se, var(--_ctm-dn-pt-sg-pe-br-se))
1454
- )
1455
- );
1456
- border-width: var(
1457
- --_show-border,
1458
- var(
1459
- --_ctm-mob-dn-pt-sg-pe-br-wh,
1460
- var(--_ctm-tab-dn-pt-sg-pe-br-wh, var(--_ctm-dn-pt-sg-pe-br-wh))
1461
- )
1462
- );
1463
- border-radius: var(
1464
- --_ctm-mob-dn-pt-sg-pe-br-rs,
1465
- var(--_ctm-tab-dn-pt-sg-pe-br-rs, var(--_ctm-dn-pt-sg-pe-br-rs))
1466
- );
1467
-
1468
- box-shadow: var(
1469
- --_show-shadow,
1470
- var(
1471
- --_ctm-mob-dn-pt-sg-pe-sw-ae,
1472
- var(--_ctm-tab-dn-pt-sg-pe-sw-ae, var(--_ctm-dn-pt-sg-pe-sw-ae))
1473
- )
1474
- var(
1475
- --_ctm-mob-dn-pt-sg-pe-sw-br,
1476
- var(--_ctm-tab-dn-pt-sg-pe-sw-br, var(--_ctm-dn-pt-sg-pe-sw-br))
1477
- )
1478
- var(
1479
- --_ctm-mob-dn-pt-sg-pe-sw-sd,
1480
- var(--_ctm-tab-dn-pt-sg-pe-sw-sd, var(--_ctm-dn-pt-sg-pe-sw-sd))
1481
- )
1482
- var(
1483
- --_ctm-mob-dn-pt-sg-pe-sw-cr,
1484
- var(--_ctm-tab-dn-pt-sg-pe-sw-cr, var(--_ctm-dn-pt-sg-pe-sw-cr))
1485
- )
1486
- );
766
+ &:focus-within {
767
+ outline: 0 none;
768
+ outline-offset: 0;
769
+ border-radius: 4px;
770
+ box-shadow:
771
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
772
+ 0px 0px 0px 2px var(--_primary-100);
773
+ border: 1px solid var(--_primary-300);
1487
774
  }
1488
- .embellishment-box {
1489
- display: flex;
1490
- align-items: center;
1491
- justify-content: space-between;
1492
- gap: 5px;
1493
-
1494
- background-color: var(
1495
- --_ctm-mob-dn-et-pe-bd-cr,
1496
- var(--_ctm-tab-dn-et-pe-bd-cr, var(--_ctm-dn-et-pe-bd-cr))
1497
- );
1498
- color: var(
1499
- --_ctm-mob-dn-et-pe-cr,
1500
- var(--_ctm-tab-dn-et-pe-cr, var(--_ctm-dn-et-pe-cr))
1501
- );
1502
- font-family: var(
1503
- --_ctm-mob-dn-et-pe-ft-fy,
1504
- var(--_ctm-tab-dn-et-pe-ft-fy, var(--_ctm-dn-et-pe-ft-fy))
1505
- ),
1506
- sans-serif;
1507
- font-size: var(
1508
- --_ctm-mob-dn-et-pe-ft-se,
1509
- var(--_ctm-tab-dn-et-pe-ft-se, var(--_ctm-dn-et-pe-ft-se))
775
+ }
776
+ }
777
+ .delivery_details_container {
778
+ display: flex;
779
+ flex-direction: column;
780
+ gap: var(
781
+ --_ctm-mob-dn-gt-cd-cd-wr-im-gp,
782
+ var(--_ctm-tab-dn-gt-cd-cd-wr-im-gp, var(--_ctm-dn-gt-cd-cd-wr-im-gp))
783
+ );
784
+ .delivery_details_title {
785
+ display: inline-block;
786
+ // margin-top: 8px;
787
+ // margin-bottom: 4px;
788
+ // font-size: 16px;
789
+ // color: #000000;
790
+ // font-weight: 500;
791
+ // line-height: 150%;
792
+ font-family: var(
793
+ --_ctm-mob-dn-gt-cd-ts-ft-fy,
794
+ var(--_ctm-tab-dn-gt-cd-ts-ft-fy, var(--_ctm-dn-gt-cd-ts-ft-fy))
795
+ );
796
+ color: var(
797
+ --_ctm-mob-dn-gt-cd-ts-cr,
798
+ var(--_ctm-tab-dn-gt-cd-ts-cr, var(--_ctm-dn-gt-cd-ts-cr))
799
+ );
800
+ font-weight: var(
801
+ --_ctm-mob-dn-gt-cd-ts-ft-wt,
802
+ var(--_ctm-tab-dn-gt-cd-ts-ft-wt, var(--_ctm-dn-gt-cd-ts-ft-wt))
803
+ );
804
+ font-size: var(
805
+ --_ctm-mob-dn-gt-cd-ts-ft-se,
806
+ var(--_ctm-tab-dn-gt-cd-ts-ft-se, var(--_ctm-dn-gt-cd-ts-ft-se))
807
+ );
808
+ text-decoration: var(
809
+ --_ctm-mob-dn-gt-cd-ts-ue,
810
+ var(--_ctm-tab-dn-gt-cd-ts-ue, var(--_ctm-dn-gt-cd-ts-ue))
811
+ );
812
+ letter-spacing: var(
813
+ --_ctm-mob-dn-gt-cd-ts-lr-sg,
814
+ var(--_ctm-tab-dn-gt-cd-ts-lr-sg, var(--_ctm-dn-gt-cd-ts-lr-sg))
815
+ );
816
+ line-height: var(
817
+ --_ctm-mob-dn-gt-cd-ts-le-ht,
818
+ var(--_ctm-tab-dn-gt-cd-ts-le-ht, var(--_ctm-dn-gt-cd-ts-le-ht))
819
+ );
820
+ font-style: var(
821
+ --_ctm-mob-dn-gt-cd-ts-ft-se-ic,
822
+ var(--_ctm-tab-dn-gt-cd-ts-ft-se-ic, var(--_ctm-dn-gt-cd-ts-ft-se-ic))
823
+ );
824
+ text-align: var(
825
+ --_ctm-mob-dn-gt-cd-ts-tt-an,
826
+ var(--_ctm-tab-dn-gt-cd-ts-tt-an, var(--_ctm-dn-gt-cd-ts-tt-an))
827
+ );
828
+ }
829
+ .horizontal_line {
830
+ // border: 1px solid #d0d5dd;
831
+ // display: block;
832
+ // width: 100%;
833
+ // border-style: var(--_ctm-dn-gt-cd-dr-dr-se);
834
+ // border-color: var(--_ctm-dn-gt-cd-dr-dr-cr);
835
+ // border-width: var(--_ctm-dn-gt-cd-dr-dr-wh);
836
+ border-top: var(--_ctm-dn-gt-cd-dr-dr-wh) var(--_ctm-dn-gt-cd-dr-dr-se)
837
+ var(--_ctm-dn-gt-cd-dr-dr-cr);
838
+ }
839
+ .input_container {
840
+ display: flex;
841
+ flex-direction: column;
842
+ gap: 8px;
843
+ // margin-bottom: 12px;
844
+
845
+ &:last-child {
846
+ margin-bottom: 0;
847
+ }
848
+ label {
849
+ display: block;
850
+ font-family: var(
851
+ --_ctm-mob-dn-gt-cd-ls-ft-fy,
852
+ var(--_ctm-tab-dn-gt-cd-ls-ft-fy, var(--_ctm-dn-gt-cd-ls-ft-fy))
853
+ );
854
+ color: var(
855
+ --_ctm-mob-dn-gt-cd-ls-cr,
856
+ var(--_ctm-tab-dn-gt-cd-ls-cr, var(--_ctm-dn-gt-cd-ls-cr))
1510
857
  );
1511
858
  font-weight: var(
1512
- --_ctm-mob-dn-et-pe-ft-wt,
1513
- var(--_ctm-tab-dn-et-pe-ft-wt, var(--_ctm-dn-et-pe-ft-wt))
859
+ --_ctm-mob-dn-gt-cd-ls-ft-wt,
860
+ var(--_ctm-tab-dn-gt-cd-ls-ft-wt, var(--_ctm-dn-gt-cd-ls-ft-wt))
1514
861
  );
1515
- font-style: var(
1516
- --_ctm-mob-dn-et-pe-ft-se-ic,
1517
- var(--_ctm-tab-dn-et-pe-ft-se-ic, var(--_ctm-dn-et-pe-ft-se-ic))
862
+ font-size: var(
863
+ --_ctm-mob-dn-gt-cd-ls-ft-se,
864
+ var(--_ctm-tab-dn-gt-cd-ls-ft-se, var(--_ctm-dn-gt-cd-ls-ft-se))
1518
865
  );
1519
- text-align: var(
1520
- --_ctm-mob-dn-et-pe-tt-an,
1521
- var(--_ctm-tab-dn-et-pe-tt-an, var(--_ctm-dn-et-pe-tt-an))
866
+ text-decoration: var(
867
+ --_ctm-mob-dn-gt-cd-ls-ue,
868
+ var(--_ctm-tab-dn-gt-cd-ls-ue, var(--_ctm-dn-gt-cd-ls-ue))
1522
869
  );
1523
870
  letter-spacing: var(
1524
- --_ctm-mob-dn-et-pe-lr-sg,
1525
- var(--_ctm-tab-dn-et-pe-lr-sg, var(--_ctm-dn-et-pe-lr-sg))
871
+ --_ctm-mob-dn-gt-cd-ls-lr-sg,
872
+ var(--_ctm-tab-dn-gt-cd-ls-lr-sg, var(--_ctm-dn-gt-cd-ls-lr-sg))
1526
873
  );
1527
874
  line-height: var(
1528
- --_ctm-mob-dn-et-pe-le-ht,
1529
- var(--_ctm-tab-dn-et-pe-le-ht, var(--_ctm-dn-et-pe-le-ht))
875
+ --_ctm-mob-dn-gt-cd-ls-le-ht,
876
+ var(--_ctm-tab-dn-gt-cd-ls-le-ht, var(--_ctm-dn-gt-cd-ls-le-ht))
1530
877
  );
1531
- text-decoration: var(
1532
- --_ctm-mob-dn-et-pe-ue,
1533
- var(--_ctm-tab-dn-et-pe-ue, var(--_ctm-dn-et-pe-ue))
878
+ font-style: var(
879
+ --_ctm-mob-dn-gt-cd-ls-ft-se-ic,
880
+ var(--_ctm-tab-dn-gt-cd-ls-ft-se-ic, var(--_ctm-dn-gt-cd-ls-ft-se-ic))
881
+ );
882
+ text-align: var(
883
+ --_ctm-mob-dn-gt-cd-ls-tt-an,
884
+ var(--_ctm-tab-dn-gt-cd-ls-tt-an, var(--_ctm-dn-gt-cd-ls-tt-an))
885
+ );
886
+ padding: var(
887
+ --_ctm-mob-dn-gt-cd-ls-pg,
888
+ var(--_ctm-tab-dn-gt-cd-ls-pg, var(--_ctm-dn-gt-cd-ls-pg))
889
+ );
890
+ // color: var(--_gray-700);
891
+ // font-weight: 400;
892
+ // font-size: 14px;
893
+ // line-height: 20px;
894
+ }
895
+ .message_text {
896
+ resize: none;
897
+ // background-color: var(--_base-white);
898
+ // padding: 5px 12px;
899
+ // border: 1px solid var(--_gray-300);
900
+ // border-radius: 4px;
901
+ background-color: var(
902
+ --_ctm-mob-dn-gt-cd-is-bd-cr,
903
+ var(--_ctm-tab-dn-gt-cd-is-bd-cr, var(--_ctm-dn-gt-cd-is-bd-cr))
1534
904
  );
1535
905
 
1536
906
  border-color: var(
1537
- --_show-border,
1538
- var(
1539
- --_ctm-mob-dn-et-pe-br-cr,
1540
- var(--_ctm-tab-dn-et-pe-br-cr, var(--_ctm-dn-et-pe-br-cr))
1541
- )
907
+ --_ctm-mob-dn-gt-cd-is-br-cr,
908
+ var(--_ctm-tab-dn-gt-cd-is-br-cr, var(--_ctm-dn-gt-cd-is-br-cr))
909
+ );
910
+ border-radius: var(
911
+ --_ctm-mob-dn-gt-cd-is-br-rs,
912
+ var(--_ctm-tab-dn-gt-cd-is-br-rs, var(--_ctm-dn-gt-cd-is-br-rs))
1542
913
  );
1543
914
  border-style: var(
1544
- --_show-border,
1545
- var(
1546
- --_ctm-mob-dn-et-pe-br-se,
1547
- var(--_ctm-tab-dn-et-pe-br-se, var(--_ctm-dn-et-pe-br-se))
1548
- )
915
+ --_ctm-mob-dn-gt-cd-is-br-se,
916
+ var(--_ctm-tab-dn-gt-cd-is-br-se, var(--_ctm-dn-gt-cd-is-br-se))
1549
917
  );
1550
918
  border-width: var(
1551
- --_show-border,
1552
- var(
1553
- --_ctm-mob-dn-et-pe-br-wh,
1554
- var(--_ctm-tab-dn-et-pe-br-wh, var(--_ctm-dn-et-pe-br-wh))
1555
- )
919
+ --_ctm-mob-dn-gt-cd-is-br-wh,
920
+ var(--_ctm-tab-dn-gt-cd-is-br-wh, var(--_ctm-dn-gt-cd-is-br-wh))
921
+ );
922
+ padding: var(
923
+ --_ctm-mob-dn-gt-cd-is-pg,
924
+ var(--_ctm-tab-dn-gt-cd-is-pg, var(--_ctm-dn-gt-cd-is-pg))
925
+ );
926
+ // margin-bottom: 8px;
927
+ transition:
928
+ background-color 0.2s,
929
+ color 0.2s,
930
+ border-color 0.2s,
931
+ box-shadow 0.2s;
932
+ height: 90px;
933
+ &::placeholder {
934
+ // color: var(--_gray-500);
935
+ // font-weight: 500;
936
+ // font-size: 14px;
937
+ // line-height: 24px;
938
+ font-family: var(
939
+ --_ctm-mob-dn-gt-cd-is-ft-fy,
940
+ var(--_ctm-tab-dn-gt-cd-is-ft-fy, var(--_ctm-dn-gt-cd-is-ft-fy))
941
+ );
942
+ color: var(
943
+ --_ctm-mob-dn-gt-cd-is-cr,
944
+ var(--_ctm-tab-dn-gt-cd-is-cr, var(--_ctm-dn-gt-cd-is-cr))
945
+ );
946
+ font-weight: var(
947
+ --_ctm-mob-dn-gt-cd-is-ft-wt,
948
+ var(--_ctm-tab-dn-gt-cd-is-ft-wt, var(--_ctm-dn-gt-cd-is-ft-wt))
949
+ );
950
+ font-size: var(
951
+ --_ctm-mob-dn-gt-cd-is-ft-se,
952
+ var(--_ctm-tab-dn-gt-cd-is-ft-se, var(--_ctm-dn-gt-cd-is-ft-se))
953
+ );
954
+ text-decoration: var(
955
+ --_ctm-mob-dn-gt-cd-is-ue,
956
+ var(--_ctm-tab-dn-gt-cd-is-ue, var(--_ctm-dn-gt-cd-is-ue))
957
+ );
958
+ letter-spacing: var(
959
+ --_ctm-mob-dn-gt-cd-is-lr-sg,
960
+ var(--_ctm-tab-dn-gt-cd-is-lr-sg, var(--_ctm-dn-gt-cd-is-lr-sg))
961
+ );
962
+ line-height: var(
963
+ --_ctm-mob-dn-gt-cd-is-le-ht,
964
+ var(--_ctm-tab-dn-gt-cd-is-le-ht, var(--_ctm-dn-gt-cd-is-le-ht))
965
+ );
966
+ font-style: var(
967
+ --_ctm-mob-dn-gt-cd-is-ft-se-ic,
968
+ var(--_ctm-tab-dn-gt-cd-is-ft-se-ic, var(--_ctm-dn-gt-cd-is-ft-se-ic))
969
+ );
970
+ text-align: var(
971
+ --_ctm-mob-dn-gt-cd-is-tt-an,
972
+ var(--_ctm-tab-dn-gt-cd-is-tt-an, var(--_ctm-dn-gt-cd-is-tt-an))
973
+ );
974
+ }
975
+ &:focus {
976
+ outline: 0 none;
977
+ outline-offset: 0;
978
+ border-radius: 4px;
979
+ box-shadow:
980
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
981
+ 0px 0px 0px 2px var(--_primary-100);
982
+ border: 1px solid var(--_primary-300);
983
+ }
984
+ }
985
+ input {
986
+ // background-color: var(--_base-white);
987
+ // padding: 8px 12px;
988
+ // border: 1px solid var(--_gray-300);
989
+ // border-radius: 4px;
990
+ height: 40px;
991
+
992
+ background-color: var(
993
+ --_ctm-mob-dn-gt-cd-is-bd-cr,
994
+ var(--_ctm-tab-dn-gt-cd-is-bd-cr, var(--_ctm-dn-gt-cd-is-bd-cr))
995
+ );
996
+
997
+ border-color: var(
998
+ --_ctm-mob-dn-gt-cd-is-br-cr,
999
+ var(--_ctm-tab-dn-gt-cd-is-br-cr, var(--_ctm-dn-gt-cd-is-br-cr))
1556
1000
  );
1557
1001
  border-radius: var(
1558
- --_ctm-mob-dn-et-pe-br-rs,
1559
- var(--_ctm-tab-dn-et-pe-br-rs, var(--_ctm-dn-et-pe-br-rs))
1002
+ --_ctm-mob-dn-gt-cd-is-br-rs,
1003
+ var(--_ctm-tab-dn-gt-cd-is-br-rs, var(--_ctm-dn-gt-cd-is-br-rs))
1560
1004
  );
1561
-
1562
- box-shadow: var(
1563
- --_show-shadow,
1564
- var(
1565
- --_ctm-mob-dn-et-pe-sw-ae,
1566
- var(--_ctm-tab-dn-et-pe-sw-ae, var(--_ctm-dn-et-pe-sw-ae))
1567
- )
1568
- var(
1569
- --_ctm-mob-dn-et-pe-sw-br,
1570
- var(--_ctm-tab-dn-et-pe-sw-br, var(--_ctm-dn-et-pe-sw-br))
1571
- )
1572
- var(
1573
- --_ctm-mob-dn-et-pe-sw-sd,
1574
- var(--_ctm-tab-dn-et-pe-sw-sd, var(--_ctm-dn-et-pe-sw-sd))
1575
- )
1576
- var(
1577
- --_ctm-mob-dn-et-pe-sw-cr,
1578
- var(--_ctm-tab-dn-et-pe-sw-cr, var(--_ctm-dn-et-pe-sw-cr))
1579
- )
1005
+ border-style: var(
1006
+ --_ctm-mob-dn-gt-cd-is-br-se,
1007
+ var(--_ctm-tab-dn-gt-cd-is-br-se, var(--_ctm-dn-gt-cd-is-br-se))
1580
1008
  );
1009
+ border-width: var(
1010
+ --_ctm-mob-dn-gt-cd-is-br-wh,
1011
+ var(--_ctm-tab-dn-gt-cd-is-br-wh, var(--_ctm-dn-gt-cd-is-br-wh))
1012
+ );
1013
+ padding: var(
1014
+ --_ctm-mob-dn-gt-cd-is-pg,
1015
+ var(--_ctm-tab-dn-gt-cd-is-pg, var(--_ctm-dn-gt-cd-is-pg))
1016
+ );
1017
+
1018
+ transition:
1019
+ background-color 0.2s,
1020
+ color 0.2s,
1021
+ border-color 0.2s,
1022
+ box-shadow 0.2s;
1023
+ &::placeholder {
1024
+ // color: var(--_gray-500);
1025
+ // font-weight: 500;
1026
+ // font-size: 14px;
1027
+ // line-height: 24px;
1028
+ font-family: var(
1029
+ --_ctm-mob-dn-gt-cd-is-ft-fy,
1030
+ var(--_ctm-tab-dn-gt-cd-is-ft-fy, var(--_ctm-dn-gt-cd-is-ft-fy))
1031
+ );
1032
+ color: var(
1033
+ --_ctm-mob-dn-gt-cd-is-cr,
1034
+ var(--_ctm-tab-dn-gt-cd-is-cr, var(--_ctm-dn-gt-cd-is-cr))
1035
+ );
1036
+ font-weight: var(
1037
+ --_ctm-mob-dn-gt-cd-is-ft-wt,
1038
+ var(--_ctm-tab-dn-gt-cd-is-ft-wt, var(--_ctm-dn-gt-cd-is-ft-wt))
1039
+ );
1040
+ font-size: var(
1041
+ --_ctm-mob-dn-gt-cd-is-ft-se,
1042
+ var(--_ctm-tab-dn-gt-cd-is-ft-se, var(--_ctm-dn-gt-cd-is-ft-se))
1043
+ );
1044
+ text-decoration: var(
1045
+ --_ctm-mob-dn-gt-cd-is-ue,
1046
+ var(--_ctm-tab-dn-gt-cd-is-ue, var(--_ctm-dn-gt-cd-is-ue))
1047
+ );
1048
+ letter-spacing: var(
1049
+ --_ctm-mob-dn-gt-cd-is-lr-sg,
1050
+ var(--_ctm-tab-dn-gt-cd-is-lr-sg, var(--_ctm-dn-gt-cd-is-lr-sg))
1051
+ );
1052
+ line-height: var(
1053
+ --_ctm-mob-dn-gt-cd-is-le-ht,
1054
+ var(--_ctm-tab-dn-gt-cd-is-le-ht, var(--_ctm-dn-gt-cd-is-le-ht))
1055
+ );
1056
+ font-style: var(
1057
+ --_ctm-mob-dn-gt-cd-is-ft-se-ic,
1058
+ var(--_ctm-tab-dn-gt-cd-is-ft-se-ic, var(--_ctm-dn-gt-cd-is-ft-se-ic))
1059
+ );
1060
+ text-align: var(
1061
+ --_ctm-mob-dn-gt-cd-is-tt-an,
1062
+ var(--_ctm-tab-dn-gt-cd-is-tt-an, var(--_ctm-dn-gt-cd-is-tt-an))
1063
+ );
1064
+ }
1065
+ &:focus {
1066
+ outline: 0 none;
1067
+ outline-offset: 0;
1068
+ border-radius: 4px;
1069
+ box-shadow:
1070
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
1071
+ 0px 0px 0px 2px var(--_primary-100);
1072
+ border: 1px solid var(--_primary-300);
1073
+ }
1074
+ }
1075
+ .error_text {
1076
+ font-size: 12px;
1077
+ color: var(--_error-500);
1581
1078
  }
1582
1079
  }
1583
1080
  }
1081
+ }
1082
+ }
1083
+ .product-actual-price-container {
1084
+ .product-actual-discount {
1085
+ .discount-percentage {
1086
+ background-color: var(
1087
+ --_ctm-mob-dn-dt-bd-cr,
1088
+ var(--_ctm-tab-dn-dt-bd-cr, var(--_ctm-dn-dt-bd-cr))
1089
+ );
1090
+ color: var(--_ctm-mob-dn-dt-cr, var(--_ctm-tab-dn-dt-cr, var(--_ctm-dn-dt-cr)));
1091
+ font-family:
1092
+ var(--_ctm-mob-dn-dt-ft-fy, var(--_ctm-tab-dn-dt-ft-fy, var(--_ctm-dn-dt-ft-fy))),
1093
+ sans-serif;
1094
+ font-size: var(
1095
+ --_ctm-mob-dn-dt-ft-se,
1096
+ var(--_ctm-tab-dn-dt-ft-se, var(--_ctm-dn-dt-ft-se))
1097
+ );
1098
+ font-weight: var(
1099
+ --_ctm-mob-dn-dt-ft-wt,
1100
+ var(--_ctm-tab-dn-dt-ft-wt, var(--_ctm-dn-dt-ft-wt))
1101
+ );
1102
+ font-style: var(
1103
+ --_ctm-mob-dn-dt-ft-se-ic,
1104
+ var(--_ctm-tab-dn-dt-ft-se-ic, var(--_ctm-dn-dt-ft-se-ic))
1105
+ );
1106
+ text-align: var(
1107
+ --_ctm-mob-dn-dt-tt-an,
1108
+ var(--_ctm-tab-dn-dt-tt-an, var(--_ctm-dn-dt-tt-an))
1109
+ );
1110
+ letter-spacing: var(
1111
+ --_ctm-mob-dn-dt-lr-sg,
1112
+ var(--_ctm-tab-dn-dt-lr-sg, var(--_ctm-dn-dt-lr-sg))
1113
+ );
1114
+ line-height: var(
1115
+ --_ctm-mob-dn-dt-le-ht,
1116
+ var(--_ctm-tab-dn-dt-le-ht, var(--_ctm-dn-dt-le-ht))
1117
+ );
1118
+ text-decoration: var(--_ctm-mob-dn-dt-ue, var(--_ctm-tab-dn-dt-ue, var(--_ctm-dn-dt-ue)));
1119
+
1120
+ border-color: var(
1121
+ --_show-border,
1122
+ var(--_ctm-mob-dn-dt-br-cr, var(--_ctm-tab-dn-dt-br-cr, var(--_ctm-dn-dt-br-cr)))
1123
+ );
1124
+ border-style: var(
1125
+ --_show-border,
1126
+ var(--_ctm-mob-dn-dt-br-se, var(--_ctm-tab-dn-dt-br-se, var(--_ctm-dn-dt-br-se)))
1127
+ );
1128
+ border-width: var(
1129
+ --_show-border,
1130
+ var(--_ctm-mob-dn-dt-br-wh, var(--_ctm-tab-dn-dt-br-wh, var(--_ctm-dn-dt-br-wh)))
1131
+ );
1132
+ border-radius: var(
1133
+ --_ctm-mob-dn-dt-br-rs,
1134
+ var(--_ctm-tab-dn-dt-br-rs, var(--_ctm-dn-dt-br-rs))
1135
+ );
1136
+
1137
+ box-shadow: var(
1138
+ --_show-shadow,
1139
+ var(--_ctm-mob-dn-dt-sw-ae, var(--_ctm-tab-dn-dt-sw-ae, var(--_ctm-dn-dt-sw-ae)))
1140
+ var(--_ctm-mob-dn-dt-sw-br, var(--_ctm-tab-dn-dt-sw-br, var(--_ctm-dn-dt-sw-br)))
1141
+ var(--_ctm-mob-dn-dt-sw-sd, var(--_ctm-tab-dn-dt-sw-sd, var(--_ctm-dn-dt-sw-sd)))
1142
+ var(--_ctm-mob-dn-dt-sw-cr, var(--_ctm-tab-dn-dt-sw-cr, var(--_ctm-dn-dt-sw-cr)))
1143
+ );
1144
+ }
1145
+
1146
+ .discount-value-percentage {
1147
+ background-color: var(
1148
+ --_ctm-mob-dn-dt-ve-bd-cr,
1149
+ var(--_ctm-tab-dn-dt-ve-bd-cr, var(--_ctm-dn-dt-ve-bd-cr))
1150
+ );
1151
+ color: var(--_ctm-mob-dn-dt-ve-cr, var(--_ctm-tab-dn-dt-ve-cr, var(--_ctm-dn-dt-ve-cr)));
1152
+ font-family:
1153
+ var(
1154
+ --_ctm-mob-dn-dt-ve-ft-fy,
1155
+ var(--_ctm-tab-dn-dt-ve-ft-fy, var(--_ctm-dn-dt-ve-ft-fy))
1156
+ ),
1157
+ sans-serif;
1158
+ font-size: var(
1159
+ --_ctm-mob-dn-dt-ve-ft-se,
1160
+ var(--_ctm-tab-dn-dt-ve-ft-se, var(--_ctm-dn-dt-ve-ft-se))
1161
+ );
1162
+ font-weight: var(
1163
+ --_ctm-mob-dn-dt-ve-ft-wt,
1164
+ var(--_ctm-tab-dn-dt-ve-ft-wt, var(--_ctm-dn-dt-ve-ft-wt))
1165
+ );
1166
+ font-style: var(
1167
+ --_ctm-mob-dn-dt-ve-ft-se-ic,
1168
+ var(--_ctm-tab-dn-dt-ve-ft-se-ic, var(--_ctm-dn-dt-ve-ft-se-ic))
1169
+ );
1170
+ text-align: var(
1171
+ --_ctm-mob-dn-dt-ve-tt-an,
1172
+ var(--_ctm-tab-dn-dt-ve-tt-an, var(--_ctm-dn-dt-ve-tt-an))
1173
+ );
1174
+ letter-spacing: var(
1175
+ --_ctm-mob-dn-dt-ve-lr-sg,
1176
+ var(--_ctm-tab-dn-dt-ve-lr-sg, var(--_ctm-dn-dt-ve-lr-sg))
1177
+ );
1178
+ line-height: var(
1179
+ --_ctm-mob-dn-dt-ve-le-ht,
1180
+ var(--_ctm-tab-dn-dt-ve-le-ht, var(--_ctm-dn-dt-ve-le-ht))
1181
+ );
1182
+ text-decoration: var(
1183
+ --_ctm-mob-dn-dt-ve-ue,
1184
+ var(--_ctm-tab-dn-dt-ve-ue, var(--_ctm-dn-dt-ve-ue))
1185
+ );
1186
+
1187
+ border-color: var(
1188
+ --_show-border,
1189
+ var(
1190
+ --_ctm-mob-dn-dt-ve-br-cr,
1191
+ var(--_ctm-tab-dn-dt-ve-br-cr, var(--_ctm-dn-dt-ve-br-cr))
1192
+ )
1193
+ );
1194
+ border-style: var(
1195
+ --_show-border,
1196
+ var(
1197
+ --_ctm-mob-dn-dt-ve-br-se,
1198
+ var(--_ctm-tab-dn-dt-ve-br-se, var(--_ctm-dn-dt-ve-br-se))
1199
+ )
1200
+ );
1201
+ border-width: var(
1202
+ --_show-border,
1203
+ var(
1204
+ --_ctm-mob-dn-dt-ve-br-wh,
1205
+ var(--_ctm-tab-dn-dt-ve-br-wh, var(--_ctm-dn-dt-ve-br-wh))
1206
+ )
1207
+ );
1208
+ border-radius: var(
1209
+ --_ctm-mob-dn-dt-ve-br-rs,
1210
+ var(--_ctm-tab-dn-dt-ve-br-rs, var(--_ctm-dn-dt-ve-br-rs))
1211
+ );
1212
+
1213
+ box-shadow: var(
1214
+ --_show-shadow,
1215
+ var(
1216
+ --_ctm-mob-dn-dt-ve-sw-ae,
1217
+ var(--_ctm-tab-dn-dt-ve-sw-ae, var(--_ctm-dn-dt-ve-sw-ae))
1218
+ )
1219
+ var(
1220
+ --_ctm-mob-dn-dt-ve-sw-br,
1221
+ var(--_ctm-tab-dn-dt-ve-sw-br, var(--_ctm-dn-dt-ve-sw-br))
1222
+ )
1223
+ var(
1224
+ --_ctm-mob-dn-dt-ve-sw-sd,
1225
+ var(--_ctm-tab-dn-dt-ve-sw-sd, var(--_ctm-dn-dt-ve-sw-sd))
1226
+ )
1227
+ var(
1228
+ --_ctm-mob-dn-dt-ve-sw-cr,
1229
+ var(--_ctm-tab-dn-dt-ve-sw-cr, var(--_ctm-dn-dt-ve-sw-cr))
1230
+ )
1231
+ );
1232
+ }
1233
+ }
1234
+ .product-actual-price {
1235
+ .actual-price-span {
1236
+ background-color: var(
1237
+ --_ctm-mob-dn-al-pe-bd-cr,
1238
+ var(--_ctm-tab-dn-al-pe-bd-cr, var(--_ctm-dn-al-pe-bd-cr))
1239
+ );
1240
+ color: var(--_ctm-mob-dn-al-pe-cr, var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr)));
1241
+ font-family:
1242
+ var(
1243
+ --_ctm-mob-dn-al-pe-ft-fy,
1244
+ var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
1245
+ ),
1246
+ sans-serif;
1247
+ font-size: var(
1248
+ --_ctm-mob-dn-al-pe-ft-se,
1249
+ var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
1250
+ );
1251
+ font-weight: var(
1252
+ --_ctm-mob-dn-al-pe-ft-wt,
1253
+ var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
1254
+ );
1255
+ font-style: var(
1256
+ --_ctm-mob-dn-al-pe-ft-se-ic,
1257
+ var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
1258
+ );
1259
+ text-align: var(
1260
+ --_ctm-mob-dn-al-pe-tt-an,
1261
+ var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
1262
+ );
1263
+ letter-spacing: var(
1264
+ --_ctm-mob-dn-al-pe-lr-sg,
1265
+ var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
1266
+ );
1267
+ line-height: var(
1268
+ --_ctm-mob-dn-al-pe-le-ht,
1269
+ var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
1270
+ );
1271
+ text-decoration: var(
1272
+ --_ctm-mob-dn-al-pe-ue,
1273
+ var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
1274
+ );
1275
+
1276
+ border-color: var(
1277
+ --_show-border,
1278
+ var(
1279
+ --_ctm-mob-dn-al-pe-br-cr,
1280
+ var(--_ctm-tab-dn-al-pe-br-cr, var(--_ctm-dn-al-pe-br-cr))
1281
+ )
1282
+ );
1283
+ border-style: var(
1284
+ --_show-border,
1285
+ var(
1286
+ --_ctm-mob-dn-al-pe-br-se,
1287
+ var(--_ctm-tab-dn-al-pe-br-se, var(--_ctm-dn-al-pe-br-se))
1288
+ )
1289
+ );
1290
+ border-width: var(
1291
+ --_show-border,
1292
+ var(
1293
+ --_ctm-mob-dn-al-pe-br-wh,
1294
+ var(--_ctm-tab-dn-al-pe-br-wh, var(--_ctm-dn-al-pe-br-wh))
1295
+ )
1296
+ );
1297
+ border-radius: var(
1298
+ --_ctm-mob-dn-al-pe-br-rs,
1299
+ var(--_ctm-tab-dn-al-pe-br-rs, var(--_ctm-dn-al-pe-br-rs))
1300
+ );
1301
+
1302
+ box-shadow: var(
1303
+ --_show-shadow,
1304
+ var(
1305
+ --_ctm-mob-dn-al-pe-sw-ae,
1306
+ var(--_ctm-tab-dn-al-pe-sw-ae, var(--_ctm-dn-al-pe-sw-ae))
1307
+ )
1308
+ var(
1309
+ --_ctm-mob-dn-al-pe-sw-br,
1310
+ var(--_ctm-tab-dn-al-pe-sw-br, var(--_ctm-dn-al-pe-sw-br))
1311
+ )
1312
+ var(
1313
+ --_ctm-mob-dn-al-pe-sw-sd,
1314
+ var(--_ctm-tab-dn-al-pe-sw-sd, var(--_ctm-dn-al-pe-sw-sd))
1315
+ )
1316
+ var(
1317
+ --_ctm-mob-dn-al-pe-sw-cr,
1318
+ var(--_ctm-tab-dn-al-pe-sw-cr, var(--_ctm-dn-al-pe-sw-cr))
1319
+ )
1320
+ );
1321
+ }
1322
+
1323
+ .code-span {
1324
+ background-color: var(
1325
+ --_ctm-mob-dn-cy-ce-se-bd-cr,
1326
+ var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
1327
+ );
1328
+ color: var(
1329
+ --_ctm-mob-dn-cy-ce-se-cr,
1330
+ var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
1331
+ );
1332
+ font-family:
1333
+ var(
1334
+ --_ctm-mob-dn-cy-ce-se-ft-fy,
1335
+ var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
1336
+ ),
1337
+ sans-serif;
1338
+ font-size: var(
1339
+ --_ctm-mob-dn-cy-ce-se-ft-se,
1340
+ var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
1341
+ );
1342
+ font-weight: var(
1343
+ --_ctm-mob-dn-cy-ce-se-ft-wt,
1344
+ var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
1345
+ );
1346
+ font-style: var(
1347
+ --_ctm-mob-dn-cy-ce-se-ft-se-ic,
1348
+ var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
1349
+ );
1350
+ text-align: var(
1351
+ --_ctm-mob-dn-cy-ce-se-tt-an,
1352
+ var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
1353
+ );
1354
+ letter-spacing: var(
1355
+ --_ctm-mob-dn-cy-ce-se-lr-sg,
1356
+ var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
1357
+ );
1358
+ line-height: var(
1359
+ --_ctm-mob-dn-cy-ce-se-le-ht,
1360
+ var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
1361
+ );
1362
+ text-decoration: var(
1363
+ --_ctm-mob-dn-cy-ce-se-ue,
1364
+ var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
1365
+ );
1366
+
1367
+ border-color: var(
1368
+ --_show-border,
1369
+ var(
1370
+ --_ctm-mob-dn-cy-ce-se-br-cr,
1371
+ var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
1372
+ )
1373
+ );
1374
+ border-style: var(
1375
+ --_show-border,
1376
+ var(
1377
+ --_ctm-mob-dn-cy-ce-se-br-se,
1378
+ var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
1379
+ )
1380
+ );
1381
+ border-width: var(
1382
+ --_show-border,
1383
+ var(
1384
+ --_ctm-mob-dn-cy-ce-se-br-wh,
1385
+ var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
1386
+ )
1387
+ );
1388
+ border-radius: var(
1389
+ --_ctm-mob-dn-cy-ce-se-br-rs,
1390
+ var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
1391
+ );
1392
+
1393
+ box-shadow: var(
1394
+ --_show-shadow,
1395
+ var(
1396
+ --_ctm-mob-dn-cy-ce-se-sw-ae,
1397
+ var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
1398
+ )
1399
+ var(
1400
+ --_ctm-mob-dn-cy-ce-se-sw-br,
1401
+ var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
1402
+ )
1403
+ var(
1404
+ --_ctm-mob-dn-cy-ce-se-sw-sd,
1405
+ var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
1406
+ )
1407
+ var(
1408
+ --_ctm-mob-dn-cy-ce-se-sw-cr,
1409
+ var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
1410
+ )
1411
+ );
1412
+ }
1413
+
1414
+ .uom-span {
1415
+ background-color: var(
1416
+ --_ctm-mob-dn-um-se-bd-cr,
1417
+ var(--_ctm-tab-dn-um-se-bd-cr, var(--_ctm-dn-um-se-bd-cr))
1418
+ );
1419
+ color: var(--_ctm-mob-dn-um-se-cr, var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr)));
1420
+ font-family:
1421
+ var(
1422
+ --_ctm-mob-dn-um-se-ft-fy,
1423
+ var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
1424
+ ),
1425
+ sans-serif;
1426
+ font-size: var(
1427
+ --_ctm-mob-dn-um-se-ft-se,
1428
+ var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
1429
+ );
1430
+ font-weight: var(
1431
+ --_ctm-mob-dn-um-se-ft-wt,
1432
+ var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
1433
+ );
1434
+ font-style: var(
1435
+ --_ctm-mob-dn-um-se-ft-se-ic,
1436
+ var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
1437
+ );
1438
+ text-align: var(
1439
+ --_ctm-mob-dn-um-se-tt-an,
1440
+ var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
1441
+ );
1442
+ letter-spacing: var(
1443
+ --_ctm-mob-dn-um-se-lr-sg,
1444
+ var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
1445
+ );
1446
+ line-height: var(
1447
+ --_ctm-mob-dn-um-se-le-ht,
1448
+ var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
1449
+ );
1450
+ text-decoration: var(
1451
+ --_ctm-mob-dn-um-se-ue,
1452
+ var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
1453
+ );
1454
+
1455
+ border-color: var(
1456
+ --_show-border,
1457
+ var(
1458
+ --_ctm-mob-dn-um-se-br-cr,
1459
+ var(--_ctm-tab-dn-um-se-br-cr, var(--_ctm-dn-um-se-br-cr))
1460
+ )
1461
+ );
1462
+ border-style: var(
1463
+ --_show-border,
1464
+ var(
1465
+ --_ctm-mob-dn-um-se-br-se,
1466
+ var(--_ctm-tab-dn-um-se-br-se, var(--_ctm-dn-um-se-br-se))
1467
+ )
1468
+ );
1469
+ border-width: var(
1470
+ --_show-border,
1471
+ var(
1472
+ --_ctm-mob-dn-um-se-br-wh,
1473
+ var(--_ctm-tab-dn-um-se-br-wh, var(--_ctm-dn-um-se-br-wh))
1474
+ )
1475
+ );
1476
+ border-radius: var(
1477
+ --_ctm-mob-dn-um-se-br-rs,
1478
+ var(--_ctm-tab-dn-um-se-br-rs, var(--_ctm-dn-um-se-br-rs))
1479
+ );
1480
+
1481
+ box-shadow: var(
1482
+ --_show-shadow,
1483
+ var(
1484
+ --_ctm-mob-dn-um-se-sw-ae,
1485
+ var(--_ctm-tab-dn-um-se-sw-ae, var(--_ctm-dn-um-se-sw-ae))
1486
+ )
1487
+ var(
1488
+ --_ctm-mob-dn-um-se-sw-br,
1489
+ var(--_ctm-tab-dn-um-se-sw-br, var(--_ctm-dn-um-se-sw-br))
1490
+ )
1491
+ var(
1492
+ --_ctm-mob-dn-um-se-sw-sd,
1493
+ var(--_ctm-tab-dn-um-se-sw-sd, var(--_ctm-dn-um-se-sw-sd))
1494
+ )
1495
+ var(
1496
+ --_ctm-mob-dn-um-se-sw-cr,
1497
+ var(--_ctm-tab-dn-um-se-sw-cr, var(--_ctm-dn-um-se-sw-cr))
1498
+ )
1499
+ );
1500
+ }
1501
+ }
1502
+ }
1503
+ .product-savings {
1504
+ .product-savings-wrapper {
1505
+ .savings-percent-span {
1506
+ background-color: var(
1507
+ --_ctm-mob-dn-ss-bd-cr,
1508
+ var(--_ctm-tab-dn-ss-bd-cr, var(--_ctm-dn-ss-bd-cr))
1509
+ );
1510
+ color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
1511
+ font-family:
1512
+ var(--_ctm-mob-dn-ss-ft-fy, var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))),
1513
+ sans-serif;
1514
+ font-size: var(
1515
+ --_ctm-mob-dn-ss-ft-se,
1516
+ var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
1517
+ );
1518
+ font-weight: var(
1519
+ --_ctm-mob-dn-ss-ft-wt,
1520
+ var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
1521
+ );
1522
+ font-style: var(
1523
+ --_ctm-mob-dn-ss-ft-se-ic,
1524
+ var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
1525
+ );
1526
+ text-align: var(
1527
+ --_ctm-mob-dn-ss-tt-an,
1528
+ var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
1529
+ );
1530
+ letter-spacing: var(
1531
+ --_ctm-mob-dn-ss-lr-sg,
1532
+ var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
1533
+ );
1534
+ line-height: var(
1535
+ --_ctm-mob-dn-ss-le-ht,
1536
+ var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
1537
+ );
1538
+ text-decoration: var(--_ctm-mob-dn-ss-ue, var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue)));
1539
+
1540
+ border-color: var(
1541
+ --_show-border,
1542
+ var(--_ctm-mob-dn-ss-br-cr, var(--_ctm-tab-dn-ss-br-cr, var(--_ctm-dn-ss-br-cr)))
1543
+ );
1544
+ border-style: var(
1545
+ --_show-border,
1546
+ var(--_ctm-mob-dn-ss-br-se, var(--_ctm-tab-dn-ss-br-se, var(--_ctm-dn-ss-br-se)))
1547
+ );
1548
+ border-width: var(
1549
+ --_show-border,
1550
+ var(--_ctm-mob-dn-ss-br-wh, var(--_ctm-tab-dn-ss-br-wh, var(--_ctm-dn-ss-br-wh)))
1551
+ );
1552
+ border-radius: var(
1553
+ --_ctm-mob-dn-ss-br-rs,
1554
+ var(--_ctm-tab-dn-ss-br-rs, var(--_ctm-dn-ss-br-rs))
1555
+ );
1556
+
1557
+ box-shadow: var(
1558
+ --_show-shadow,
1559
+ var(--_ctm-mob-dn-ss-sw-ae, var(--_ctm-tab-dn-ss-sw-ae, var(--_ctm-dn-ss-sw-ae)))
1560
+ var(--_ctm-mob-dn-ss-sw-br, var(--_ctm-tab-dn-ss-sw-br, var(--_ctm-dn-ss-sw-br)))
1561
+ var(--_ctm-mob-dn-ss-sw-sd, var(--_ctm-tab-dn-ss-sw-sd, var(--_ctm-dn-ss-sw-sd)))
1562
+ var(--_ctm-mob-dn-ss-sw-cr, var(--_ctm-tab-dn-ss-sw-cr, var(--_ctm-dn-ss-sw-cr)))
1563
+ );
1564
+ }
1565
+ .savings-value-span {
1566
+ background-color: var(
1567
+ --_ctm-mob-dn-ss-ve-bd-cr,
1568
+ var(--_ctm-tab-dn-ss-ve-bd-cr, var(--_ctm-dn-ss-ve-bd-cr))
1569
+ );
1570
+ color: var(--_ctm-mob-dn-ss-ve-cr, var(--_ctm-tab-dn-ss-ve-cr, var(--_ctm-dn-ss-ve-cr)));
1571
+ font-family:
1572
+ var(
1573
+ --_ctm-mob-dn-ss-ve-ft-fy,
1574
+ var(--_ctm-tab-dn-ss-ve-ft-fy, var(--_ctm-dn-ss-ve-ft-fy))
1575
+ ),
1576
+ sans-serif;
1577
+ font-size: var(
1578
+ --_ctm-mob-dn-ss-ve-ft-se,
1579
+ var(--_ctm-tab-dn-ss-ve-ft-se, var(--_ctm-dn-ss-ve-ft-se))
1580
+ );
1581
+ font-weight: var(
1582
+ --_ctm-mob-dn-ss-ve-ft-wt,
1583
+ var(--_ctm-tab-dn-ss-ve-ft-wt, var(--_ctm-dn-ss-ve-ft-wt))
1584
+ );
1585
+ font-style: var(
1586
+ --_ctm-mob-dn-ss-ve-ft-se-ic,
1587
+ var(--_ctm-tab-dn-ss-ve-ft-se-ic, var(--_ctm-dn-ss-ve-ft-se-ic))
1588
+ );
1589
+ text-align: var(
1590
+ --_ctm-mob-dn-ss-ve-tt-an,
1591
+ var(--_ctm-tab-dn-ss-ve-tt-an, var(--_ctm-dn-ss-ve-tt-an))
1592
+ );
1593
+ letter-spacing: var(
1594
+ --_ctm-mob-dn-ss-ve-lr-sg,
1595
+ var(--_ctm-tab-dn-ss-ve-lr-sg, var(--_ctm-dn-ss-ve-lr-sg))
1596
+ );
1597
+ line-height: var(
1598
+ --_ctm-mob-dn-ss-ve-le-ht,
1599
+ var(--_ctm-tab-dn-ss-ve-le-ht, var(--_ctm-dn-ss-ve-le-ht))
1600
+ );
1601
+ text-decoration: var(
1602
+ --_ctm-mob-dn-ss-ve-ue,
1603
+ var(--_ctm-tab-dn-ss-ve-ue, var(--_ctm-dn-ss-ve-ue))
1604
+ );
1605
+
1606
+ border-color: var(
1607
+ --_show-border,
1608
+ var(
1609
+ --_ctm-mob-dn-ss-ve-br-cr,
1610
+ var(--_ctm-tab-dn-ss-ve-br-cr, var(--_ctm-dn-ss-ve-br-cr))
1611
+ )
1612
+ );
1613
+ border-style: var(
1614
+ --_show-border,
1615
+ var(
1616
+ --_ctm-mob-dn-ss-ve-br-se,
1617
+ var(--_ctm-tab-dn-ss-ve-br-se, var(--_ctm-dn-ss-ve-br-se))
1618
+ )
1619
+ );
1620
+ border-width: var(
1621
+ --_show-border,
1622
+ var(
1623
+ --_ctm-mob-dn-ss-ve-br-wh,
1624
+ var(--_ctm-tab-dn-ss-ve-br-wh, var(--_ctm-dn-ss-ve-br-wh))
1625
+ )
1626
+ );
1627
+ border-radius: var(
1628
+ --_ctm-mob-dn-ss-ve-br-rs,
1629
+ var(--_ctm-tab-dn-ss-ve-br-rs, var(--_ctm-dn-ss-ve-br-rs))
1630
+ );
1631
+
1632
+ box-shadow: var(
1633
+ --_show-shadow,
1634
+ var(
1635
+ --_ctm-mob-dn-ss-ve-sw-ae,
1636
+ var(--_ctm-tab-dn-ss-ve-sw-ae, var(--_ctm-dn-ss-ve-sw-ae))
1637
+ )
1638
+ var(
1639
+ --_ctm-mob-dn-ss-ve-sw-br,
1640
+ var(--_ctm-tab-dn-ss-ve-sw-br, var(--_ctm-dn-ss-ve-sw-br))
1641
+ )
1642
+ var(
1643
+ --_ctm-mob-dn-ss-ve-sw-sd,
1644
+ var(--_ctm-tab-dn-ss-ve-sw-sd, var(--_ctm-dn-ss-ve-sw-sd))
1645
+ )
1646
+ var(
1647
+ --_ctm-mob-dn-ss-ve-sw-cr,
1648
+ var(--_ctm-tab-dn-ss-ve-sw-cr, var(--_ctm-dn-ss-ve-sw-cr))
1649
+ )
1650
+ );
1651
+ }
1652
+ .code-span {
1653
+ background-color: var(
1654
+ --_ctm-mob-dn-cy-ce-se-bd-cr,
1655
+ var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
1656
+ );
1657
+ color: var(
1658
+ --_ctm-mob-dn-cy-ce-se-cr,
1659
+ var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
1660
+ );
1661
+ font-family:
1662
+ var(
1663
+ --_ctm-mob-dn-cy-ce-se-ft-fy,
1664
+ var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
1665
+ ),
1666
+ sans-serif;
1667
+ font-size: var(
1668
+ --_ctm-mob-dn-cy-ce-se-ft-se,
1669
+ var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
1670
+ );
1671
+ font-weight: var(
1672
+ --_ctm-mob-dn-cy-ce-se-ft-wt,
1673
+ var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
1674
+ );
1675
+ font-style: var(
1676
+ --_ctm-mob-dn-cy-ce-se-ft-se-ic,
1677
+ var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
1678
+ );
1679
+ text-align: var(
1680
+ --_ctm-mob-dn-cy-ce-se-tt-an,
1681
+ var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
1682
+ );
1683
+ letter-spacing: var(
1684
+ --_ctm-mob-dn-cy-ce-se-lr-sg,
1685
+ var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
1686
+ );
1687
+ line-height: var(
1688
+ --_ctm-mob-dn-cy-ce-se-le-ht,
1689
+ var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
1690
+ );
1691
+ text-decoration: var(
1692
+ --_ctm-mob-dn-cy-ce-se-ue,
1693
+ var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
1694
+ );
1695
+
1696
+ border-color: var(
1697
+ --_show-border,
1698
+ var(
1699
+ --_ctm-mob-dn-cy-ce-se-br-cr,
1700
+ var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
1701
+ )
1702
+ );
1703
+ border-style: var(
1704
+ --_show-border,
1705
+ var(
1706
+ --_ctm-mob-dn-cy-ce-se-br-se,
1707
+ var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
1708
+ )
1709
+ );
1710
+ border-width: var(
1711
+ --_show-border,
1712
+ var(
1713
+ --_ctm-mob-dn-cy-ce-se-br-wh,
1714
+ var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
1715
+ )
1716
+ );
1717
+ border-radius: var(
1718
+ --_ctm-mob-dn-cy-ce-se-br-rs,
1719
+ var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
1720
+ );
1721
+
1722
+ box-shadow: var(
1723
+ --_show-shadow,
1724
+ var(
1725
+ --_ctm-mob-dn-cy-ce-se-sw-ae,
1726
+ var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
1727
+ )
1728
+ var(
1729
+ --_ctm-mob-dn-cy-ce-se-sw-br,
1730
+ var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
1731
+ )
1732
+ var(
1733
+ --_ctm-mob-dn-cy-ce-se-sw-sd,
1734
+ var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
1735
+ )
1736
+ var(
1737
+ --_ctm-mob-dn-cy-ce-se-sw-cr,
1738
+ var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
1739
+ )
1740
+ );
1741
+ }
1742
+ }
1743
+ }
1744
+ .total-price-container {
1745
+ .tax-box {
1746
+ display: flex;
1747
+ align-items: center;
1748
+ justify-content: space-between;
1749
+ gap: 5px;
1750
+
1751
+ background-color: var(
1752
+ --_ctm-mob-dn-pt-tx-bd-cr,
1753
+ var(--_ctm-tab-dn-pt-tx-bd-cr, var(--_ctm-dn-pt-tx-bd-cr))
1754
+ );
1755
+ color: var(--_ctm-mob-dn-pt-tx-cr, var(--_ctm-tab-dn-pt-tx-cr, var(--_ctm-dn-pt-tx-cr)));
1756
+ font-family:
1757
+ var(
1758
+ --_ctm-mob-dn-pt-tx-ft-fy,
1759
+ var(--_ctm-tab-dn-pt-tx-ft-fy, var(--_ctm-dn-pt-tx-ft-fy))
1760
+ ),
1761
+ sans-serif;
1762
+ font-size: var(
1763
+ --_ctm-mob-dn-pt-tx-ft-se,
1764
+ var(--_ctm-tab-dn-pt-tx-ft-se, var(--_ctm-dn-pt-tx-ft-se))
1765
+ );
1766
+ font-weight: var(
1767
+ --_ctm-mob-dn-pt-tx-ft-wt,
1768
+ var(--_ctm-tab-dn-pt-tx-ft-wt, var(--_ctm-dn-pt-tx-ft-wt))
1769
+ );
1770
+ font-style: var(
1771
+ --_ctm-mob-dn-pt-tx-ft-se-ic,
1772
+ var(--_ctm-tab-dn-pt-tx-ft-se-ic, var(--_ctm-dn-pt-tx-ft-se-ic))
1773
+ );
1774
+ text-align: var(
1775
+ --_ctm-mob-dn-pt-tx-tt-an,
1776
+ var(--_ctm-tab-dn-pt-tx-tt-an, var(--_ctm-dn-pt-tx-tt-an))
1777
+ );
1778
+ letter-spacing: var(
1779
+ --_ctm-mob-dn-pt-tx-lr-sg,
1780
+ var(--_ctm-tab-dn-pt-tx-lr-sg, var(--_ctm-dn-pt-tx-lr-sg))
1781
+ );
1782
+ line-height: var(
1783
+ --_ctm-mob-dn-pt-tx-le-ht,
1784
+ var(--_ctm-tab-dn-pt-tx-le-ht, var(--_ctm-dn-pt-tx-le-ht))
1785
+ );
1786
+ text-decoration: var(
1787
+ --_ctm-mob-dn-pt-tx-ue,
1788
+ var(--_ctm-tab-dn-pt-tx-ue, var(--_ctm-dn-pt-tx-ue))
1789
+ );
1790
+
1791
+ border-color: var(
1792
+ --_show-border,
1793
+ var(--_ctm-mob-dn-pt-tx-br-cr, var(--_ctm-tab-dn-pt-tx-br-cr, var(--_ctm-dn-pt-tx-br-cr)))
1794
+ );
1795
+ border-style: var(
1796
+ --_show-border,
1797
+ var(--_ctm-mob-dn-pt-tx-br-se, var(--_ctm-tab-dn-pt-tx-br-se, var(--_ctm-dn-pt-tx-br-se)))
1798
+ );
1799
+ border-width: var(
1800
+ --_show-border,
1801
+ var(--_ctm-mob-dn-pt-tx-br-wh, var(--_ctm-tab-dn-pt-tx-br-wh, var(--_ctm-dn-pt-tx-br-wh)))
1802
+ );
1803
+ border-radius: var(
1804
+ --_ctm-mob-dn-pt-tx-br-rs,
1805
+ var(--_ctm-tab-dn-pt-tx-br-rs, var(--_ctm-dn-pt-tx-br-rs))
1806
+ );
1807
+
1808
+ box-shadow: var(
1809
+ --_show-shadow,
1810
+ var(--_ctm-mob-dn-pt-tx-sw-ae, var(--_ctm-tab-dn-pt-tx-sw-ae, var(--_ctm-dn-pt-tx-sw-ae)))
1811
+ var(
1812
+ --_ctm-mob-dn-pt-tx-sw-br,
1813
+ var(--_ctm-tab-dn-pt-tx-sw-br, var(--_ctm-dn-pt-tx-sw-br))
1814
+ )
1815
+ var(
1816
+ --_ctm-mob-dn-pt-tx-sw-sd,
1817
+ var(--_ctm-tab-dn-pt-tx-sw-sd, var(--_ctm-dn-pt-tx-sw-sd))
1818
+ )
1819
+ var(
1820
+ --_ctm-mob-dn-pt-tx-sw-cr,
1821
+ var(--_ctm-tab-dn-pt-tx-sw-cr, var(--_ctm-dn-pt-tx-sw-cr))
1822
+ )
1823
+ );
1824
+ }
1825
+ .shipping-box {
1826
+ display: flex;
1827
+ align-items: center;
1828
+ justify-content: space-between;
1829
+ gap: 5px;
1830
+
1831
+ background-color: var(
1832
+ --_ctm-mob-dn-pt-sg-pe-bd-cr,
1833
+ var(--_ctm-tab-dn-pt-sg-pe-bd-cr, var(--_ctm-dn-pt-sg-pe-bd-cr))
1834
+ );
1835
+ color: var(
1836
+ --_ctm-mob-dn-pt-sg-pe-cr,
1837
+ var(--_ctm-tab-dn-pt-sg-pe-cr, var(--_ctm-dn-pt-sg-pe-cr))
1838
+ );
1839
+ font-family:
1840
+ var(
1841
+ --_ctm-mob-dn-pt-sg-pe-ft-fy,
1842
+ var(--_ctm-tab-dn-pt-sg-pe-ft-fy, var(--_ctm-dn-pt-sg-pe-ft-fy))
1843
+ ),
1844
+ sans-serif;
1845
+ font-size: var(
1846
+ --_ctm-mob-dn-pt-sg-pe-ft-se,
1847
+ var(--_ctm-tab-dn-pt-sg-pe-ft-se, var(--_ctm-dn-pt-sg-pe-ft-se))
1848
+ );
1849
+ font-weight: var(
1850
+ --_ctm-mob-dn-pt-sg-pe-ft-wt,
1851
+ var(--_ctm-tab-dn-pt-sg-pe-ft-wt, var(--_ctm-dn-pt-sg-pe-ft-wt))
1852
+ );
1853
+ font-style: var(
1854
+ --_ctm-mob-dn-pt-sg-pe-ft-se-ic,
1855
+ var(--_ctm-tab-dn-pt-sg-pe-ft-se-ic, var(--_ctm-dn-pt-sg-pe-ft-se-ic))
1856
+ );
1857
+ text-align: var(
1858
+ --_ctm-mob-dn-pt-sg-pe-tt-an,
1859
+ var(--_ctm-tab-dn-pt-sg-pe-tt-an, var(--_ctm-dn-pt-sg-pe-tt-an))
1860
+ );
1861
+ letter-spacing: var(
1862
+ --_ctm-mob-dn-pt-sg-pe-lr-sg,
1863
+ var(--_ctm-tab-dn-pt-sg-pe-lr-sg, var(--_ctm-dn-pt-sg-pe-lr-sg))
1864
+ );
1865
+ line-height: var(
1866
+ --_ctm-mob-dn-pt-sg-pe-le-ht,
1867
+ var(--_ctm-tab-dn-pt-sg-pe-le-ht, var(--_ctm-dn-pt-sg-pe-le-ht))
1868
+ );
1869
+ text-decoration: var(
1870
+ --_ctm-mob-dn-pt-sg-pe-ue,
1871
+ var(--_ctm-tab-dn-pt-sg-pe-ue, var(--_ctm-dn-pt-sg-pe-ue))
1872
+ );
1873
+
1874
+ border-color: var(
1875
+ --_show-border,
1876
+ var(
1877
+ --_ctm-mob-dn-pt-sg-pe-br-cr,
1878
+ var(--_ctm-tab-dn-pt-sg-pe-br-cr, var(--_ctm-dn-pt-sg-pe-br-cr))
1879
+ )
1880
+ );
1881
+ border-style: var(
1882
+ --_show-border,
1883
+ var(
1884
+ --_ctm-mob-dn-pt-sg-pe-br-se,
1885
+ var(--_ctm-tab-dn-pt-sg-pe-br-se, var(--_ctm-dn-pt-sg-pe-br-se))
1886
+ )
1887
+ );
1888
+ border-width: var(
1889
+ --_show-border,
1890
+ var(
1891
+ --_ctm-mob-dn-pt-sg-pe-br-wh,
1892
+ var(--_ctm-tab-dn-pt-sg-pe-br-wh, var(--_ctm-dn-pt-sg-pe-br-wh))
1893
+ )
1894
+ );
1895
+ border-radius: var(
1896
+ --_ctm-mob-dn-pt-sg-pe-br-rs,
1897
+ var(--_ctm-tab-dn-pt-sg-pe-br-rs, var(--_ctm-dn-pt-sg-pe-br-rs))
1898
+ );
1899
+
1900
+ box-shadow: var(
1901
+ --_show-shadow,
1902
+ var(
1903
+ --_ctm-mob-dn-pt-sg-pe-sw-ae,
1904
+ var(--_ctm-tab-dn-pt-sg-pe-sw-ae, var(--_ctm-dn-pt-sg-pe-sw-ae))
1905
+ )
1906
+ var(
1907
+ --_ctm-mob-dn-pt-sg-pe-sw-br,
1908
+ var(--_ctm-tab-dn-pt-sg-pe-sw-br, var(--_ctm-dn-pt-sg-pe-sw-br))
1909
+ )
1910
+ var(
1911
+ --_ctm-mob-dn-pt-sg-pe-sw-sd,
1912
+ var(--_ctm-tab-dn-pt-sg-pe-sw-sd, var(--_ctm-dn-pt-sg-pe-sw-sd))
1913
+ )
1914
+ var(
1915
+ --_ctm-mob-dn-pt-sg-pe-sw-cr,
1916
+ var(--_ctm-tab-dn-pt-sg-pe-sw-cr, var(--_ctm-dn-pt-sg-pe-sw-cr))
1917
+ )
1918
+ );
1919
+ }
1920
+ .embellishment-box {
1921
+ display: flex;
1922
+ align-items: center;
1923
+ justify-content: space-between;
1924
+ gap: 5px;
1925
+
1926
+ background-color: var(
1927
+ --_ctm-mob-dn-et-pe-bd-cr,
1928
+ var(--_ctm-tab-dn-et-pe-bd-cr, var(--_ctm-dn-et-pe-bd-cr))
1929
+ );
1930
+ color: var(--_ctm-mob-dn-et-pe-cr, var(--_ctm-tab-dn-et-pe-cr, var(--_ctm-dn-et-pe-cr)));
1931
+ font-family:
1932
+ var(
1933
+ --_ctm-mob-dn-et-pe-ft-fy,
1934
+ var(--_ctm-tab-dn-et-pe-ft-fy, var(--_ctm-dn-et-pe-ft-fy))
1935
+ ),
1936
+ sans-serif;
1937
+ font-size: var(
1938
+ --_ctm-mob-dn-et-pe-ft-se,
1939
+ var(--_ctm-tab-dn-et-pe-ft-se, var(--_ctm-dn-et-pe-ft-se))
1940
+ );
1941
+ font-weight: var(
1942
+ --_ctm-mob-dn-et-pe-ft-wt,
1943
+ var(--_ctm-tab-dn-et-pe-ft-wt, var(--_ctm-dn-et-pe-ft-wt))
1944
+ );
1945
+ font-style: var(
1946
+ --_ctm-mob-dn-et-pe-ft-se-ic,
1947
+ var(--_ctm-tab-dn-et-pe-ft-se-ic, var(--_ctm-dn-et-pe-ft-se-ic))
1948
+ );
1949
+ text-align: var(
1950
+ --_ctm-mob-dn-et-pe-tt-an,
1951
+ var(--_ctm-tab-dn-et-pe-tt-an, var(--_ctm-dn-et-pe-tt-an))
1952
+ );
1953
+ letter-spacing: var(
1954
+ --_ctm-mob-dn-et-pe-lr-sg,
1955
+ var(--_ctm-tab-dn-et-pe-lr-sg, var(--_ctm-dn-et-pe-lr-sg))
1956
+ );
1957
+ line-height: var(
1958
+ --_ctm-mob-dn-et-pe-le-ht,
1959
+ var(--_ctm-tab-dn-et-pe-le-ht, var(--_ctm-dn-et-pe-le-ht))
1960
+ );
1961
+ text-decoration: var(
1962
+ --_ctm-mob-dn-et-pe-ue,
1963
+ var(--_ctm-tab-dn-et-pe-ue, var(--_ctm-dn-et-pe-ue))
1964
+ );
1965
+
1966
+ border-color: var(
1967
+ --_show-border,
1968
+ var(--_ctm-mob-dn-et-pe-br-cr, var(--_ctm-tab-dn-et-pe-br-cr, var(--_ctm-dn-et-pe-br-cr)))
1969
+ );
1970
+ border-style: var(
1971
+ --_show-border,
1972
+ var(--_ctm-mob-dn-et-pe-br-se, var(--_ctm-tab-dn-et-pe-br-se, var(--_ctm-dn-et-pe-br-se)))
1973
+ );
1974
+ border-width: var(
1975
+ --_show-border,
1976
+ var(--_ctm-mob-dn-et-pe-br-wh, var(--_ctm-tab-dn-et-pe-br-wh, var(--_ctm-dn-et-pe-br-wh)))
1977
+ );
1978
+ border-radius: var(
1979
+ --_ctm-mob-dn-et-pe-br-rs,
1980
+ var(--_ctm-tab-dn-et-pe-br-rs, var(--_ctm-dn-et-pe-br-rs))
1981
+ );
1982
+
1983
+ box-shadow: var(
1984
+ --_show-shadow,
1985
+ var(--_ctm-mob-dn-et-pe-sw-ae, var(--_ctm-tab-dn-et-pe-sw-ae, var(--_ctm-dn-et-pe-sw-ae)))
1986
+ var(
1987
+ --_ctm-mob-dn-et-pe-sw-br,
1988
+ var(--_ctm-tab-dn-et-pe-sw-br, var(--_ctm-dn-et-pe-sw-br))
1989
+ )
1990
+ var(
1991
+ --_ctm-mob-dn-et-pe-sw-sd,
1992
+ var(--_ctm-tab-dn-et-pe-sw-sd, var(--_ctm-dn-et-pe-sw-sd))
1993
+ )
1994
+ var(
1995
+ --_ctm-mob-dn-et-pe-sw-cr,
1996
+ var(--_ctm-tab-dn-et-pe-sw-cr, var(--_ctm-dn-et-pe-sw-cr))
1997
+ )
1998
+ );
1999
+ }
2000
+ }
2001
+ .price-text-element {
2002
+ // background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
2003
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
2004
+ display: flex;
2005
+ flex-direction: column;
2006
+ gap: 10px;
2007
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
2008
+ // row-gap: var(--_sf-gp);
2009
+ width: 100%;
2010
+ // height: 100%;
2011
+ border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
2012
+ border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
2013
+ border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
2014
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
2015
+ box-shadow: var(
2016
+ --_show-shadow,
2017
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
2018
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
2019
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
2020
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
2021
+ );
2022
+
2023
+ // transform: scale(var(--_ctm-dn-zm-ie));
2024
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
2025
+
2026
+ &[data-flip-x="true"] {
2027
+ transform: scaleX(-1);
2028
+ }
2029
+ &[data-flip-y="true"] {
2030
+ transform: scaleY(-1);
2031
+ }
2032
+ .meta_text_element {
2033
+ color: green;
2034
+ //styleName: Text md/Medium;
2035
+ font-family: Lato;
2036
+ font-size: 16px;
2037
+ font-weight: 500;
2038
+ line-height: 24px;
2039
+ text-align: left;
2040
+ text-underline-position: from-font;
2041
+ text-decoration-skip-ink: none;
2042
+ }
2043
+ .price-container {
2044
+ display: flex;
2045
+ align-items: center;
2046
+ gap: 5px;
2047
+ .element-container {
2048
+ display: flex;
2049
+ align-items: flex-start;
2050
+ gap: 10px;
2051
+ flex-direction: column;
2052
+ width: 100%;
2053
+ }
1584
2054
 
1585
2055
  // Tooltip SCSS Style Starts Here -
1586
2056
  .tooltipWrapper {
@@ -1739,7 +2209,8 @@
1739
2209
  --_ctm-mob-dn-pt-tx-cr,
1740
2210
  var(--_ctm-tab-dn-pt-tx-cr, var(--_ctm-dn-pt-tx-cr))
1741
2211
  );
1742
- font-family: var(
2212
+ font-family:
2213
+ var(
1743
2214
  --_ctm-mob-dn-pt-tx-ft-fy,
1744
2215
  var(--_ctm-tab-dn-pt-tx-ft-fy, var(--_ctm-dn-pt-tx-ft-fy))
1745
2216
  ),
@@ -1834,7 +2305,8 @@
1834
2305
  --_ctm-mob-dn-pt-sg-pe-cr,
1835
2306
  var(--_ctm-tab-dn-pt-sg-pe-cr, var(--_ctm-dn-pt-sg-pe-cr))
1836
2307
  );
1837
- font-family: var(
2308
+ font-family:
2309
+ var(
1838
2310
  --_ctm-mob-dn-pt-sg-pe-ft-fy,
1839
2311
  var(--_ctm-tab-dn-pt-sg-pe-ft-fy, var(--_ctm-dn-pt-sg-pe-ft-fy))
1840
2312
  ),
@@ -1929,7 +2401,8 @@
1929
2401
  --_ctm-mob-dn-et-pe-cr,
1930
2402
  var(--_ctm-tab-dn-et-pe-cr, var(--_ctm-dn-et-pe-cr))
1931
2403
  );
1932
- font-family: var(
2404
+ font-family:
2405
+ var(
1933
2406
  --_ctm-mob-dn-et-pe-ft-fy,
1934
2407
  var(--_ctm-tab-dn-et-pe-ft-fy, var(--_ctm-dn-et-pe-ft-fy))
1935
2408
  ),