@sc-360-v2/storefront-cms-library 0.3.29 → 0.3.31

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 (49) hide show
  1. package/dist/animation-control.scss +23 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +73 -13
  4. package/dist/cart-details.scss +573 -287
  5. package/dist/cart-summary.scss +102 -73
  6. package/dist/cartAttributes.scss +3 -0
  7. package/dist/cartDropdownOverlay.scss +11 -7
  8. package/dist/checkout.scss +1069 -944
  9. package/dist/contact-us.scss +3 -0
  10. package/dist/dropdownTemplate.scss +24 -3
  11. package/dist/employee-bulk-order.scss +36 -5
  12. package/dist/empty-states.scss +52 -0
  13. package/dist/fb-dropdown.scss +6 -2
  14. package/dist/form-preview.scss +24 -1
  15. package/dist/form-zindex-module.scss +25 -0
  16. package/dist/functions.scss +72 -2
  17. package/dist/icons.js +1 -1
  18. package/dist/index.js +1 -1
  19. package/dist/light-box-v2.scss +1 -1
  20. package/dist/modal.scss +96 -37
  21. package/dist/position-module.scss +74 -0
  22. package/dist/prefix-list.scss +55 -0
  23. package/dist/quick-order-pad.scss +49 -10
  24. package/dist/responsive-behaviour.scss +21 -0
  25. package/dist/section.scss +13 -9
  26. package/dist/shareCartSideBar.scss +17 -8
  27. package/dist/submit-quote.scss +115 -52
  28. package/dist/types/builder/elements/loader/index.d.ts +27 -0
  29. package/dist/types/builder/enums/index.d.ts +1 -0
  30. package/dist/types/builder/index.d.ts +2 -1
  31. package/dist/types/builder/interfaces/global.d.ts +13 -0
  32. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +441 -0
  33. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +364 -0
  34. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +2 -2
  35. package/dist/types/builder/tools/element-edit/checkout.d.ts +8 -0
  36. package/dist/types/builder/tools/element-edit/common.d.ts +1 -0
  37. package/dist/types/builder/tools/element-edit/countdown.d.ts +384 -44
  38. package/dist/types/builder/tools/element-edit/dummy.d.ts +0 -0
  39. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  40. package/dist/types/builder/tools/element-edit/loader.d.ts +28 -0
  41. package/dist/types/builder/tools/element-edit/productActions.d.ts +390 -43
  42. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +192 -22
  43. package/dist/types/builder/tools/element-edit/repeater.d.ts +439 -1
  44. package/dist/types/builder/tools/element-edit/table.d.ts +0 -1
  45. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +981 -0
  46. package/dist/types/builder/tools/element-edit/video.d.ts +192 -22
  47. package/dist/types/global/types.d.ts +2 -0
  48. package/dist/widget.scss +1 -0
  49. package/package.json +1 -1
package/dist/cart-details.scss CHANGED
@@ -41,12 +41,36 @@ $resizeActive: '[data-cms-element-resizer="true"]';
41
41
  flex: 1 0 0;
42
42
  max-width: 100%;
43
43
 
