@sc-360-v2/storefront-cms-library 0.3.56 → 0.3.58

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 (24) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/buyForHeaders.scss +19 -3
  3. package/dist/cart-summary.scss +897 -40
  4. package/dist/checkout.scss +5520 -531
  5. package/dist/confirmationModal.scss +1 -0
  6. package/dist/dropdownTemplate.scss +129 -5
  7. package/dist/employee-bulk-order.scss +644 -489
  8. package/dist/functions.js +1 -1
  9. package/dist/icon-list.scss +117 -29
  10. package/dist/modal.scss +3 -3
  11. package/dist/section.scss +25 -24
  12. package/dist/shipping-payments.scss +846 -650
  13. package/dist/stack.scss +4 -3
  14. package/dist/types/builder/elements/form-builder/index.d.ts +1 -0
  15. package/dist/types/builder/interfaces/global.d.ts +1 -1
  16. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +2833 -188
  17. package/dist/types/builder/tools/element-edit/checkout.d.ts +1935 -541
  18. package/dist/types/builder/tools/element-edit/icon-list.d.ts +53 -1
  19. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  20. package/dist/types/builder/tools/element-edit/productDescription.d.ts +16 -0
  21. package/dist/types/helper/helper-functions copy.d.ts +7 -0
  22. package/dist/types/helper/helper-functions.d.ts +7 -1
  23. package/dist/types/html-elements/element-types.d.ts +2 -2
  24. package/package.json +1 -1
package/dist/employee-bulk-order.scss CHANGED
@@ -126,12 +126,15 @@
126
126
  right: 0;
127
127
  .svg_icon {
128
128
  right: -10px;
129
- top: -10px;
129
+ top: 0px;
130
130
  }
131
131
  }
132
132
  .em_add-employee {
133
133
  position: absolute;
134
134
  bottom: 0;
135
+ .dropdown-menu {
136
+ top: 38px;
137
+ }
135
138
  .svg_icon {
136
139
  left: -10px;
137
140
  bottom: -10px;
@@ -156,6 +159,10 @@
156
159
  // display: grid;
157
160
  gap: 12px;
158
161
  border-bottom: 1px solid var(--_gray-200);
162
+ cursor: pointer;
163
+ &:not(&.selected):hover {
164
+ background-color: var(--_primary-25);
165
+ }
159
166
  &:first-child {
160
167
  border-top: 1px solid var(--_gray-200);
161
168
  }
@@ -177,8 +184,11 @@
177
184
  font-size: 14px;
178
185
  font-weight: 600;
179
186
  flex-shrink: 0;
180
- .em_profile_text {
181
- width: 100%;
187
+ overflow: hidden;
188
+ img {
189
+ max-width: 100%;
190
+ max-height: 100%;
191
+ object-fit: contain;
182
192
  }
183
193
  }
184
194
  .em_info {
@@ -209,6 +219,9 @@
209
219
  font-size: 12px;
210
220
  }
211
221
  }
222
+ .em_profile_text {
223
+ width: 100%;
224
+ }
212
225
  }
213
226
  .em_entity-status {
214
227
  display: flex;
@@ -225,7 +238,7 @@
225
238
  border-radius: 4px;
226
239
  width: 100%;
227
240
  &:hover {
228
- background-color: var(--_gray-50);
241
+ background-color: var(--_gray-200);
229
242
  }
230
243
  }
231
244
  .save_btn {
@@ -242,7 +255,7 @@
242
255
  }
243
256
  }
244
257
  .employee_card.selected {
245
- background: var(--_primary-25);
258
+ background: var(--_primary-50);
246
259
  border-bottom: 2px solid var(--_primary-400);
247
260
  }
248
261
  .em_empty_section {
@@ -763,15 +776,25 @@
763
776
  }
764
777
  }
765
778
  }
779
+ .user-info-right {
780
+ .save-btn {
781
+ padding: 8px 16px;
782
+ border-radius: 4px;
783
+ background-color: var(--_primary-500);
784
+ color: var(--_base-white);
785
+ font-weight: 500;
786
+ font-size: 14px;
787
+ }
788
+ }
766
789
 
767
790
  .trigger-btn {
768
791
  display: flex;
769
- padding: 4px;
792
+ padding: 6px;
770
793
  border-radius: 4px;
771
794
  color: var(--_gray-600);
772
795
  &:hover {
773
- background: var(--_gray-100);
774
- color: var(--_gray-900);
796
+ background: var(--_error-50);
797
+ color: var(--_error-700);
775
798
  }
776
799
  }
777
800
 
@@ -907,24 +930,40 @@
907
930
  display: flex;
908
931
  padding: var(--_ctm-lt-pg);
909
932
  flex-direction: column;
910
- gap: var(--_ctm-lt-te-ad-it-gp);
933
+ gap: 4px;
911
934
  word-break: keep-all;
912
935
  padding-bottom: 24px;
913
936
 
914
937
  .chk_checkout_title {
915
938
  color: var(--_gray-900);
916
939
  font-size: 24px;
917
- font-weight: 600;
940
+ font-weight: 700;
918
941
  line-height: 32px;
919
- margin-bottom: 16px;
920
942
  }
921
943
 
