@sc-360-v2/storefront-cms-library 0.3.4 → 0.3.6

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 (38) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/builder.js.LICENSE.txt +1 -1
  3. package/dist/button copy.scss +2 -1
  4. package/dist/checkout.scss +141 -16
  5. package/dist/filter-results.scss +324 -0
  6. package/dist/filters.scss +1324 -31
  7. package/dist/functions.js +1 -1
  8. package/dist/icon-list.scss +11 -11
  9. package/dist/index.js +1 -1
  10. package/dist/layouter-pro-item.scss +6 -0
  11. package/dist/layouter-pro.scss +30 -2
  12. package/dist/menu-v2.scss +5 -2
  13. package/dist/past-orders.scss +770 -26
  14. package/dist/product-actions.scss +254 -393
  15. package/dist/product-basic-elements.scss +12 -12
  16. package/dist/product-options.scss +72 -46
  17. package/dist/quotes.scss +1 -0
  18. package/dist/repeater.scss +5 -2
  19. package/dist/text-temp-v2.scss +2 -2
  20. package/dist/types/builder/elements/filter-results/index.d.ts +27 -0
  21. package/dist/types/builder/elements/product-sizechart/index.d.ts +26 -0
  22. package/dist/types/builder/elements/user-elements/index.d.ts +30 -0
  23. package/dist/types/builder/enums/index.d.ts +5 -1
  24. package/dist/types/builder/index.d.ts +4 -1
  25. package/dist/types/builder/tools/element-edit/filterResults.d.ts +140 -0
  26. package/dist/types/builder/tools/element-edit/filters.d.ts +15 -8
  27. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  28. package/dist/types/builder/tools/element-edit/layouter-pro-item.d.ts +14 -1
  29. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +9 -2
  30. package/dist/types/builder/tools/element-edit/pastOrders.d.ts +61 -1
  31. package/dist/types/builder/tools/element-edit/productActions.d.ts +6 -1
  32. package/dist/types/builder/tools/element-edit/productSizeChart.d.ts +24 -0
  33. package/dist/types/builder/tools/element-edit/userElements.d.ts +555 -0
  34. package/dist/types/global/types.d.ts +2 -1
  35. package/dist/user-elements.scss +1375 -0
  36. package/dist/variant-picker.scss +127 -84
  37. package/dist/widget.scss +2 -0
  38. package/package.json +1 -1
