@sc-360-v2/storefront-cms-library 0.3.57 → 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 (16) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/buyForHeaders.scss +19 -3
  3. package/dist/cart-summary.scss +891 -39
  4. package/dist/checkout.scss +115 -22
  5. package/dist/confirmationModal.scss +1 -0
  6. package/dist/dropdownTemplate.scss +129 -5
  7. package/dist/employee-bulk-order.scss +637 -504
  8. package/dist/functions.js +1 -1
  9. package/dist/modal.scss +1 -1
  10. package/dist/shipping-payments.scss +109 -21
  11. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +2833 -188
  12. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  13. package/dist/types/builder/tools/element-edit/productDescription.d.ts +16 -0
  14. package/dist/types/helper/helper-functions.d.ts +7 -1
  15. package/dist/types/html-elements/element-types.d.ts +2 -2
  16. package/package.json +1 -1
package/dist/employee-bulk-order.scss CHANGED
@@ -126,7 +126,7 @@
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 {
@@ -159,6 +159,10 @@
159
159
  // display: grid;
160
160
  gap: 12px;
161
161
  border-bottom: 1px solid var(--_gray-200);
162
+ cursor: pointer;
163
+ &:not(&.selected):hover {
164
+ background-color: var(--_primary-25);
165
+ }
162
166
  &:first-child {
163
167
  border-top: 1px solid var(--_gray-200);
164
168
  }
@@ -180,8 +184,11 @@
180
184
  font-size: 14px;
181
185
  font-weight: 600;
182
186
  flex-shrink: 0;
183
- .em_profile_text {
184
- width: 100%;
187
+ overflow: hidden;
188
+ img {
189
+ max-width: 100%;
190
+ max-height: 100%;
191
+ object-fit: contain;
185
192
  }
186
193
  }
187
194
  .em_info {
@@ -212,6 +219,9 @@
212
219
  font-size: 12px;
213
220
  }
214
221
  }
222
+ .em_profile_text {
223
+ width: 100%;
224
+ }
215
225
  }
216
226
  .em_entity-status {
217
227
  display: flex;
@@ -228,7 +238,7 @@
228
238
  border-radius: 4px;
229
239
  width: 100%;
230
240
  &:hover {
231
- background-color: var(--_gray-50);
241
+ background-color: var(--_gray-200);
232
242
  }
233
243
  }
234
244
  .save_btn {
@@ -245,7 +255,7 @@
245
255
  }
246
256
  }
247
257
  .employee_card.selected {
248
- background: var(--_primary-25);
258
+ background: var(--_primary-50);
249
259
  border-bottom: 2px solid var(--_primary-400);
250
260
  }
251
261
  .em_empty_section {
@@ -766,15 +776,25 @@
766
776
  }
767
777
  }
768
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
+ }
769
789
 
770
790
  .trigger-btn {
771
791
  display: flex;
772
- padding: 4px;
792
+ padding: 6px;
773
793
  border-radius: 4px;
774
794
  color: var(--_gray-600);
775
795
  &:hover {
776
- background: var(--_gray-100);
777
- color: var(--_gray-900);
796
+ background: var(--_error-50);
797
+ color: var(--_error-700);
778
798
  }
779
799
  }
780
800
 
@@ -910,24 +930,40 @@
910
930
  display: flex;
911
931
  padding: var(--_ctm-lt-pg);
912
932
  flex-direction: column;
913
- gap: var(--_ctm-lt-te-ad-it-gp);
933
+ gap: 4px;
914
934
  word-break: keep-all;
915
935
  padding-bottom: 24px;
916
936
 
917
937
  .chk_checkout_title {
918
938
  color: var(--_gray-900);
919
939
  font-size: 24px;
920
- font-weight: 600;
940
+ font-weight: 700;
921
941
  line-height: 32px;
922
- margin-bottom: 16px;
923
942
  }
924
943
 
925
944
  .accordion {
926
945
  border-radius: 4px;
927
946
  display: flex;
928
- gap: var(--_ctm-lt-an-hg-ad-ve-gp);
947
+ // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
929
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
+ }
930
965
 
966
+ // accordion heaer
931
967
  .accordion-header {
932
968
  padding: 12px;
933
969
  display: flex;
@@ -937,6 +973,7 @@
937
973
  background-color: #f5f5f5;
938
974
  border-color: #f5f5f5;
939
975
  border-radius: 4px;
976
+ height: 55px;
940
977
 
941
978
  .accordion-title {
942
979
  margin-right: 1rem;
@@ -962,26 +999,21 @@
962
999
  }
963
1000
  }
