@sc-360-v2/storefront-cms-library 0.3.57 → 0.3.59

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 (21) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bulk-order-pad.scss +1 -0
  3. package/dist/buyForHeaders.scss +13 -0
  4. package/dist/cart-summary.scss +901 -40
  5. package/dist/checkout.scss +115 -22
  6. package/dist/confirmationModal.scss +1 -0
  7. package/dist/dropdownTemplate.scss +218 -23
  8. package/dist/employee-bulk-order.scss +704 -528
  9. package/dist/emtpy-templates.scss +53 -0
  10. package/dist/functions.js +1 -1
  11. package/dist/language-selector.scss +1 -0
  12. package/dist/modal.scss +4 -3
  13. package/dist/shipping-payments.scss +109 -21
  14. package/dist/types/builder/elements/form-builder/index.d.ts +4 -0
  15. package/dist/types/builder/enums/index.d.ts +1 -0
  16. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +2833 -189
  17. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  18. package/dist/types/builder/tools/element-edit/productDescription.d.ts +16 -0
  19. package/dist/types/helper/helper-functions.d.ts +7 -1
  20. package/dist/types/html-elements/element-types.d.ts +2 -2
  21. package/package.json +1 -1
package/dist/employee-bulk-order.scss CHANGED
@@ -124,6 +124,14 @@
124
124
  .em_add-product {
125
125
  position: absolute;
126
126
  right: 0;
127
+ .dropdown-with-input-section {
128
+ border: 0;
129
+ background-color: transparent;
130
+ &:focus-within {
131
+ border: 0;
132
+ outline: 0;
133
+ }
134
+ }
127
135
  .svg_icon {
128
136
  right: -10px;
129
137
  top: -10px;
@@ -132,6 +140,14 @@
132
140
  .em_add-employee {
133
141
  position: absolute;
134
142
  bottom: 0;
143
+ .dropdown-with-input-section {
144
+ border: 0;
145
+ background-color: transparent;
146
+ &:focus-within {
147
+ border: 0;
148
+ outline: 0;
149
+ }
150
+ }
135
151
  .dropdown-menu {
136
152
  top: 38px;
137
153
  }
@@ -159,6 +175,10 @@
159
175
  // display: grid;
160
176
  gap: 12px;
161
177
  border-bottom: 1px solid var(--_gray-200);
178
+ cursor: pointer;
179
+ &:not(&.selected):hover {
180
+ background-color: var(--_primary-25);
181
+ }
162
182
  &:first-child {
163
183
  border-top: 1px solid var(--_gray-200);
164
184
  }
@@ -180,8 +200,11 @@
180
200
  font-size: 14px;
181
201
  font-weight: 600;
182
202
  flex-shrink: 0;
183
- .em_profile_text {
184
- width: 100%;
203
+ overflow: hidden;
204
+ img {
205
+ max-width: 100%;
206
+ max-height: 100%;
207
+ object-fit: contain;
185
208
  }
186
209
  }
187
210
  .em_info {
@@ -212,6 +235,10 @@
212
235
  font-size: 12px;
213
236
  }
214
237
  }
238
+ .em_profile_text {
239
+ width: 100%;
240
+ text-align: center;
241
+ }
215
242
  }
216
243
  .em_entity-status {
217
244
  display: flex;
@@ -228,7 +255,7 @@
228
255
  border-radius: 4px;
229
256
  width: 100%;
230
257
  &:hover {
231
- background-color: var(--_gray-50);
258
+ background-color: var(--_gray-200);
232
259
  }
233
260
  }
234
261
  .save_btn {
@@ -245,7 +272,7 @@
245
272
  }
246
273
  }
247
274
  .employee_card.selected {
248
- background: var(--_primary-25);
275
+ background: var(--_primary-50);
249
276
  border-bottom: 2px solid var(--_primary-400);
250
277
  }