44
- .car_group_item {
44
+ .cart_group_item {
45
45
  width: 100%;
46
- .group_name {
47
- font-size: 20px;
48
- color: #101828;
49
- font-weight: 700;
46
+
47
+ .cart_group_title {
48
+ display: flex;
49
+ align-items: center;
50
+ cursor: pointer;
51
+ margin-bottom: 16px;
52
+ h4 {
53
+ font-size: 20px;
54
+ color: var(--_gray-900);
55
+ font-weight: 700;
56
+ margin-right: 8px;
57
+ .cart_items_length {
58
+ font-size: 14px;
59
+ color: var(--_gray-600);
60
+ margin-left: 4px;
61
+ }
62
+ }
63
+ .toggle_btn {
64
+ display: flex;
65
+ margin-right: 8px;
66
+ svg {
67
+ width: 24px;
68
+ height: 24px;
69
+ path {
70
+ stroke: var(--_gray-600);
71
+ }
72
+ }
73
+ }
50
74
  }
51
75
  .attr_header {
52
76
  display: flex;
@@ -399,15 +423,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
399
423
 
400
424
  .cart_products_wrapper,
401
425
  .infinite-list-container {
402
- max-height: calc(100vh - 148px);
403
- overflow: auto;
404
- display: flex;
405
- // padding: 0px 60px 0px 96px;
406
- flex-direction: column;
407
- align-items: flex-start;
408
- gap: 24px;
409
- align-self: stretch;
410
- padding: 8px;
426
+ flex: 1 1 auto;
427
+ overflow-y: auto;
428
+ padding: 1rem;
411
429
 
412
430
  .cart_item_wrapper {
413
431
  border-radius: 4px;
@@ -449,24 +467,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
449
467
  background-repeat: no-repeat;
450
468
  background-position: center;
451
469
  background-color: #eaeaea;
452
-
453
- border-style: var(
454
- --_ctm-mob-dn-pt-ie-ss-br-se,
455
- var(--_ctm-tab-dn-pt-ie-ss-br-se, var(--_ctm-dn-pt-ie-ss-br-se))
456
- );
457
- border-width: var(
458
- --_ctm-mob-dn-pt-ie-ss-br-wh,
459
- var(--_ctm-tab-dn-pt-ie-ss-br-wh, var(--_ctm-dn-pt-ie-ss-br-wh))
460
- );
461
- // border: ;
462
- border-radius: var(
463
- --_ctm-mob-dn-pt-ie-ss-br-rs,
464
- var(--_ctm-tab-dn-pt-ie-ss-br-rs, var(--_ctm-dn-pt-ie-ss-br-rs))
465
- );
466
- border-color: var(
467
- --_ctm-mob-dn-pt-ie-ss-br-cr,
468
- var(--_ctm-tab-dn-pt-ie-ss-br-cr, var(--_ctm-dn-pt-ie-ss-br-cr))
469
- );
470
+ border: 1px solid var(--_gray-100);
471
+ border-radius: 4px;
470
472
  }
471
473
 
472
474
  .product_info_wrapper {
@@ -486,51 +488,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
486
488
  word-break: normal;
487
489
 
488
490
  .product_title {
489
- // color: var(--_ctm-dn-pt-ne-ss-cr);
490
- // font-size: var(--_ctm-dn-pt-ne-ss-ft-se);
491
- // font-weight: 700;
492
- // align-self: stretch;
493
- // line-height: 28px;
494
- // font-family: var(--_ctm-dn-pt-ne-ss-ft-fy);
495
- color: var(
496
- --_ctm-mob-dn-pt-ne-ss-cr,
497
- var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr))
498
- );
499
- font-family: var(
500
- --_sf-hr-ff,
501
- var(
502
- --_ctm-mob-dn-pt-ne-ss-ft-fy,
503
- var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy))
504
- )
505
- );
506
- font-size: var(
507
- --_ctm-mob-dn-pt-ne-ss-ft-se,
508
- var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se))
509
- );
510
- font-weight: var(
511
- --_ctm-mob-dn-pt-ne-ss-ft-wt,
512
- var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt))
513
- );
514
- font-style: var(
515
- --_ctm-mob-dn-pt-ne-ss-ft-se-ic,
516
- var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic))
517
- );
518
- text-align: var(
519
- --_ctm-mob-dn-pt-ne-ss-tt-an,
520
- var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an))
521
- );
522
- letter-spacing: var(
523
- --_ctm-mob-dn-pt-ne-ss-lr-sg,
524
- var(--_ctm-tab-dn-pt-ne-ss-lr-sg, var(--_ctm-dn-pt-ne-ss-lr-sg))
525
- );
526
- line-height: var(
527
- --_ctm-mob-dn-pt-ne-ss-le-ht,
528
- var(--_ctm-tab-dn-pt-ne-ss-le-ht, var(--_ctm-dn-pt-ne-ss-le-ht))
529
- );
530
- text-decoration: var(
531
- --_ctm-mob-dn-pt-ne-ss-ue,
532
- var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue))
533
- );
491
+ color: var(--_gray-900);
492
+ font-family: lato;
493
+ font-size: 18px;
494
+ font-weight: 700;
495
+ line-height: 28px;
534
496
  }
535
497
 
