@sc-360-v2/storefront-cms-library 0.3.53 → 0.3.55

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 (36) hide show
  1. package/dist/add-order.scss +3 -0
  2. package/dist/add-products-tab.scss +15 -1
  3. package/dist/builder.js +1 -1
  4. package/dist/buy-for-tab.scss +15 -15
  5. package/dist/buyForHeaders.scss +6 -7
  6. package/dist/cart-details.scss +32 -42
  7. package/dist/cart-products-sidebar.scss +32 -16
  8. package/dist/cart-summary.scss +2 -4
  9. package/dist/cartDropdownOverlay.scss +3 -1
  10. package/dist/checkout.scss +4 -0
  11. package/dist/confirmationModal.scss +48 -0
  12. package/dist/container.scss +15 -15
  13. package/dist/customization-tree.scss +5 -1
  14. package/dist/dropdownTemplate.scss +5 -2
  15. package/dist/employee-bulk-order.scss +3233 -319
  16. package/dist/grid.scss +36 -0
  17. package/dist/icons.js +1 -1
  18. package/dist/image-temp.scss +47 -22
  19. package/dist/index.js +1 -1
  20. package/dist/layouter-pro-item.scss +1 -1
  21. package/dist/layouter-pro.scss +5 -5
  22. package/dist/modal.scss +357 -16
  23. package/dist/order-status.scss +49 -5
  24. package/dist/section.scss +5 -1
  25. package/dist/shareCartSideBar.scss +10 -8
  26. package/dist/shipping-payments.scss +19 -15
  27. package/dist/store-locations.scss +252 -160
  28. package/dist/tab-v2.scss +15 -15
  29. package/dist/text-temp.scss +4 -1
  30. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +36 -0
  31. package/dist/types/builder/tools/element-edit/grid.d.ts +26 -0
  32. package/dist/types/builder/tools/element-edit/language-menu.d.ts +77 -0
  33. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +4 -0
  34. package/dist/types/builder/tools/element-edit/userElements.d.ts +407 -0
  35. package/dist/user-elements.scss +1449 -490
  36. package/package.json +1 -1
package/dist/user-elements.scss CHANGED
@@ -22,6 +22,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
22
22
  // )
23
23
  // )
24
24
  // );
25
+ width: var(
26
+ --_sf-el-wh-st-mx,
27
+ calc(
28
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
29
+ )
30
+ );
25
31
 
26
32
  height: auto;
27
33
 
@@ -40,7 +46,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
40
46
  }
41
47
 
42
48
  .embla {
43
- width: 90%;
49
+ width: 100%;
44
50
  height: 100%;
45
51
  position: relative;
46
52
  display: flex;
@@ -59,18 +65,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
59
65
  .embla__container {
60
66
  width: 100%;
61
67
  height: 100%;
62
- display: grid;
63
- grid-template-rows: 100%;
64
-
65
- grid-template-columns: repeat(
66
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
67
- calc(
68
- 100% /
69
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
70
- )
71
- );
72
-
73
- grid-auto-flow: column;
68
+ // display: grid;
69
+ // grid-template-rows: 100%;
70
+
71
+ // grid-template-columns: repeat(
72
+ // var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
73
+ // calc(
74
+ // 100% /
75
+ // var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
76
+ // )
77
+ // );
78
+
79
+ // grid-auto-flow: column;
80
+ display: flex;
81
+ flex-direction: row;
82
+ align-items: center;
74
83
  gap: var(--_ctm-lt-qa-im-sg);
75
84
 
76
85
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
@@ -110,9 +119,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
110
119
  }
111
120
 
112
121
  .embla__slide {
113
- width: 100%;
122
+ // width: 100%;
114
123
  height: 100%;
115
124
  white-space: nowrap;
125
+ position: relative;
116
126
  }
117
127
  }
118
128
  }
@@ -124,130 +134,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
124
134
  }
125
135
  }
126
136
 