964
1001
 
1002
+ // accordion body
965
1003
  .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
- }
1004
+ transition: max-height 800ms ease-in;
980
1005
 
1006
+ max-height: 0px;
1007
+ overflow: hidden;
1008
+ padding: 0;
1009
+ // shipping address
981
1010
  .shipping-address {
1011
+ transition: max-height 800ms ease-in;
1012
+ max-height: 0;
982
1013
  display: flex;
983
1014
  flex-direction: column;
984
- gap: 24px;
1015
+ gap: 16px;
1016
+
985
1017
  .btn_link {
986
1018
  color: var(--_primary-400);
987
1019
  &:hover {
@@ -1002,26 +1034,27 @@
1002
1034
  display: flex;
1003
1035
  flex-direction: column;
1004
1036
  gap: 24px;
1037
+ max-width: 485px;
1005
1038
  }
1006
1039
 
1007
1040
  .shipping_address_heading_container {
1008
1041
  display: flex;
1009
1042
  justify-content: space-between;
1010
1043
  align-items: center;
1011
- max-width: 760px;
1012
- font-size: 18px;
1013
1044
  font-weight: 600;
1045
+ color: var(--_gray-900);
1014
1046
  .icon {
1015
1047
  display: flex;
1016
1048
  align-items: center;
1049
+ cursor: pointer;
1017
1050
  }
1018
1051
  }
1019
1052
 
1020
1053
  form {
1021
1054
  display: flex;
1022
1055
  flex-direction: column;
1023
- gap: 16px;
1024
- max-width: 85%;
1056
+ gap: 0.75rem;
1057
+ // max-width: 85%;
1025
1058
 
1026
1059
  @media (max-width: 500px) {
1027
1060
  max-width: 100%;
@@ -1043,13 +1076,14 @@
1043
1076
  .chk_shipping_address_input_wrapper {
1044
1077
  display: flex;
1045
1078
  flex-direction: column;
1046
- gap: 6px;
1079
+ gap: 16px;
1047
1080
  width: 100%;
1048
1081
  }
1049
1082
 
1050
1083
  .chk_shipping_address_form_label {
1051
1084
  color: var(--_gray-600);
1052
1085
  font-size: 14px;
1086
+ padding-bottom: 6px;
1053
1087
  }
1054
1088
 
1055
1089
  .chk_shiping_address_form_input {
@@ -1132,6 +1166,20 @@
1132
1166
  }
1133
1167
  }
1134
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
+
1135
1183
  .chk_multi_address {
1136
1184
  display: flex;
1137
1185
  flex-direction: column;
@@ -1179,7 +1227,7 @@
1179
1227
  .chk_multi_address_product_name {
1180
1228
  color: var(--_gray-900);
1181
1229
  font-size: 18px;
1182
- font-weight: 600;
1230
+ font-weight: 700;
1183
1231
  line-height: 28px;
1184
1232
  }
1185
1233
 
@@ -1203,7 +1251,7 @@
1203
1251
  .chk_multi_address_product_price {
1204
1252
  color: var(--_gray-900);
1205
1253
  font-size: 20px;
1206
- font-weight: 600;
1254
+ font-weight: 700;
1207
1255
  }
1208
1256
  }
1209
1257
 
@@ -1222,7 +1270,7 @@
1222
1270
  .chk_multi_address_product_qty {
1223
1271
  color: var(--_gray-900);
1224
1272
  font-size: 12px;
1225
- font-weight: 600;
1273
+ font-weight: 700;
1226
1274
  }
1227
1275
  }
1228
1276
 
@@ -1334,13 +1382,12 @@
1334
1382
  &__group {
1335
1383
  display: flex;
1336
1384
  flex-direction: column;
1337
- gap: 12px;
1385
+ gap: 8px;
1338
1386
 
1339
1387
  .chk_shipping_method_heading {
1340
1388
  color: var(--_gray-700);
1341
- font-weight: 600;
1389
+ font-weight: 700;
1342
1390
  font-size: 16px;
1343
- margin-bottom: 8px;
1344
1391
  }
1345
1392
  }
1346
1393
 
@@ -1374,13 +1421,25 @@
1374
1421
  }
1375
1422
 
1376
1423
  .chk_shipping_method_label {
1377
- color: var(--_gray-500);
1424
+ color: var(--_gray-600);
1425
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
1378
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);
1379
1432
  }
1380
1433
 