536
498
  .product_code {
@@ -539,53 +501,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
539
501
  gap: 6px;
540
502
  align-self: stretch;
541
503
  flex-wrap: wrap;
542
- background-color: var(--_ctm-dn-pt-in-ss-bd-cr);
543
504
 
544
- p {
545
- // color: #475467;
546
- // font-size: 14px;
547
- // font-weight: 400;
548
- // line-height: 20px;
505
+ span {
506
+ color: var(--_gray-600);
507
+ font-size: 14px;
508
+ font-weight: 400;
509
+ line-height: 20px;
549
510
  white-space: nowrap;
550
- color: var(
551
- --_ctm-mob-dn-pt-in-ss-cr,
552
- var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
553
- );
554
- font-family: var(
555
- --_sf-hr-ff,
556
- var(
557
- --_ctm-mob-dn-pt-in-ss-ft-fy,
558
- var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
559
- )
560
- );
561
- font-size: var(
562
- --_ctm-mob-dn-pt-in-ss-ft-se,
563
- var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
564
- );
565
- font-weight: var(
566
- --_ctm-mob-dn-pt-in-ss-ft-wt,
567
- var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
568
- );
569
- font-style: var(
570
- --_ctm-mob-dn-pt-in-ss-ft-se-ic,
571
- var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
572
- );
573
- text-align: var(
574
- --_ctm-mob-dn-pt-in-ss-tt-an,
575
- var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
576
- );
577
- letter-spacing: var(
578
- --_ctm-mob-dn-pt-in-ss-lr-sg,
579
- var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
580
- );
581
- line-height: var(
582
- --_ctm-mob-dn-pt-in-ss-le-ht,
583
- var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
584
- );
585
- text-decoration: var(
586
- --_ctm-mob-dn-pt-in-ss-ue,
587
- var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
588
- );
511
+ &::after {
512
+ content: "";
513
+ display: inline-block;
514
+ height: 10px;
515
+ border-right: 1px solid var(--_gray-600);
516
+ padding-right: 8px;
517
+ }
518
+
519
+ &:last-of-type::after {
520
+ border-right: 0;
521
+ }
589
522
  }
590
523
  }
591
524
 
@@ -595,48 +528,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
595
528
  gap: 4px;
596
529
  align-self: stretch;
597
530
  flex-wrap: wrap;
598
- background-color: var(--_ctm-dn-pt-in-ss-bd-cr);
599
- p {
531
+ span {
600
532
  white-space: nowrap;
601
- color: var(
602
- --_ctm-mob-dn-pt-in-ss-cr,
603
- var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
604
- );
605
- font-family: var(
606
- --_sf-hr-ff,
607
- var(
608
- --_ctm-mob-dn-pt-in-ss-ft-fy,
609
- var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
610
- )
611
- );
612
- font-size: var(
613
- --_ctm-mob-dn-pt-in-ss-ft-se,
614
- var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
615
- );
616
- font-weight: var(
617
- --_ctm-mob-dn-pt-in-ss-ft-wt,
618
- var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
619
- );
620
- font-style: var(
621
- --_ctm-mob-dn-pt-in-ss-ft-se-ic,
622
- var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
623
- );
624
- text-align: var(
625
- --_ctm-mob-dn-pt-in-ss-tt-an,
626
- var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
627
- );
628
- letter-spacing: var(
629
- --_ctm-mob-dn-pt-in-ss-lr-sg,
630
- var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
631
- );
632
- line-height: var(
633
- --_ctm-mob-dn-pt-in-ss-le-ht,
634
- var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
635
- );
636
- text-decoration: var(
637
- --_ctm-mob-dn-pt-in-ss-ue,
638
- var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
639
- );
533
+ font-size: 14px;
534
+ font-weight: 400;
535
+ color: var(--_gray-600);
536
+ line-height: 20px;
537
+ &::after {
538
+ content: "/";
539
+ padding-left: 4px;
540
+ }
541
+ &:last-of-type::after {
542
+ content: "";
543
+ }
640
544
  }
641
545
  }
642
546
  }
@@ -651,56 +555,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
651
555
  display: flex;
652
556
  justify-content: center;
653
557
  align-items: center;
654
- gap: 8px;
558
+ gap: 4px;
655
559
  white-space: nowrap;
656
- // color: #243dc6;
657
- // font-size: 14px;
658
- // font-weight: 400;
659
- // line-height: 20px;
660
- // color: prepareMediaVariable(--_ctm-dn-pt-as-ss-cr);
661
- color: var(
662
- --_ctm-mob-dn-pt-as-ss-cr,
663
- var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
664
- );
665
- font-family: var(
666
- --_sf-hr-ff,
667
- var(
668
- --_ctm-mob-dn-pt-as-ss-ft-fy,
669
- var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
670
- )
671
- );
672
- font-size: var(
673
- --_ctm-mob-dn-pt-as-ss-ft-se,
674
- var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
675
- );
676
- font-weight: var(
677
- --_ctm-mob-dn-pt-as-ss-ft-wt,
678
- var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
679
- );
680
- font-style: var(
681
- --_ctm-mob-dn-pt-as-ss-ft-se-ic,
682
- var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
683
- );
684
- text-align: var(
685
- --_ctm-mob-dn-pt-as-ss-tt-an,
686
- var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
687
- );
688
- letter-spacing: var(
689
- --_ctm-mob-dn-pt-as-ss-lr-sg,
690
- var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
691
- );
692
- line-height: var(
693
- --_ctm-mob-dn-pt-as-ss-le-ht,
694
- var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
695
- );
696
- text-decoration: var(
697
- --_ctm-mob-dn-pt-as-ss-ue,
698
- var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
699
- );
700
-
701
- // &:hover {
702
- // font-weight: 600;
703
- // }
560
+ color: var(--_primary-400);
561
+ font-size: 14px;
562
+ font-weight: 400;
563
+ line-height: 20px;
564
+ .attr_val_info_detail{
565
+ b{
566
+ margin-right: 4px;
567
+ }
568
+ }
569
+ }
570
+ .svg_icon svg{
571
+ vertical-align: middle;
572
+ }
573
+ .svg_icon.down svg {
574
+ transform: rotate(180deg);
704
575
  }