922
944
  .accordion {
923
945
  border-radius: 4px;
924
946
  display: flex;
925
- gap: var(--_ctm-lt-an-hg-ad-ve-gp);
947
+ // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
926
948
  flex-direction: column;
949
+ transition: max-height 800ms ease-in;
950
+ &.open {
951
+ transition: max-height 800ms ease-in;
952
+ .accordion-header {
953
+ background-color: var(--_gray-200);
954
+ }
955
+ .accordion-body {
956
+ transition: max-height 800ms ease-in;
957
+ max-height: 2000px;
958
+ padding-block: 12px 24px;
959
+ .shipping-address {
960
+ max-height: fit-content;
961
+ transition: max-height 800ms ease-in;
962
+ }
963
+ }
964
+ }
927
965
 
966
+ // accordion heaer
928
967
  .accordion-header {
929
968
  padding: 12px;
930
969
  display: flex;
@@ -934,6 +973,7 @@
934
973
  background-color: #f5f5f5;
935
974
  border-color: #f5f5f5;
936
975
  border-radius: 4px;
976
+ height: 55px;
937
977
 
938
978
  .accordion-title {
939
979
  margin-right: 1rem;
@@ -959,26 +999,27 @@
959
999
  }
960
1000
  }
961
1001
 
1002
+ // accordion body
962
1003
  .accordion-body {
963
- margin-block: 16px 28px;
964
- .summary {
965
- .chk_shipping_method_label {
966
- display: flex;
967
- align-items: center;
968
- gap: 4px;
969
- color: var(--_gray-500);
970
- }
971
-
972
- .chk_shipping_method_heading {
973
- color: var(--_gray-500);
974
- font-weight: 600;
975
- }
976
- }
1004
+ transition: max-height 800ms ease-in;
977
1005
 
1006
+ max-height: 0px;
1007
+ overflow: hidden;
1008
+ padding: 0;
1009
+ // shipping address
978
1010
  .shipping-address {
1011
+ transition: max-height 800ms ease-in;
1012
+ max-height: 0;
979
1013
  display: flex;
980
1014
  flex-direction: column;
981
- gap: 24px;
1015
+ gap: 16px;
1016
+
1017
+ .btn_link {
1018
+ color: var(--_primary-400);
1019
+ &:hover {
1020
+ text-decoration: underline;
1021
+ }
1022
+ }
982
1023
 
983
1024
  .chk_saved_address_button {
984
1025
  cursor: pointer;
@@ -993,22 +1034,27 @@
993
1034
  display: flex;
994
1035
  flex-direction: column;
995
1036
  gap: 24px;
1037
+ max-width: 485px;
996
1038
  }
997
1039
 
998
1040
  .shipping_address_heading_container {
999
1041
  display: flex;
1000
1042
  justify-content: space-between;
1001
1043
  align-items: center;
1002
- max-width: 760px;
1003
- font-size: 18px;
1004
1044
  font-weight: 600;
1045
+ color: var(--_gray-900);
1046
+ .icon {
1047
+ display: flex;
1048
+ align-items: center;
1049
+ cursor: pointer;
1050
+ }
1005
1051
  }
1006
1052
 
1007
1053
  form {
1008
1054
  display: flex;
1009
1055
  flex-direction: column;
1010
- gap: 16px;
1011
- max-width: 85%;
1056
+ gap: 0.75rem;
1057
+ // max-width: 85%;
1012
1058
 
1013
1059
  @media (max-width: 500px) {
1014
1060
  max-width: 100%;
@@ -1030,13 +1076,14 @@
1030
1076
  .chk_shipping_address_input_wrapper {
1031
1077
  display: flex;
1032
1078
  flex-direction: column;
1033
- gap: 6px;
1079
+ gap: 16px;
1034
1080
  width: 100%;
1035
1081
  }
1036
1082
 
1037
1083
  .chk_shipping_address_form_label {
1038
1084
  color: var(--_gray-600);
1039
1085
  font-size: 14px;
1086
+ padding-bottom: 6px;
1040
1087
  }
1041
1088
 
1042
1089
  .chk_shiping_address_form_input {
@@ -1119,6 +1166,20 @@
1119
1166
  }
1120
1167
  }
1121
1168
 
1169
+ .summary {
1170
+ .chk_shipping_method_label {
1171
+ display: flex;
1172
+ align-items: center;
1173
+ gap: 4px;
1174
+ color: var(--_gray-500);
1175
+ }
1176
+
1177
+ .chk_shipping_method_heading {
1178
+ color: var(--_gray-500);
1179
+ font-weight: 600;
1180
+ }
1181
+ }
1182
+
1122
1183
  .chk_multi_address {
1123
1184
  display: flex;
1124
1185
  flex-direction: column;
@@ -1166,7 +1227,7 @@
1166
1227
  .chk_multi_address_product_name {
1167
1228
  color: var(--_gray-900);
1168
1229
  font-size: 18px;
1169
- font-weight: 600;
1230
+ font-weight: 700;
1170
1231
  line-height: 28px;
1171
1232
  }
1172
1233
 
@@ -1190,7 +1251,7 @@
1190
1251
  .chk_multi_address_product_price {
1191
1252
  color: var(--_gray-900);
1192
1253
  font-size: 20px;
1193
- font-weight: 600;
1254
+ font-weight: 700;
1194
1255
  }
1195
1256
  }
1196
1257
 
@@ -1209,7 +1270,7 @@
1209
1270
  .chk_multi_address_product_qty {
1210
1271
  color: var(--_gray-900);
1211
1272
  font-size: 12px;
1212
- font-weight: 600;
1273
+ font-weight: 700;
1213
1274
  }
1214
1275
  }
1215
1276
 
@@ -1321,13 +1382,12 @@
1321
1382
  &__group {
1322
1383
  display: flex;
1323
1384
  flex-direction: column;
1324
- gap: 12px;
1385
+ gap: 8px;
1325
1386
 
1326
1387
  .chk_shipping_method_heading {
1327
1388
  color: var(--_gray-700);
1328
- font-weight: 600;
1389
+ font-weight: 700;
1329
1390
  font-size: 16px;
1330
- margin-bottom: 8px;
1331
1391
  }
1332
1392
  }
1333
1393
 
@@ -1361,13 +1421,25 @@
1361
1421
  }
1362
1422
 
1363
1423
  .chk_shipping_method_label {
1364
- color: var(--_gray-500);
1424
+ color: var(--_gray-600);
1425
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
1365
1426
  font-size: 14px;
1427
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
1428
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
1429
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
1430
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
1431
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
1366
1432
  }
1367
1433
 
1368
1434
  .chk_shipping_method_value {
1369
1435
  color: var(--_gray-900);
1436
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
1370
1437
  font-size: 14px;
1438
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
1439
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
1440
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
1441
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg);
1442
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue);
1371
1443
  }
1372
1444
 
1373
1445
  // input[type="radio"] {
@@ -1424,52 +1496,137 @@
1424
1496
  }
1425
1497
  }
1426
1498
 