1381
1434
  .chk_shipping_method_value {
1382
1435
  color: var(--_gray-900);
1436
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
1383
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);
1384
1443
  }
1385
1444
 
1386
1445
  // input[type="radio"] {
@@ -1437,52 +1496,137 @@
1437
1496
  }
1438
1497
  }
1439
1498
 
1499
+ // payment options
1440
1500
  .chk_payment-options {
1441
1501
  display: flex;
1442
1502
  flex-direction: column;
1443
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;
1444
1512
 
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;
1513
+ .gc_icon {
1514
+ svg {
1515
+ width: 18px;
1516
+ height: 14px;
1517
+ }
1454
1518
  }
1455
- }
1456
1519
 
1457
- .cc_info {
1458
- display: flex;
1459
- flex-direction: column;
1460
- gap: 6px;
1520
+ .gc_info {
1521
+ display: flex;
1522
+ justify-content: space-between;
1523
+ width: 100%;
1524
+ gap: 6px;
1461
1525
 
1462
- .cc_title {
1463
- font-size: 14px;
1464
- 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
+ }
1465
1538
  }
1466
1539
  }
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);
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
+ }
1476
1604
 
1477
- &:hover {
1478
- color: var(--_primary-500);
1479
- 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
+ }
1480
1628
  }
1481
1629
  }