251
278
  .em_empty_section {
@@ -289,6 +316,11 @@
289
316
  gap: 8px;
290
317
  grid-template-columns: 40px auto;
291
318
  .image-section {
319
+ border-radius: 50%;
320
+ width: 32px;
321
+ height: 32px;
322
+ overflow: hidden;
323
+ background: var(--_gray-100);
292
324
  img {
293
325
  width: 100%;
294
326
  border-radius: 2px;
@@ -349,12 +381,20 @@
349
381
  overflow: auto;
350
382
  padding: 8px;
351
383
  color: var(--_gray-600);
352
- .no_variants {
384
+ .variant_info {
353
385
  display: flex;
354
386
  justify-content: center;
355
387
  align-items: center;
356
388
  height: 100%;
357
- color: var(--_gray-400);
389
+ border-radius: 4px;
390
+ &:has(.error) {
391
+ color: var(--_gray-400);
392
+ background-color: var(--_base-white);
393
+ }
394
+ &.error {
395
+ color: var(--_error-700);
396
+ background-color: var(--_error-50);
397
+ }
358
398
  }
359
399
  .variantOptionValues {
360
400
  height: 24px;
@@ -417,6 +457,14 @@
417
457
  }
418
458
  }
419
459
  }
460
+ .validation-info {
461
+ background-color: var(--_error-50);
462
+ color: var(--_error-700);
463
+ font-size: 14px;
464
+ text-align: center;
465
+ padding-block: 4px 6px;
466
+ margin-top: -1px;
467
+ }
420
468
  .em_pr_actions {
421
469
  display: flex;
422
470
  justify-content: end;
@@ -472,6 +520,7 @@
472
520
  gap: 8px;
473
521
  align-items: center;
474
522
  // padding: 8px 0;
523
+
475
524
  .em_opt_val {
476
525
  cursor: pointer;
477
526
  &:hover {
@@ -563,6 +612,10 @@
563
612
  font-weight: 600;
564
613
  font-size: 16px;
565
614
  color: #101828;
615
+ &:focus {
616
+ border: 1px solid var(--_primary-300);
617
+ outline: 2px solid var(--_primary-100);
618
+ }
566
619
  }
567
620
  .add_to_cart_btn_for_employee_bulk {
568
621
  height: 100%;
@@ -766,15 +819,25 @@
766
819
  }
767
820
  }
768
821
  }
822
+ .user-info-right {
823
+ .save-btn {
824
+ padding: 8px 16px;
825
+ border-radius: 4px;
826
+ background-color: var(--_primary-500);
827
+ color: var(--_base-white);
828
+ font-weight: 500;
829
+ font-size: 14px;
830
+ }
831
+ }
769
832
 
770
833
  .trigger-btn {
771
834
  display: flex;
772
- padding: 4px;
835
+ padding: 6px;
773
836
  border-radius: 4px;
774
837
  color: var(--_gray-600);
775
838
  &:hover {
776
- background: var(--_gray-100);
777
- color: var(--_gray-900);
839
+ background: var(--_error-50);
840
+ color: var(--_error-700);
778
841
  }
779
842
  }
780
843
 
@@ -910,24 +973,40 @@
910
973
  display: flex;
911
974
  padding: var(--_ctm-lt-pg);
912
975
  flex-direction: column;
913
- gap: var(--_ctm-lt-te-ad-it-gp);
976
+ gap: 4px;
914
977
  word-break: keep-all;
915
978
  padding-bottom: 24px;
916
979
 
917
980
  .chk_checkout_title {
918
981
  color: var(--_gray-900);
919
982
  font-size: 24px;
920
- font-weight: 600;
983
+ font-weight: 700;
921
984
  line-height: 32px;
922
- margin-bottom: 16px;
923
985
  }
924
986
 
925
987
  .accordion {
926
988
  border-radius: 4px;
927
989
  display: flex;
928
- gap: var(--_ctm-lt-an-hg-ad-ve-gp);
990
+ // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
929
991
  flex-direction: column;
992
+ transition: max-height 800ms ease-in;
993
+ &.open {
994
+ transition: max-height 800ms ease-in;
995
+ .accordion-header {
996
+ background-color: var(--_gray-200);
997
+ }
998
+ .accordion-body {
999
+ transition: max-height 800ms ease-in;
1000
+ max-height: 2000px;
1001
+ padding-block: 12px 24px;
1002
+ .shipping-address {
1003
+ max-height: fit-content;
1004
+ transition: max-height 800ms ease-in;
1005
+ }
1006
+ }
1007
+ }
930
1008
 
1009
+ // accordion heaer
931
1010
  .accordion-header {
932
1011
  padding: 12px;
933
1012
  display: flex;
@@ -937,6 +1016,7 @@
937
1016
  background-color: #f5f5f5;
938
1017
  border-color: #f5f5f5;
939
1018
  border-radius: 4px;
1019
+ height: 55px;
940
1020
 
941
1021
  .accordion-title {
942
1022
  margin-right: 1rem;
@@ -962,26 +1042,21 @@
962
1042
  }
963
1043
  }
964
1044
 
1045
+ // accordion body
965
1046
  .accordion-body {
966
- margin-block: 16px 28px;
967
- .summary {
968
- .chk_shipping_method_label {
969
- display: flex;
970
- align-items: center;
971
- gap: 4px;
972
- color: var(--_gray-500);
973
- }
974
-
975
- .chk_shipping_method_heading {
976
- color: var(--_gray-500);
977
- font-weight: 600;
978
- }
979
- }
1047
+ transition: max-height 800ms ease-in;
980
1048
 
1049
+ max-height: 0px;
1050
+ overflow: hidden;
1051
+ padding: 0;
1052
+ // shipping address
981
1053
  .shipping-address {
1054
+ transition: max-height 800ms ease-in;
1055
+ max-height: 0;
982
1056
  display: flex;
983
1057
  flex-direction: column;
984
- gap: 24px;
1058
+ gap: 16px;
1059
+
985
1060
  .btn_link {
986
1061
  color: var(--_primary-400);
987
1062
  &:hover {
@@ -1002,26 +1077,27 @@
1002
1077
  display: flex;
1003
1078
  flex-direction: column;
1004
1079
  gap: 24px;
1080
+ max-width: 485px;
1005
1081
  }
1006
1082
 
1007
1083
  .shipping_address_heading_container {
1008
1084
  display: flex;
1009
1085
  justify-content: space-between;
1010
1086
  align-items: center;
1011
- max-width: 760px;
1012
- font-size: 18px;
1013
1087
  font-weight: 600;
1088
+ color: var(--_gray-900);
1014
1089
  .icon {
1015
1090
  display: flex;
1016
1091
  align-items: center;
1092
+ cursor: pointer;
1017
1093
  }
1018
1094
  }
1019
1095
 
1020
1096
  form {
1021
1097
  display: flex;
1022
1098
  flex-direction: column;
1023
- gap: 16px;
1024
- max-width: 85%;
1099
+ gap: 0.75rem;
1100
+ // max-width: 85%;
1025
1101
 
1026
1102
  @media (max-width: 500px) {
1027
1103
  max-width: 100%;
@@ -1043,13 +1119,14 @@
1043
1119
  .chk_shipping_address_input_wrapper {
1044
1120
  display: flex;
1045
1121
  flex-direction: column;
1046
- gap: 6px;
1122
+ gap: 16px;
1047
1123
  width: 100%;
1048
1124
  }
1049
1125
 
1050
1126
  .chk_shipping_address_form_label {
1051
1127
  color: var(--_gray-600);
1052
1128
  font-size: 14px;
1129
+ padding-bottom: 6px;
1053
1130
  }
1054
1131
 
1055
1132
  .chk_shiping_address_form_input {
@@ -1132,6 +1209,20 @@
1132
1209
  }
1133
1210
  }
1134
1211
 
1212
+ .summary {
1213
+ .chk_shipping_method_label {
1214
+ display: flex;
1215
+ align-items: center;
1216
+ gap: 4px;
1217
+ color: var(--_gray-500);
1218
+ }
1219
+
1220
+ .chk_shipping_method_heading {
1221
+ color: var(--_gray-500);
1222
+ font-weight: 600;
1223
+ }
1224
+ }
1225
+
1135
1226
  .chk_multi_address {
1136
1227
  display: flex;
1137
1228
  flex-direction: column;
@@ -1179,7 +1270,7 @@
1179
1270
  .chk_multi_address_product_name {
1180
1271
  color: var(--_gray-900);
1181
1272
  font-size: 18px;
1182
- font-weight: 600;
1273
+ font-weight: 700;
1183
1274
  line-height: 28px;
1184
1275
  }
1185
1276
 
@@ -1203,7 +1294,7 @@
1203
1294
  .chk_multi_address_product_price {
1204
1295
  color: var(--_gray-900);
1205
1296
  font-size: 20px;
1206
- font-weight: 600;
1297
+ font-weight: 700;
1207
1298
  }
1208
1299
  }
1209
1300
 
@@ -1222,7 +1313,7 @@
1222
1313
  .chk_multi_address_product_qty {
1223
1314
  color: var(--_gray-900);
1224
1315
  font-size: 12px;
1225
- font-weight: 600;
1316
+ font-weight: 700;
1226
1317
  }
1227
1318
  }
1228
1319
 
@@ -1334,13 +1425,12 @@
1334
1425
  &__group {
1335
1426
  display: flex;
1336
1427
  flex-direction: column;
1337
- gap: 12px;
1428
+ gap: 8px;
1338
1429
 
1339
1430
  .chk_shipping_method_heading {
1340
1431
  color: var(--_gray-700);
1341
- font-weight: 600;
1432
+ font-weight: 700;
1342
1433
  font-size: 16px;
1343
- margin-bottom: 8px;
1344
1434
  }
1345
1435
  }
1346
1436
 
@@ -1374,13 +1464,25 @@
1374
1464
  }
1375
1465
 
1376
1466
  .chk_shipping_method_label {
1377
- color: var(--_gray-500);
1467
+ color: var(--_gray-600);
1468
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
1378
1469
  font-size: 14px;
1470
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
1471
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
1472
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
1473
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
1474
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
1379
1475
  }
1380
1476
 
1381
1477
  .chk_shipping_method_value {
1382
1478
  color: var(--_gray-900);
1479
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
1383
1480
  font-size: 14px;
1481
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
1482
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
1483
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
1484
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg);
1485
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue);
1384
1486
  }
1385
1487
 
1386
1488
  // input[type="radio"] {
@@ -1437,52 +1539,137 @@
1437
1539
  }
1438
1540
  }
1439
1541
 
1542
+ // payment options
1440
1543
  .chk_payment-options {
1441
1544
  display: flex;
1442
1545
  flex-direction: column;
1443
1546
  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
1547
+ .gift_crd_chk_payment_option {
1548
+ border: 1px solid var(--_gray-300);
1549
+ border-radius: 4px;
1550
+ margin-bottom: 12px;
1551
+ .add_gift_card {
1552
+ display: flex;
1553
+ gap: 12px;
1554
+ padding: 16px;
1444
1555
 
1445
- .add_credit_card {
1446
- display: flex;
1447
- gap: 12px;
1448
- padding: 16px;
1449
-
1450
- .cc_icon {
1451
- svg {
1452
- width: 18px;
1453
- height: 14px;
1556
+ .gc_icon {
1557
+ svg {
1558
+ width: 18px;
1559
+ height: 14px;
1560
+ }
1454
1561
  }
1455
- }
1456
1562
 
1457
- .cc_info {
1458
- display: flex;
1459
- flex-direction: column;
1460
- gap: 6px;
1563
+ .gc_info {
1564
+ display: flex;
1565
+ justify-content: space-between;
1566
+ width: 100%;
1567
+ gap: 6px;
1461
1568
 
1462
- .cc_title {
1463
- font-size: 14px;
1464
- font-weight: 600;
1569
+ .gc_title {
1570
+ font-size: 14px;
1571
+ font-weight: 600;
1572
+ }
1573
+ }
1574
+ .gc_tertiary_btn {
1575
+ color: var(--_primary-400);
1576
+
1577
+ &:hover {
1578
+ color: var(--_primary-500);
1579
+ text-decoration: underline;
1580
+ }
1465
1581
  }
1466
1582
  }
1467
- }
1468
- .add_new_credit_card {
1469
- display: flex;
1470
- justify-content: space-between;
1471
- align-items: center;
1472
- padding-inline: 16px;
1473
- }
1474
- .cc_tertiary_btn {
1475
- color: var(--_primary-400);
1583
+ .chk_gft_crd_wrapper {
1584
+ display: flex;
1585
+ justify-content: space-between;
1586
+ align-items: center;
1587
+ padding: 16px;
1588
+ & > button {
1589
+ color: var(--_primary-400);
1590
+ &:hover {
1591
+ text-decoration: underline;
1592
+ }
1593
+ }
1594
+ &_item {
1595
+ display: flex;
1596
+ align-items: center;
1597
+ gap: 16px;
1598
+ &_icon {
1599
+ width: 40px;
1600
+ height: 40px;
1601
+ border: 1px solid var(--_gray-200);
1602
+ border-radius: 6px;
1603
+ display: flex;
1604
+ justify-content: center;
1605
+ align-items: center;
1606
+ }
1607
+ &_info {
1608
+ display: flex;
1609
+ flex-direction: column;
1610
+ &_title {
1611
+ font-size: 14px;
1612
+ margin-bottom: 4px;
1613
+ font-weight: 600;
1614
+ }
1615
+ &_desc {
1616
+ display: flex;
1617
+ &_value {
1618
+ font-size: 12px;
1619
+ color: var(--_gray-600);
1620
+ }
1621
+ &_label {
1622
+ font-size: 12px;
1623
+ color: var(--_gray-900);
1624
+ }
1625
+ }
1626
+ }
1627
+ &_pin {
1628
+ margin-left: 36px;
1629
+ input[type="number"] {
1630
+ border: 1px solid var(--_gray-300);
1631
+ border-radius: 4px;
1632
+ background-color: var(--_base-white);
1633
+ width: 95px;
1634
+ height: 44px;
1635
+ padding-inline: 10px;
1636
+ &:disabled {
1637
+ opacity: 0.8;
1638
+ cursor: not-allowed;
1639
+ }
1640
+ &:focus {
1641
+ outline: 2px solid var(--_primary-100);
1642
+ border: 1px solid var(--_primary-300);
1643
+ }
1644
+ }
1645
+ }
1646
+ }
1476
1647
 
1477
- &:hover {
1478
- color: var(--_primary-500);
1479
- text-decoration: underline;
1648
+ &_input {
1649
+ border: 1px solid var(--_gray-300);
1650
+ border-radius: 4px;
1651
+ background-color: var(--_base-white);
1652
+ height: 44px;
1653
+ width: 120px;
1654
+ display: flex;
1655
+ align-items: center;
1656
+ gap: 8px;
1657
+ padding-left: 10px;
1658
+ input[type="number"] {
1659
+ background-color: var(--_base-white);
1660
+ padding-right: 10px;
1661
+ &:disabled {
1662
+ opacity: 0.8;
1663
+ cursor: not-allowed;
1664
+ }
1665
+ }
1666
+ &:focus-within {
1667
+ outline: 2px solid var(--_primary-100);
1668
+ border: 1px solid var(--_primary-300);
1669
+ }
1670
+ }
1480
1671
  }
1481
1672
  }
1482
- .gift_crd_chk_payment_option {
1483
- border: 1px solid var(--_gray-300);
1484
- border-radius: 4px;
1485
- }
1486
1673
  .payment_program {
1487
1674
  // padding: 0 12px;
1488
1675
  .payment_program_header {
@@ -1493,7 +1680,7 @@
1493
1680
 
1494
1681
  margin-bottom: 16px;
1495
1682
 
1496
- &_label {
1683
+ .payment_program_header_label {
1497
1684
  display: flex;
1498
1685
  justify-content: space-between;
1499
1686
  align-items: center;
@@ -1502,7 +1689,7 @@
1502
1689
  font-weight: 600;
1503
1690
  color: var(--_gray-600);
1504
1691
  }
1505
- &_pds {
1692
+ .payment_program_header_pds {
1506
1693
  &_label {
1507
1694
  font-size: 14px;
1508
1695
  color: var(--_gray-600);
@@ -1526,24 +1713,24 @@
1526
1713
 
1527
1714
  .pp_pmnt_method_groups {
1528
1715
  .pp_ppm_section {
1529
- background: var(--_base-white);
1716
+ background: var(---base-white);
1717
+ border-bottom: 1px solid var(--_gray-300);
1530
1718
  padding: 12px 16px;
1531
1719
  font-size: 12px;
1532
1720
  display: flex;
1533
1721
  justify-content: space-between;
1534
1722
  gap: 8px;
1535
- border-bottom: 1px solid var(--_gray-300);
1536
1723
  &:not(:first-child) {
1537
1724
  border-top: 1px solid var(--_gray-200);
1538
1725
  }
1539
1726
  .pp_ppm_section_label {
1540
1727
  font-size: 14px;
1541
- font-weight: 600;
1728
+ font-weight: 700;
1542
1729
  color: var(--_gray-900);
1543
1730
  }
1544
1731
  .pp_ppm_section_value {
1545
1732
  font-size: 14px;
1546
- font-weight: 600;
1733
+ font-weight: 700;
1547
1734
  color: var(--_gray-600);
1548
1735
  .pp_ppm_section_value_lable {
1549
1736
  font-weight: 500;
@@ -1556,6 +1743,11 @@
1556
1743
  display: grid;
1557
1744
  gap: 8px;
1558
1745
  .chk_payment_option {
1746
+ .chk_payment_options_heading {
1747
+ padding: 16px;
1748
+ display: flex;
1749
+ justify-content: space-between;
1750
+ }
1559
1751
  .chk_payment_section_wrapper {
1560
1752
  width: 100%;
1561
1753
  display: flex;
@@ -1570,18 +1762,21 @@
1570
1762
  .chk_payment_section_col_left {
1571
1763
  display: flex;
1572
1764
  gap: 12px;
1765
+ svg {
1766
+ width: 24px;
1767
+ height: 24px;
1768
+ }
1573
1769
  .chk_payment_section_method {
1574
1770
  display: flex;
1575
1771
  flex-direction: column;
1576
1772
  .chk_payment_section_method_name {
1577
1773
  font-size: 14px;
1578
- font-weight: 600;
1774
+ font-weight: 700;
1579
1775
  line-height: 20px;
1580
1776
  color: var(--_gray-700);
1581
1777
  }
1582
1778
  & > div {
1583
1779
  display: flex;
1584
- gap: 4px;
1585
1780
  .label {
1586
1781
  font-size: 12px;
1587
1782
  color: var(--_gray-500);
@@ -1600,7 +1795,7 @@
1600
1795
  border-radius: 4px;
1601
1796
  background-color: var(--_base-white);
1602
1797
  display: flex;
1603
- width: 155px;
1798
+ width: 120px;
1604
1799
  overflow: hidden;
1605
1800
  align-items: center;
1606
1801
  padding-inline: 12px;
@@ -1611,6 +1806,10 @@
1611
1806
  }
1612
1807
  input {
1613
1808
  height: inherit;
1809
+ &:disabled {
1810
+ opacity: 0.8;
1811
+ cursor: not-allowed;
1812
+ }
1614
1813
  }
1615
1814
  }
1616
1815
  }
@@ -1619,9 +1818,11 @@
1619
1818
  .chk_payment_options_heading {
1620
1819
  color: var(--_gray-900);
1621
1820
  font-size: 16px;
1622
- font-weight: 600;
1821
+ font-weight: 700;
1623
1822
  }
1624
1823
 
1824
+ // gift card styles
1825
+
1625
1826
  // payment other options styles
1626
1827
  .chk_pmnt_other_options {
1627
1828
  display: flex;
@@ -1780,40 +1981,373 @@
1780
1981
  }
1781
1982
  }
1782
1983
  }
1783
- }
1784
- }
1785
- }
1786
-
1787
- .chk_gft_crd_container {
1788
- width: 100%;
1789
- display: flex;
1790
- flex-direction: column;
1791
- gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1792
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1793
- border: 1px solid var(--_gray-300);
1794
- border-radius: 4px;
1795
- overflow: hidden;
1984
+ .add_new_credit_card {
1985
+ padding: 16px 16px 0px 16px;
1986
+ display: flex;
1987
+ justify-content: space-between;
1988
+ .cc_tertiary_btn {
1989
+ color: var(--_primary-400);
1990
+ &:hover {
1991
+ text-decoration: underline;
1992
+ }
1993
+ }
1994
+ }
1796
1995
 
1797
- .chk_gft_crd_option_heading {
1798
- display: flex;
1799
- justify-content: space-between;
1800
- align-items: center;
1801
- padding: 8px 12px;
1802
- border-bottom: 1px solid var(--_gray-300);
1803
- }
1996
+ .chk_payment_cred_section {
1997
+ display: flex;
1998
+ justify-content: space-between;
1999
+ align-items: center;
2000
+ padding: 16px 16px 8px 16px;
1804
2001
 
1805
- // gift card styles
1806
- .chk_gft_crd_wrapper {
1807
- display: flex;
1808
- justify-content: space-between;
1809
- align-items: center;
1810
- padding: 16px 16px 0 16px;
1811
- &_item {
1812
- display: flex;
1813
- align-items: center;
1814
- gap: 16px;
1815
- &_icon {
1816
- width: 40px;
2002
+ .chk_currency_inp {
2003
+ height: 44px;
2004
+ border: 1px solid var(--_gray-200);
2005
+ border-radius: 4px;
2006
+ background-color: var(--_base-white);
2007
+ display: flex;
2008
+ width: 120px;
2009
+ overflow: hidden;
2010
+ align-items: center;
2011
+ padding-inline: 12px;
2012
+ gap: 12px;
2013
+ &:focus-within {
2014
+ border: 1px solid var(--_primary-200);
2015
+ outline: 2px solid var(--_primary-50);
2016
+ }
2017
+ input {
2018
+ height: inherit;
2019
+ }
2020
+ }
2021
+ .chk_payment_cred_section_col_left {
2022
+ .chk_payment_cred_section_col_left_crd_details {
2023
+ display: flex;
2024
+ gap: 80px;
2025
+ align-items: center;
2026
+ & > div {
2027
+ display: flex;
2028
+ gap: 12px;
2029
+ .card_icon {
2030
+ width: 60px;
2031
+ height: 40px;
2032
+ border-radius: 4px;
2033
+ }
2034
+ .card_details {
2035
+ .card_details_num {
2036
+ font-size: 12px;
2037
+ font-weight: 600;
2038
+ color: var(--_gray-900);
2039
+ }
2040
+ & > div {
2041
+ display: flex;
2042
+ .card_details_label {
2043
+ font-size: 12px;
2044
+ color: var(--_gray-500);
2045
+ }
2046
+ .card_details_value {
2047
+ font-size: 12px;
2048
+ color: var(--_gray-900);
2049
+ }
2050
+ }
2051
+ }
2052
+ }
2053
+ }
2054
+ }
2055
+ }
2056
+
2057
+ .chk_payment_remove_card {
2058
+ padding-inline: 16px;
2059
+ margin-bottom: 16px;
2060
+ .error_msg {
2061
+ font-size: 12px;
2062
+ color: var(--_error-700);
2063
+ }
2064
+ }
2065
+ }
2066
+ }
2067
+ }
2068
+
2069
+ .chk_billing_address {
2070
+ width: 100%;
2071
+ display: flex;
2072
+ flex-direction: column;
2073
+ background-color: var(--_base-white);
2074
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
2075
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
2076
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
2077
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
2078
+
2079
+ &_form_container {
2080
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2081
+ padding-top: 24px;
2082
+ display: flex;
2083
+ flex-direction: column;
2084
+ gap: 24px;
2085
+ }
2086
+
2087
+ .chk_payment_options_heading {
2088
+ font-size: 16px;
2089
+ color: var(--_gray-900);
2090
+ font-weight: 600;
2091
+ &.pl_0 {
2092
+ padding-left: 0px;
2093
+ }
2094
+ }
2095
+
2096
+ &_form_wrapper {
2097
+ display: flex;
2098
+ flex-direction: column;
2099
+ gap: 24px;
2100
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2101
+ }
2102
+
2103
+ .shipping_address_container {
2104
+ display: flex;
2105
+ flex-direction: column;
2106
+ gap: 24px;
2107
+ }
2108
+
2109
+ .shipping_address_heading_container {
2110
+ display: flex;
2111
+ justify-content: space-between;
2112
+ align-items: center;
2113
+
2114
+ .chk_heading_info {
2115
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
2116
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
2117
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
2118
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
2119
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
2120
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
2121
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
2122
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
2123
+ }
2124
+ .icon {
2125
+ cursor: pointer;
2126
+ }
2127
+ }
2128
+
2129
+ form {
2130
+ display: flex;
2131
+ flex-direction: column;
2132
+ gap: 0.75rem;
2133
+ max-width: 85%;
2134
+
2135
+ @media (max-width: 500px) {
2136
+ max-width: 100%;
2137
+ }
2138
+ }
2139
+
2140
+ .chk_shipping_address_form_group {
2141
+ display: flex;
2142
+ justify-content: space-between;
2143
+ flex-direction: row;
2144
+ gap: 12px;
2145
+ }
2146
+
2147
+ .chk_shipping_address_input_container {
2148
+ display: flex;
2149
+ width: 100%;
2150
+ }
2151
+
2152
+ .chk_shipping_address_input_wrapper {
2153
+ display: flex;
2154
+ flex-direction: column;
2155
+ gap: var(--_ctm-lt-ll-ad-it-gp);
2156
+ width: 100%;
2157
+ }
2158
+
2159
+ .chk_shipping_address_form_label {
2160
+ color: var(--_gray-600);
2161
+ font-size: 14px;
2162
+ }
2163
+
2164
+ .chk_shiping_address_form_input {
2165
+ padding: 8px 12px;
2166
+ width: -webkit-fill-available;
2167
+ height: 40px;
2168
+ background-color: var(--_base-white);
2169
+ border-radius: 6px;
2170
+ border: 1px solid var(--_gray-300);
2171
+
2172
+ &:focus-within {
2173
+ border: 1px solid var(--_primary-300);
2174
+ outline: 2px solid var(--_primary-100);
2175
+ }
2176
+
2177
+ // .input-field {
2178
+ // padding: 8px 12px;
2179
+ // width: -webkit-fill-available;
2180
+ // background-color: var(--_base-white);
2181
+ // border-radius: 6px;
2182
+ // border: 1px solid var(--_gray-300);
2183
+
2184
+ // &:focus-within {
2185
+ // border: 1px solid var(--_primary-300);
2186
+ // outline: 2px solid var(--_primary-100);
2187
+ // }
2188
+ // }
2189
+ }
2190
+
2191
+ input[type="checkbox"] {
2192
+ width: auto;
2193
+ }
2194
+
2195
+ .error-msg {
2196
+ font-size: 12px;
2197
+ color: #ff0000;
2198
+ }
2199
+
2200
+ .chk_shipping_address_use_as_billing_address_chkbx {
2201
+ display: flex;
2202
+ align-items: center;
2203
+ gap: 0.5rem;
2204
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2205
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2206
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2207
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2208
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2209
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2210
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2211
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2212
+
2213
+ .custom-checkbox {
2214
+ width: 20px;
2215
+ height: 20px;
2216
+ border: 1px solid #d0d5dd;
2217
+ border-radius: 4px;
2218
+ position: relative;
2219
+ background-color: #fff;
2220
+ transition: all 0.2s ease;
2221
+
2222
+ &::after {
2223
+ content: "";
2224
+ position: absolute;
2225
+ display: none;
2226
+ left: 5px;
2227
+ top: 0.5px;
2228
+ width: 5px;
2229
+ height: 10px;
2230
+ border: solid #fff;
2231
+ border-width: 0 2px 2px 0;
2232
+ transform: rotate(45deg);
2233
+ }
2234
+ }
2235
+ }
2236
+
2237
+ input[type="checkbox"]:checked + label {
2238
+ .custom-checkbox {
2239
+ background-color: #004dff;
2240
+ border-color: #004dff;
2241
+
2242
+ &::after {
2243
+ display: block;
2244
+ }
2245
+ }
2246
+ }
2247
+
2248
+ .checkbox-group {
2249
+ display: flex;
2250
+ align-items: center;
2251
+ justify-content: start;
2252
+ gap: 8px;
2253
+ }
2254
+
2255
+ &_same_as_billing_address_chkbx {
2256
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2257
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2258
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2259
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2260
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2261
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2262
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2263
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2264
+ }
2265
+
2266
+ &_button_wrapper {
2267
+ display: flex;
2268
+ align-items: center;
2269
+ gap: 16px;
2270
+ }
2271
+ }
2272
+
2273
+ .payment_heading {
2274
+ padding: 12px;
2275
+ display: flex;
2276
+ justify-content: space-between;
2277
+ border-bottom: 1px solid var(--_gray-100);
2278
+ font-weight: 600;
2279
+ .gc_tertiary_btn {
2280
+ color: var(--_primary-400);
2281
+ &:hover {
2282
+ text-decoration: underline;
2283
+ }
2284
+ }
2285
+ }
2286
+
2287
+ .chk_payment_gift_card {
2288
+ border: 1px solid var(--_gray-200);
2289
+ border-radius: 6px;
2290
+
2291
+ .chk_payment_options_heading {
2292
+ padding: 16px;
2293
+ border-bottom: 1px solid var(--_gray-200);
2294
+ display: flex;
2295
+ justify-content: space-between;
2296
+ .payment_options_heading {
2297
+ font-size: 14px;
2298
+ font-weight: 600;
2299
+ }
2300
+ .chk_primary_btn_link {
2301
+ color: var(--_primary-400);
2302
+ &:hover {
2303
+ text-decoration: underline;
2304
+ }
2305
+ }
2306
+ }
2307
+ // gift card styles
2308
+
2309
+ // .chk_gft_crd_wrapper {
2310
+ // &_btn {
2311
+ // text-align: left;
2312
+ // margin-bottom: 16px;
2313
+ // color: var(--_primary-400);
2314
+ // &:hover {
2315
+ // text-decoration: underline;
2316
+ // }
2317
+ // }
2318
+ // }
2319
+ }
2320
+
2321
+ .chk_gft_crd_container {
2322
+ width: 100%;
2323
+ display: flex;
2324
+ flex-direction: column;
2325
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
2326
+ background-color: var(--_base-white);
2327
+ border: 1px solid var(--_gray-300);
2328
+ border-radius: 4px;
2329
+ overflow: hidden;
2330
+
2331
+ .chk_gft_crd_option_heading {
2332
+ display: flex;
2333
+ justify-content: space-between;
2334
+ align-items: center;
2335
+ padding: 8px 12px;
2336
+ border-bottom: 1px solid var(--_gray-300);
2337
+ }
2338
+
2339
+ // gift card styles
2340
+ .chk_gft_crd_wrapper {
2341
+ display: flex;
2342
+ justify-content: space-between;
2343
+ align-items: center;
2344
+ padding: 16px 16px 0 16px;
2345
+ &_item {
2346
+ display: flex;
2347
+ align-items: center;
2348
+ gap: 16px;
2349
+ &_icon {
2350
+ width: 40px;
1817
2351
  height: 40px;
1818
2352
  border: 1px solid var(--_gray-200);
1819
2353
  border-radius: 6px;
@@ -1877,14 +2411,11 @@
1877
2411
  border: 1px solid var(--_primary-300);
1878
2412
  }
1879
2413
  }
1880
- }
1881
- .chk_gft_crd_wrapper {
1882
- &_btn {
1883
- text-align: left;
1884
- margin-bottom: 16px;
2414
+
2415
+ .chk_gft_crd_wrapper_btn {
1885
2416
  color: var(--_primary-400);
1886
2417
  &:hover {
1887
- text-decoration: underline;
2418
+ text-decoration: un;
1888
2419
  }
1889
2420
  }
1890
2421
  }
@@ -1986,150 +2517,27 @@
1986
2517
  .chk_payment_options_value {
1987
2518
  color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1988
2519
  font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1989
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1990
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1991
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1992
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1993
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1994
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1995
- }
1996
- }
1997
-
1998
- &_right_container {
1999
- display: flex;
2000
- gap: 6px;
2001
- align-items: flex-start;
2002
-
2003
- @media (max-width: 500px) {
2004
- justify-content: flex-end;
2005
- }
2006
- }
2007
-
2008
- &_input {
2009
- display: flex;
2010
- padding: 8px 12px;
2011
- width: -webkit-fill-available;
2012
- background-color: var(--_base-white);
2013
- border-radius: 6px;
2014
- border: 1px solid var(--_gray-300);
2015
-
2016
- &:focus-within {
2017
- border: 1px solid var(--_primary-300);
2018
- outline: 2px solid var(--_primary-100);
2019
- }
2020
-
2021
- .icon {
2022
- svg {
2023
- path {
2024
- stroke: var(--_primary-400);
2025
- }
2026
- }
2027
- }
2028
-
2029
- .input_field {
2030
- padding: 8px 12px;
2031
- width: -webkit-fill-available;
2032
- background-color: var(--_base-white);
2033
- border-radius: 6px;
2034
- border: 1px solid var(--_gray-300);
2035
-
2036
- &:focus-within {
2037
- border: 1px solid var(--_primary-300);
2038
- outline: 2px solid var(--_primary-100);
2039
- }
2040
- }
2041
- }
2042
- }
2043
-
2044
- .chk_billing_address {
2045
- width: 100%;
2046
- display: flex;
2047
- flex-direction: column;
2048
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
2049
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
2050
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
2051
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
2052
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
2053
-
2054
- &_form_container {
2055
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2056
- padding-top: 24px;
2057
- display: flex;
2058
- flex-direction: column;
2059
- gap: 24px;
2060
- }
2061
-
2062
- .chk_payment_options_heading {
2063
- font-size: 18px;
2064
- color: var(--_gray-900);
2065
- font-weight: 600;
2066
- &.pl_0 {
2067
- padding-left: 0px;
2068
- }
2069
- }
2070
-
2071
- &_form_wrapper {
2072
- display: flex;
2073
- flex-direction: column;
2074
- gap: 24px;
2075
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
2076
- }
2077
-
2078
- .shipping_address_container {
2079
- display: flex;
2080
- flex-direction: column;
2081
- gap: 24px;
2082
- }
2083
-
2084
- .shipping_address_heading_container {
2085
- display: flex;
2086
- justify-content: space-between;
2087
- align-items: center;
2088
- max-width: 695px;
2089
-
2090
- .chk_heading_info {
2091
- font-size: 18px;
2092
- font-weight: 600;
2093
- color: var(--_gray-900);
2094
- }
2095
- }
2096
-
2097
- form {
2098
- display: flex;
2099
- flex-direction: column;
2100
- gap: 0.75rem;
2101
- max-width: 85%;
2102
-
2103
- @media (max-width: 500px) {
2104
- max-width: 100%;
2520
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
2521
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
2522
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
2523
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
2524
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
2525
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
2105
2526
  }
2106
2527
  }
2107
2528
 
2108
- .chk_shipping_address_form_group {
2529
+ &_right_container {
2109
2530
  display: flex;
2110
- justify-content: space-between;
2111
- flex-direction: row;
2112
- gap: 12px;
2113
- }
2531
+ gap: 6px;
2532
+ align-items: flex-start;
2114
2533
 
2115
- .chk_shipping_address_input_container {
2116
- display: flex;
2117
- width: 100%;
2534
+ @media (max-width: 500px) {
2535
+ justify-content: flex-end;
2536
+ }
2118
2537
  }
2119
2538
 
2120
- .chk_shipping_address_input_wrapper {
2539
+ &_input {
2121
2540
  display: flex;
2122
- flex-direction: column;
2123
- gap: var(--_ctm-lt-ll-ad-it-gp);
2124
- width: 100%;
2125
- }
2126
-
2127
- .chk_shipping_address_form_label {
2128
- color: var(--_gray-600);
2129
- font-size: 14px;
2130
- }
2131
-
2132
- .chk_shiping_address_form_input {
2133
2541
  padding: 8px 12px;
2134
2542
  width: -webkit-fill-available;
2135
2543
  background-color: var(--_base-white);
@@ -2141,7 +2549,15 @@
2141
2549
  outline: 2px solid var(--_primary-100);
2142
2550
  }
2143
2551
 
2144
- .input-field {
2552
+ .icon {
2553
+ svg {
2554
+ path {
2555
+ stroke: var(--_primary-400);
2556
+ }
2557
+ }
2558
+ }
2559
+
2560
+ .input_field {
2145
2561
  padding: 8px 12px;
2146
2562
  width: -webkit-fill-available;
2147
2563
  background-color: var(--_base-white);
@@ -2154,101 +2570,6 @@
2154
2570
  }
2155
2571
  }
2156
2572
  }
2157
-
2158
- input[type="checkbox"] {
2159
- width: auto;
2160
- }
2161
-
2162
- .error-msg {
2163
- font-size: 12px;
2164
- color: #ff0000;
2165
- }
2166
-
2167
- .chk_shipping_address_use_as_billing_address_chkbx {
2168
- display: flex;
2169
- align-items: center;
2170
- gap: 0.5rem;
2171
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2172
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2173
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2174
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2175
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2176
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2177
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2178
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2179
-
2180
- .custom-checkbox {
2181
- width: 20px;
2182
- height: 20px;
2183
- border: 1px solid #d0d5dd;
2184
- border-radius: 4px;
2185
- position: relative;
2186
- background-color: #fff;
2187
- transition: all 0.2s ease;
2188
-
2189
- &::after {
2190
- content: "";
2191
- position: absolute;
2192
- display: none;
2193
- left: 5px;
2194
- top: 0.5px;
2195
- width: 5px;
2196
- height: 10px;
2197
- border: solid #fff;
2198
- border-width: 0 2px 2px 0;
2199
- transform: rotate(45deg);
2200
- }
2201
- }
2202
- }
2203
-
2204
- input[type="checkbox"]:checked + label {
2205
- .custom-checkbox {
2206
- background-color: #004dff;
2207
- border-color: #004dff;
2208
-
2209
- &::after {
2210
- display: block;
2211
- }
2212
- }
2213
- }
2214
-
2215
- .checkbox-group {
2216
- display: flex;
2217
- align-items: center;
2218
- justify-content: start;
2219
- gap: 8px;
2220
- }
2221
-
2222
- &_same_as_billing_address_chkbx {
2223
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
2224
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
2225
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
2226
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
2227
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
2228
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
2229
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
2230
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
2231
- }
2232
-
2233
- &_button_wrapper {
2234
- display: flex;
2235
- align-items: center;
2236
- gap: 16px;
2237
- }
2238
- }
2239
-
2240
- .payment_heading {
2241
- padding: 12px;
2242
- display: flex;
2243
- justify-content: space-between;
2244
- border-bottom: 1px solid var(--_gray-100);
2245
- font-weight: 600;
2246
- .gc_tertiary_btn {
2247
- color: var(--_primary-400);
2248
- &:hover {
2249
- text-decoration: underline;
2250
- }
2251
- }
2252
2573
  }
2253
2574
  }
2254
2575
 
@@ -2277,9 +2598,7 @@
2277
2598
  display: flex;
2278
2599
  width: fit-content;
2279
2600
  align-items: center;
2280
- font-family: sans-serif;
2281
2601
  gap: 12px;
2282
- margin-block: 8px;
2283
2602
 
2284
2603
  input[type="checkbox"] {
2285
2604
  display: none;
@@ -2333,8 +2652,14 @@
2333
2652
  align-items: center;
2334
2653
  cursor: pointer;
2335
2654
  gap: 10px;
2336
- font-size: 14px;
2337
- color: var(--_gray-700);
2655
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
2656
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
2657
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
2658
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
2659
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
2660
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
2661
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
2662
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
2338
2663
 
2339
2664
  .custom-checkbox {
2340
2665
  width: 20px;
@@ -2371,6 +2696,10 @@
2371
2696
  }
2372
2697
  }
2373
2698
  }
2699
+ .chk_address_actions {
2700
+ display: flex;
2701
+ gap: 12px;
2702
+ }
2374
2703
  .chk_payment-card__note {
2375
2704
  padding: 8px 6px;
2376
2705
  display: flex;
@@ -2406,40 +2735,39 @@
2406
2735
  .chk_shipping-summary {
2407
2736
  display: flex;
2408
2737
  flex-direction: column;
2409
- gap: 6px;
2738
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
2739
+ max-width: 700px;
2410
2740
 
2411
2741
  .chk_address {
2412
2742
  display: flex;
2413
2743
  flex-direction: column;
2414
- gap: 6px;
2744
+ gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
2415
2745
 
2416
2746
  .chk_saved_address_name {
2417
- color: var(--_gray-900);
2747
+ color: var(--_gray-700);
2418
2748
  font-size: 16px;
2419
2749
  font-weight: 600;
2420
2750
  }
2421
2751
 
2422
2752
  .chk_saved_address {
2423
- color: var(--_gray-500);
2424
- font-size: 14px;
2753
+ color: var(--_gray-600);
2754
+ font-size: 12px;
2425
2755
  }
2426
2756
 
2427
2757
  .chk_saved_address_label {
2428
2758
  color: var(--_gray-500);
2429
- font-size: 14px;
2430
- font-weight: 400;
2759
+ font-size: 12px;
2431
2760
  }
2432
2761
 
2433
2762
  .chk_saved_address_value {
2434
- color: var(--_gray-900);
2435
- font-weight: 500;
2436
- font-size: 14px;
2763
+ color: var(--_gray-700);
2764
+ font-size: 12px;
2437
2765
  }
2438
2766
  }
2439
2767
 
2440
2768
  .contact {
2441
2769
  font-size: 0.875rem;
2442
- color: var(--_gray-900);
2770
+ color: var(--_gray-700);
2443
2771
  line-height: 1.4;
2444
2772
  }
2445
2773
  }
@@ -2451,6 +2779,12 @@
2451
2779
  &:has(.chk_saved_address_button.selected) {
2452
2780
  display: flex !important;
2453
2781
  }
2782
+ .chk_saved_address_button {
2783
+ display: flex;
2784
+ align-items: center;
2785
+ gap: 4px;
2786
+ color: var(--_primary-400);
2787
+ }
2454
2788
  }
2455
2789
 
2456
2790
  &:hover {
@@ -2652,82 +2986,11 @@
2652
2986
  }
2653
2987
  }
2654
2988
  }
2655
-
2656
- .chk_payment_cred_section {
2657
- display: flex;
2658
- justify-content: space-between;
2659
- align-items: center;
2660
- padding: 16px 16px 8px 16px;
2661
-
2662
- .chk_currency_inp {
2663
- height: 44px;
2664
- border: 1px solid var(--_gray-200);
2665
- border-radius: 4px;
2666
- background-color: var(--_base-white);
2667
- display: flex;
2668
- width: 155px;
2669
- overflow: hidden;
2670
- align-items: center;
2671
- padding-inline: 12px;
2672
- gap: 12px;
2673
- &:focus-within {
2674
- border: 1px solid var(--_primary-200);
2675
- outline: 2px solid var(--_primary-50);
2676
- }
2677
- input {
2678
- height: inherit;
2679
- background-color: var(--_base-white);
2680
- }
2681
- }
2682
- .chk_payment_cred_section_col_left {
2683
- .chk_payment_cred_section_col_left_crd_details {
2684
- display: flex;
2685
- gap: 80px;
2686
- align-items: center;
2687
- & > div {
2688
- display: flex;
2689
- gap: 12px;
2690
- .card_icon {
2691
- width: 60px;
2692
- height: 40px;
2693
- border-radius: 4px;
2694
- }
2695
- .card_details {
2696
- .card_details_num {
2697
- font-size: 12px;
2698
- font-weight: 600;
2699
- color: var(--_gray-900);
2700
- }
2701
- & > div {
2702
- display: flex;
2703
- .card_details_label {
2704
- font-size: 12px;
2705
- color: var(--_gray-500);
2706
- }
2707
- .card_details_value {
2708
- font-size: 12px;
2709
- color: var(--_gray-900);
2710
- }
2711
- }
2712
- }
2713
- }
2714
- }
2715
- }
2716
- }
2717
-
2718
- .chk_payment_remove_card {
2719
- padding-inline: 16px;
2720
- margin-bottom: 16px;
2721
- .error_msg {
2722
- font-size: 12px;
2723
- color: var(--_error-700);
2724
- }
2725
- }
2726
-
2727
2989
  .tertiary_primary_btn {
2728
2990
  font-size: 12px;
2729
2991
  color: var(--_primary-400);
2730
2992
  display: inline-flex;
2993
+ width: fit-content;
2731
2994
  &:hover {
2732
2995
  color: var(--_primary-500);
2733
2996
  text-decoration: underline;
@@ -2745,7 +3008,7 @@
2745
3008
  }
2746
3009
  }
2747
3010
  .chk_secondary_bnt {
2748
- padding: 12px 24px;
3011
+ padding: 16px 24px;
2749
3012
  background-color: transparent;
2750
3013
  color: var(--_gray-600);
2751
3014
  font-weight: 600;
@@ -2756,93 +3019,6 @@
2756
3019
  color: var(--_gray-900);
2757
3020
  }
2758
3021
  }
2759
-
2760
- // gift card styles
2761
- .chk_gft_crd_wrapper {
2762
- display: flex;
2763
- justify-content: space-between;
2764
- align-items: center;
2765
- padding: 16px 16px 0 16px;
2766
- &_item {
2767
- display: flex;
2768
- align-items: center;
2769
- gap: 16px;
2770
- &_icon {
2771
- width: 40px;
2772
- height: 40px;
2773
- border: 1px solid var(--_gray-200);
2774
- border-radius: 6px;
2775
- display: flex;
2776
- justify-content: center;
2777
- align-items: center;
2778
- }
2779
- &_info {
2780
- display: flex;
2781
- flex-direction: column;
2782
- &_title {
2783
- font-size: 14px;
2784
- margin-bottom: 4px;
2785
- font-weight: 600;
2786
- }
2787
- &_desc {
2788
- display: flex;
2789
- &_value {
2790
- font-size: 12px;
2791
- color: var(--_gray-600);
2792
- }
2793
- &_label {
2794
- font-size: 12px;
2795
- color: var(--_gray-900);
2796
- }
2797
- }
2798
- }
2799
- &_pin {
2800
- margin-left: 36px;
2801
- input[type="number"] {
2802
- border: 1px solid var(--_gray-300);
2803
- border-radius: 4px;
2804
- background-color: var(--_base-white);
2805
- width: 95px;
2806
- height: 44px;
2807
- padding-inline: 10px;
2808
- &:focus {
2809
- outline: 2px solid var(--_primary-100);
2810
- border: 1px solid var(--_primary-300);
2811
- }
2812
- }
2813
- }
2814
- }
2815
-
2816
- &_input {
2817
- border: 1px solid var(--_gray-300);
2818
- border-radius: 4px;
2819
- background-color: var(--_base-white);
2820
- height: 44px;
2821
- width: 155px;
2822
- display: flex;
2823
- align-items: center;
2824
- gap: 8px;
2825
- padding-left: 10px;
2826
- input[type="number"] {
2827
- background-color: var(--_base-white);
2828
- padding-right: 10px;
2829
- }
2830
- &:focus-within {
2831
- outline: 2px solid var(--_primary-100);
2832
- border: 1px solid var(--_primary-300);
2833
- }
2834
- }
2835
- }
2836
- .chk_gft_crd_wrapper {
2837
- &_btn {
2838
- text-align: left;
2839
- margin-bottom: 16px;
2840
- color: var(--_primary-400);
2841
- &:hover {
2842
- text-decoration: underline;
2843
- }
2844
- }
2845
- }
2846
3022
  // emp checkout end
2847
3023
  }
2848
3024