705
576
  .customizationInfo_button {
706
577
  display: flex;
@@ -811,51 +682,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
811
682
  }
812
683
 
813
684
  .product_price {
814
- // color: #101828;
815
- // text-align: right;
816
- // font-size: 20px;
817
- // font-weight: 700;
818
- // line-height: 30px;
685
+ color: var(--_gray-900);
686
+ text-align: right;
687
+ font-size: 20px;
688
+ font-weight: 700;
689
+ line-height: 30px;
819
690
  white-space: nowrap;
820
- color: var(
821
- --_ctm-mob-dn-pt-pe-ss-cr,
822
- var(--_ctm-tab-dn-pt-pe-ss-cr, var(--_ctm-dn-pt-pe-ss-cr))
823
- );
824
- font-family: var(
825
- --_sf-hr-ff,
826
- var(
827
- --_ctm-mob-dn-pt-pe-ss-ft-fy,
828
- var(--_ctm-tab-dn-pt-pe-ss-ft-fy, var(--_ctm-dn-pt-pe-ss-ft-fy))
829
- )
830
- );
831
- font-size: var(
832
- --_ctm-mob-dn-pt-pe-ss-ft-se,
833
- var(--_ctm-tab-dn-pt-pe-ss-ft-se, var(--_ctm-dn-pt-pe-ss-ft-se))
834
- );
835
- font-weight: var(
836
- --_ctm-mob-dn-pt-pe-ss-ft-wt,
837
- var(--_ctm-tab-dn-pt-pe-ss-ft-wt, var(--_ctm-dn-pt-pe-ss-ft-wt))
838
- );
839
- font-style: var(
840
- --_ctm-mob-dn-pt-pe-ss-ft-se-ic,
841
- var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic))
842
- );
843
- text-align: var(
844
- --_ctm-mob-dn-pt-pe-ss-tt-an,
845
- var(--_ctm-tab-dn-pt-pe-ss-tt-an, var(--_ctm-dn-pt-pe-ss-tt-an))
846
- );
847
- letter-spacing: var(
848
- --_ctm-mob-dn-pt-pe-ss-lr-sg,
849
- var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg))
850
- );
851
- line-height: var(
852
- --_ctm-mob-dn-pt-pe-ss-le-ht,
853
- var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht))
854
- );
855
- text-decoration: var(
856
- --_ctm-mob-dn-pt-pe-ss-ue,
857
- var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
858
- );
859
691
  min-width: 80px;
860
692
  }
861
693
  }
@@ -868,46 +700,500 @@ $resizeActive: '[data-cms-element-resizer="true"]';
868
700
  display: flex;
869
701
  justify-content: center;
870
702
  align-items: center;
871
-
872
- // &:last-child svg {
873
- // width: 16px;
874
- // height: 16px;
875
- // path {
876
- // stroke: #dc2626;
877
- // }
878
- // }
879
703
  }
880
704
  .product_action_button {
881
705
  display: flex;
882
706
  justify-content: center;
883
707
  align-items: center;
884
708
  gap: 8px;
885
- // color: #243dc6;
886
- // font-size: 14px;
887
- // font-weight: 400;
888
- // line-height: 20px;
889
-
890
- // &:hover {
891
- // font-weight: 600;
892
- // }
893
709
  }
894
-
895
- // .remove_button {
896
- // display: flex;
897
- // justify-content: center;
898
- // align-items: center;
899
- // color: #dc2626;
900
- // font-size: 14px;
901
- // font-weight: 400;
902
- // line-height: 20px;
903
- // white-space: nowrap;
904
- // // &:hover {
905
- // // font-weight: 600;
906
- // // }
907
- // }
908
710
  }
909
711
  }
910
712
  }