127
- &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
128
- // overflow: unset;
129
-
130
- .embla__viewport {
131
- overflow: unset;
132
- height: 80%;
133
- flex-grow: 1;
134
- &:not([data-is-builder-type="true"]) {
135
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
136
- }
137
-
138
- .embla__container {
139
- overflow: unset;
140
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
141
- // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
142
-
143
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
144
- grid-template-rows: unset;
145
-
146
- grid-auto-flow: row;
147
-
148
- &[data-overflow-hidden="true"] {
149
- overflow: hidden;
150
- }
151
- }
152
- }
153
- }
154
-
155
- &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
156
- .embla__viewport {
157
- .embla__container {
158
- grid-template-rows: repeat(
159
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
160
- calc(
161
- 100% /
162
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
163
- )
164
- );
165
- }
166
- }
167
- }
168
-
169
- &[data-display-style="Rows"] {
170
- // overflow: unset;
171
-
172
- .embla__viewport {
173
- overflow: unset;
174
- height: 80%;
175
- flex-grow: 1;
176
-
177
- &:not([data-is-builder-type="true"]) {
178
- height: var(--_ctm-height);
179
- }
180
-
181
- .embla__container {
182
- overflow: hidden;
183
- height: var(--_ctm-height);
184
- // min-height: var(--_ctm-height);
185
-
186
- grid-template-columns: repeat(
187
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
188
- 1fr
189
- );
190
- grid-template-rows: unset;
191
- grid-auto-flow: row;
192
- }
193
- }
194
- }
195
-
196
- &[data-display-style="Column"] {
197
- // overflow: unset;
198
-
199
- .embla__viewport {
200
- .embla__container {
201
- display: flex;
202
- .embla__slide {
203
- width: unset;
204
- height: 100%;
205
- aspect-ratio: 1 / 2;
206
- }
207
- }
208
- }
209
- }
210
- &[data-display-style="Masonry"] {
211
- // overflow: unset;
212
-
213
- .embla__viewport {
214
- overflow: hidden;
215
- height: 80%;
216
- flex-grow: 1;
217
-
218
- &:not([data-is-builder-type="true"]) {
219
- height: var(--_ctm-height);
220
- }
221
-
222
- .embla__container {
223
- overflow: unset;
224
- display: block;
225
-
226
- column-count: var(
227
- --_ctm-mob-lt-is-pr-rw,
228
- var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
229
- );
230
- gap: unset;
231
-
232
- column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
233
-
234
- height: auto;
235
-
236
- .embla__slide {
237
- margin-bottom: var(
238
- --_ctm-mob-lt-im-gp,
239
- var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
240
- );
241
- height: unset;
242
-
243
- .gallery__slide {
244
- height: unset;
245
- }
246
- }
247
- }
248
- }
249
- }
250
-
251
137
  .arrow-navigation {
252
138
  display: flex;
253
139
  position: absolute;
@@ -372,7 +258,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
372
258
 
373
259
  &[data-control-type="Side"] {
374
260
  .embla__viewport {
375
- width: calc(100% - 120px);
261
+ width: calc(100% - 60px);
376
262
  margin-inline: auto;
377
263
  }
378
264
  .left-button {
@@ -575,6 +461,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
575
461
  .user__element__container {
576
462
  display: flex;
577
463
  flex-direction: column;
464
+
465
+ width: 100%;
578
466
  gap: prepareMediaVariable(--_ctm-lt-im-sg);
579
467
  background-color: var(
580
468
  --_ctm-mob-dn-wt-se-bd-cr,
@@ -614,51 +502,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
614
502
  position: relative;
615
503
  }
616
504
 
617
- &[data-show-divider="true"] {
618
- .user__element__item:not(:last-child)::before {
619
- content: "";
620
- position: absolute;
621
- left: 0;
622
- right: 0;
623
- bottom: calc(
624
- -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
625
- );
626
-
627
- height: var(
628
- --_ctm-mob-dn-wt-se-dr-wt,
629
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
630
- );
631
- background-color: var(
632
- --_ctm-mob-dn-wt-se-dr-cr,
633
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
634
- );
635
- }
636
- }
637
505
  &[data-display-type="Vertical"] {
638
- &[data-content-alignment="Vertical"] {
639
- flex-direction: column;
640
- // max-width: 350px;
506
+ &[data-show-divider="true"] {
507
+ .user__element__item:not(:last-child)::before {
508
+ content: "";
509
+ position: absolute;
510
+ left: 0;
511
+ right: 0;
512
+ bottom: calc(
513
+ -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
514
+ );
515
+
516
+ height: var(
517
+ --_ctm-mob-dn-wt-se-dr-wt,
518
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
519
+ );
520
+ background-color: var(
521
+ --_ctm-mob-dn-wt-se-dr-cr,
522
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
523
+ );
524
+ }
641
525
  }
642
526
 
643
527
  .user_elements_user_info_wrapper {
644
528
  flex-direction: column;
645
- justify-content: normal;
646
- padding: 16px;
647
- height: max-content;
648
- gap: 16px;
649
- background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
650
- border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
651
- border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
652
- border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
653
- border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
654
- box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
655
- var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
529
+ align-items: flex-start;
530
+
531
+ position: relative;
656
532
 
657
533
  .user_elements_user_data_wrapper {
534
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
535
+ display: flex;
536
+ width: 100%;
537
+ // max-height: 250px;
658
538
  flex-direction: column;
659
539
  white-space: nowrap;
660
- align-items: flex-start;
661
- gap: 16px;
662
540
  }
663
541
  }
664
542
 
@@ -667,64 +545,57 @@ $resizeActive: '[data-cms-element-resizer="true"]';
667
545
  align-items: flex-start;
668
546
 
669
547
  position: relative;
548
+ }
670
549
 
671
- .quote_vertical_scroll_wrapper {
672
- overflow-y: auto;
673
- gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
674
- display: flex;
675
- width: 100%;
676
- // max-height: 250px;
677
- flex-direction: column;
550
+ .user_elements_allowance_wrapper {
551
+ flex-direction: column;
552
+ align-items: flex-start;
553
+ position: relative;
554
+ }
678
555
 
679
- .quote_item_wrapper {
680
- flex-direction: column;
681
- position: relative;
556
+ .user_elements_user_info_secondary_wrapper {
557
+ flex-direction: column;
558
+ align-items: flex-start;
559
+ position: relative;
560
+ }
682
561
 
683
- .quote_info_wrapper {
684
- justify-content: space-between;
685
- }
562
+ &[data-content-alignment="Horizontal"] {
563
+ .user_elements_user_info_wrapper {
564
+ flex-direction: row;
565
+ justify-content: space-between;
566
+ align-items: center;
567
+ .user_elements_user_name_wrapper {
568
+ width: unset;
569
+ align-items: center;
570
+ }
686
571
 
687
- .quota_divider {
688
- width: 100%;
689
- height: 1px;
690
- }
572
+ .user_elements_user_data_wrapper {
573
+ // max-height: 250px;
574
+ flex-direction: row;
575
+ width: unset;
691
576
  }
692
577
  }
693
- .quota_label_wrapper {
694
- width: 100%;
695
- position: relative;
696
- &::after {
578
+ .user_elements_quota_wrapper {
579
+ flex-direction: row;
580
+ align-items: center;
581
+ .user_elements_user_name_wrapper {
582
+ flex-direction: row;
583
+ white-space: nowrap;
584
+ }
585
+ .quote_vertical_scroll_wrapper {
586
+ flex-direction: row;
587
+ flex-grow: 1;
588
+ width: unset;
589
+ }
590
+ .embla__slide:not(:last-child)::before {
697
591
  content: "";
698
592
  position: absolute;
699
- left: 0;
700
- right: 0;
701
- bottom: calc(
702
- -1 *
703
- (
704
- var(
705
- --_ctm-mob-lt-qa-im-sg,
706
- var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
707
- ) /
708
- 2
709
- )
710
- );
711
- height: var(
712
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
713
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
714
- );
593
+
715
594
  background-color: var(
716
595
  --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
717
596
  var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
718
597
  );
719
- }
720
- }
721
- &[data-show-divider="true"] {
722
- .quote_item_wrapper:not(:last-child)::before {
723
- content: "";
724
- position: absolute;
725
- left: 0;
726
- right: 0;
727
- bottom: calc(
598
+ right: calc(
728
599
  -1 *
729
600
  (
730
601
  var(
@@ -734,118 +605,35 @@ $resizeActive: '[data-cms-element-resizer="true"]';
734
605
  2
735
606
  )
736
607
  );
737
-
738
- height: var(
608
+ height: 100%;
609
+ width: var(
739
610
  --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
740
611
  var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
741
612
  );
742
- background-color: var(
743
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
744
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
745
- );
746
613
  }
747
- }
748
-
749
- .quote_vertical_scroll_wrap {
750
- height: auto;
751
- display: flex;
752
- width: 100%;
753
- flex-direction: column;
754
- gap: 16px;
755
-
756
- .quote_item_wrapper {
757
- justify-content: space-between;
758
- width: 100%;
614
+ .quota_label {
615
+ white-space: nowrap;
616
+ }
617
+ .quote_info_wrapper {
618
+ justify-content: flex-start;
759
619
  align-items: center;
760
- gap: 16px;
761
- align-items: flex-start;
762
- flex-direction: column;
763
-
764
- .quota_divider {
765
- height: 1px;
766
- width: 100%;
767
- }
768
-
769
- .quote_info_wrapper {
770
- width: 100%;
771
- justify-content: space-between;
772
- }
773
620
  }
774
- }
775
- }
776
-
777
- .user_elements_allowance_wrapper {
778
- flex-direction: column;
779
- align-items: flex-start;
780
- position: relative;
781
-
782
- .allowance_vertical_scroll_wrapper {
783
- overflow-y: auto;
784
- gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
785
- display: flex;
786
- width: 100%;
787
- flex-direction: column;
788
-
789
- .allowance_item_wrapper {
790
- flex-direction: column;
791
- position: relative;
792
-
793
- .allowance_info_wrapper {
794
- justify-content: space-between;
795
- }
621
+ .embla__container {
622
+ gap: var(--_ctm-lt-qa-im-sg);
796
623
  }
797
624
  }
798
-
799
- .allowance_label_wrapper {
800
- width: 100%;
801
- position: relative;
802
- &::after {
625
+ .user_elements_allowance_wrapper {
626
+ flex-direction: row;
627
+ align-items: center;
628
+ .embla__slide:not(:last-child)::before {
803
629
  content: "";
804
630
  position: absolute;
805
- left: 0;
806
- right: 0;
807
- bottom: calc(
808
- -1 *
809
- (
810
- var(
811
- --_ctm-mob-lt-ae-im-sg,
812
- var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
813
- ) /
814
- 2
815
- )
816
- );
817
- height: var(
818
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
819
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
820
- );
631
+
821
632
  background-color: var(
822
633
  --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
823
634
  var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
824
635
  );
825
- }
826
- }
827
-
828
- .allowance_vertical_scroll_wrap {
829
- gap: var(--_ctm-lt-ae-im-sg);
830
- display: flex;
831
- width: 100%;
832
- flex-direction: column;
833
-
834
- .allowance_item_wrapper {
835
- flex-direction: column;
836
-
837
- .allowance_info_wrapper {
838
- justify-content: space-between;
839
- }
840
- }
841
- }
842
- &[data-show-divider="true"] {
843
- .allowance_item_wrapper:not(:last-child)::before {
844
- content: "";
845
- position: absolute;
846
- left: 0;
847
- right: 0;
848
- bottom: calc(
636
+ right: calc(
849
637
  -1 *
850
638
  (
851
639
  var(
@@ -855,64 +643,72 @@ $resizeActive: '[data-cms-element-resizer="true"]';
855
643
  2
856
644
  )
857
645
  );
858
-
859
- height: var(
860
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
861
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
862
- );
863
- background-color: var(
864
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
865
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
646
+ height: 100%;
647
+ width: var(
648
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
649
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
866
650
  );
651
+ left: unset;
652
+ }
653
+ .allowance_vertical_scroll_wrapper {
654
+ width: unset;
655
+ flex-grow: 1;
656
+ }
657
+ .embla__container {
658
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
867
659
  }
868
660
  }
869
- }
870
-
871
- .user_elements_user_info_secondary_wrapper {
872
- flex-direction: column;
873
- align-items: flex-start;
874
-
875
- .secondary_vertical_scroll_wrapper {
876
- overflow-y: auto;
877
- gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
878
- display: flex;
879
- width: 100%;
880
- // max-height: 250px;
881
- flex-direction: column;
882
-
883
- .secondary_item_wrapper {
884
- flex-direction: column;
885
- position: relative;
886
-
887
- .quote_info_wrapper {
888
- justify-content: space-between;
889
- }
890
-
891
- .quota_divider {
892
- width: 100%;
893
- height: 1px;
894
- }
895
- }
896
- }
897
-
898
- .secondary_info_divider {
899
- height: 1px;
900
- width: 100%;
901
- }
902
-
903
- .active_orders_wrapper {
661
+ .user_elements_user_info_secondary_wrapper {
904
662
  flex-direction: row;
905
663
  justify-content: space-between;
664
+ align-items: center;
665
+ .order_wrapper {
666
+ justify-content: flex-start;
667
+ }
906
668
  }
907
-
908
- .payment_methods_wrapper {
669
+ .secondary_vertical_scroll_wrapper {
909
670
  flex-direction: row;
671
+ width: unset;
910
672
  justify-content: space-between;
673
+ align-items: center;
674
+ width: 100%;
675
+ .child {
676
+ flex-direction: column;
677
+ gap: 6px;
678
+ justify-content: flex-start;
679
+ width: 100%;
680
+ }
911
681
  }
682
+ }
683
+ }
684
+ &[data-display-type="Horizontal"] {
685
+ flex-direction: row;
686
+ .user__element__item {
687
+ width: 100%;
688
+ flex-grow: 1;
689
+ }
690
+ .user__element__item {
691
+ min-width: 200px;
692
+ }
912
693
 
913
- .my_cart_wrapper {
914
- flex-direction: row;
915
- align-items: center;
694
+ &[data-show-divider="true"] {
695
+ .user__element__item:not(:last-child)::before {
696
+ content: "";
697
+ position: absolute;
698
+ top: 0;
699
+ bottom: 0;
700
+ right: calc(
701
+ -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
702
+ );
703
+
704
+ width: var(
705
+ --_ctm-mob-dn-wt-se-dr-wt,
706
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
707
+ );
708
+ background-color: var(
709
+ --_ctm-mob-dn-wt-se-dr-cr,
710
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
711
+ );
916
712
  }
917
713
  }
918
714
  }
@@ -921,7 +717,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
921
717
 
922
718
  .user_elements_user_info_wrapper {
923
719
  display: flex;
924
- justify-content: space-between;
720
+ flex-direction: column;
721
+
925
722
  background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
926
723
  border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
927
724
  border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
@@ -929,15 +726,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
929
726
  border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
930
727
  box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
931
728
  var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
729
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
730
+
731
+ padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg);
932
732
 
933
733
  .user_elements_user_name_wrapper {
934
734
  display: flex;
935
735
  gap: 6px;
936
- align-items: center;
937
-
938
736
  .user_elements_user_name {
939
737
  display: flex;
940
- flex: 1 0 0;
941
738
  color: var(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
942
739
  font-family: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
943
740
  font-size: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
@@ -962,16 +759,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
962
759
  }
963
760
 
964
761
  .user_elements_user_data_wrapper {
965
- display: flex;
966
- align-items: center;
967
- gap: 12px;
968
-
969
762
  .user_elements_user_data {
970
763
  display: flex;
971
764
 
972
765
  .user_elements_user_id {
973
766
  display: flex;
974
- flex: 1 0 0;
767
+
975
768
  gap: 6px;
976
769
  align-items: center;
977
770
  color: var(--_ctm-dn-ur-io-dn-ur-id-dn-cr);
@@ -998,7 +791,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
998
791
 
999
792
  .user_elements_user_email {
1000
793
  display: flex;
1001
- flex: 1 0 0;
794
+
1002
795
  gap: 6px;
1003
796
  align-items: center;
1004
797
  color: var(--_ctm-dn-ur-io-dn-ur-el-dn-cr);
@@ -1025,7 +818,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1025
818
 
1026
819
  .user_elements_user_phone {
1027
820
  display: flex;
1028
- flex: 1 0 0;
821
+
1029
822
  gap: 6px;
1030
823
  align-items: center;
1031
824
  color: var(--_ctm-dn-ur-io-dn-ur-pe-dn-cr);
@@ -1051,13 +844,71 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1051
844
  }
1052
845
  }
1053
846
  }
847
+ .child {
848
+ position: relative;
849
+ }
850
+ &[data-show-divider="true"] {
851
+ .child:not(:last-child)::before {
852
+ content: "";
853
+ position: absolute;
854
+ left: 0;
855
+ right: 0;
856
+ bottom: calc(
857
+ -1 *
858
+ (
859
+ var(
860
+ --_ctm-mob-lt-ur-io-im-sg,
861
+ var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
862
+ ) /
863
+ 2
864
+ )
865
+ );
866
+
867
+ height: var(
868
+ --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt,
869
+ var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt))
870
+ );
871
+ background-color: var(
872
+ --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
873
+ var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
874
+ );
875
+ }
876
+ .user_elements_user_name_wrapper {
877
+ width: 100%;
878
+ position: relative;
879
+ &::after {
880
+ content: "";
881
+ position: absolute;
882
+ left: 0;
883
+ right: 0;
884
+ bottom: calc(
885
+ -1 *
886
+ (
887
+ var(
888
+ --_ctm-mob-lt-ur-io-im-sg,
889
+ var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
890
+ ) /
891
+ 2
892
+ )
893
+ );
894
+ height: var(
895
+ --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt,
896
+ var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt))
897
+ );
898
+
899
+ background-color: var(
900
+ --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
901
+ var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
902
+ );
903
+ }
904
+ }
905
+ }
1054
906
  }
1055
907
 
1056
908
  .user_elements_quota_wrapper {
1057
909
  display: flex;
1058
- flex-direction: row;
910
+ flex-direction: column;
1059
911
  width: 100%;
1060
- align-items: center;
1061
912
 
1062
913
  background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
1063
914
  border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
@@ -1069,12 +920,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1069
920
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1070
921
  .quota_label_wrapper {
1071
922
  display: flex;
1072
- flex: 1 0 0;
923
+
1073
924
  min-width: 109px;
925
+ gap: 10px;
926
+ align-items: center;
1074
927
 
1075
928
  .quota_label {
1076
929
  display: flex;
1077
- flex: 1 0 0;
930
+
1078
931
  color: var(--_ctm-dn-qa-dn-qa-hg-dn-cr);
1079
932
  font-family: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy);
1080
933
  font-size: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
@@ -1087,12 +940,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1087
940
  }
1088
941
  }
1089
942
 
1090
- .quota_upfront_wrapper {
1091
- display: flex;
1092
- gap: var(--_ctm-lt-qa-im-sg);
1093
- flex-wrap: wrap;
1094
- }
1095
-
1096
943
  .quote_item_wrapper {
1097
944
  display: flex;
1098
945
  flex-direction: row;
@@ -1101,6 +948,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1101
948
  .quote_info_wrapper {
1102
949
  display: flex;
1103
950
  gap: 12px;
951
+ justify-content: space-between;
1104
952
  .quota_name_wrapper {
1105
953
  display: flex;
1106
954
  flex-direction: column;
@@ -1108,7 +956,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1108
956
 
1109
957
  .quota_name {
1110
958
  display: flex;
1111
- flex: 1 0 0;
959
+
1112
960
  color: var(--_ctm-dn-qa-dn-qa-ne-dn-cr);
1113
961
  font-family: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
1114
962
  font-size: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
@@ -1122,7 +970,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1122
970
 
1123
971
  .quota_expiry {
1124
972
  display: flex;
1125
- flex: 1 0 0;
973
+
1126
974
  color: var(--_ctm-dn-qa-dn-qa-ey-dn-cr);
1127
975
  font-family: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy);
1128
976
  font-size: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
@@ -1158,13 +1006,110 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1158
1006
  background-color: #d0d5dd;
1159
1007
  }
1160
1008
  }
1009
+
1010
+ &[data-show-divider="true"] {
1011
+ .quote_item_wrapper:not(:last-child)::before {
1012
+ content: "";
1013
+ position: absolute;
1014
+ left: 0;
1015
+ right: 0;
1016
+ bottom: calc(
1017
+ -1 *
1018
+ (
1019
+ var(
1020
+ --_ctm-mob-lt-qa-im-sg,
1021
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
1022
+ ) /
1023
+ 2
1024
+ )
1025
+ );
1026
+
1027
+ height: var(
1028
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
1029
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
1030
+ );
1031
+ background-color: var(
1032
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
1033
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
1034
+ );
1035
+ }
1036
+ &[data-content-alignment="Vertical"] {
1037
+ .quota_label_wrapper {
1038
+ width: 100%;
1039
+ position: relative;
1040
+ &::after {
1041
+ content: "";
1042
+ position: absolute;
1043
+ left: 0;
1044
+ right: 0;
1045
+ bottom: calc(
1046
+ -1 *
1047
+ (
1048
+ var(
1049
+ --_ctm-mob-lt-qa-im-sg,
1050
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
1051
+ ) /
1052
+ 2
1053
+ )
1054
+ );
1055
+ height: var(
1056
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
1057
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
1058
+ );
1059
+ background-color: var(
1060
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
1061
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
1062
+ );
1063
+ }
1064
+ }
1065
+ }
1066
+ }
1067
+
1068
+ .quote_vertical_scroll_wrap {
1069
+ height: auto;
1070
+ display: flex;
1071
+ width: 100%;
1072
+ flex-direction: column;
1073
+ gap: 16px;
1074
+
1075
+ .quote_item_wrapper {
1076
+ justify-content: space-between;
1077
+ width: 100%;
1078
+ align-items: center;
1079
+ gap: 16px;
1080
+ align-items: flex-start;
1081
+ flex-direction: column;
1082
+
1083
+ .quota_divider {
1084
+ height: 1px;
1085
+ width: 100%;
1086
+ }
1087
+ }
1088
+ }
1089
+ .quote_vertical_scroll_wrapper {
1090
+ overflow-y: auto;
1091
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1092
+ display: flex;
1093
+ width: 100%;
1094
+ // max-height: 250px;
1095
+ flex-direction: column;
1096
+
1097
+ .quote_item_wrapper {
1098
+ flex-direction: column;
1099
+ position: relative;
1100
+
1101
+ .quota_divider {
1102
+ width: 100%;
1103
+ height: 1px;
1104
+ }
1105
+ }
1106
+ }
1161
1107
  }
1162
1108
 
1163
1109
  .user_elements_allowance_wrapper {
1164
1110
  display: flex;
1165
- flex-direction: row;
1111
+ flex-direction: column;
1166
1112
  width: 100%;
1167
- align-items: center;
1168
1113
 
1169
1114
  background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
1170
1115
  border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
@@ -1176,12 +1121,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1176
1121
  gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1177
1122
  .allowance_label_wrapper {
1178
1123
  display: flex;
1179
- flex: 1 0 0;
1180
1124
  min-width: 109px;
1125
+ align-items: center;
1126
+ gap: 10px;
1181
1127
 
1182
1128
  .allowance_label {
1183
1129
  display: flex;
1184
- flex: 1 0 0;
1130
+
1185
1131
  white-space: nowrap;
1186
1132
  color: var(--_ctm-dn-ae-dn-ae-hg-dn-cr);
1187
1133
  font-family: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy);
@@ -1216,7 +1162,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1216
1162
 
1217
1163
  .allowance_name {
1218
1164
  display: flex;
1219
- flex: 1 0 0;
1165
+
1220
1166
  color: var(--_ctm-dn-ae-dn-ae-ne-dn-cr);
1221
1167
  font-family: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
1222
1168
  font-size: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
@@ -1230,7 +1176,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1230
1176
 
1231
1177
  .allowance_expiry {
1232
1178
  display: flex;
1233
- flex: 1 0 0;
1179
+
1234
1180
  color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1235
1181
  font-family: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy);
1236
1182
  font-size: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
@@ -1259,12 +1205,102 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1259
1205
  }
1260
1206
  }
1261
1207
  }
1208
+ &[data-show-divider="true"] {
1209
+ .allowance_item_wrapper:not(:last-child)::before {
1210
+ content: "";
1211
+ position: absolute;
1212
+ left: 0;
1213
+ right: 0;
1214
+ bottom: calc(
1215
+ -1 *
1216
+ (
1217
+ var(
1218
+ --_ctm-mob-lt-ae-im-sg,
1219
+ var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
1220
+ ) /
1221
+ 2
1222
+ )
1223
+ );
1224
+
1225
+ height: var(
1226
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
1227
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
1228
+ );
1229
+ background-color: var(
1230
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
1231
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
1232
+ );
1233
+ }
1234
+ &[data-content-alignment="Vertical"] {
1235
+ .allowance_label_wrapper {
1236
+ width: 100%;
1237
+ position: relative;
1238
+ gap: 10px;
1239
+ &::after {
1240
+ content: "";
1241
+ position: absolute;
1242
+ left: 0;
1243
+ right: 0;
1244
+ bottom: calc(
1245
+ -1 *
1246
+ (
1247
+ var(
1248
+ --_ctm-mob-lt-ae-im-sg,
1249
+ var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
1250
+ ) /
1251
+ 2
1252
+ )
1253
+ );
1254
+ height: var(
1255
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
1256
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
1257
+ );
1258
+ background-color: var(
1259
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
1260
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
1261
+ );
1262
+ }
1263
+ }
1264
+ }
1265
+ }
1266
+
1267
+ .allowance_vertical_scroll_wrapper {
1268
+ overflow-y: auto;
1269
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1270
+ display: flex;
1271
+ width: 100%;
1272
+ flex-direction: column;
1273
+
1274
+ .allowance_item_wrapper {
1275
+ flex-direction: column;
1276
+ position: relative;
1277
+
1278
+ .allowance_info_wrapper {
1279
+ justify-content: space-between;
1280
+ }
1281
+ }
1282
+ }
1283
+
1284
+ .allowance_vertical_scroll_wrap {
1285
+ gap: var(--_ctm-lt-ae-im-sg);
1286
+ display: flex;
1287
+ width: 100%;
1288
+ flex-direction: column;
1289
+
1290
+ .allowance_item_wrapper {
1291
+ flex-direction: column;
1292
+
1293
+ .allowance_info_wrapper {
1294
+ justify-content: space-between;
1295
+ }
1296
+ }
1297
+ }
1262
1298
  }
1263
1299
 
1264
1300
  .user_elements_user_info_secondary_wrapper {
1265
1301
  display: flex;
1302
+ flex-direction: column;
1266
1303
  width: 100%;
1267
- align-items: center;
1268
1304
  background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
1269
1305
  border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
1270
1306
  border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
@@ -1273,8 +1309,40 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1273
1309
  box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1274
1310
  var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1275
1311
  var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1276
- gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1277
- .shipping_address_label {
1312
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1313
+
1314
+ .secondary_vertical_scroll_wrapper {
1315
+ // overflow-y: auto;
1316
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1317
+ display: flex;
1318
+ width: 100%;
1319
+ // max-height: 250px;
1320
+ flex-direction: column;
1321
+
1322
+ .secondary_item_wrapper {
1323
+ flex-direction: column;
1324
+ position: relative;
1325
+
1326
+ .quota_divider {
1327
+ width: 100%;
1328
+ height: 1px;
1329
+ }
1330
+ }
1331
+ }
1332
+
1333
+ .secondary_label {
1334
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
1335
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
1336
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
1337
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
1338
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
1339
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
1340
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
1341
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
1342
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
1343
+ }
1344
+
1345
+ .label {
1278
1346
  color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1279
1347
  font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1280
1348
  font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
@@ -1285,8 +1353,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1285
1353
  text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1286
1354
  text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1287
1355
  }
1288
-
1289
- .shipping_address {
1356
+ .value {
1290
1357
  color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1291
1358
  font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1292
1359
  font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
@@ -1297,25 +1364,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1297
1364
  text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1298
1365
  text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1299
1366
  }
1300
- .secondary_label {
1301
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
1302
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
1303
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
1304
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
1305
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
1306
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
1307
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
1308
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
1309
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
1310
- }
1311
-
1312
- .secondary_vertical_scroll_wrapper {
1313
- overflow-y: auto;
1314
- gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1315
- display: flex;
1316
- width: 100%;
1317
- flex-direction: column;
1318
- }
1319
1367
 
1320
1368
  .secondary_info_divider {
1321
1369
  content: "";
@@ -1328,25 +1376,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1328
1376
  display: flex;
1329
1377
  flex-direction: column;
1330
1378
  gap: 4px;
1331
- flex: 1 0 0;
1332
- align-self: stretch;
1333
- justify-content: flex-start;
1334
1379
 
1335
- .active_order_label {
1336
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1337
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1338
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1339
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1340
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1341
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1342
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1343
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1344
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1345
- }
1380
+ justify-content: flex-start;
1346
1381
 
1347
1382
  .order_wrapper {
1348
1383
  display: flex;
1349
1384
  gap: 6px;
1385
+ justify-content: right;
1350
1386
  .remaining_order {
1351
1387
  color: #243dc6;
1352
1388
  font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1358,17 +1394,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1358
1394
  text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1359
1395
  text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1360
1396
  }
1361
- .active_orders {
1362
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1363
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1364
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1365
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1366
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1367
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1368
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1369
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1370
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1371
- }
1372
1397
  }
1373
1398
  }
1374
1399
 
@@ -1376,21 +1401,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1376
1401
  display: flex;
1377
1402
  flex-direction: column;
1378
1403
  gap: 4px;
1379
- flex: 1 0 0;
1380
- align-self: stretch;
1381
- justify-content: flex-start;
1382
1404
 
1383
- .payment_methods_label {
1384
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1385
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1386
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1387
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1388
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1389
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1390
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1391
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1392
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1393
- }
1405
+ justify-content: flex-start;
1394
1406
 
1395
1407
  .payment_wrapper {
1396
1408
  display: flex;
@@ -1406,17 +1418,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1406
1418
  text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1407
1419
  text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1408
1420
  }
1409
- .active_payment {
1410
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1411
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1412
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1413
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1414
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1415
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1416
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1417
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1418
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1419
- }
1420
1421
  }
1421
1422
  }
1422
1423
 
@@ -1431,29 +1432,987 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1431
1432
  flex-direction: column;
1432
1433
  gap: 4px;
1433
1434
  white-space: nowrap;
1435
+ }
1434
1436
 
1435
- .my_cart_label {
1436
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1437
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1438
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1439
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1440
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1441
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1442
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1443
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1444
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1437
+ .my_cart_icon_wrappers {
1438
+ position: relative;
1439
+ display: inline-block;
1440
+ width: var(
1441
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1442
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1443
+ );
1444
+ height: var(
1445
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1446
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1447
+ );
1448
+ .cart__quantity {
1449
+ position: absolute;
1450
+ top: -4px;
1451
+ right: -6px;
1452
+ // background-color: #ffd600; /* Yellow */
1453
+ // color: black;
1454
+ // font-size: 12px;
1455
+ // font-weight: bold;
1456
+ // padding: 2px 6px;
1457
+ border-radius: 6px;
1458
+
1459
+ min-width: 16px;
1460
+ text-align: center;
1461
+ display: flex;
1462
+ align-items: center;
1463
+ justify-content: center;
1464
+ white-space: nowrap;
1465
+
1466
+ width: calc(
1467
+ var(
1468
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1469
+ var(
1470
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1471
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1472
+ )
1473
+ ) *
1474
+ 0.5
1475
+ );
1476
+ height: calc(
1477
+ var(
1478
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1479
+ var(
1480
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1481
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1482
+ )
1483
+ ) *
1484
+ 0.5
1485
+ );
1445
1486
  }
1487
+ // .cart__quantity {
1488
+ // position: absolute;
1489
+ // top: 0;
1490
+ // right: 0;
1491
+ // // background: yellow;
1492
+ // // padding: 2px;
1493
+ // // border-radius: 5px;
1494
+ // // padding-inline: 5px;
1495
+ // font-size: 12px;
1496
+ // transform: translate(
1497
+ // 0%,
1498
+ // calc(
1499
+ // var(
1500
+ // --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1501
+ // var(
1502
+ // --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1503
+ // var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1504
+ // )
1505
+ // ) *
1506
+ // 0.1
1507
+ // )
1508
+ // );
1509
+ // }
1510
+
1511
+ .cart__quantity {
1512
+ background-color: var(
1513
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr,
1514
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr))
1515
+ );
1446
1516
 
1447
- .my_cart_value {
1448
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1449
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1450
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1451
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1452
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1453
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1454
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1455
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1456
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1517
+ border-color: var(
1518
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1519
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr))
1520
+ );
1521
+
1522
+ border-style: var(
1523
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1524
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se))
1525
+ );
1526
+
1527
+ border-width: var(
1528
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1529
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh))
1530
+ );
1531
+
1532
+ border-radius: var(
1533
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1534
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs))
1535
+ );
1536
+
1537
+ box-shadow: var(
1538
+ --_show-shadow,
1539
+ var(
1540
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1541
+ var(
1542
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1543
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae)
1544
+ )
1545
+ )
1546
+ var(
1547
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1548
+ var(
1549
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1550
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br)
1551
+ )
1552
+ )
1553
+ var(
1554
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1555
+ var(
1556
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1557
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd)
1558
+ )
1559
+ )
1560
+ var(
1561
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1562
+ var(
1563
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1564
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr)
1565
+ )
1566
+ )
1567
+ );
1568
+ white-space: nowrap;
1569
+
1570
+ color: var(
1571
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1572
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr))
1573
+ );
1574
+ font-family:
1575
+ var(
1576
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1577
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy))
1578
+ ),
1579
+ sans-serif;
1580
+ font-size: calc(
1581
+ var(
1582
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1583
+ var(
1584
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1585
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1586
+ )
1587
+ ) /
1588
+ 3
1589
+ );
1590
+ // font-size: var(
1591
+ // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se,
1592
+ // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se))
1593
+ // );
1594
+ font-weight: var(
1595
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1596
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt))
1597
+ );
1598
+ font-style: var(
1599
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1600
+ var(
1601
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1602
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)
1603
+ )
1604
+ );
1605
+ text-align: var(
1606
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1607
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an))
1608
+ );
1609
+ letter-spacing: var(
1610
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1611
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg))
1612
+ );
1613
+ // line-height: var(
1614
+ // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht,
1615
+ // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht))
1616
+ // );
1617
+ text-decoration: var(
1618
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1619
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue))
1620
+ );
1621
+ // padding: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-ct-pg);
1622
+ }
1623
+ .cart__icon {
1624
+ display: var(--_sf-show-icon-ff, flex);
1625
+ svg {
1626
+ width: var(
1627
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1628
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1629
+ );
1630
+ height: var(
1631
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1632
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1633
+ );
1634
+ path {
1635
+ stroke: var(
1636
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1637
+ var(
1638
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1639
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)
1640
+ )
1641
+ );
1642
+ }
1643
+ }
1644
+ }
1645
+ }
1646
+ }
1647
+
1648
+ .child {
1649
+ position: relative;
1650
+ }
1651
+ &[data-show-divider="true"] {
1652
+ .child:not(:last-child)::before {
1653
+ content: "";
1654
+ position: absolute;
1655
+ left: 0;
1656
+ right: 0;
1657
+ bottom: calc(
1658
+ -1 *
1659
+ (
1660
+ var(
1661
+ --_ctm-mob-lt-ur-io-sy-im-sg,
1662
+ var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1663
+ ) /
1664
+ 2
1665
+ )
1666
+ );
1667
+
1668
+ height: var(
1669
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1670
+ var(
1671
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1672
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1673
+ )
1674
+ );
1675
+ background-color: var(
1676
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1677
+ var(
1678
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1679
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1680
+ )
1681
+ );
1682
+ }
1683
+ &[data-content-alignment="Horizontal"] {
1684
+ .child:not(:last-child)::before {
1685
+ // right: calc(
1686
+ // -1 *
1687
+ // (
1688
+ // var(
1689
+ // --_ctm-mob-lt-ur-io-sy-im-sg,
1690
+ // var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1691
+ // ) /
1692
+ // 2
1693
+ // )
1694
+ // );
1695
+ top: 0;
1696
+
1697
+ width: var(
1698
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1699
+ var(
1700
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1701
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1702
+ )
1703
+ );
1704
+ height: 100%;
1705
+ left: unset;
1706
+ }
1707
+ }
1708
+ &[data-content-alignment="Vertical"] {
1709
+ .secondary_label_wrapper {
1710
+ width: 100%;
1711
+ position: relative;
1712
+ &::after {
1713
+ content: "";
1714
+ position: absolute;
1715
+ left: 0;
1716
+ right: 0;
1717
+ bottom: calc(
1718
+ -1 *
1719
+ (
1720
+ var(
1721
+ --_ctm-mob-lt-ur-io-sy-im-sg,
1722
+ var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1723
+ ) /
1724
+ 2
1725
+ )
1726
+ );
1727
+ height: var(
1728
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1729
+ var(
1730
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1731
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1732
+ )
1733
+ );
1734
+
1735
+ background-color: var(
1736
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1737
+ var(
1738
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1739
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1740
+ )
1741
+ );
1742
+ }
1743
+ }
1744
+ }
1745
+ }
1746
+
1747
+ .secondary_info_divider {
1748
+ height: 1px;
1749
+ width: 100%;
1750
+ }
1751
+
1752
+ .active_orders_wrapper {
1753
+ flex-direction: row;
1754
+ justify-content: space-between;
1755
+ }
1756
+ .active_orders_wrapper > * {
1757
+ box-sizing: border-box;
1758
+ width: 50%;
1759
+ }
1760
+
1761
+ .payment_methods_wrapper {
1762
+ flex-direction: row;
1763
+ justify-content: space-between;
1764
+ }
1765
+
1766
+ .my_cart_wrapper {
1767
+ flex-direction: row;
1768
+ align-items: center;
1769
+ }
1770
+ .my_cart_container {
1771
+ display: flex;
1772
+ align-items: center;
1773
+ gap: 16px;
1774
+ }
1775
+
1776
+ .popover-container {
1777
+ position: relative;
1778
+ display: inline-block;
1779
+ .popover-trigger {
1780
+ cursor: pointer;
1781
+ font-weight: 500;
1782
+ color: #2b6cb0;
1783
+ }
1784
+
1785
+ .popover-box {
1786
+ position: absolute;
1787
+ top: calc(100% + 10px);
1788
+ right: 0;
1789
+ background: white;
1790
+ padding: 12px 16px;
1791
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
1792
+ border-radius: 8px;
1793
+ min-width: 150px;
1794
+ z-index: 10;
1795
+ }
1796
+
1797
+ .popover-box {
1798
+ display: flex;
1799
+ flex-direction: column;
1800
+
1801
+ width: 100%;
1802
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
1803
+ background-color: var(
1804
+ --_ctm-mob-dn-pr-se-bd-cr,
1805
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1806
+ );
1807
+
1808
+ border-color: var(
1809
+ --_ctm-mob-dn-pr-se-br-cr,
1810
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
1811
+ );
1812
+
1813
+ border-style: var(
1814
+ --_ctm-mob-dn-pr-se-br-se,
1815
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
1816
+ );
1817
+
1818
+ border-width: var(
1819
+ --_ctm-mob-dn-pr-se-br-wh,
1820
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
1821
+ );
1822
+
1823
+ border-radius: var(
1824
+ --_ctm-mob-dn-pr-se-br-rs,
1825
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
1826
+ );
1827
+
1828
+ box-shadow: var(
1829
+ --_show-shadow,
1830
+ var(
1831
+ --_ctm-mob-dn-pr-se-sw-ae,
1832
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
1833
+ )
1834
+ var(
1835
+ --_ctm-mob-dn-pr-se-sw-br,
1836
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
1837
+ )
1838
+ var(
1839
+ --_ctm-mob-dn-pr-se-sw-sd,
1840
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
1841
+ )
1842
+ var(
1843
+ --_ctm-mob-dn-pr-se-sw-cr,
1844
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
1845
+ )
1846
+ );
1847
+
1848
+ padding: var(
1849
+ --_ctm-mob-dn-pr-se-pg,
1850
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
1851
+ );
1852
+ }
1853
+
1854
+ .popover-box strong {
1855
+ display: block;
1856
+ margin-bottom: 6px;
1857
+ font-weight: bold;
1858
+ }
1859
+
1860
+ .popover-arrow {
1861
+ position: absolute;
1862
+ top: -6px;
1863
+ right: 10px;
1864
+ width: 12px;
1865
+ height: 12px;
1866
+ background-color: var(
1867
+ --_ctm-mob-dn-pr-se-bd-cr,
1868
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1869
+ );
1870
+ transform: rotate(45deg);
1871
+ box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.05);
1872
+ }
1873
+
1874
+ .popover_item {
1875
+ // padding-inline: var(--_sf-cd-gp);
1876
+ color: var(
1877
+ --_ctm-mob-dn-pr-se-cr,
1878
+ var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))
1879
+ );
1880
+ font-family:
1881
+ var(
1882
+ --_ctm-mob-dn-pr-se-ft-fy,
1883
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
1884
+ ),
1885
+ sans-serif;
1886
+ font-size: var(
1887
+ --_ctm-mob-dn-pr-se-ft-se,
1888
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
1889
+ );
1890
+ font-weight: var(
1891
+ --_ctm-mob-dn-pr-se-ft-wt,
1892
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
1893
+ );
1894
+ font-style: var(
1895
+ --_ctm-mob-dn-pr-se-ft-se-ic,
1896
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
1897
+ );
1898
+ text-align: var(
1899
+ --_ctm-mob-dn-pr-se-tt-an,
1900
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
1901
+ );
1902
+ letter-spacing: var(
1903
+ --_ctm-mob-dn-pr-se-lr-sg,
1904
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
1905
+ );
1906
+ line-height: var(
1907
+ --_ctm-mob-dn-pr-se-le-ht,
1908
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
1909
+ );
1910
+ text-decoration: var(
1911
+ --_ctm-mob-dn-pr-se-ue,
1912
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
1913
+ );
1914
+ }
1915
+ }
1916
+ }
1917
+ }
1918
+
1919
+ // for dropdown
1920
+
1921
+ .language__conatiner {
1922
+ background-color: var(
1923
+ --_ctm-mob-dn-dn-se-wt-se-bd-cr,
1924
+ var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr))
1925
+ );
1926
+
1927
+ border-color: var(
1928
+ --_ctm-mob-dn-dn-se-wt-se-br-cr,
1929
+ var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
1930
+ );
1931
+
1932
+ border-style: var(
1933
+ --_ctm-mob-dn-dn-se-wt-se-br-se,
1934
+ var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
1935
+ );
1936
+
1937
+ border-width: var(
1938
+ --_ctm-mob-dn-dn-se-wt-se-br-wh,
1939
+ var(--_ctm-tab-dn-dn-se-dn-se-wt-se-br-wh, var(--_ctm-dn-dn-se-wt-se-br-wh))
1940
+ );
1941
+
1942
+ border-radius: var(
1943
+ --_ctm-mob-dn-dn-se-wt-se-br-rs,
1944
+ var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs))
1945
+ );
1946
+
1947
+ box-shadow: var(
1948
+ --_show-shadow,
1949
+ var(
1950
+ --_ctm-mob-dn-dn-se-wt-se-sw-ae,
1951
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))
1952
+ )
1953
+ var(
1954
+ --_ctm-mob-dn-dn-se-wt-se-sw-br,
1955
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))
1956
+ )
1957
+ var(
1958
+ --_ctm-mob-dn-dn-se-wt-se-sw-sd,
1959
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))
1960
+ )
1961
+ var(
1962
+ --_ctm-mob-dn-dn-se-wt-se-sw-cr,
1963
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))
1964
+ )
1965
+ );
1966
+
1967
+ padding: var(
1968
+ --_ctm-mob-dn-dn-se-lt-ss-pg,
1969
+ var(--_ctm-tab-dn-dn-se-lt-ss-pg, var(--_ctm-dn-dn-se-lt-ss-pg))
1970
+ );
1971
+ // gap: var(
1972
+ // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg,
1973
+ // var(--_ctm-tab-dn-dn-se-lt-ss-it-ad-mn-qy-sg, var(--_ctm-dn-dn-se-lt-ss-it-ad-mn-qy-sg))
1974
+ // );
1975
+ display: flex;
1976
+ gap: var(
1977
+ --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
1978
+ var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
1979
+ );
1980
+
1981
+ .option:hover {
1982
+ --_sf-hr-bd-cr: var(
1983
+ --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
1984
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
1985
+ );
1986
+ --_sf-hr-br-cr: var(
1987
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
1988
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
1989
+ );
1990
+ --_sf-hr-br-se: var(
1991
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
1992
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
1993
+ );
1994
+ --_sf-hr-br-wh: var(
1995
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
1996
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
1997
+ );
1998
+ --_sf-hr-br-rs: var(
1999
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2000
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
2001
+ );
2002
+
2003
+ // for shadow
2004
+ --_sf-hr-sw-ae: var(
2005
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2006
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
2007
+ );
2008
+ --_sf-hr-sw-br: var(
2009
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2010
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
2011
+ );
2012
+ --_sf-hr-sw-hr: var(
2013
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2014
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr))
2015
+ );
2016
+ --_sf-hr-sw-cr: var(
2017
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2018
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
2019
+ );
2020
+
2021
+ // for font
2022
+
2023
+ --_sf-hr-cr: var(
2024
+ --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2025
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
2026
+ );
2027
+ --_sf-hr-ft-fy: var(
2028
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2029
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
2030
+ );
2031
+ --_sf-hr-ft-se: var(
2032
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2033
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
2034
+ );
2035
+ --_sf-hr-ft-wt: var(
2036
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2037
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
2038
+ );
2039
+ --_sf-hr-ft-se-ic: var(
2040
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2041
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic))
2042
+ );
2043
+ --_sf-hr-tt-an: var(
2044
+ --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2045
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
2046
+ );
2047
+ --_sf-hr-lr-sg: var(
2048
+ --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2049
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
2050
+ );
2051
+ --_sf-hr-le-ht: var(
2052
+ --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2053
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
2054
+ );
2055
+
2056
+ --_sf-hr-ue: var(
2057
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2058
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
2059
+ );
2060
+ }
2061
+
2062
+ .option[data-selected="true"] {
2063
+ --_sf-sd-bd-cr: var(
2064
+ --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2065
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
2066
+ );
2067
+ --_sf-sd-br-cr: var(
2068
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2069
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
2070
+ );
2071
+ --_sf-sd-br-se: var(
2072
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2073
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
2074
+ );
2075
+ --_sf-sd-br-wh: var(
2076
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2077
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
2078
+ );
2079
+ // new
2080
+ --_sf-sd-sw-ae: var(
2081
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2082
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
2083
+ );
2084
+ --_sf-sd-sw-br: var(
2085
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2086
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
2087
+ );
2088
+ --_sf-sd-sw-sd: var(
2089
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2090
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
2091
+ );
2092
+ --_sf-sd-sw-cr: var(
2093
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2094
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
2095
+ );
2096
+
2097
+ // for font
2098
+
2099
+ --_sf-sd-cr: var(
2100
+ --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2101
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
2102
+ );
2103
+ --_sf-sd-ft-fy: var(
2104
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2105
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
2106
+ );
2107
+ --_sf-sd-ft-se: var(
2108
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2109
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
2110
+ );
2111
+ --_sf-sd-ft-wt: var(
2112
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2113
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
2114
+ );
2115
+ --_sf-sd-ft-se-ic: var(
2116
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2117
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic))
2118
+ );
2119
+ --_sf-sd-tt-an: var(
2120
+ --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2121
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
2122
+ );
2123
+ --_sf-sd-lr-sg: var(
2124
+ --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2125
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
2126
+ );
2127
+ --_sf-sd-le-ht: var(
2128
+ --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2129
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
2130
+ );
2131
+
2132
+ --_sf-sd-ue: var(
2133
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2134
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
2135
+ );
2136
+ }
2137
+
2138
+ .option {
2139
+ width: 100%;
2140
+ display: flex;
2141
+ align-items: center;
2142
+ cursor: pointer;
2143
+ justify-content: var(
2144
+ --_ctm-mob-dn-dn-se-lt-ss-at,
2145
+ var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at))
2146
+ );
2147
+
2148
+ position: relative;
2149
+ box-sizing: border-box;
2150
+
2151
+ padding: var(
2152
+ --_ctm-mob-dn-dn-se-lt-ss-im-pg,
2153
+ var(--_ctm-tab-dn-dn-se-lt-ss-im-pg, var(--_ctm-dn-dn-se-lt-ss-im-pg))
2154
+ );
2155
+ gap: var(
2156
+ --_ctm-mob-dn-dn-se-lt-ss-im-sg,
2157
+ var(--_ctm-tab-dn-dn-se-lt-ss-im-sg, var(--_ctm-dn-dn-se-lt-ss-im-sg))
2158
+ );
2159
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2160
+
2161
+ background-color: var(
2162
+ --_sf-hr-bd-cr,
2163
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2164
+ );
2165
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2166
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2167
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2168
+
2169
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2170
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2171
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2172
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2173
+ //
2174
+ &[data-selected="true"] {
2175
+ border-color: var(
2176
+ --_sf-sd-br-cr,
2177
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
2178
+ );
2179
+
2180
+ background-color: var(
2181
+ --_sf-sd-bd-cr,
2182
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2183
+ );
2184
+ border-style: var(
2185
+ --_sf-sd-br-se,
2186
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
2187
+ );
2188
+ border-width: var(
2189
+ --_sf-sd-br-wh,
2190
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
2191
+ );
2192
+ border-radius: var(
2193
+ --_sf-sd-br-rs,
2194
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
2195
+ );
2196
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2197
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2198
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2199
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2200
+ .language__name {
2201
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2202
+ font-family:
2203
+ var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)),
2204
+ sans-serif;
2205
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2206
+ font-weight: var(
2207
+ --_sf-sd-ft-wt,
2208
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
2209
+ );
2210
+ font-style: var(
2211
+ --_sf-sd-ft-se-ic,
2212
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2213
+ );
2214
+ text-align: var(
2215
+ --_sf-sd-tt-an,
2216
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
2217
+ );
2218
+ letter-spacing: var(
2219
+ --_sf-sd-lr-sg,
2220
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2221
+ );
2222
+ line-height: var(
2223
+ --_sf-sd-le-ht,
2224
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2225
+ );
2226
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2227
+ }
2228
+ }
2229
+ }
2230
+ &[data-flex-direction="column"] {
2231
+ .language__name {
2232
+ white-space: unset;
2233
+ }
2234
+ }
2235
+ &[data-flex-direction="row"] {
2236
+ overflow-x: auto;
2237
+ }
2238
+ &[data-show-divider="true"] {
2239
+ &[data-flex-direction="row"] {
2240
+ .option:not(:last-child)::before {
2241
+ content: "";
2242
+ position: absolute;
2243
+ top: 0;
2244
+ bottom: 0; /* For full height divider */
2245
+ right: calc(
2246
+ -1 *
2247
+ (
2248
+ var(
2249
+ --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2250
+ var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2251
+ ) /
2252
+ 2
2253
+ )
2254
+ ); /* Half of your gap, assuming divider is centered in the gap */
2255
+ width: var(
2256
+ --_ctm-mob-dn-dn-se-wt-se-dr-wt,
2257
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
2258
+ ); /* Divider thickness */
2259
+ background-color: var(
2260
+ --_ctm-mob-dn-dn-se-wt-se-dr-cr,
2261
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
2262
+ ); /* Divider color */
2263
+ }
2264
+ }
2265
+ &[data-flex-direction="column"] {
2266
+ .option:not(:last-child)::before {
2267
+ content: "";
2268
+ position: absolute;
2269
+ left: 0;
2270
+ right: 0;
2271
+ bottom: calc(
2272
+ -1 *
2273
+ (
2274
+ var(
2275
+ --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2276
+ var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2277
+ ) /
2278
+ 2
2279
+ )
2280
+ );
2281
+ height: var(
2282
+ --_ctm-mob-dn-dn-se-wt-se-dr-wt,
2283
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
2284
+ );
2285
+ background-color: var(
2286
+ --_ctm-mob-dn-dn-se-wt-se-dr-cr,
2287
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
2288
+ );
2289
+ }
2290
+ }
2291
+ }
2292
+
2293
+ .option_select {
2294
+ width: 100%;
2295
+ display: flex;
2296
+ align-items: center;
2297
+ justify-content: var(
2298
+ --_ctm-mob-dn-dn-se-lt-ss-at,
2299
+ var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at))
2300
+ );
2301
+
2302
+ position: relative;
2303
+
2304
+ padding: var(
2305
+ --_ctm-mob-dn-dn-se-lt-ss-im-pg,
2306
+ var(--_ctm-tab-dn-dn-se-lt-ss-im-pg, var(--_ctm-dn-dn-se-lt-ss-im-pg))
2307
+ );
2308
+ gap: var(
2309
+ --_ctm-mob-dn-dn-se-lt-ss-im-sg,
2310
+ var(--_ctm-tab-dn-dn-se-lt-ss-im-sg, var(--_ctm-dn-dn-se-lt-ss-im-sg))
2311
+ );
2312
+ .language__name {
2313
+ padding-right: 20px;
2314
+ }
2315
+ }
2316
+
2317
+ .language__name {
2318
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2319
+ font-family:
2320
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)), sans-serif;
2321
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2322
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt));
2323
+ font-style: var(
2324
+ --_sf-hr-ft-se-ic,
2325
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2326
+ );
2327
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2328
+ letter-spacing: var(
2329
+ --_sf-hr-lr-sg,
2330
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2331
+ );
2332
+ line-height: var(
2333
+ --_sf-hr-le-ht,
2334
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2335
+ );
2336
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2337
+ white-space: nowrap;
2338
+ }
2339
+
2340
+ //Dropdown
2341
+ .value__selected__new {
2342
+ width: 100%;
2343
+ padding: 8px 12px;
2344
+ text-align: left;
2345
+ }
2346
+ .est__dropdown__main {
2347
+ position: relative;
2348
+ width: 100%;
2349
+ margin-top: 0px;
2350
+ label {
2351
+ font-size: 14px;
2352
+ color: var(--_gray-700);
2353
+ margin-bottom: 8px;
2354
+ display: block;
2355
+ }
2356
+
2357
+ .est__dropdown {
2358
+ cursor: pointer;
2359
+ position: relative;
2360
+ color: var(--_gray-700);
2361
+
2362
+ // border-radius: 6px;
2363
+ // background-color: #fff;
2364
+ display: flex;
2365
+ justify-content: space-between;
2366
+ align-items: center;
2367
+ padding: prepareMediaVariable(--_ctm-dn-dn-se-dn-se-pg);
2368
+
2369
+ width: 100%;
2370
+
2371
+ &.open .list {
2372
+ display: flex;
2373
+ }
2374
+ .est__dropdown__button {
2375
+ display: flex;
2376
+ align-items: center;
2377
+ width: 100%;
2378
+ }
2379
+
2380
+ .est__dropdown__icon {
2381
+ position: absolute;
2382
+ // top: 10px;
2383
+ right: 5px;
2384
+ }
2385
+
2386
+ .list {
2387
+ display: none;
2388
+ flex-direction: column;
2389
+ border: 1px solid var(--_gray-200);
2390
+ border-radius: 6px;
2391
+ position: absolute;
2392
+ top: 100%;
2393
+ left: 0;
2394
+ width: 100%;
2395
+ background-color: #fff;
2396
+ border-radius: 4px;
2397
+ z-index: var(--_higher-zIndex);
2398
+ max-height: 200px;
2399
+ overflow-y: auto;
2400
+ margin-top: var(
2401
+ --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2402
+ var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2403
+ );
2404
+ gap: var(
2405
+ --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2406
+ var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2407
+ );
2408
+
2409
+ &.top {
2410
+ bottom: 100%;
2411
+ top: auto;
2412
+ }
2413
+
2414
+ .option {
2415
+ cursor: pointer;
1457
2416
  }
1458
2417
  }
1459
2418
  }