1499
+ // payment options
1427
1500
  .chk_payment-options {
1428
1501
  display: flex;
1429
1502
  flex-direction: column;
1430
1503
  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
1504
+ .gift_crd_chk_payment_option {
1505
+ border: 1px solid var(--_gray-300);
1506
+ border-radius: 4px;
1507
+ margin-bottom: 12px;
1508
+ .add_gift_card {
1509
+ display: flex;
1510
+ gap: 12px;
1511
+ padding: 16px;
1431
1512
 
1432
- .add_credit_card {
1433
- display: flex;
1434
- gap: 12px;
1435
- padding: 16px;
1436
-
1437
- .cc_icon {
1438
- svg {
1439
- width: 18px;
1440
- height: 14px;
1513
+ .gc_icon {
1514
+ svg {
1515
+ width: 18px;
1516
+ height: 14px;
1517
+ }
1441
1518
  }
1442
- }
1443
1519
 
1444
- .cc_info {
1445
- display: flex;
1446
- flex-direction: column;
1447
- gap: 6px;
1520
+ .gc_info {
1521
+ display: flex;
1522
+ justify-content: space-between;
1523
+ width: 100%;
1524
+ gap: 6px;
1448
1525
 
1449
- .cc_title {
1450
- font-size: 14px;
1451
- font-weight: 600;
1526
+ .gc_title {
1527
+ font-size: 14px;
1528
+ font-weight: 600;
1529
+ }
1530
+ }
1531
+ .gc_tertiary_btn {
1532
+ color: var(--_primary-400);
1533
+
1534
+ &:hover {
1535
+ color: var(--_primary-500);
1536
+ text-decoration: underline;
1537
+ }
1452
1538
  }
1453
1539
  }
1454
- }
1455
- .add_new_credit_card {
1456
- display: flex;
1457
- justify-content: space-between;
1458
- align-items: center;
1459
- padding-inline: 16px;
1460
- }
1461
- .cc_tertiary_btn {
1462
- color: var(--_primary-400);
1540
+ .chk_gft_crd_wrapper {
1541
+ display: flex;
1542
+ justify-content: space-between;
1543
+ align-items: center;
1544
+ padding: 16px;
1545
+ & > button {
1546
+ color: var(--_primary-400);
1547
+ &:hover {
1548
+ text-decoration: underline;
1549
+ }
1550
+ }
1551
+ &_item {
1552
+ display: flex;
1553
+ align-items: center;
1554
+ gap: 16px;
1555
+ &_icon {
1556
+ width: 40px;
1557
+ height: 40px;
1558
+ border: 1px solid var(--_gray-200);
1559
+ border-radius: 6px;
1560
+ display: flex;
1561
+ justify-content: center;
1562
+ align-items: center;
1563
+ }
1564
+ &_info {
1565
+ display: flex;
1566
+ flex-direction: column;
1567
+ &_title {
1568
+ font-size: 14px;
1569
+ margin-bottom: 4px;
1570
+ font-weight: 600;
1571
+ }
1572
+ &_desc {
1573
+ display: flex;
1574
+ &_value {
1575
+ font-size: 12px;
1576
+ color: var(--_gray-600);
1577
+ }
1578
+ &_label {
1579
+ font-size: 12px;
1580
+ color: var(--_gray-900);
1581
+ }
1582
+ }
1583
+ }
1584
+ &_pin {
1585
+ margin-left: 36px;
1586
+ input[type="number"] {
1587
+ border: 1px solid var(--_gray-300);
1588
+ border-radius: 4px;
1589
+ background-color: var(--_base-white);
1590
+ width: 95px;
1591
+ height: 44px;
1592
+ padding-inline: 10px;
1593
+ &:disabled {
1594
+ opacity: 0.8;
1595
+ cursor: not-allowed;
1596
+ }
1597
+ &:focus {
1598
+ outline: 2px solid var(--_primary-100);
1599
+ border: 1px solid var(--_primary-300);
1600
+ }
1601
+ }
1602
+ }
1603
+ }
1463
1604
 
1464
- &:hover {
1465
- color: var(--_primary-500);
1466
- text-decoration: underline;
1605
+ &_input {
1606
+ border: 1px solid var(--_gray-300);
1607
+ border-radius: 4px;
1608
+ background-color: var(--_base-white);
1609
+ height: 44px;
1610
+ width: 120px;
1611
+ display: flex;
1612
+ align-items: center;
1613
+ gap: 8px;
1614
+ padding-left: 10px;
1615
+ input[type="number"] {
1616
+ background-color: var(--_base-white);
1617
+ padding-right: 10px;
1618
+ &:disabled {
1619
+ opacity: 0.8;
1620
+ cursor: not-allowed;
1621
+ }
1622
+ }
1623
+ &:focus-within {
1624
+ outline: 2px solid var(--_primary-100);
1625
+ border: 1px solid var(--_primary-300);
1626
+ }
1627
+ }
1467
1628
  }
1468
1629
  }
1469
- .gift_crd_chk_payment_option {
1470
- border: 1px solid var(--_gray-300);
1471
- border-radius: 4px;
1472
- }
1473
1630
  .payment_program {
1474
1631
  // padding: 0 12px;
1475
1632
  .payment_program_header {
@@ -1480,7 +1637,7 @@
1480
1637
 
1481
1638
  margin-bottom: 16px;
1482
1639
 
1483
- &_label {
1640
+ .payment_program_header_label {
1484
1641
  display: flex;
1485
1642
  justify-content: space-between;
1486
1643
  align-items: center;
@@ -1489,7 +1646,7 @@
1489
1646
  font-weight: 600;
1490
1647
  color: var(--_gray-600);
1491
1648
  }
1492
- &_pds {
1649
+ .payment_program_header_pds {
1493
1650
  &_label {
1494
1651
  font-size: 14px;
1495
1652
  color: var(--_gray-600);
@@ -1513,20 +1670,24 @@
1513
1670
 
1514
1671
  .pp_pmnt_method_groups {
1515
1672
  .pp_ppm_section {
1516
- background: #f5f5f5;
1673
+ background: var(---base-white);
1674
+ border-bottom: 1px solid var(--_gray-300);
1517
1675
  padding: 12px 16px;
1518
1676
  font-size: 12px;
1519
1677
  display: flex;
1520
1678
  justify-content: space-between;
1521
1679
  gap: 8px;
1680
+ &:not(:first-child) {
1681
+ border-top: 1px solid var(--_gray-200);
1682
+ }
1522
1683
  .pp_ppm_section_label {
1523
1684
  font-size: 14px;
1524
- font-weight: 600;
1685
+ font-weight: 700;
1525
1686
  color: var(--_gray-900);
1526
1687
  }
1527
1688
  .pp_ppm_section_value {
1528
1689
  font-size: 14px;
1529
- font-weight: 600;
1690
+ font-weight: 700;
1530
1691
  color: var(--_gray-600);
1531
1692
  .pp_ppm_section_value_lable {
1532
1693
  font-weight: 500;
@@ -1539,14 +1700,17 @@
1539
1700
  display: grid;
1540
1701
  gap: 8px;
1541
1702
  .chk_payment_option {
1703
+ .chk_payment_options_heading {
1704
+ padding: 16px;
1705
+ display: flex;
1706
+ justify-content: space-between;
1707
+ }
1542
1708
  .chk_payment_section_wrapper {
1543
1709
  width: 100%;
1544
1710
  display: flex;
1545
1711
  justify-content: space-between;
1546
1712
  padding: 16px;
1547
- &:hover {
1548
- background-color: var(--_gray-50);
1549
- }
1713
+
1550
1714
  .chk_payment_section {
1551
1715
  display: flex;
1552
1716
  justify-content: space-between;
@@ -1555,18 +1719,21 @@
1555
1719
  .chk_payment_section_col_left {
1556
1720
  display: flex;
1557
1721
  gap: 12px;
1722
+ svg {
1723
+ width: 24px;
1724
+ height: 24px;
1725
+ }
1558
1726
  .chk_payment_section_method {
1559
1727
  display: flex;
1560
1728
  flex-direction: column;
1561
1729
  .chk_payment_section_method_name {
1562
1730
  font-size: 14px;
1563
- font-weight: 600;
1731
+ font-weight: 700;
1564
1732
  line-height: 20px;
1565
1733
  color: var(--_gray-700);
1566
1734
  }
1567
1735
  & > div {
1568
1736
  display: flex;
1569
- gap: 4px;
1570
1737
  .label {
1571
1738
  font-size: 12px;
1572
1739
  color: var(--_gray-500);
@@ -1585,7 +1752,7 @@
1585
1752
  border-radius: 4px;
1586
1753
  background-color: var(--_base-white);
1587
1754
  display: flex;
1588
- width: 155px;
1755
+ width: 120px;
1589
1756
  overflow: hidden;
1590
1757
  align-items: center;
1591
1758
  padding-inline: 12px;
@@ -1596,6 +1763,10 @@
1596
1763
  }
1597
1764
  input {
1598
1765
  height: inherit;
1766
+ &:disabled {
1767
+ opacity: 0.8;
1768
+ cursor: not-allowed;
1769
+ }
1599
1770
  }
1600
1771
  }
1601
1772
  }
@@ -1604,9 +1775,11 @@
1604
1775
  .chk_payment_options_heading {
1605
1776
  color: var(--_gray-900);
1606
1777
  font-size: 16px;
1607
- font-weight: 600;
1778
+ font-weight: 700;
1608
1779
  }
1609
1780
 
1781
+ // gift card styles
1782
+
1610
1783
  // payment other options styles
1611
1784
  .chk_pmnt_other_options {
1612
1785
  display: flex;
@@ -1765,16 +1938,349 @@
1765
1938
  }
1766
1939
  }
1767
1940
  }
1941
+ .add_new_credit_card {
1942
+ padding: 16px 16px 0px 16px;
1943
+ display: flex;
1944
+ justify-content: space-between;
1945
+ .cc_tertiary_btn {
1946
+ color: var(--_primary-400);
1947
+ &:hover {
1948
+ text-decoration: underline;
1949
+ }
1950
+ }
1951
+ }
1952
+
1953
+ .chk_payment_cred_section {
1954
+ display: flex;
1955
+ justify-content: space-between;
1956
+ align-items: center;
1957
+ padding: 16px 16px 8px 16px;
1958
+
1959
+ .chk_currency_inp {
1960
+ height: 44px;
1961
+ border: 1px solid var(--_gray-200);
1962
+ border-radius: 4px;
1963
+ background-color: var(--_base-white);
1964
+ display: flex;
1965
+ width: 120px;
1966
+ overflow: hidden;
1967
+ align-items: center;
1968
+ padding-inline: 12px;
1969
+ gap: 12px;
1970
+ &:focus-within {
1971
+ border: 1px solid var(--_primary-200);
1972
+ outline: 2px solid var(--_primary-50);
1973
+ }
1974
+ input {
1975
+ height: inherit;
1976
+ }
1977
+ }
1978
+ .chk_payment_cred_section_col_left {
1979
+ .chk_payment_cred_section_col_left_crd_details {
1980
+ display: flex;
1981
+ gap: 80px;
1982
+ align-items: center;
1983
+ & > div {
1984
+ display: flex;
1985
+ gap: 12px;
1986
+ .card_icon {
1987
+ width: 60px;
1988
+ height: 40px;
1989
+ border-radius: 4px;
1990
+ }
1991
+ .card_details {
1992
+ .card_details_num {
1993
+ font-size: 12px;
1994
+ font-weight: 600;
1995
+ color: var(--_gray-900);
1996
+ }
1997
+ & > div {
1998
+ display: flex;
1999
+ .card_details_label {
2000
+ font-size: 12px;
2001
+ color: var(--_gray-500);
2002
+ }
2003
+ .card_details_value {
2004
+ font-size: 12px;
2005
+ color: var(--_gray-900);
2006
+ }
2007
+ }
2008
+ }
2009
+ }
2010
+ }
2011
+ }
2012
+ }
2013
+
2014
+ .chk_payment_remove_card {
2015
+ padding-inline: 16px;
2016
+ margin-bottom: 16px;
2017
+ .error_msg {
2018
+ font-size: 12px;
2019
+ color: var(--_error-700);
2020
+ }
2021
+ }
1768
2022
  }
1769
2023
  }
1770
2024
  }
1771
2025
 
1772
- .chk_gft_crd_container {
2026
+ .chk_billing_address {
2027
+ width: 100%;
2028
+ display: flex;
2029
+ flex-direction: column;
2030
+ background-color: var(--_base-white);
2031
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
2032
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
2033
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
2034
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
2035
+
2036
+ &_form_container {
2037
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2038
+ padding-top: 24px;
2039
+ display: flex;
2040
+ flex-direction: column;
2041
+ gap: 24px;
2042
+ }
2043
+
2044
+ .chk_payment_options_heading {
2045
+ font-size: 16px;
2046
+ color: var(--_gray-900);
2047
+ font-weight: 600;
2048
+ &.pl_0 {
2049
+ padding-left: 0px;
2050
+ }
2051
+ }
2052
+
2053
+ &_form_wrapper {
2054
+ display: flex;
2055
+ flex-direction: column;
2056
+ gap: 24px;
2057
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2058
+ }
2059
+
2060
+ .shipping_address_container {
2061
+ display: flex;
2062
+ flex-direction: column;
2063
+ gap: 24px;
2064
+ }
2065
+
2066
+ .shipping_address_heading_container {
2067
+ display: flex;
2068
+ justify-content: space-between;
2069
+ align-items: center;
2070
+
2071
+ .chk_heading_info {
2072
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
2073
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
2074
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
2075
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
2076
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
2077
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
2078
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
2079
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
2080
+ }
2081
+ .icon {
2082
+ cursor: pointer;
2083
+ }
2084
+ }
2085
+
2086
+ form {
2087
+ display: flex;
2088
+ flex-direction: column;
2089
+ gap: 0.75rem;
2090
+ max-width: 85%;
2091
+
2092
+ @media (max-width: 500px) {
2093
+ max-width: 100%;
2094
+ }
2095
+ }
2096
+
2097
+ .chk_shipping_address_form_group {
2098
+ display: flex;
2099
+ justify-content: space-between;
2100
+ flex-direction: row;
2101
+ gap: 12px;
2102
+ }
2103
+
2104
+ .chk_shipping_address_input_container {
2105
+ display: flex;
2106
+ width: 100%;
2107
+ }
2108
+
2109
+ .chk_shipping_address_input_wrapper {
2110
+ display: flex;
2111
+ flex-direction: column;
2112
+ gap: var(--_ctm-lt-ll-ad-it-gp);
2113
+ width: 100%;
2114
+ }
2115
+
2116
+ .chk_shipping_address_form_label {
2117
+ color: var(--_gray-600);
2118
+ font-size: 14px;
2119
+ }
2120
+
2121
+ .chk_shiping_address_form_input {
2122
+ padding: 8px 12px;
2123
+ width: -webkit-fill-available;
2124
+ height: 40px;
2125
+ background-color: var(--_base-white);
2126
+ border-radius: 6px;
2127
+ border: 1px solid var(--_gray-300);
2128
+
2129
+ &:focus-within {
2130
+ border: 1px solid var(--_primary-300);
2131
+ outline: 2px solid var(--_primary-100);
2132
+ }
2133
+
2134
+ // .input-field {
2135
+ // padding: 8px 12px;
2136
+ // width: -webkit-fill-available;
2137
+ // background-color: var(--_base-white);
2138
+ // border-radius: 6px;
2139
+ // border: 1px solid var(--_gray-300);
2140
+
2141
+ // &:focus-within {
2142
+ // border: 1px solid var(--_primary-300);
2143
+ // outline: 2px solid var(--_primary-100);
2144
+ // }
2145
+ // }
2146
+ }
2147
+
2148
+ input[type="checkbox"] {
2149
+ width: auto;
2150
+ }
2151
+
2152
+ .error-msg {
2153
+ font-size: 12px;
2154
+ color: #ff0000;
2155
+ }
2156
+
2157
+ .chk_shipping_address_use_as_billing_address_chkbx {
2158
+ display: flex;
2159
+ align-items: center;
2160
+ gap: 0.5rem;
2161
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2162
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2163
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2164
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2165
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2166
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2167
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2168
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2169
+
2170
+ .custom-checkbox {
2171
+ width: 20px;
2172
+ height: 20px;
2173
+ border: 1px solid #d0d5dd;
2174
+ border-radius: 4px;
2175
+ position: relative;
2176
+ background-color: #fff;
2177
+ transition: all 0.2s ease;
2178
+
2179
+ &::after {
2180
+ content: "";
2181
+ position: absolute;
2182
+ display: none;
2183
+ left: 5px;
2184
+ top: 0.5px;
2185
+ width: 5px;
2186
+ height: 10px;
2187
+ border: solid #fff;
2188
+ border-width: 0 2px 2px 0;
2189
+ transform: rotate(45deg);
2190
+ }
2191
+ }
2192
+ }
2193
+
2194
+ input[type="checkbox"]:checked + label {
2195
+ .custom-checkbox {
2196
+ background-color: #004dff;
2197
+ border-color: #004dff;
2198
+
2199
+ &::after {
2200
+ display: block;
2201
+ }
2202
+ }
2203
+ }
2204
+
2205
+ .checkbox-group {
2206
+ display: flex;
2207
+ align-items: center;
2208
+ justify-content: start;
2209
+ gap: 8px;
2210
+ }
2211
+
2212
+ &_same_as_billing_address_chkbx {
2213
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2214
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2215
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2216
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2217
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2218
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2219
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2220
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2221
+ }
2222
+
2223
+ &_button_wrapper {
2224
+ display: flex;
2225
+ align-items: center;
2226
+ gap: 16px;
2227
+ }
2228
+ }
2229
+
2230
+ .payment_heading {
2231
+ padding: 12px;
2232
+ display: flex;
2233
+ justify-content: space-between;
2234
+ border-bottom: 1px solid var(--_gray-100);
2235
+ font-weight: 600;
2236
+ .gc_tertiary_btn {
2237
+ color: var(--_primary-400);
2238
+ &:hover {
2239
+ text-decoration: underline;
2240
+ }
2241
+ }
2242
+ }
2243
+
2244
+ .chk_payment_gift_card {
2245
+ border: 1px solid var(--_gray-200);
2246
+ border-radius: 6px;
2247
+
2248
+ .chk_payment_options_heading {
2249
+ padding: 16px;
2250
+ border-bottom: 1px solid var(--_gray-200);
2251
+ display: flex;
2252
+ justify-content: space-between;
2253
+ .payment_options_heading {
2254
+ font-size: 14px;
2255
+ font-weight: 600;
2256
+ }
2257
+ .chk_primary_btn_link {
2258
+ color: var(--_primary-400);
2259
+ &:hover {
2260
+ text-decoration: underline;
2261
+ }
2262
+ }
2263
+ }
2264
+ // gift card styles
2265
+
2266
+ // .chk_gft_crd_wrapper {
2267
+ // &_btn {
2268
+ // text-align: left;
2269
+ // margin-bottom: 16px;
2270
+ // color: var(--_primary-400);
2271
+ // &:hover {
2272
+ // text-decoration: underline;
2273
+ // }
2274
+ // }
2275
+ // }
2276
+ }
2277
+
2278
+ .chk_gft_crd_container {
1773
2279
  width: 100%;
1774
2280
  display: flex;
1775
2281
  flex-direction: column;
1776
2282
  gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1777
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
2283
+ background-color: var(--_base-white);
1778
2284
  border: 1px solid var(--_gray-300);
1779
2285
  border-radius: 4px;
1780
2286
  overflow: hidden;
@@ -1862,14 +2368,11 @@
1862
2368
  border: 1px solid var(--_primary-300);
1863
2369
  }
1864
2370
  }
1865
- }
1866
- .chk_gft_crd_wrapper {
1867
- &_btn {
1868
- text-align: left;
1869
- margin-bottom: 16px;
2371
+
2372
+ .chk_gft_crd_wrapper_btn {
1870
2373
  color: var(--_primary-400);
1871
2374
  &:hover {
1872
- text-decoration: underline;
2375
+ text-decoration: un;
1873
2376
  }
1874
2377
  }
1875
2378
  }
@@ -1972,149 +2475,26 @@
1972
2475
  color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1973
2476
  font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1974
2477
  font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1975
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1976
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1977
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1978
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1979
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1980
- }
1981
- }
1982
-
1983
- &_right_container {
1984
- display: flex;
1985
- gap: 6px;
1986
- align-items: flex-start;
1987
-
1988
- @media (max-width: 500px) {
1989
- justify-content: flex-end;
1990
- }
1991
- }
1992
-
1993
- &_input {
1994
- display: flex;
1995
- padding: 8px 12px;
1996
- width: -webkit-fill-available;
1997
- background-color: var(--_base-white);
1998
- border-radius: 6px;
1999
- border: 1px solid var(--_gray-300);
2000
-
2001
- &:focus-within {
2002
- border: 1px solid var(--_primary-300);
2003
- outline: 2px solid var(--_primary-100);
2004
- }
2005
-
2006
- .icon {
2007
- svg {
2008
- path {
2009
- stroke: var(--_primary-400);
2010
- }
2011
- }
2012
- }
2013
-
2014
- .input_field {
2015
- padding: 8px 12px;
2016
- width: -webkit-fill-available;
2017
- background-color: var(--_base-white);
2018
- border-radius: 6px;
2019
- border: 1px solid var(--_gray-300);
2020
-
2021
- &:focus-within {
2022
- border: 1px solid var(--_primary-300);
2023
- outline: 2px solid var(--_primary-100);
2024
- }
2025
- }
2026
- }
2027
- }
2028
-
2029
- .chk_billing_address {
2030
- width: 100%;
2031
- display: flex;
2032
- flex-direction: column;
2033
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
2034
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
2035
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
2036
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
2037
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
2038
-
2039
- &_form_container {
2040
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2041
- padding-top: 24px;
2042
- display: flex;
2043
- flex-direction: column;
2044
- gap: 24px;
2045
- }
2046
-
2047
- .chk_payment_options_heading {
2048
- font-size: 18px;
2049
- color: var(--_gray-900);
2050
- font-weight: 600;
2051
- &.pl_0 {
2052
- padding-left: 0px;
2053
- }
2054
- }
2055
-
2056
- &_form_wrapper {
2057
- display: flex;
2058
- flex-direction: column;
2059
- gap: 24px;
2060
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2061
- }
2062
-
2063
- .shipping_address_container {
2064
- display: flex;
2065
- flex-direction: column;
2066
- gap: 24px;
2067
- }
2068
-
2069
- .shipping_address_heading_container {
2070
- display: flex;
2071
- justify-content: space-between;
2072
- align-items: center;
2073
- max-width: 695px;
2074
-
2075
- .chk_heading_info {
2076
- font-size: 18px;
2077
- font-weight: 600;
2078
- color: var(--_gray-900);
2478
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
2479
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
2480
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
2481
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
2482
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
2079
2483
  }
2080
2484
  }
2081
2485
 
2082
- form {
2486
+ &_right_container {
2083
2487
  display: flex;
2084
- flex-direction: column;
2085
- gap: 0.75rem;
2086
- max-width: 85%;
2488
+ gap: 6px;
2489
+ align-items: flex-start;
2087
2490
 
2088
2491
  @media (max-width: 500px) {
2089
- max-width: 100%;
2492
+ justify-content: flex-end;
2090
2493
  }
2091
2494
  }
2092
2495
 
2093
- .chk_shipping_address_form_group {
2094
- display: flex;
2095
- justify-content: space-between;
2096
- flex-direction: row;
2097
- gap: 12px;
2098
- }
2099
-
2100
- .chk_shipping_address_input_container {
2101
- display: flex;
2102
- width: 100%;
2103
- }
2104
-
2105
- .chk_shipping_address_input_wrapper {
2496
+ &_input {
2106
2497
  display: flex;
2107
- flex-direction: column;
2108
- gap: var(--_ctm-lt-ll-ad-it-gp);
2109
- width: 100%;
2110
- }
2111
-
2112
- .chk_shipping_address_form_label {
2113
- color: var(--_gray-600);
2114
- font-size: 14px;
2115
- }
2116
-
2117
- .chk_shiping_address_form_input {
2118
2498
  padding: 8px 12px;
2119
2499
  width: -webkit-fill-available;
2120
2500
  background-color: var(--_base-white);
@@ -2126,7 +2506,15 @@
2126
2506
  outline: 2px solid var(--_primary-100);
2127
2507
  }
2128
2508
 
2129
- .input-field {
2509
+ .icon {
2510
+ svg {
2511
+ path {
2512
+ stroke: var(--_primary-400);
2513
+ }
2514
+ }
2515
+ }
2516
+
2517
+ .input_field {
2130
2518
  padding: 8px 12px;
2131
2519
  width: -webkit-fill-available;
2132
2520
  background-color: var(--_base-white);
@@ -2139,95 +2527,6 @@
2139
2527
  }
2140
2528
  }
2141
2529
  }
2142
-
2143
- input[type="checkbox"] {
2144
- width: auto;
2145
- }
2146
-
2147
- .error-msg {
2148
- font-size: 12px;
2149
- color: #ff0000;
2150
- }
2151
-
2152
- .chk_shipping_address_use_as_billing_address_chkbx {
2153
- display: flex;
2154
- align-items: center;
2155
- gap: 0.5rem;
2156
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2157
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2158
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2159
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2160
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2161
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2162
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2163
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2164
-
2165
- .custom-checkbox {
2166
- width: 20px;
2167
- height: 20px;
2168
- border: 1px solid #d0d5dd;
2169
- border-radius: 4px;
2170
- position: relative;
2171
- background-color: #fff;
2172
- transition: all 0.2s ease;
2173
-
2174
- &::after {
2175
- content: "";
2176
- position: absolute;
2177
- display: none;
2178
- left: 5px;
2179
- top: 0.5px;
2180
- width: 5px;
2181
- height: 10px;
2182
- border: solid #fff;
2183
- border-width: 0 2px 2px 0;
2184
- transform: rotate(45deg);
2185
- }
2186
- }
2187
- }
2188
-
2189
- input[type="checkbox"]:checked + label {
2190
- .custom-checkbox {
2191
- background-color: #004dff;
2192
- border-color: #004dff;
2193
-
2194
- &::after {
2195
- display: block;
2196
- }
2197
- }
2198
- }
2199
-
2200
- .checkbox-group {
2201
- display: flex;
2202
- align-items: center;
2203
- justify-content: start;
2204
- gap: 8px;
2205
- }
2206
-
2207
- &_same_as_billing_address_chkbx {
2208
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2209
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2210
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2211
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2212
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2213
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2214
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2215
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2216
- }
2217
-
2218
- &_button_wrapper {
2219
- display: flex;
2220
- align-items: center;
2221
- gap: 16px;
2222
- }
2223
- }
2224
-
2225
- .payment_heading {
2226
- padding: 12px;
2227
- display: flex;
2228
- justify-content: space-between;
2229
- border-bottom: 1px solid var(--_gray-100);
2230
- font-weight: 600;
2231
2530
  }
2232
2531
  }
2233
2532
 
@@ -2256,9 +2555,7 @@
2256
2555
  display: flex;
2257
2556
  width: fit-content;
2258
2557
  align-items: center;
2259
- font-family: sans-serif;
2260
2558
  gap: 12px;
2261
- margin-block: 8px;
2262
2559
 
2263
2560
  input[type="checkbox"] {
2264
2561
  display: none;
@@ -2312,8 +2609,14 @@
2312
2609
  align-items: center;
2313
2610
  cursor: pointer;
2314
2611
  gap: 10px;
2315
- font-size: 14px;
2316
- color: var(--_gray-700);
2612
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
2613
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
2614
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
2615
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
2616
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
2617
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
2618
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
2619
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
2317
2620
 
2318
2621
  .custom-checkbox {
2319
2622
  width: 20px;
@@ -2350,6 +2653,10 @@
2350
2653
  }
2351
2654
  }
2352
2655
  }
2656
+ .chk_address_actions {
2657
+ display: flex;
2658
+ gap: 12px;
2659
+ }
2353
2660
  .chk_payment-card__note {
2354
2661
  padding: 8px 6px;
2355
2662
  display: flex;
@@ -2385,40 +2692,39 @@
2385
2692
  .chk_shipping-summary {
2386
2693
  display: flex;
2387
2694
  flex-direction: column;
2388
- gap: 6px;
2695
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
2696
+ max-width: 700px;
2389
2697
 
2390
2698
  .chk_address {
2391
2699
  display: flex;
2392
2700
  flex-direction: column;
2393
- gap: 6px;
2701
+ gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
2394
2702
 
2395
2703
  .chk_saved_address_name {
2396
- color: var(--_gray-900);
2704
+ color: var(--_gray-700);
2397
2705
  font-size: 16px;
2398
2706
  font-weight: 600;
2399
2707
  }
2400
2708
 
2401
2709
  .chk_saved_address {
2402
- color: var(--_gray-500);
2403
- font-size: 14px;
2710
+ color: var(--_gray-600);
2711
+ font-size: 12px;
2404
2712
  }
2405
2713
 
2406
2714
  .chk_saved_address_label {
2407
2715
  color: var(--_gray-500);
2408
- font-size: 14px;
2409
- font-weight: 400;
2716
+ font-size: 12px;
2410
2717
  }
2411
2718
 
2412
2719
  .chk_saved_address_value {
2413
- color: var(--_gray-900);
2414
- font-weight: 500;
2415
- font-size: 14px;
2720
+ color: var(--_gray-700);
2721
+ font-size: 12px;
2416
2722
  }
2417
2723
  }
2418
2724
 
2419
2725
  .contact {
2420
2726
  font-size: 0.875rem;
2421
- color: var(--_gray-900);
2727
+ color: var(--_gray-700);
2422
2728
  line-height: 1.4;
2423
2729
  }
2424
2730
  }
@@ -2430,6 +2736,12 @@
2430
2736
  &:has(.chk_saved_address_button.selected) {
2431
2737
  display: flex !important;
2432
2738
  }
2739
+ .chk_saved_address_button {
2740
+ display: flex;
2741
+ align-items: center;
2742
+ gap: 4px;
2743
+ color: var(--_primary-400);
2744
+ }
2433
2745
  }
2434
2746
 
2435
2747
  &:hover {
@@ -2631,81 +2943,11 @@
2631
2943
  }
2632
2944
  }
2633
2945
  }
2634
-
2635
- .chk_payment_cred_section {
2636
- display: flex;
2637
- justify-content: space-between;
2638
- align-items: center;
2639
- padding: 16px 16px 8px 16px;
2640
-
2641
- .chk_currency_inp {
2642
- height: 44px;
2643
- border: 1px solid var(--_gray-200);
2644
- border-radius: 4px;
2645
- background-color: var(--_base-white);
2646
- display: flex;
2647
- width: 155px;
2648
- overflow: hidden;
2649
- align-items: center;
2650
- padding-inline: 12px;
2651
- gap: 12px;
2652
- &:focus-within {
2653
- border: 1px solid var(--_primary-200);
2654
- outline: 2px solid var(--_primary-50);
2655
- }
2656
- input {
2657
- height: inherit;
2658
- }
2659
- }
2660
- .chk_payment_cred_section_col_left {
2661
- .chk_payment_cred_section_col_left_crd_details {
2662
- display: flex;
2663
- gap: 80px;
2664
- align-items: center;
2665
- & > div {
2666
- display: flex;
2667
- gap: 12px;
2668
- .card_icon {
2669
- width: 60px;
2670
- height: 40px;
2671
- border-radius: 4px;
2672
- }
2673
- .card_details {
2674
- .card_details_num {
2675
- font-size: 12px;
2676
- font-weight: 600;
2677
- color: var(--_gray-900);
2678
- }
2679
- & > div {
2680
- display: flex;
2681
- .card_details_label {
2682
- font-size: 12px;
2683
- color: var(--_gray-500);
2684
- }
2685
- .card_details_value {
2686
- font-size: 12px;
2687
- color: var(--_gray-900);
2688
- }
2689
- }
2690
- }
2691
- }
2692
- }
2693
- }
2694
- }
2695
-
2696
- .chk_payment_remove_card {
2697
- padding-inline: 16px;
2698
- margin-bottom: 16px;
2699
- .error_msg {
2700
- font-size: 12px;
2701
- color: var(--_error-700);
2702
- }
2703
- }
2704
-
2705
2946
  .tertiary_primary_btn {
2706
2947
  font-size: 12px;
2707
2948
  color: var(--_primary-400);
2708
2949
  display: inline-flex;
2950
+ width: fit-content;
2709
2951
  &:hover {
2710
2952
  color: var(--_primary-500);
2711
2953
  text-decoration: underline;
@@ -2723,7 +2965,7 @@
2723
2965
  }
2724
2966
  }
2725
2967
  .chk_secondary_bnt {
2726
- padding: 12px 24px;
2968
+ padding: 16px 24px;
2727
2969
  background-color: transparent;
2728
2970
  color: var(--_gray-600);
2729
2971
  font-weight: 600;
@@ -2734,93 +2976,6 @@
2734
2976
  color: var(--_gray-900);
2735
2977
  }
2736
2978
  }
2737
-
2738
- // gift card styles
2739
- .chk_gft_crd_wrapper {
2740
- display: flex;
2741
- justify-content: space-between;
2742
- align-items: center;
2743
- padding: 16px 16px 0 16px;
2744
- &_item {
2745
- display: flex;
2746
- align-items: center;
2747
- gap: 16px;
2748
- &_icon {
2749
- width: 40px;
2750
- height: 40px;
2751
- border: 1px solid var(--_gray-200);
2752
- border-radius: 6px;
2753
- display: flex;
2754
- justify-content: center;
2755
- align-items: center;
2756
- }
2757
- &_info {
2758
- display: flex;
2759
- flex-direction: column;
2760
- &_title {
2761
- font-size: 14px;
2762
- margin-bottom: 4px;
2763
- font-weight: 600;
2764
- }
2765
- &_desc {
2766
- display: flex;
2767
- &_value {
2768
- font-size: 12px;
2769
- color: var(--_gray-600);
2770
- }
2771
- &_label {
2772
- font-size: 12px;
2773
- color: var(--_gray-900);
2774
- }
2775
- }
2776
- }
2777
- &_pin {
2778
- margin-left: 36px;
2779
- input[type="number"] {
2780
- border: 1px solid var(--_gray-300);
2781
- border-radius: 4px;
2782
- background-color: var(--_base-white);
2783
- width: 95px;
2784
- height: 44px;
2785
- padding-inline: 10px;
2786
- &:focus {
2787
- outline: 2px solid var(--_primary-100);
2788
- border: 1px solid var(--_primary-300);
2789
- }
2790
- }
2791
- }
2792
- }
2793
-
2794
- &_input {
2795
- border: 1px solid var(--_gray-300);
2796
- border-radius: 4px;
2797
- background-color: var(--_base-white);
2798
- height: 44px;
2799
- width: 155px;
2800
- display: flex;
2801
- align-items: center;
2802
- gap: 8px;
2803
- padding-left: 10px;
2804
- input[type="number"] {
2805
- background-color: var(--_base-white);
2806
- padding-right: 10px;
2807
- }
2808
- &:focus-within {
2809
- outline: 2px solid var(--_primary-100);
2810
- border: 1px solid var(--_primary-300);
2811
- }
2812
- }
2813
- }
2814
- .chk_gft_crd_wrapper {
2815
- &_btn {
2816
- text-align: left;
2817
- margin-bottom: 16px;
2818
- color: var(--_primary-400);
2819
- &:hover {
2820
- text-decoration: underline;
2821
- }
2822
- }
2823
- }
2824
2979
  // emp checkout end
2825
2980
  }
2826
2981