@@ -0,0 +1,1375 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
+ $resizeActive: '[data-cms-element-resizer="true"]';
6
+ [data-div-type="element"] {
7
+ &[data-element-type="userElements"] {
8
+ width: var(
9
+ --_sf-mob-el-wh-st-mx,
10
+ var(
11
+ --_sf-tab-el-wh-st-mx,
12
+ var(
13
+ --_sf-el-wh-st-mx,
14
+ calc(
15
+ 1% *
16
+ var(
17
+ --_ctm-mob-bun-ele-nw-wh-vl,
18
+ var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
+ )
20
+ )
21
+ )
22
+ )
23
+ );
24
+
25
+ height: auto;
26
+
27
+ margin: var(
28
+ --_ctm-mob-bun-lt-mn,
29
+ var(
30
+ --_ctm-tab-bun-lt-mn,
31
+ var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
32
+ )
33
+ );
34
+
35
+ background-color: var(
36
+ --_ctm-mob-bun-dn-bd-cr,
37
+ var(--_ctm-tab-bun-dn-bd-cr, var(--_ctm-bun-dn-bd-cr))
38
+ );
39
+ background-image: var(
40
+ --_ctm-mob-bun-dn-bd-ie,
41
+ var(--_ctm-tab-bun-dn-bd-ie, var(--_ctm-bun-dn-bd-ie))
42
+ );
43
+ background-attachment: var(
44
+ --_ctm-mob-bun-dn-bd-at,
45
+ var(--_ctm-tab-bun-dn-bd-at, var(--_ctm-bun-dn-bd-at))
46
+ );
47
+ background-position: var(
48
+ --_ctm-mob-bun-dn-bd-pn,
49
+ var(--_ctm-tab-bun-dn-bd-pn, var(--_ctm-bun-dn-bd-pn))
50
+ );
51
+ background-repeat: var(
52
+ --_ctm-mob-bun-dn-bd-rt,
53
+ var(--_ctm-tab-bun-dn-bd-rt, var(--_ctm-bun-dn-bd-rt))
54
+ );
55
+ background-size: var(
56
+ --_ctm-mob-bun-dn-bd-se,
57
+ var(--_ctm-tab-bun-dn-bd-se, var(--_ctm-bun-dn-bd-se))
58
+ );
59
+ padding: var(--_ctm-mob-bun-lt-pg, var(--_ctm-tab-bun-lt-pg, var(--_ctm-bun-lt-pg)));
60
+
61
+ border-color: var(
62
+ --_ctm-mob-bun-dn-br-cr,
63
+ var(--_ctm-tab-bun-dn-br-cr, var(--_ctm-bun-dn-br-cr))
64
+ );
65
+
66
+ border-style: var(
67
+ --_ctm-mob-bun-dn-br-se,
68
+ var(--_ctm-tab-bun-dn-br-se, var(--_ctm-bun-dn-br-se))
69
+ );
70
+
71
+ border-width: var(
72
+ --_ctm-mob-bun-dn-br-wh,
73
+ var(--_ctm-tab-bun-dn-br-wh, var(--_ctm-bun-dn-br-wh))
74
+ );
75
+
76
+ border-radius: var(
77
+ --_ctm-mob-bun-dn-br-rs,
78
+ var(--_ctm-tab-bun-dn-br-rs, var(--_ctm-bun-dn-br-rs))
79
+ );
80
+
81
+ box-shadow: var(
82
+ --_show-shadow,
83
+ var(--_ctm-mob-bun-dn-sw-ae, var(--_ctm-tab-bun-dn-sw-ae, var(--_ctm-bun-dn-sw-ae)))
84
+ var(--_ctm-mob-bun-dn-sw-br, var(--_ctm-tab-bun-dn-sw-br, var(--_ctm-bun-dn-sw-br)))
85
+ var(--_ctm-mob-bun-dn-sw-sd, var(--_ctm-tab-bun-dn-sw-sd, var(--_ctm-bun-dn-sw-sd)))
86
+ var(--_ctm-mob-bun-dn-sw-cr, var(--_ctm-tab-bun-dn-sw-cr, var(--_ctm-bun-dn-sw-cr)))
87
+ );
88
+
89
+ & > div {
90
+ &.wrapper {
91
+ width: 100%;
92
+ }
93
+ }
94
+
95
+ .embla {
96
+ width: 90%;
97
+ height: 100%;
98
+ position: relative;
99
+ display: flex;
100
+ flex-direction: column;
101
+ // overflow: hidden;
102
+
103
+ .embla__viewport {
104
+ width: 100%;
105
+ height: 100%;
106
+ position: relative;
107
+ display: flex;
108
+ flex-direction: column;
109
+
110
+ overflow: hidden;
111
+
112
+ .embla__container {
113
+ width: 100%;
114
+ height: 100%;
115
+ display: grid;
116
+ grid-template-rows: 100%;
117
+
118
+ grid-template-columns: repeat(
119
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
120
+ calc(
121
+ 100% /
122
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
123
+ )
124
+ );
125
+
126
+ grid-auto-flow: column;
127
+ gap: var(--_ctm-lt-qa-im-sg);
128
+
129
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
130
+ height: calc(
131
+ 100% - calc(
132
+ var(
133
+ --_ctm-mob-dn-pn-as-aw-se,
134
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
135
+ ) +
136
+ 10px
137
+ )
138
+ );
139
+ }
140
+
141
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
142
+ height: calc(
143
+ 100% - calc(
144
+ var(
145
+ --_ctm-mob-dn-pn-le-le-ht,
146
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
147
+ ) +
148
+ 20px
149
+ )
150
+ );
151
+ }
152
+
153
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
154
+ height: calc(
155
+ 100% - calc(
156
+ var(
157
+ --_ctm-mob-dn-pn-ds-dt-se,
158
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
159
+ ) +
160
+ 20px
161
+ )
162
+ );
163
+ }
164
+
165
+ .embla__slide {
166
+ width: 100%;
167
+ height: 100%;
168
+ white-space: nowrap;
169
+ }
170
+ }
171
+ }
172
+ &:not([data-display-style="Column"]) {
173
+ .embla__container {
174
+ grid-auto-columns: calc(
175
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
176
+ );
177
+ }
178
+ }
179
+
180
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
181
+ // overflow: unset;
182
+
183
+ .embla__viewport {
184
+ overflow: unset;
185
+ height: 80%;
186
+ flex-grow: 1;
187
+ &:not([data-is-builder-type="true"]) {
188
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
189
+ }
190
+
191
+ .embla__container {
192
+ overflow: unset;
193
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
194
+ // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
195
+
196
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
197
+ grid-template-rows: unset;
198
+
199
+ grid-auto-flow: row;
200
+
201
+ &[data-overflow-hidden="true"] {
202
+ overflow: hidden;
203
+ }
204
+ }
205
+ }
206
+ }
207
+
208
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
209
+ .embla__viewport {
210
+ .embla__container {
211
+ grid-template-rows: repeat(
212
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
213
+ calc(
214
+ 100% /
215
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
216
+ )
217
+ );
218
+ }
219
+ }
220
+ }
221
+
222
+ &[data-display-style="Rows"] {
223
+ // overflow: unset;
224
+
225
+ .embla__viewport {
226
+ overflow: unset;
227
+ height: 80%;
228
+ flex-grow: 1;
229
+
230
+ &:not([data-is-builder-type="true"]) {
231
+ height: var(--_ctm-height);
232
+ }
233
+
234
+ .embla__container {
235
+ overflow: hidden;
236
+ height: var(--_ctm-height);
237
+ // min-height: var(--_ctm-height);
238
+
239
+ grid-template-columns: repeat(
240
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
241
+ 1fr
242
+ );
243
+ grid-template-rows: unset;
244
+ grid-auto-flow: row;
245
+ }
246
+ }
247
+ }
248
+
249
+ &[data-display-style="Column"] {
250
+ // overflow: unset;
251
+
252
+ .embla__viewport {
253
+ .embla__container {
254
+ display: flex;
255
+ .embla__slide {
256
+ width: unset;
257
+ height: 100%;
258
+ aspect-ratio: 1 / 2;
259
+ }
260
+ }
261
+ }
262
+ }
263
+ &[data-display-style="Masonry"] {
264
+ // overflow: unset;
265
+
266
+ .embla__viewport {
267
+ overflow: hidden;
268
+ height: 80%;
269
+ flex-grow: 1;
270
+
271
+ &:not([data-is-builder-type="true"]) {
272
+ height: var(--_ctm-height);
273
+ }
274
+
275
+ .embla__container {
276
+ overflow: unset;
277
+ display: block;
278
+
279
+ column-count: var(
280
+ --_ctm-mob-lt-is-pr-rw,
281
+ var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
282
+ );
283
+ gap: unset;
284
+
285
+ column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
286
+
287
+ height: auto;
288
+
289
+ .embla__slide {
290
+ margin-bottom: var(
291
+ --_ctm-mob-lt-im-gp,
292
+ var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
293
+ );
294
+ height: unset;
295
+
296
+ .gallery__slide {
297
+ height: unset;
298
+ }
299
+ }
300
+ }
301
+ }
302
+ }
303
+
304
+ .arrow-navigation {
305
+ display: flex;
306
+ position: absolute;
307
+ top: 50%;
308
+ left: 50%;
309
+ width: 100%;
310
+ justify-content: space-between;
311
+ transform: translate(-50%, -50%);
312
+ // padding-left: 20px;
313
+ &[data-control-type="Side"] {
314
+ .left-button,
315
+ .right-button {
316
+ background-color: transparent;
317
+ }
318
+ }
319
+ &[data-background-shape="Round"] {
320
+ .left-button,
321
+ .right-button {
322
+ background-color: #f2f5f5;
323
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
324
+ }
325
+ }
326
+ &[data-control-type="Bottom-Overflow"] {
327
+ transform: translateX(-50%);
328
+ width: 100%;
329
+ justify-content: center;
330
+ gap: 12px;
331
+ top: unset;
332
+ bottom: 6px;
333
+ }
334
+ &[data-control-type="Bottom"] {
335
+ transform: unset;
336
+ position: static;
337
+ width: 100%;
338
+ justify-content: center;
339
+ gap: 12px;
340
+ margin-top: 10px;
341
+ }
342
+ .left-button {
343
+ padding: 10px;
344
+ border-radius: 50%;
345
+ border: none;
346
+ width: var(
347
+ --_ctm-mob-dn-pn-as-aw-se,
348
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
349
+ );
350
+ height: var(
351
+ --_ctm-mob-dn-pn-as-aw-se,
352
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
353
+ );
354
+
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ cursor: pointer;
359
+ outline: none;
360
+ margin-left: 12px;
361
+ &:disabled {
362
+ & svg {
363
+ path {
364
+ stroke: rgb(192, 192, 192);
365
+ }
366
+ }
367
+ }
368
+ }
369
+ .right-button {
370
+ border-radius: 50%;
371
+ border: none;
372
+ width: var(
373
+ --_ctm-mob-dn-pn-as-aw-se,
374
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
375
+ );
376
+ height: var(
377
+ --_ctm-mob-dn-pn-as-aw-se,
378
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
379
+ );
380
+
381
+ display: flex;
382
+ align-items: center;
383
+ justify-content: center;
384
+ cursor: pointer;
385
+ outline: none;
386
+ margin-right: 12px;
387
+ padding: 10px;
388
+
389
+ &:disabled {
390
+ & svg {
391
+ path {
392
+ stroke: rgb(192, 192, 192);
393
+ }
394
+ }
395
+ }
396
+ }
397
+ .icon {
398
+ display: flex;
399
+
400
+ svg {
401
+ width: calc(
402
+ var(
403
+ --_ctm-mob-dn-pn-as-aw-se,
404
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
405
+ ) *
406
+ 0.5
407
+ );
408
+ height: calc(
409
+ var(
410
+ --_ctm-mob-dn-pn-as-aw-se,
411
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
412
+ ) *
413
+ 0.5
414
+ );
415
+
416
+ path {
417
+ stroke: var(
418
+ --_ctm-mob-dn-pn-as-aw-cr,
419
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
420
+ );
421
+ }
422
+ }
423
+ }
424
+ }
425
+
426
+ &[data-control-type="Side"] {
427
+ .embla__viewport {
428
+ width: calc(100% - 120px);
429
+ margin-inline: auto;
430
+ }
431
+ .left-button {
432
+ position: absolute;
433
+ left: 0;
434
+ top: 50%;
435
+ transform: translateY(-50%);
436
+ }
437
+ .right-button {
438
+ position: absolute;
439
+
440
+ right: 0;
441
+ top: 50%;
442
+ transform: translateY(-50%);
443
+ }
444
+ }
445
+
446
+ &[data-thumbnail-placement="top"] {
447
+ flex-direction: column-reverse;
448
+ }
449
+ &[data-thumbnail-placement="bottom"] {
450
+ flex-direction: column;
451
+ }
452
+ &[data-thumbnail-placement="left"] {
453
+ flex-direction: row-reverse;
454
+
455
+ .embla__thumbs {
456
+ width: var(--_ctm-lt-tl-se);
457
+ height: 100%;
458
+
459
+ & .embla__thumbs__container {
460
+ flex-direction: column;
461
+ height: 100%;
462
+ }
463
+ }
464
+ }
465
+ &[data-thumbnail-placement="right"] {
466
+ flex-direction: row;
467
+ .embla__thumbs {
468
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
469
+
470
+ height: 100%;
471
+
472
+ & .embla__thumbs__container {
473
+ flex-direction: column;
474
+ height: 100%;
475
+ }
476
+ }
477
+ }
478
+ .embla__dots {
479
+ display: flex;
480
+ flex-wrap: wrap;
481
+ justify-content: center;
482
+ align-items: center;
483
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
484
+ gap: 6px;
485
+ margin-top: 16px;
486
+
487
+ &[data-control-type="Bottom-Overflow"] {
488
+ position: absolute;
489
+ bottom: 10px;
490
+ left: 50%;
491
+ transform: translateX(-50%);
492
+ width: 75%;
493
+ }
494
+ .embla__dot {
495
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
496
+ -webkit-appearance: none;
497
+ appearance: none;
498
+ background-color: var(
499
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
500
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
501
+ );
502
+
503
+ touch-action: manipulation;
504
+ display: inline-flex;
505
+ text-decoration: none;
506
+ cursor: pointer;
507
+ border: 0;
508
+ padding: 0;
509
+ margin: 0;
510
+ // width: 0.6rem;
511
+ // height: 0.6rem;
512
+ width: var(
513
+ --_ctm-mob-dn-pn-ds-dt-se,
514
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
515
+ );
516
+ height: var(
517
+ --_ctm-mob-dn-pn-ds-dt-se,
518
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
519
+ );
520
+
521
+ display: flex;
522
+ align-items: center;
523
+ justify-content: center;
524
+ border-radius: 50%;
525
+ }
526
+ .embla__dot:after {
527
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
528
+ width: var(
529
+ --_ctm-mob-dn-pn-ds-dt-se,
530
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
531
+ );
532
+ height: var(
533
+ --_ctm-mob-dn-pn-ds-dt-se,
534
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
535
+ );
536
+
537
+ border-radius: 50%;
538
+ display: flex;
539
+ align-items: center;
540
+ content: "";
541
+ }
542
+ .embla__dot--selected:after {
543
+ box-shadow: inset 0 0 0 1px var(--text-body);
544
+ background-color: var(
545
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
546
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
547
+ );
548
+ }
549
+ &[data-slider-control="Pagination Line"] {
550
+ .embla__dot {
551
+ width: var(
552
+ --_ctm-mob-dn-pn-le-le-wh,
553
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
554
+ );
555
+ height: var(
556
+ --_ctm-mob-dn-pn-le-le-ht,
557
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
558
+ );
559
+ background-color: var(
560
+ --_ctm-mob-dn-pn-le-or-le-cr,
561
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
562
+ );
563
+ border-radius: 6px;
564
+ }
565
+
566
+ .embla__dot--selected:after {
567
+ box-shadow: inset 0 0 0 1px var(--text-body);
568
+ border-radius: 6px;
569
+ width: var(
570
+ --_ctm-mob-dn-pn-le-le-wh,
571
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
572
+ );
573
+ height: var(
574
+ --_ctm-mob-dn-pn-le-le-ht,
575
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
576
+ );
577
+ background-color: var(
578
+ --_ctm-mob-dn-pn-le-ct-le-cr,
579
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
580
+ );
581
+ }
582
+ }
583
+ }
584
+
585
+ .embla__thumbs {
586
+ width: 100%;
587
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
588
+
589
+ position: relative;
590
+ display: grid;
591
+ grid-template-columns: 1fr;
592
+ overflow: hidden;
593
+ // margin: 10px;
594
+ padding: 10px;
595
+
596
+ .embla__thumbs__viewport {
597
+ width: 100%;
598
+ height: 100%;
599
+ position: relative;
600
+ display: flex;
601
+ flex-direction: column;
602
+
603
+ overflow: hidden;
604
+ }
605
+ .embla__thumbs__container {
606
+ display: flex;
607
+ flex-direction: row;
608
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
609
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
610
+
611
+ width: 100%;
612
+ // justify-content: center;
613
+ // height: 200px;
614
+
615
+ .embla__thumbs__slide {
616
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
617
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
618
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
619
+
620
+ & img {
621
+ width: 100%;
622
+ height: 100%;
623
+ }
624
+ }
625
+ }
626
+ }
627
+ }
628
+
629
+ .user_elements_horizontal_container {
630
+ display: flex;
631
+ flex-direction: column;
632
+ width: 100%;
633
+ border: 1px solid #d0d5dd;
634
+ border-radius: 6px;
635
+ padding: 24px;
636
+ gap: 16px;
637
+
638
+ &.vertical {
639
+ flex-direction: row;
640
+
641
+ &[data-content-alignment="Vertical"] {
642
+ flex-direction: column;
643
+ max-width: 350px;
644
+ }
645
+
646
+ .user_elements_user_info_wrapper {
647
+ flex-direction: column;
648
+ justify-content: normal;
649
+ padding: 16px;
650
+ height: max-content;
651
+ gap: 16px;
652
+ background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
653
+ border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
654
+ border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
655
+ border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
656
+ border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
657
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
658
+ var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
659
+
660
+ .user_elements_user_data_wrapper {
661
+ flex-direction: column;
662
+ white-space: nowrap;
663
+ align-items: flex-start;
664
+ gap: 16px;
665
+ }
666
+ }
667
+
668
+ .user_elements_quota_wrapper {
669
+ flex-direction: column;
670
+ align-items: flex-start;
671
+ height: fit-content;
672
+ background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
673
+ border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
674
+ border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
675
+ border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
676
+ border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
677
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
678
+ var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
679
+
680
+ .quote_vertical_scroll_wrapper {
681
+ overflow-y: scroll;
682
+ gap: var(--_ctm-lt-qa-im-sg);
683
+ display: flex;
684
+ width: 100%;
685
+ max-height: 250px;
686
+ flex-direction: column;
687
+
688
+ .quote_item_wrapper {
689
+ flex-direction: column;
690
+
691
+ .quote_info_wrapper {
692
+ justify-content: space-between;
693
+ }
694
+
695
+ .quota_divider {
696
+ width: 100%;
697
+ height: 1px;
698
+ }
699
+ }
700
+ }
701
+
702
+ .quote_vertical_scroll_wrap {
703
+ height: auto;
704
+ display: flex;
705
+ width: 100%;
706
+ flex-direction: column;
707
+ gap: 16px;
708
+
709
+ .quote_item_wrapper {
710
+ justify-content: space-between;
711
+ width: 100%;
712
+ align-items: center;
713
+ gap: 16px;
714
+ align-items: flex-start;
715
+ flex-direction: column;
716
+
717
+ .quota_divider {
718
+ height: 1px;
719
+ width: 100%;
720
+ }
721
+
722
+ .quote_info_wrapper {
723
+ width: 100%;
724
+ justify-content: space-between;
725
+ }
726
+ }
727
+ }
728
+ }
729
+
730
+ .user_elements_allowance_wrapper {
731
+ flex-direction: column;
732
+ align-items: flex-start;
733
+ background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
734
+ border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
735
+ border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
736
+ border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
737
+ border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
738
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
739
+ var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
740
+
741
+ .allowance_vertical_scroll_wrapper {
742
+ overflow-y: scroll;
743
+ gap: var(--_ctm-lt-qa-im-sg);
744
+ display: flex;
745
+ width: 100%;
746
+ max-height: 250px;
747
+ flex-direction: column;
748
+
749
+ .allowance_item_wrapper {
750
+ flex-direction: column;
751
+
752
+ .allowance_info_wrapper {
753
+ justify-content: space-between;
754
+ }
755
+
756
+ .allowance_divider {
757
+ width: 100%;
758
+ height: 1px;
759
+ }
760
+ }
761
+ }
762
+
763
+ .allowance_vertical_scroll_wrap {
764
+ gap: var(--_ctm-lt-qa-im-sg);
765
+ display: flex;
766
+ width: 100%;
767
+ flex-direction: column;
768
+
769
+ .allowance_item_wrapper {
770
+ flex-direction: column;
771
+
772
+ .allowance_info_wrapper {
773
+ justify-content: space-between;
774
+ }
775
+
776
+ .allowance_divider {
777
+ width: 100%;
778
+ height: 1px;
779
+ }
780
+ }
781
+ }
782
+ }
783
+
784
+ .user_elements_user_info_secondary_wrapper {
785
+ flex-direction: column;
786
+ align-items: flex-start;
787
+ height: max-content;
788
+ background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
789
+ border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
790
+ border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
791
+ border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
792
+ border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
793
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
794
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
795
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
796
+
797
+ .overview_text {
798
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
799
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
800
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
801
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
802
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
803
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
804
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
805
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
806
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
807
+ }
808
+
809
+ .shipping_address_wrapper {
810
+ flex-direction: row;
811
+ gap: 6px;
812
+ }
813
+
814
+ .secondary_info_divider {
815
+ height: 1px;
816
+ width: 100%;
817
+ }
818
+
819
+ .active_orders_wrapper {
820
+ flex-direction: row;
821
+ justify-content: space-between;
822
+ }
823
+
824
+ .payment_methods_wrapper {
825
+ flex-direction: row;
826
+ justify-content: space-between;
827
+ }
828
+
829
+ .my_cart_wrapper {
830
+ flex-direction: row;
831
+ align-items: center;
832
+ }
833
+ }
834
+ }
835
+
836
+ .user_elements_user_info_wrapper {
837
+ display: flex;
838
+ justify-content: space-between;
839
+ background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
840
+ border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
841
+ border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
842
+ border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
843
+ border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
844
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
845
+ var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
846
+
847
+ .user_elements_user_name_wrapper {
848
+ display: flex;
849
+ gap: 6px;
850
+ align-items: center;
851
+
852
+ .user_elements_user_name {
853
+ display: flex;
854
+ flex: 1 0 0;
855
+ color: var(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
856
+ font-family: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
857
+ font-size: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
858
+ font-style: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
859
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
860
+ line-height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-le-ht);
861
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg);
862
+ text-align: var(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an);
863
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ue);
864
+ }
865
+
866
+ .icon {
867
+ cursor: pointer;
868
+ svg {
869
+ width: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
870
+ height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
871
+ path {
872
+ stroke: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
873
+ }
874
+ }
875
+ }
876
+ }
877
+
878
+ .user_elements_user_data_wrapper {
879
+ display: flex;
880
+ align-items: center;
881
+ gap: 12px;
882
+
883
+ .user_elements_user_data {
884
+ display: flex;
885
+
886
+ .user_elements_user_id {
887
+ display: flex;
888
+ flex: 1 0 0;
889
+ gap: 6px;
890
+ align-items: center;
891
+ color: var(--_ctm-dn-ur-io-dn-ur-id-dn-cr);
892
+ font-family: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
893
+ font-size: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
894
+ font-style: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
895
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
896
+ line-height: var(--_ctm-dn-ur-io-dn-ur-id-dn-le-ht);
897
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg);
898
+ text-align: var(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an);
899
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-id-dn-ue);
900
+
901
+ .icon {
902
+ cursor: pointer;
903
+ svg {
904
+ width: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
905
+ height: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
906
+ path {
907
+ stroke: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
908
+ }
909
+ }
910
+ }
911
+ }
912
+
913
+ .user_elements_user_email {
914
+ display: flex;
915
+ flex: 1 0 0;
916
+ gap: 6px;
917
+ align-items: center;
918
+ color: var(--_ctm-dn-ur-io-dn-ur-el-dn-cr);
919
+ font-family: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
920
+ font-size: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
921
+ font-style: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
922
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
923
+ line-height: var(--_ctm-dn-ur-io-dn-ur-el-dn-le-ht);
924
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg);
925
+ text-align: var(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an);
926
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-el-dn-ue);
927
+
928
+ .icon {
929
+ cursor: pointer;
930
+ svg {
931
+ width: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
932
+ height: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
933
+ path {
934
+ stroke: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
935
+ }
936
+ }
937
+ }
938
+ }
939
+
940
+ .user_elements_user_phone {
941
+ display: flex;
942
+ flex: 1 0 0;
943
+ gap: 6px;
944
+ align-items: center;
945
+ color: var(--_ctm-dn-ur-io-dn-ur-pe-dn-cr);
946
+ font-family: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
947
+ font-size: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
948
+ font-style: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
949
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
950
+ line-height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-le-ht);
951
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg);
952
+ text-align: var(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an);
953
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ue);
954
+
955
+ .icon {
956
+ cursor: pointer;
957
+ svg {
958
+ width: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
959
+ height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
960
+ path {
961
+ stroke: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
962
+ }
963
+ }
964
+ }
965
+ }
966
+ }
967
+ }
968
+ }
969
+
970
+ .user_elements_quota_wrapper {
971
+ display: flex;
972
+ flex-direction: row;
973
+ width: 100%;
974
+ align-items: center;
975
+ gap: 16px;
976
+ background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
977
+ border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
978
+ border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
979
+ border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
980
+ border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
981
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
982
+ var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
983
+
984
+ .quota_label_wrapper {
985
+ display: flex;
986
+ flex: 1 0 0;
987
+ min-width: 109px;
988
+
989
+ .quota_label {
990
+ display: flex;
991
+ flex: 1 0 0;
992
+ color: var(--_ctm-dn-qa-dn-qa-hg-dn-cr);
993
+ font-family: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy);
994
+ font-size: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
995
+ font-style: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
996
+ font-weight: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
997
+ line-height: var(--_ctm-dn-qa-dn-qa-hg-dn-le-ht);
998
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-hg-dn-lr-sg);
999
+ text-align: var(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
1000
+ text-decoration: var(--_ctm-dn-qa-dn-qa-hg-dn-ue);
1001
+ }
1002
+ }
1003
+
1004
+ .quota_upfront_wrapper {
1005
+ display: flex;
1006
+ gap: var(--_ctm-lt-qa-im-sg);
1007
+ flex-wrap: wrap;
1008
+ }
1009
+
1010
+ .quote_item_wrapper {
1011
+ display: flex;
1012
+ flex-direction: row;
1013
+ gap: var(--_ctm-lt-qa-im-sg);
1014
+
1015
+ .quote_info_wrapper {
1016
+ display: flex;
1017
+ gap: 12px;
1018
+ .quota_name_wrapper {
1019
+ display: flex;
1020
+ flex-direction: column;
1021
+ gap: 6px;
1022
+
1023
+ .quota_name {
1024
+ display: flex;
1025
+ flex: 1 0 0;
1026
+ color: var(--_ctm-dn-qa-dn-qa-ne-dn-cr);
1027
+ font-family: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
1028
+ font-size: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
1029
+ font-style: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
1030
+ font-weight: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
1031
+ line-height: var(--_ctm-dn-qa-dn-qa-ne-dn-le-ht);
1032
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-ne-dn-lr-sg);
1033
+ text-align: var(--_ctm-dn-qa-dn-qa-ne-dn-tt-an);
1034
+ text-decoration: var(--_ctm-dn-qa-dn-qa-ne-dn-ue);
1035
+ }
1036
+
1037
+ .quota_expiry {
1038
+ display: flex;
1039
+ flex: 1 0 0;
1040
+ color: var(--_ctm-dn-qa-dn-qa-ey-dn-cr);
1041
+ font-family: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy);
1042
+ font-size: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
1043
+ font-style: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
1044
+ font-weight: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
1045
+ line-height: var(--_ctm-dn-qa-dn-qa-ey-dn-le-ht);
1046
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-ey-dn-lr-sg);
1047
+ text-align: var(--_ctm-dn-qa-dn-qa-ey-dn-tt-an);
1048
+ text-decoration: var(--_ctm-dn-qa-dn-qa-ey-dn-ue);
1049
+ }
1050
+ }
1051
+
1052
+ .quota_inventory {
1053
+ display: flex;
1054
+ justify-content: center;
1055
+ align-items: center;
1056
+ color: var(--_ctm-dn-qa-dn-qa-iy-dn-cr);
1057
+ font-family: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-fy);
1058
+ font-size: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
1059
+ font-style: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
1060
+ font-weight: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
1061
+ line-height: var(--_ctm-dn-qa-dn-qa-iy-dn-le-ht);
1062
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-iy-dn-lr-sg);
1063
+ text-align: var(--_ctm-dn-qa-dn-qa-iy-dn-tt-an);
1064
+ text-decoration: var(--_ctm-dn-qa-dn-qa-iy-dn-ue);
1065
+ }
1066
+ }
1067
+
1068
+ .quota_divider {
1069
+ content: "";
1070
+ height: auto;
1071
+ width: 1px;
1072
+ background-color: #d0d5dd;
1073
+ }
1074
+ }
1075
+ }
1076
+
1077
+ .user_elements_allowance_wrapper {
1078
+ display: flex;
1079
+ flex-direction: row;
1080
+ width: 100%;
1081
+ align-items: center;
1082
+ gap: 16px;
1083
+ background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
1084
+ border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
1085
+ border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1086
+ border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1087
+ border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
1088
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1089
+ var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1090
+
1091
+ .allowance_label_wrapper {
1092
+ display: flex;
1093
+ flex: 1 0 0;
1094
+ min-width: 109px;
1095
+
1096
+ .allowance_label {
1097
+ display: flex;
1098
+ flex: 1 0 0;
1099
+ white-space: nowrap;
1100
+ color: var(--_ctm-dn-ae-dn-ae-hg-dn-cr);
1101
+ font-family: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy);
1102
+ font-size: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1103
+ font-style: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1104
+ font-weight: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
1105
+ line-height: var(--_ctm-dn-ae-dn-ae-hg-dn-le-ht);
1106
+ letter-spacing: var(--_ctm-dn-ae-dn-hg-ne-dn-lr-sg);
1107
+ text-align: var(--_ctm-dn-ae-dn-ae-hg-dn-tt-an);
1108
+ text-decoration: var(--_ctm-dn-ae-dn-ae-hg-dn-ue);
1109
+ }
1110
+ }
1111
+
1112
+ .allowance_upfront_wrapper {
1113
+ display: flex;
1114
+ gap: var(--_ctm-lt-qa-im-sg);
1115
+ flex-wrap: wrap;
1116
+ }
1117
+
1118
+ .allowance_item_wrapper {
1119
+ display: flex;
1120
+ flex-direction: row;
1121
+ gap: var(--_ctm-lt-qa-im-sg);
1122
+
1123
+ .allowance_info_wrapper {
1124
+ display: flex;
1125
+ gap: 12px;
1126
+ .allowance_name_wrapper {
1127
+ display: flex;
1128
+ flex-direction: column;
1129
+ gap: 6px;
1130
+
1131
+ .allowance_name {
1132
+ display: flex;
1133
+ flex: 1 0 0;
1134
+ color: var(--_ctm-dn-ae-dn-ae-ne-dn-cr);
1135
+ font-family: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
1136
+ font-size: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1137
+ font-style: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1138
+ font-weight: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
1139
+ line-height: var(--_ctm-dn-ae-dn-ae-ne-dn-le-ht);
1140
+ letter-spacing: var(--_ctm-dn-ae-dn-ae-ne-dn-lr-sg);
1141
+ text-align: var(--_ctm-dn-ae-dn-ae-ne-dn-tt-an);
1142
+ text-decoration: var(--_ctm-dn-ae-dn-ae-ne-dn-ue);
1143
+ }
1144
+
1145
+ .allowance_expiry {
1146
+ display: flex;
1147
+ flex: 1 0 0;
1148
+ color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1149
+ font-family: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy);
1150
+ font-size: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
1151
+ font-style: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
1152
+ font-weight: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
1153
+ line-height: var(--_ctm-dn-ae-dn-ae-ey-dn-le-ht);
1154
+ letter-spacing: var(--_ctm-dn-ae-dn-ae-ey-dn-lr-sg);
1155
+ text-align: var(--_ctm-dn-ae-dn-ae-ey-dn-tt-an);
1156
+ text-decoration: var(--_ctm-dn-ae-dn-ae-ey-dn-ue);
1157
+ }
1158
+ }
1159
+
1160
+ .allowance_inventory {
1161
+ display: flex;
1162
+ justify-content: center;
1163
+ align-items: center;
1164
+ color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1165
+ font-family: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-fy);
1166
+ font-size: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
1167
+ font-style: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
1168
+ font-weight: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
1169
+ line-height: var(--_ctm-dn-ae-dn-ae-iy-dn-le-ht);
1170
+ letter-spacing: var(--_ctm-dn-ae-dn-ae-iy-dn-lr-sg);
1171
+ text-align: var(--_ctm-dn-ae-dn-ae-iy-dn-tt-an);
1172
+ text-decoration: var(--_ctm-dn-ae-dn-ae-iy-dn-ue);
1173
+ }
1174
+ }
1175
+
1176
+ .allowance_divider {
1177
+ content: "";
1178
+ height: auto;
1179
+ width: 1px;
1180
+ background-color: #d0d5dd;
1181
+ }
1182
+ }
1183
+ }
1184
+
1185
+ .user_elements_user_info_secondary_wrapper {
1186
+ display: flex;
1187
+ width: 100%;
1188
+ align-items: center;
1189
+ gap: 16px;
1190
+ background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
1191
+ border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
1192
+ border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1193
+ border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1194
+ border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
1195
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1196
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1197
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1198
+
1199
+ .shipping_address_wrapper {
1200
+ display: flex;
1201
+ flex-direction: column;
1202
+ gap: 4px;
1203
+ flex: 1 0 0;
1204
+ align-self: stretch;
1205
+ justify-content: flex-start;
1206
+
1207
+ .shipping_address_label {
1208
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1209
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1210
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1211
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1212
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1213
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1214
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1215
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1216
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1217
+ }
1218
+
1219
+ .shipping_address {
1220
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1221
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1222
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1223
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1224
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1225
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1226
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1227
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1228
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1229
+ }
1230
+ }
1231
+
1232
+ .secondary_info_divider {
1233
+ content: "";
1234
+ height: 3rem;
1235
+ width: 1px;
1236
+ background-color: #d0d5dd;
1237
+ }
1238
+
1239
+ .active_orders_wrapper {
1240
+ display: flex;
1241
+ flex-direction: column;
1242
+ gap: 4px;
1243
+ flex: 1 0 0;
1244
+ align-self: stretch;
1245
+ justify-content: flex-start;
1246
+
1247
+ .active_order_label {
1248
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1249
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1250
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1251
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1252
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1253
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1254
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1255
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1256
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1257
+ }
1258
+
1259
+ .order_wrapper {
1260
+ display: flex;
1261
+ gap: 6px;
1262
+ .remaining_order {
1263
+ color: #243dc6;
1264
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1265
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1266
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1267
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1268
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1269
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1270
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1271
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1272
+ }
1273
+ .active_orders {
1274
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1275
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1276
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1277
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1278
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1279
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1280
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1281
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1282
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1283
+ }
1284
+ }
1285
+ }
1286
+
1287
+ .payment_methods_wrapper {
1288
+ display: flex;
1289
+ flex-direction: column;
1290
+ gap: 4px;
1291
+ flex: 1 0 0;
1292
+ align-self: stretch;
1293
+ justify-content: flex-start;
1294
+
1295
+ .payment_methods_label {
1296
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1297
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1298
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1299
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1300
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1301
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1302
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1303
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1304
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1305
+ }
1306
+
1307
+ .payment_wrapper {
1308
+ display: flex;
1309
+ gap: 6px;
1310
+ .remaining_payment {
1311
+ color: #243dc6;
1312
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1313
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1314
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1315
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1316
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1317
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1318
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1319
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1320
+ }
1321
+ .active_payment {
1322
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1323
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1324
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1325
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1326
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1327
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1328
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1329
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1330
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1331
+ }
1332
+ }
1333
+ }
1334
+
1335
+ .my_cart_wrapper {
1336
+ display: flex;
1337
+ flex-direction: row;
1338
+ gap: 16px;
1339
+ align-items: center;
1340
+
1341
+ .my_cart_info_wrapper {
1342
+ display: flex;
1343
+ flex-direction: column;
1344
+ gap: 4px;
1345
+ white-space: nowrap;
1346
+
1347
+ .my_cart_label {
1348
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1349
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1350
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1351
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1352
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1353
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1354
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1355
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1356
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1357
+ }
1358
+
1359
+ .my_cart_value {
1360
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1361
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1362
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1363
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1364
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1365
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1366
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1367
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1368
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1369
+ }
1370
+ }
1371
+ }
1372
+ }
1373
+ }
1374
+ }
1375
+ }