713
+ // .cart_product_wrapper {
714
+ // display: flex;
715
+ // justify-content: space-between;
716
+ // align-items: flex-start;
717
+ // align-self: stretch;
718
+ // height: auto;
719
+ // // flex-wrap: wrap;
720
+
721
+ // .cart_product_left_wrapper {
722
+ // display: flex;
723
+ // align-items: flex-start;
724
+ // gap: 16px;
725
+ // // max-width: 60%;
726
+ // height: 100%;
727
+ // .checkbox_wrapper {
728
+ // width: fit-content;
729
+ // }
730
+
731
+ // .product_image {
732
+ // width: 100px;
733
+ // background-size: 100%;
734
+ // height: 148px;
735
+ // background-repeat: no-repeat;
736
+ // background-position: center;
737
+ // background-color: #eaeaea;
738
+
739
+ // border-style: var(
740
+ // --_ctm-mob-dn-pt-ie-ss-br-se,
741
+ // var(--_ctm-tab-dn-pt-ie-ss-br-se, var(--_ctm-dn-pt-ie-ss-br-se))
742
+ // );
743
+ // border-width: var(
744
+ // --_ctm-mob-dn-pt-ie-ss-br-wh,
745
+ // var(--_ctm-tab-dn-pt-ie-ss-br-wh, var(--_ctm-dn-pt-ie-ss-br-wh))
746
+ // );
747
+ // // border: ;
748
+ // border-radius: var(
749
+ // --_ctm-mob-dn-pt-ie-ss-br-rs,
750
+ // var(--_ctm-tab-dn-pt-ie-ss-br-rs, var(--_ctm-dn-pt-ie-ss-br-rs))
751
+ // );
752
+ // border-color: var(
753
+ // --_ctm-mob-dn-pt-ie-ss-br-cr,
754
+ // var(--_ctm-tab-dn-pt-ie-ss-br-cr, var(--_ctm-dn-pt-ie-ss-br-cr))
755
+ // );
756
+ // }
757
+
758
+ // .product_info_wrapper {
759
+ // display: flex;
760
+ // width: 380px;
761
+ // flex-direction: column;
762
+ // justify-content: space-between;
763
+ // align-items: flex-start;
764
+ // align-self: stretch;
765
+
766
+ // .product_info_container {
767
+ // display: flex;
768
+ // flex-direction: column;
769
+ // align-items: flex-start;
770
+ // gap: 2px;
771
+ // align-self: stretch;
772
+ // word-break: normal;
773
+
774
+ // .product_title {
775
+ // // color: var(--_ctm-dn-pt-ne-ss-cr);
776
+ // // font-size: var(--_ctm-dn-pt-ne-ss-ft-se);
777
+ // // font-weight: 700;
778
+ // // align-self: stretch;
779
+ // // line-height: 28px;
780
+ // // font-family: var(--_ctm-dn-pt-ne-ss-ft-fy);
781
+ // color: var(
782
+ // --_ctm-mob-dn-pt-ne-ss-cr,
783
+ // var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr))
784
+ // );
785
+ // font-family: var(
786
+ // --_sf-hr-ff,
787
+ // var(
788
+ // --_ctm-mob-dn-pt-ne-ss-ft-fy,
789
+ // var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy))
790
+ // )
791
+ // );
792
+ // font-size: var(
793
+ // --_ctm-mob-dn-pt-ne-ss-ft-se,
794
+ // var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se))
795
+ // );
796
+ // font-weight: var(
797
+ // --_ctm-mob-dn-pt-ne-ss-ft-wt,
798
+ // var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt))
799
+ // );
800
+ // font-style: var(
801
+ // --_ctm-mob-dn-pt-ne-ss-ft-se-ic,
802
+ // var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic))
803
+ // );
804
+ // text-align: var(
805
+ // --_ctm-mob-dn-pt-ne-ss-tt-an,
806
+ // var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an))
807
+ // );
808
+ // letter-spacing: var(
809
+ // --_ctm-mob-dn-pt-ne-ss-lr-sg,
810
+ // var(--_ctm-tab-dn-pt-ne-ss-lr-sg, var(--_ctm-dn-pt-ne-ss-lr-sg))
811
+ // );
812
+ // line-height: var(
813
+ // --_ctm-mob-dn-pt-ne-ss-le-ht,
814
+ // var(--_ctm-tab-dn-pt-ne-ss-le-ht, var(--_ctm-dn-pt-ne-ss-le-ht))
815
+ // );
816
+ // text-decoration: var(
817
+ // --_ctm-mob-dn-pt-ne-ss-ue,
818
+ // var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue))
819
+ // );
820
+ // }
821
+
822
+ // .product_code {
823
+ // display: flex;
824
+ // align-items: center;
825
+ // gap: 6px;
826
+ // align-self: stretch;
827
+ // flex-wrap: wrap;
828
+ // background-color: var(--_ctm-dn-pt-in-ss-bd-cr);
829
+
830
+ // p {
831
+ // // color: #475467;
832
+ // // font-size: 14px;
833
+ // // font-weight: 400;
834
+ // // line-height: 20px;
835
+ // white-space: nowrap;
836
+ // color: var(
837
+ // --_ctm-mob-dn-pt-in-ss-cr,
838
+ // var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
839
+ // );
840
+ // font-family: var(
841
+ // --_sf-hr-ff,
842
+ // var(
843
+ // --_ctm-mob-dn-pt-in-ss-ft-fy,
844
+ // var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
845
+ // )
846
+ // );
847
+ // font-size: var(
848
+ // --_ctm-mob-dn-pt-in-ss-ft-se,
849
+ // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
850
+ // );
851
+ // font-weight: var(
852
+ // --_ctm-mob-dn-pt-in-ss-ft-wt,
853
+ // var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
854
+ // );
855
+ // font-style: var(
856
+ // --_ctm-mob-dn-pt-in-ss-ft-se-ic,
857
+ // var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
858
+ // );
859
+ // text-align: var(
860
+ // --_ctm-mob-dn-pt-in-ss-tt-an,
861
+ // var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
862
+ // );
863
+ // letter-spacing: var(
864
+ // --_ctm-mob-dn-pt-in-ss-lr-sg,
865
+ // var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
866
+ // );
867
+ // line-height: var(
868
+ // --_ctm-mob-dn-pt-in-ss-le-ht,
869
+ // var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
870
+ // );
871
+ // text-decoration: var(
872
+ // --_ctm-mob-dn-pt-in-ss-ue,
873
+ // var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
874
+ // );
875
+ // }
876
+ // }
877
+
878
+ // .product_options {
879
+ // display: flex;
880
+ // align-items: center;
881
+ // gap: 4px;
882
+ // align-self: stretch;
883
+ // flex-wrap: wrap;
884
+ // background-color: var(--_ctm-dn-pt-in-ss-bd-cr);
885
+ // p {
886
+ // white-space: nowrap;
887
+ // color: var(
888
+ // --_ctm-mob-dn-pt-in-ss-cr,
889
+ // var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
890
+ // );
891
+ // font-family: var(
892
+ // --_sf-hr-ff,
893
+ // var(
894
+ // --_ctm-mob-dn-pt-in-ss-ft-fy,
895
+ // var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
896
+ // )
897
+ // );
898
+ // font-size: var(
899
+ // --_ctm-mob-dn-pt-in-ss-ft-se,
900
+ // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
901
+ // );
902
+ // font-weight: var(
903
+ // --_ctm-mob-dn-pt-in-ss-ft-wt,
904
+ // var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
905
+ // );
906
+ // font-style: var(
907
+ // --_ctm-mob-dn-pt-in-ss-ft-se-ic,
908
+ // var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
909
+ // );
910
+ // text-align: var(
911
+ // --_ctm-mob-dn-pt-in-ss-tt-an,
912
+ // var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
913
+ // );
914
+ // letter-spacing: var(
915
+ // --_ctm-mob-dn-pt-in-ss-lr-sg,
916
+ // var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
917
+ // );
918
+ // line-height: var(
919
+ // --_ctm-mob-dn-pt-in-ss-le-ht,
920
+ // var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
921
+ // );
922
+ // text-decoration: var(
923
+ // --_ctm-mob-dn-pt-in-ss-ue,
924
+ // var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
925
+ // );
926
+ // }
927
+ // }
928
+ // }
929
+
930
+ // .product_customization_container {
931
+ // display: flex;
932
+ // align-items: center;
933
+ // gap: 8px;
934
+ // min-height: 28px;
935
+
936
+ // .customization_button {
937
+ // display: flex;
938
+ // justify-content: center;
939
+ // align-items: center;
940
+ // gap: 8px;
941
+ // white-space: nowrap;
942
+ // // color: #243dc6;
943
+ // // font-size: 14px;
944
+ // // font-weight: 400;
945
+ // // line-height: 20px;
946
+ // // color: prepareMediaVariable(--_ctm-dn-pt-as-ss-cr);
947
+ // color: var(
948
+ // --_ctm-mob-dn-pt-as-ss-cr,
949
+ // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
950
+ // );
951
+ // font-family: var(
952
+ // --_sf-hr-ff,
953
+ // var(
954
+ // --_ctm-mob-dn-pt-as-ss-ft-fy,
955
+ // var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
956
+ // )
957
+ // );
958
+ // font-size: var(
959
+ // --_ctm-mob-dn-pt-as-ss-ft-se,
960
+ // var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
961
+ // );
962
+ // font-weight: var(
963
+ // --_ctm-mob-dn-pt-as-ss-ft-wt,
964
+ // var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
965
+ // );
966
+ // font-style: var(
967
+ // --_ctm-mob-dn-pt-as-ss-ft-se-ic,
968
+ // var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
969
+ // );
970
+ // text-align: var(
971
+ // --_ctm-mob-dn-pt-as-ss-tt-an,
972
+ // var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
973
+ // );
974
+ // letter-spacing: var(
975
+ // --_ctm-mob-dn-pt-as-ss-lr-sg,
976
+ // var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
977
+ // );
978
+ // line-height: var(
979
+ // --_ctm-mob-dn-pt-as-ss-le-ht,
980
+ // var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
981
+ // );
982
+ // text-decoration: var(
983
+ // --_ctm-mob-dn-pt-as-ss-ue,
984
+ // var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
985
+ // );
986
+
987
+ // // &:hover {
988
+ // // font-weight: 600;
989
+ // // }
990
+ // }
991
+ // .customizationInfo_button {
992
+ // display: flex;
993
+ // justify-content: center;
994
+ // align-items: center;
995
+ // gap: 8px;
996
+ // white-space: nowrap;
997
+ // color: var(
998
+ // --_ctm-mob-dn-pt-rd-io-cr,
999
+ // var(--_ctm-tab-dn-pt-rd-io-cr, var(--_ctm-dn-pt-rd-io-cr))
1000
+ // );
1001
+ // font-family: var(
1002
+ // --_sf-hr-ff,
1003
+ // var(
1004
+ // --_ctm-mob-dn-pt-rd-io-ft-fy,
1005
+ // var(--_ctm-tab-dn-pt-rd-io-ft-fy, var(--_ctm-dn-pt-rd-io-ft-fy))
1006
+ // )
1007
+ // );
1008
+ // font-size: var(
1009
+ // --_ctm-mob-dn-pt-rd-io-ft-se,
1010
+ // var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se))
1011
+ // );
1012
+ // font-weight: var(
1013
+ // --_ctm-mob-dn-pt-rd-io-ft-wt,
1014
+ // var(--_ctm-tab-dn-pt-rd-io-ft-wt, var(--_ctm-dn-pt-rd-io-ft-wt))
1015
+ // );
1016
+ // font-style: var(
1017
+ // --_ctm-mob-dn-pt-rd-io-ft-se-ic,
1018
+ // var(--_ctm-tab-dn-pt-rd-io-ft-se-ic, var(--_ctm-dn-pt-rd-io-ft-se-ic))
1019
+ // );
1020
+ // text-align: var(
1021
+ // --_ctm-mob-dn-pt-rd-io-tt-an,
1022
+ // var(--_ctm-tab-dn-pt-rd-io-tt-an, var(--_ctm-dn-pt-rd-io-tt-an))
1023
+ // );
1024
+ // letter-spacing: var(
1025
+ // --_ctm-mob-dn-pt-rd-io-lr-sg,
1026
+ // var(--_ctm-tab-dn-pt-rd-io-lr-sg, var(--_ctm-dn-pt-rd-io-lr-sg))
1027
+ // );
1028
+ // line-height: var(
1029
+ // --_ctm-mob-dn-pt-rd-io-le-ht,
1030
+ // var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht))
1031
+ // );
1032
+ // text-decoration: var(
1033
+ // --_ctm-mob-dn-pt-qy-ss-ue,
1034
+ // var(--_ctm-tab-dn-pt-qy-ss-ue, var(--_ctm-dn-pt-qy-ss-ue))
1035
+ // );
1036
+ // }
1037
+ // }
1038
+ // }
1039
+ // }
1040
+
1041
+ // .cart_product_right_wrapper {
1042
+ // display: flex;
1043
+ // flex-direction: column;
1044
+ // justify-content: space-between;
1045
+ // align-items: flex-end;
1046
+ // align-self: stretch;
1047
+
1048
+ // .product_qty_price_wrapper {
1049
+ // display: flex;
1050
+ // justify-content: var(--_dm-flt);
1051
+ // align-items: center;
1052
+ // gap: 32px;
1053
+ // align-self: stretch;
1054
+
1055
+ // .product_qty_wrapper {
1056
+ // display: flex;
1057
+ // // width: 124px;
1058
+ // flex-direction: column;
1059
+ // align-items: flex-start;
1060
+ // gap: 6px;
1061
+
1062
+ // .product_qty_container {
1063
+ // display: flex;
1064
+ // align-items: flex-start;
1065
+ // align-self: stretch;
1066
+ // border-radius: 4px;
1067
+ // border: 0.5px solid #d0d5dd;
1068
+ // background: #fff;
1069
+ // box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1070
+
1071
+ // .product_qty_label {
1072
+ // display: flex;
1073
+ // padding: 8px 12px;
1074
+ // align-items: center;
1075
+ // border-radius: 8px 0px 0px 8px;
1076
+ // p {
1077
+ // color: #475467;
1078
+ // font-size: 16px;
1079
+ // font-weight: 400;
1080
+ // line-height: 24px;
1081
+ // }
1082
+ // }
1083
+
1084
+ // .product_qty_number {
1085
+ // display: flex;
1086
+ // padding: 8px 12px;
1087
+ // align-items: center;
1088
+ // gap: 8px;
1089
+ // flex: 1 0 0;
1090
+ // align-self: stretch;
1091
+ // border-radius: 0px 4px 4px 0px;
1092
+ // background: #fff;
1093
+ // border-left: 1px solid #d0d5dd;
1094
+ // max-width: 80px;
1095
+ // }
1096
+ // }
1097
+ // }
1098
+
1099
+ // .product_price {
1100
+ // // color: #101828;
1101
+ // // text-align: right;
1102
+ // // font-size: 20px;
1103
+ // // font-weight: 700;
1104
+ // // line-height: 30px;
1105
+ // white-space: nowrap;
1106
+ // color: var(
1107
+ // --_ctm-mob-dn-pt-pe-ss-cr,
1108
+ // var(--_ctm-tab-dn-pt-pe-ss-cr, var(--_ctm-dn-pt-pe-ss-cr))
1109
+ // );
1110
+ // font-family: var(
1111
+ // --_sf-hr-ff,
1112
+ // var(
1113
+ // --_ctm-mob-dn-pt-pe-ss-ft-fy,
1114
+ // var(--_ctm-tab-dn-pt-pe-ss-ft-fy, var(--_ctm-dn-pt-pe-ss-ft-fy))
1115
+ // )
1116
+ // );
1117
+ // font-size: var(
1118
+ // --_ctm-mob-dn-pt-pe-ss-ft-se,
1119
+ // var(--_ctm-tab-dn-pt-pe-ss-ft-se, var(--_ctm-dn-pt-pe-ss-ft-se))
1120
+ // );
1121
+ // font-weight: var(
1122
+ // --_ctm-mob-dn-pt-pe-ss-ft-wt,
1123
+ // var(--_ctm-tab-dn-pt-pe-ss-ft-wt, var(--_ctm-dn-pt-pe-ss-ft-wt))
1124
+ // );
1125
+ // font-style: var(
1126
+ // --_ctm-mob-dn-pt-pe-ss-ft-se-ic,
1127
+ // var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic))
1128
+ // );
1129
+ // text-align: var(
1130
+ // --_ctm-mob-dn-pt-pe-ss-tt-an,
1131
+ // var(--_ctm-tab-dn-pt-pe-ss-tt-an, var(--_ctm-dn-pt-pe-ss-tt-an))
1132
+ // );
1133
+ // letter-spacing: var(
1134
+ // --_ctm-mob-dn-pt-pe-ss-lr-sg,
1135
+ // var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg))
1136
+ // );
1137
+ // line-height: var(
1138
+ // --_ctm-mob-dn-pt-pe-ss-le-ht,
1139
+ // var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht))
1140
+ // );
1141
+ // text-decoration: var(
1142
+ // --_ctm-mob-dn-pt-pe-ss-ue,
1143
+ // var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
1144
+ // );
1145
+ // min-width: 80px;
1146
+ // }
1147
+ // }
1148
+
1149
+ // .product_actions_wrapper {
1150
+ // display: flex;
1151
+ // align-items: center;
1152
+ // gap: 16px;
1153
+ // .svg_icon {
1154
+ // display: flex;
1155
+ // justify-content: center;
1156
+ // align-items: center;
1157
+
1158
+ // // &:last-child svg {
1159
+ // // width: 16px;
1160
+ // // height: 16px;
1161
+ // // path {
1162
+ // // stroke: #dc2626;
1163
+ // // }
1164
+ // // }
1165
+ // }
1166
+ // .product_action_button {
1167
+ // display: flex;
1168
+ // justify-content: center;
1169
+ // align-items: center;
1170
+ // gap: 8px;
1171
+ // // color: #243dc6;
1172
+ // // font-size: 14px;
1173
+ // // font-weight: 400;
1174
+ // // line-height: 20px;
1175
+
1176
+ // // &:hover {
1177
+ // // font-weight: 600;
1178
+ // // }
1179
+ // }
1180
+
1181
+ // // .remove_button {
1182
+ // // display: flex;
1183
+ // // justify-content: center;
1184
+ // // align-items: center;
1185
+ // // color: #dc2626;
1186
+ // // font-size: 14px;
1187
+ // // font-weight: 400;
1188
+ // // line-height: 20px;
1189
+ // // white-space: nowrap;
1190
+ // // // &:hover {
1191
+ // // // font-weight: 600;
1192
+ // // // }
1193
+ // // }
1194
+ // }
1195
+ // }
1196
+ // }
911
1197
  }
912
1198
 
913
1199
  .brand_group_wrapper {
@@ -955,7 +1241,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
955
1241
  .infinite-list-container {
956
1242
  display: flex;
957
1243
  flex-direction: column;
958
- gap: 48px;
1244
+ gap: 24px;
959
1245
  max-width: 100%;
960
1246
  min-width: 100%;
961
1247