1482
- .gift_crd_chk_payment_option {
1483
- border: 1px solid var(--_gray-300);
1484
- border-radius: 4px;
1485
- }
1486
1630
  .payment_program {
1487
1631
  // padding: 0 12px;
1488
1632
  .payment_program_header {
@@ -1493,7 +1637,7 @@
1493
1637
 
1494
1638
  margin-bottom: 16px;
1495
1639
 
1496
- &_label {
1640
+ .payment_program_header_label {
1497
1641
  display: flex;
1498
1642
  justify-content: space-between;
1499
1643
  align-items: center;
@@ -1502,7 +1646,7 @@
1502
1646
  font-weight: 600;
1503
1647
  color: var(--_gray-600);
1504
1648
  }
1505
- &_pds {
1649
+ .payment_program_header_pds {
1506
1650
  &_label {
1507
1651
  font-size: 14px;
1508
1652
  color: var(--_gray-600);
@@ -1526,24 +1670,24 @@
1526
1670
 
1527
1671
  .pp_pmnt_method_groups {
1528
1672
  .pp_ppm_section {
1529
- background: var(--_base-white);
1673
+ background: var(---base-white);
1674
+ border-bottom: 1px solid var(--_gray-300);
1530
1675
  padding: 12px 16px;
1531
1676
  font-size: 12px;
1532
1677
  display: flex;
1533
1678
  justify-content: space-between;
1534
1679
  gap: 8px;
1535
- border-bottom: 1px solid var(--_gray-300);
1536
1680
  &:not(:first-child) {
1537
1681
  border-top: 1px solid var(--_gray-200);
1538
1682
  }
1539
1683
  .pp_ppm_section_label {
1540
1684
  font-size: 14px;
1541
- font-weight: 600;
1685
+ font-weight: 700;
1542
1686
  color: var(--_gray-900);
1543
1687
  }
1544
1688
  .pp_ppm_section_value {
1545
1689
  font-size: 14px;
1546
- font-weight: 600;
1690
+ font-weight: 700;
1547
1691
  color: var(--_gray-600);
1548
1692
  .pp_ppm_section_value_lable {
1549
1693
  font-weight: 500;
@@ -1556,6 +1700,11 @@
1556
1700
  display: grid;
1557
1701
  gap: 8px;
1558
1702
  .chk_payment_option {
1703
+ .chk_payment_options_heading {
1704
+ padding: 16px;
1705
+ display: flex;
1706
+ justify-content: space-between;
1707
+ }
1559
1708
  .chk_payment_section_wrapper {
1560
1709
  width: 100%;
1561
1710
  display: flex;
@@ -1570,18 +1719,21 @@
1570
1719
  .chk_payment_section_col_left {
1571
1720
  display: flex;
1572
1721
  gap: 12px;
1722
+ svg {
1723
+ width: 24px;
1724
+ height: 24px;
1725
+ }
1573
1726
  .chk_payment_section_method {
1574
1727
  display: flex;
1575
1728
  flex-direction: column;
1576
1729
  .chk_payment_section_method_name {
1577
1730
  font-size: 14px;
1578
- font-weight: 600;
1731
+ font-weight: 700;
1579
1732
  line-height: 20px;
1580
1733
  color: var(--_gray-700);
1581
1734
  }
1582
1735
  & > div {
1583
1736
  display: flex;
1584
- gap: 4px;
1585
1737
  .label {
1586
1738
  font-size: 12px;
1587
1739
  color: var(--_gray-500);
@@ -1600,7 +1752,7 @@
1600
1752
  border-radius: 4px;
1601
1753
  background-color: var(--_base-white);
1602
1754
  display: flex;
1603
- width: 155px;
1755
+ width: 120px;
1604
1756
  overflow: hidden;
1605
1757
  align-items: center;
1606
1758
  padding-inline: 12px;
@@ -1611,6 +1763,10 @@
1611
1763
  }
1612
1764
  input {
1613
1765
  height: inherit;
1766
+ &:disabled {
1767
+ opacity: 0.8;
1768
+ cursor: not-allowed;
1769
+ }
1614
1770
  }
1615
1771
  }
1616
1772
  }
@@ -1619,9 +1775,11 @@
1619
1775
  .chk_payment_options_heading {
1620
1776
  color: var(--_gray-900);
1621
1777
  font-size: 16px;
1622
- font-weight: 600;
1778
+ font-weight: 700;
1623
1779
  }
1624
1780
 
1781
+ // gift card styles
1782
+
1625
1783
  // payment other options styles
1626
1784
  .chk_pmnt_other_options {
1627
1785
  display: flex;
@@ -1780,23 +1938,356 @@
1780
1938
  }
1781
1939
  }
1782
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
+ }
1783
2022
  }
1784
2023
  }
1785
2024
  }
1786
2025
 
1787
- .chk_gft_crd_container {
2026
+ .chk_billing_address {
1788
2027
  width: 100%;
1789
2028
  display: flex;
1790
2029
  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;
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);
1796
2035
 
1797
- .chk_gft_crd_option_heading {
1798
- display: flex;
1799
- justify-content: space-between;
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 {
2279
+ width: 100%;
2280
+ display: flex;
2281
+ flex-direction: column;
2282
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
2283
+ background-color: var(--_base-white);
2284
+ border: 1px solid var(--_gray-300);
2285
+ border-radius: 4px;
2286
+ overflow: hidden;
2287
+
2288
+ .chk_gft_crd_option_heading {
2289
+ display: flex;
2290
+ justify-content: space-between;
1800
2291
  align-items: center;
1801
2292
  padding: 8px 12px;
1802
2293
  border-bottom: 1px solid var(--_gray-300);
@@ -1877,14 +2368,11 @@
1877
2368
  border: 1px solid var(--_primary-300);
1878
2369
  }
1879
2370
  }
1880
- }
1881
- .chk_gft_crd_wrapper {
1882
- &_btn {
1883
- text-align: left;
1884
- margin-bottom: 16px;
2371
+
2372
+ .chk_gft_crd_wrapper_btn {
1885
2373
  color: var(--_primary-400);
1886
2374
  &:hover {
1887
- text-decoration: underline;
2375
+ text-decoration: un;
1888
2376
  }
1889
2377
  }
1890
2378
  }
@@ -1986,150 +2474,27 @@
1986
2474
  .chk_payment_options_value {
1987
2475
  color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1988
2476
  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%;
2477
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
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);
2105
2483
  }
2106
2484
  }
2107
2485
 
2108
- .chk_shipping_address_form_group {
2486
+ &_right_container {
2109
2487
  display: flex;
2110
- justify-content: space-between;
2111
- flex-direction: row;
2112
- gap: 12px;
2113
- }
2488
+ gap: 6px;
2489
+ align-items: flex-start;
2114
2490
 
2115
- .chk_shipping_address_input_container {
2116
- display: flex;
2117
- width: 100%;
2491
+ @media (max-width: 500px) {
2492
+ justify-content: flex-end;
2493
+ }
2118
2494
  }
2119
2495
 
2120
- .chk_shipping_address_input_wrapper {
2496
+ &_input {
2121
2497
  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
2498
  padding: 8px 12px;
2134
2499
  width: -webkit-fill-available;
2135
2500
  background-color: var(--_base-white);
@@ -2141,7 +2506,15 @@
2141
2506
  outline: 2px solid var(--_primary-100);
2142
2507
  }
2143
2508
 
2144
- .input-field {
2509
+ .icon {
2510
+ svg {
2511
+ path {
2512
+ stroke: var(--_primary-400);
2513
+ }
2514
+ }
2515
+ }
2516
+
2517
+ .input_field {
2145
2518
  padding: 8px 12px;
2146
2519
  width: -webkit-fill-available;
2147
2520
  background-color: var(--_base-white);
@@ -2154,101 +2527,6 @@
2154
2527
  }
2155
2528
  }
2156
2529
  }
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
2530
  }
2253
2531
  }
2254
2532
 
@@ -2277,9 +2555,7 @@
2277
2555
  display: flex;
2278
2556
  width: fit-content;
2279
2557
  align-items: center;
2280
- font-family: sans-serif;
2281
2558
  gap: 12px;
2282
- margin-block: 8px;
2283
2559
 
2284
2560
  input[type="checkbox"] {
2285
2561
  display: none;
@@ -2333,8 +2609,14 @@
2333
2609
  align-items: center;
2334
2610
  cursor: pointer;
2335
2611
  gap: 10px;
2336
- font-size: 14px;
2337
- 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);
2338
2620
 
2339
2621
  .custom-checkbox {
2340
2622
  width: 20px;
@@ -2371,6 +2653,10 @@
2371
2653
  }
2372
2654
  }
2373
2655
  }
2656
+ .chk_address_actions {
2657
+ display: flex;
2658
+ gap: 12px;
2659
+ }
2374
2660
  .chk_payment-card__note {
2375
2661
  padding: 8px 6px;
2376
2662
  display: flex;
@@ -2406,40 +2692,39 @@
2406
2692
  .chk_shipping-summary {
2407
2693
  display: flex;
2408
2694
  flex-direction: column;
2409
- gap: 6px;
2695
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
2696
+ max-width: 700px;
2410
2697
 
2411
2698
  .chk_address {
2412
2699
  display: flex;
2413
2700
  flex-direction: column;
2414
- gap: 6px;
2701
+ gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
2415
2702
 
2416
2703
  .chk_saved_address_name {
2417
- color: var(--_gray-900);
2704
+ color: var(--_gray-700);
2418
2705
  font-size: 16px;
2419
2706
  font-weight: 600;
2420
2707
  }
2421
2708
 
2422
2709
  .chk_saved_address {
2423
- color: var(--_gray-500);
2424
- font-size: 14px;
2710
+ color: var(--_gray-600);
2711
+ font-size: 12px;
2425
2712
  }
2426
2713
 
2427
2714
  .chk_saved_address_label {
2428
2715
  color: var(--_gray-500);
2429
- font-size: 14px;
2430
- font-weight: 400;
2716
+ font-size: 12px;
2431
2717
  }
2432
2718
 
2433
2719
  .chk_saved_address_value {
2434
- color: var(--_gray-900);
2435
- font-weight: 500;
2436
- font-size: 14px;
2720
+ color: var(--_gray-700);
2721
+ font-size: 12px;
2437
2722
  }
2438
2723
  }
2439
2724
 
2440
2725
  .contact {
2441
2726
  font-size: 0.875rem;
2442
- color: var(--_gray-900);
2727
+ color: var(--_gray-700);
2443
2728
  line-height: 1.4;
2444
2729
  }
2445
2730
  }
@@ -2451,6 +2736,12 @@
2451
2736
  &:has(.chk_saved_address_button.selected) {
2452
2737
  display: flex !important;
2453
2738
  }
2739
+ .chk_saved_address_button {
2740
+ display: flex;
2741
+ align-items: center;
2742
+ gap: 4px;
2743
+ color: var(--_primary-400);
2744
+ }
2454
2745
  }
2455
2746
 
2456
2747
  &:hover {
@@ -2652,82 +2943,11 @@
2652
2943
  }
2653
2944
  }
2654
2945
  }
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
2946
  .tertiary_primary_btn {
2728
2947
  font-size: 12px;
2729
2948
  color: var(--_primary-400);
2730
2949
  display: inline-flex;
2950
+ width: fit-content;
2731
2951
  &:hover {
2732
2952
  color: var(--_primary-500);
2733
2953
  text-decoration: underline;
@@ -2745,7 +2965,7 @@
2745
2965
  }
2746
2966
  }
2747
2967
  .chk_secondary_bnt {
2748
- padding: 12px 24px;
2968
+ padding: 16px 24px;
2749
2969
  background-color: transparent;
2750
2970
  color: var(--_gray-600);
2751
2971
  font-weight: 600;
@@ -2756,93 +2976,6 @@
2756
2976
  color: var(--_gray-900);
2757
2977
  }
2758
2978
  }
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
2979
  // emp checkout end
2847
2980
  }
2848
2981