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

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 (52) hide show
  1. package/dist/add-products-tab copy.scss +1 -1
  2. package/dist/add-products-tab.scss +67 -23
  3. package/dist/allocationDetails.scss +33 -36
  4. package/dist/allocations.scss +11 -7
  5. package/dist/badge.scss +1 -1
  6. package/dist/builder.js +1 -1
  7. package/dist/bulk-order-pad.scss +1 -1
  8. package/dist/bulk-variant-picker.scss +23 -21
  9. package/dist/button copy.scss +3 -2
  10. package/dist/button.scss +1 -1
  11. package/dist/buyForHeaders.scss +2 -1
  12. package/dist/checkout.scss +634 -817
  13. package/dist/container.scss +1 -1
  14. package/dist/employee-bulk-order.scss +295 -126
  15. package/dist/filters.scss +5 -3
  16. package/dist/grid.scss +1 -1
  17. package/dist/icon-list.scss +3 -3
  18. package/dist/icons.js +1 -1
  19. package/dist/image-temp.scss +1 -1
  20. package/dist/index.js +1 -1
  21. package/dist/item-stock.scss +1 -1
  22. package/dist/language-selector.scss +5 -5
  23. package/dist/layouter-pro-item.scss +1 -1
  24. package/dist/layouter-pro.scss +1 -1
  25. package/dist/menu-item.scss +1 -1
  26. package/dist/menu-v2.scss +5 -3
  27. package/dist/order-status.scss +1 -1
  28. package/dist/overflow-module.scss +1 -1
  29. package/dist/past-orders.scss +1 -1
  30. package/dist/payment-methods.scss +1 -1
  31. package/dist/position-module.scss +1 -1
  32. package/dist/prefix-list.scss +1 -1
  33. package/dist/product-actions.scss +19 -19
  34. package/dist/product-basic-elements.scss +13 -13
  35. package/dist/product-options.scss +7 -6
  36. package/dist/product-sizechart.scss +15 -9
  37. package/dist/profile.scss +1 -1
  38. package/dist/quantity-selector.scss +11 -11
  39. package/dist/quick-links.scss +1 -1
  40. package/dist/quotes.scss +1 -1
  41. package/dist/repeater.scss +5 -3
  42. package/dist/responsive-behaviour.scss +1 -1
  43. package/dist/rfqs.scss +1 -1
  44. package/dist/section.scss +1 -1
  45. package/dist/shipping-payments.scss +650 -491
  46. package/dist/stack.scss +1 -1
  47. package/dist/text-temp-v2.scss +3 -3
  48. package/dist/types/icons/cms-svg-icons.d.ts +1 -1
  49. package/dist/user-elements.scss +1 -1
  50. package/dist/variant-picker.scss +13 -16
  51. package/dist/video.scss +1 -1
  52. package/package.json +1 -1
@@ -161,48 +161,6 @@ $dark-color: #343a40;
161
161
  line-height: 20px;
162
162
  color: var(--_gray-600);
163
163
  }
164
-
165
- .btn_secondary {
166
- padding: 12px 24px;
167
- width: fit-content;
168
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
169
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
170
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
171
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
172
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
173
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
174
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
175
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
176
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
177
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
178
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
179
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
180
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
181
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
182
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
183
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
184
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
185
-
186
- &:hover {
187
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
188
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
189
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
190
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
191
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
192
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
193
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
194
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
195
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
196
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
197
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
198
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
199
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
200
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
201
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
202
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
203
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
204
- }
205
- }
206
164
  }
207
165
  }
208
166
  }
@@ -216,16 +174,10 @@ $dark-color: #343a40;
216
174
  padding-bottom: 24px;
217
175
 
218
176
  .chk_checkout_title {
219
- color: var(--_ctm-dn-ct-hg-dn-cr);
220
- font-family: var(--_ctm-dn-ct-hg-dn-ft-fy);
221
- font-size: var(--_ctm-dn-ct-hg-dn-ft-se);
222
- font-style: var(--_ctm-dn-ct-hg-dn-ft-se-ic);
223
- font-weight: var(--_ctm-dn-ct-hg-dn-ft-wt);
224
- line-height: var(--_ctm-dn-ct-hg-dn-le-ht);
225
- letter-spacing: var(--_ctm-dn-ct-hg-dn-lr-sg);
226
- text-align: var(--_ctm-dn-ct-hg-dn-tt-an);
227
- width: 100%;
228
- text-decoration: var(--_ctm-dn-ct-hg-dn-ue);
177
+ color: var(--_gray-900);
178
+ font-size: 24px;
179
+ font-weight: 700;
180
+ line-height: 32px;
229
181
  }
230
182
 
231
183
  .accordion {
@@ -240,75 +192,30 @@ $dark-color: #343a40;
240
192
  justify-content: space-between;
241
193
  align-items: center;
242
194
  cursor: pointer;
243
- background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-bd-cr);
244
- border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-cr);
245
- border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-rs);
246
- border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-se);
247
- border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-wh);
248
- box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-ae)
249
- var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-br)
250
- var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-sd)
251
- var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-cr);
195
+ background-color: #f5f5f5;
196
+ border-color: #f5f5f5;
197
+ border-radius: 4px;
252
198
 
253
199
  .accordion-title {
254
200
  margin-right: 1rem;
255
201
  white-space: nowrap;
256
202
  display: flex;
257
203
  align-items: center;
258
- gap: var(--_ctm-lt-an-in-tt-gp);
259
- color: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-cr);
260
- font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-fy);
261
- font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se);
262
- font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se-ic);
263
- font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-wt);
264
- line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-le-ht);
265
- letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-lr-sg);
266
- text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ue);
204
+ gap: 12px;
205
+ font-size: 16px;
206
+ font-weight: 600;
207
+ line-height: 24px;
208
+
267
209
  span {
268
210
  display: flex;
269
211
  }
270
212
  }
271
213
  .edit-btn {
272
214
  cursor: pointer;
273
- padding: 0;
274
- background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-bd-cr);
275
- border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-cr);
276
- border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-rs);
277
- border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-se);
278
- border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-wh);
279
- color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-cr);
280
- font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-fy);
281
- font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se);
282
- font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se-ic);
283
- font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-wt);
284
- line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-le-ht);
285
- letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-lr-sg);
286
- box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-ae)
287
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-br)
288
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-sd)
289
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-cr);
290
- text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-tt-an);
291
- text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ue);
215
+ color: var(--_primary-400);
292
216
 
293
217
  &:hover {
294
- background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-bd-cr);
295
- border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-cr);
296
- border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-rs);
297
- border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-se);
298
- border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-wh);
299
- color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-cr);
300
- font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-fy);
301
- font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se);
302
- font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se-ic);
303
- font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-wt);
304
- line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-le-ht);
305
- letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-lr-sg);
306
- box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-ae)
307
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-br)
308
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-sd)
309
- var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-cr);
310
- text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-tt-an);
311
- text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ue);
218
+ color: var(--_primary-500);
312
219
  }
313
220
  }
314
221
  }
@@ -320,25 +227,12 @@ $dark-color: #343a40;
320
227
  display: flex;
321
228
  align-items: center;
322
229
  gap: 4px;
323
- color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
324
- font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
325
- font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
326
- font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
327
- font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
328
- line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
329
- letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
330
- text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
230
+ color: var(--_gray-500);
331
231
  }
332
232
 
333
233
  .chk_shipping_method_heading {
334
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
335
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
336
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
337
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
338
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
339
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
340
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
341
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
234
+ color: var(--_gray-500);
235
+ font-weight: 600;
342
236
  }
343
237
  }
344
238
 
@@ -349,47 +243,11 @@ $dark-color: #343a40;
349
243
 
350
244
  .chk_saved_address_button {
351
245
  cursor: pointer;
352
- align-self: flex-start;
353
- white-space: nowrap;
246
+ border-radius: 6px;
247
+ color: var(--_primary-400);
354
248
  display: flex;
249
+ align-items: center;
355
250
  gap: 4px;
356
- align-items: flex-start;
357
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
358
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
359
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
360
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
361
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
362
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
363
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
364
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
365
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
366
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
367
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
368
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
369
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
370
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
371
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
372
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
373
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
374
- &:hover {
375
- background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
376
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
377
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
378
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
379
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
380
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
381
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
382
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
383
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
384
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
385
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
386
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
387
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
388
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
389
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
390
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
391
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
392
- }
393
251
  }
394
252
 
395
253
  .shipping_address_container {
@@ -430,91 +288,27 @@ $dark-color: #343a40;
430
288
  .chk_shipping_address_input_wrapper {
431
289
  display: flex;
432
290
  flex-direction: column;
433
- gap: var(--_ctm-lt-ll-ad-it-gp);
291
+ gap: 16px;
434
292
  width: 100%;
435
293
  }
436
294
 
437
295
  .chk_shipping_address_form_label {
438
- white-space: nowrap;
439
- color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
440
- font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
441
- font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
442
- font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
443
- font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
444
- line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
445
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
446
- text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
296
+ color: var(--_gray-600);
297
+ font-size: 14px;
447
298
  }
448
299
 
449
300
  .chk_shiping_address_form_input {
450
301
  padding: 8px 12px;
451
302
  width: -webkit-fill-available;
452
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
453
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
454
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
455
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
456
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
457
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
458
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
459
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
460
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
461
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
462
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
463
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
464
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
465
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
466
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
467
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
468
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
469
-
470
- &:focus-within {
471
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
472
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
473
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
474
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
475
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
476
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
477
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
478
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
479
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
480
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
481
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
482
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
483
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
484
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
485
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
486
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
487
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
488
- }
489
-
490
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
491
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
492
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
493
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
494
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
495
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
496
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
497
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
498
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
499
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
500
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
501
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
502
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
303
+ background-color: var(--_base-white);
304
+ color: var(--_gray-600);
305
+ border: 1px solid var(--_gray-300);
306
+ border-radius: 6px;
307
+ height: 40px;
503
308
 
504
309
  &:focus-within {
505
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
506
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
507
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
508
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
509
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
510
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
511
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
512
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
513
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
514
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
515
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
516
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
517
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
310
+ border: 1px solid var(--_primary-300);
311
+ outline: 2px solid var(--_primary-100);
518
312
  }
519
313
  }
520
314
 
@@ -540,60 +334,12 @@ $dark-color: #343a40;
540
334
  gap: 8px;
541
335
  }
542
336
 
543
- .chk_shipping_address_submit_btn {
544
- padding: 12px 24px;
545
- width: fit-content;
546
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
547
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
548
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
549
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
550
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
551
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
552
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
553
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
554
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
555
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
556
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
557
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
558
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
559
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
560
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
561
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
562
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
563
-
564
- &:hover {
565
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
566
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
567
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
568
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
569
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
570
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
571
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
572
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
573
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
574
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
575
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
576
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
577
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
578
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
579
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
580
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
581
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
582
- }
583
- }
584
-
585
337
  .chk_shipping_address_use_as_billing_address_chkbx {
586
338
  display: flex;
587
339
  align-items: center;
588
340
  gap: 0.5rem;
589
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
590
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
591
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
592
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
593
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
594
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
595
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
596
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
341
+ color: var(--_gray-600);
342
+ font-size: 14px;
597
343
 
598
344
  .custom-checkbox {
599
345
  width: 20px;
@@ -676,25 +422,16 @@ $dark-color: #343a40;
676
422
  gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
677
423
 
678
424
  .chk_multi_address_product_name {
679
- color: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-cr);
680
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-fy);
681
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se);
682
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se-ic);
683
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-wt);
684
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-le-ht);
685
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-lr-sg);
686
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ue);
425
+ color: var(--_gray-900);
426
+ font-size: 18px;
427
+ font-weight: 700;
428
+ line-height: 28px;
687
429
  }
688
430
 
689
431
  .chk_multi_address_product_info {
690
- color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
691
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
692
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
693
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
694
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
695
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
696
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
697
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
432
+ color: var(--_gray-600);
433
+ font-size: 14px;
434
+ list-style: 20px;
698
435
  }
699
436
  }
700
437
 
@@ -709,14 +446,9 @@ $dark-color: #343a40;
709
446
  }
710
447
 
711
448
  .chk_multi_address_product_price {
712
- color: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-cr);
713
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-fy);
714
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se);
715
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se-ic);
716
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
717
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
718
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-lr-sg);
719
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ue);
449
+ color: var(--_gray-900);
450
+ font-size: 20px;
451
+ font-weight: 700;
720
452
  }
721
453
  }
722
454
 
@@ -727,25 +459,15 @@ $dark-color: #343a40;
727
459
  gap: 4px;
728
460
 
729
461
  .chk_multi_address_product_info {
730
- color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
731
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
732
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
733
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
734
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
735
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
736
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
737
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
462
+ color: var(--_gray-600);
463
+ font-size: 12px;
464
+ line-height: 18px;
738
465
  }
739
466
 
740
467
  .chk_multi_address_product_qty {
741
- color: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-cr);
742
- font-family: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-fy);
743
- font-size: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se);
744
- font-style: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se-ic);
745
- font-weight: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-wt);
746
- line-height: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-le-ht);
747
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-lr-sg);
748
- text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ue);
468
+ color: var(--_gray-900);
469
+ font-size: 12px;
470
+ font-weight: 700;
749
471
  }
750
472
  }
751
473
 
@@ -761,7 +483,7 @@ $dark-color: #343a40;
761
483
 
762
484
  &_shiping_option_heading_wrapper {
763
485
  display: grid;
764
- grid-template-columns: 0.5fr 2fr 2fr auto;
486
+ grid-template-columns: 0.5fr 2fr 2fr 20px;
765
487
  gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
766
488
  white-space: nowrap;
767
489
  align-items: center;
@@ -771,14 +493,8 @@ $dark-color: #343a40;
771
493
  }
772
494
 
773
495
  .chk_multi_address_product_label {
774
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-cr);
775
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-fy);
776
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se);
777
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se-ic);
778
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-wt);
779
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-le-ht);
780
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-lr-sg);
781
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ue);
496
+ color: var(--_gray-600);
497
+ font-size: 12px;
782
498
  }
783
499
  }
784
500
 
@@ -802,43 +518,14 @@ $dark-color: #343a40;
802
518
  .chk_shiping_address_form_input {
803
519
  padding: 8px 12px;
804
520
  width: -webkit-fill-available;
805
- position: relative;
806
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
807
- border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-cr);
808
- border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-rs);
809
- border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-se);
810
- border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-wh);
811
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
812
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
813
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
814
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
815
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
816
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
817
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
818
- box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-ae)
819
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-br)
820
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-sd)
821
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-cr);
822
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
521
+ border: 1px solid var(--_gray-300);
522
+ border-radius: 6px;
523
+ height: 40px;
524
+ background-color: var(--_base-white);
823
525
 
824
526
  &:focus-within {
825
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
826
- border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-cr);
827
- border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-rs);
828
- border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-se);
829
- border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-wh);
830
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
831
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
832
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
833
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
834
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
835
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
836
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
837
- box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-ae)
838
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-br)
839
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-sd)
840
- var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-cr);
841
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
527
+ border: 1px solid var(--_primary-300);
528
+ outline: 2px solid var(--_primary-100);
842
529
  }
843
530
 
844
531
  .custom-arrows {
@@ -857,29 +544,19 @@ $dark-color: #343a40;
857
544
  }
858
545
  }
859
546
 
860
- .input-field {
861
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
862
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
863
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
864
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
865
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
866
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
867
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
868
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
869
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
547
+ // .input-field {
548
+ // padding: 8px 12px;
549
+ // width: -webkit-fill-available;
550
+ // border: 1px solid var(--_gray-300);
551
+ // border-radius: 6px;
552
+ // height: 40px;
553
+ // background-color: var(--_base-white);
870
554
 
871
- &:focus-within {
872
- background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
873
- color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
874
- font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
875
- font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
876
- font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
877
- font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
878
- line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
879
- letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
880
- text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
881
- }
882
- }
555
+ // &:focus-within {
556
+ // border: 1px solid var(--_primary-300);
557
+ // outline: 2px solid var(--_primary-100);
558
+ // }
559
+ // }
883
560
  }
884
561
  }
885
562
 
@@ -905,14 +582,9 @@ $dark-color: #343a40;
905
582
  gap: 4px;
906
583
 
907
584
  .chk_shipping_method_heading {
908
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
909
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
910
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
911
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
912
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
913
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
914
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
915
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
585
+ color: var(--_gray-700);
586
+ font-weight: 700;
587
+ font-size: 16px;
916
588
  }
917
589
  }
918
590
 
@@ -997,14 +669,14 @@ $dark-color: #343a40;
997
669
  transition: all 0.2s;
998
670
  }
999
671
  input[type="radio"]:checked + .radio-style {
1000
- background-color: #fff;
1001
- border: 5px solid #1a3dcc;
672
+ background-color: var(--_base-white);
673
+ border: 5px solid var(--_primary-400);
1002
674
  }
1003
675
  }
1004
676
 
1005
677
  &.selected {
1006
- background-color: #f0f5ff;
1007
- border-color: #2563eb;
678
+ background-color: var(--_base-white);
679
+ border-color: var(--_primary-400);
1008
680
  }
1009
681
  }
1010
682
 
@@ -1025,78 +697,407 @@ $dark-color: #343a40;
1025
697
  display: flex;
1026
698
  flex-direction: column;
1027
699
  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
700
+ .payment_program {
701
+ // padding: 0 12px;
702
+ .payment_program_header {
703
+ display: flex;
704
+ justify-content: space-between;
705
+ gap: 8px;
706
+ align-items: center;
1028
707
 
1029
- .chk_primary_btn_link {
1030
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
1031
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
1032
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
1033
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
1034
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
1035
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
1036
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
1037
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
1038
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
1039
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
1040
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
1041
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
1042
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
1043
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
1044
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
1045
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
1046
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
1047
- text-align: left;
708
+ margin-bottom: 16px;
1048
709
 
1049
- &:hover {
1050
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
1051
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
1052
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
1053
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
1054
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
1055
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
1056
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
1057
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
1058
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
1059
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
1060
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
1061
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
1062
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
1063
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
1064
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
1065
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
1066
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
710
+ &_label {
711
+ display: flex;
712
+ justify-content: space-between;
713
+ align-items: center;
714
+ &_title {
715
+ font-size: 14px;
716
+ font-weight: 600;
717
+ color: var(--_gray-600);
718
+ }
719
+ &_pds {
720
+ &_label {
721
+ font-size: 14px;
722
+ color: var(--_gray-600);
723
+ }
724
+ &_value {
725
+ font-size: 14px;
726
+ color: var(--_gray-900);
727
+ }
728
+ }
729
+ }
1067
730
  }
1068
731
  }
1069
732
 
1070
733
  .chk_payment_option_wrapper {
1071
734
  display: flex;
1072
735
  flex-direction: column;
1073
- gap: var(--_ctm-lt-pt-os-gp-bn-cs);
736
+ border: 1px solid var(--_gray-300);
737
+ margin-bottom: 12px;
738
+ border-radius: 4px;
739
+ overflow: hidden;
740
+
741
+ .pp_pmnt_method_groups {
742
+ .pp_ppm_section {
743
+ background: #f5f5f5;
744
+ padding: 12px 16px;
745
+ font-size: 12px;
746
+ display: flex;
747
+ justify-content: space-between;
748
+ gap: 8px;
749
+ .pp_ppm_section_label {
750
+ font-size: 14px;
751
+ font-weight: 700;
752
+ color: var(--_gray-900);
753
+ }
754
+ .pp_ppm_section_value {
755
+ font-size: 14px;
756
+ font-weight: 700;
757
+ color: var(--_gray-600);
758
+ .pp_ppm_section_value_lable {
759
+ font-weight: 500;
760
+ color: var(--_gray-500);
761
+ }
762
+ }
763
+ }
764
+ .payment_methods {
765
+ // padding: 12px;
766
+ display: grid;
767
+ gap: 8px;
768
+ .chk_payment_option {
769
+ .chk_payment_section_wrapper {
770
+ width: 100%;
771
+ display: flex;
772
+ justify-content: space-between;
773
+ padding: 16px;
774
+ &:hover {
775
+ background-color: var(--_gray-50);
776
+ }
777
+ .chk_payment_section {
778
+ display: flex;
779
+ justify-content: space-between;
780
+ align-items: center;
781
+ width: 100%;
782
+ .chk_payment_section_col_left {
783
+ display: flex;
784
+ gap: 12px;
785
+ .chk_payment_section_method {
786
+ display: flex;
787
+ flex-direction: column;
788
+ .chk_payment_section_method_name {
789
+ font-size: 14px;
790
+ font-weight: 700;
791
+ line-height: 20px;
792
+ color: var(--_gray-700);
793
+ }
794
+ & > div {
795
+ display: flex;
796
+ .label {
797
+ font-size: 12px;
798
+ color: var(--_gray-500);
799
+ }
800
+ .price {
801
+ font-size: 12px;
802
+ color: var(--_gray-900);
803
+ }
804
+ }
805
+ }
806
+ }
807
+ &_col_right {
808
+ .chk_currency_inp {
809
+ height: 44px;
810
+ border: 1px solid var(--_gray-200);
811
+ border-radius: 4px;
812
+ background-color: var(--_base-white);
813
+ display: flex;
814
+ width: 120px;
815
+ overflow: hidden;
816
+ align-items: center;
817
+ padding-inline: 12px;
818
+ gap: 12px;
819
+ &:focus-within {
820
+ border: 1px solid var(--_primary-200);
821
+ outline: 2px solid var(--_primary-50);
822
+ }
823
+ input {
824
+ height: inherit;
825
+ }
826
+ }
827
+ }
828
+ }
829
+
830
+ .chk_payment_options_heading {
831
+ color: var(--_gray-900);
832
+ font-size: 16px;
833
+ font-weight: 700;
834
+ }
835
+
836
+ // gift card styles
837
+ .chk_gft_crd_wrapper {
838
+ display: flex;
839
+ justify-content: space-between;
840
+ align-items: center;
841
+ padding: 16px 16px 0 16px;
842
+ &_item {
843
+ display: flex;
844
+ align-items: center;
845
+ gap: 16px;
846
+ &_icon {
847
+ width: 40px;
848
+ height: 40px;
849
+ border: 1px solid var(--_gray-200);
850
+ border-radius: 6px;
851
+ display: flex;
852
+ justify-content: center;
853
+ align-items: center;
854
+ }
855
+ &_info {
856
+ display: flex;
857
+ flex-direction: column;
858
+ &_title {
859
+ font-size: 14px;
860
+ margin-bottom: 4px;
861
+ font-weight: 600;
862
+ }
863
+ &_desc {
864
+ display: flex;
865
+ &_value {
866
+ font-size: 12px;
867
+ color: var(--_gray-600);
868
+ }
869
+ &_label {
870
+ font-size: 12px;
871
+ color: var(--_gray-900);
872
+ }
873
+ }
874
+ }
875
+ &_pin {
876
+ margin-left: 36px;
877
+ input[type="number"] {
878
+ border: 1px solid var(--_gray-300);
879
+ border-radius: 4px;
880
+ background-color: var(--_base-white);
881
+ width: 95px;
882
+ height: 44px;
883
+ padding-inline: 10px;
884
+ &:focus {
885
+ outline: 2px solid var(--_primary-100);
886
+ border: 1px solid var(--_primary-300);
887
+ }
888
+ }
889
+ }
890
+ }
891
+
892
+ &_input {
893
+ border: 1px solid var(--_gray-300);
894
+ border-radius: 4px;
895
+ background-color: var(--_base-white);
896
+ height: 44px;
897
+ width: 100px;
898
+ display: flex;
899
+ align-items: center;
900
+ gap: 8px;
901
+ padding-left: 10px;
902
+ input[type="number"] {
903
+ background-color: var(--_base-white);
904
+ padding-right: 10px;
905
+ }
906
+ &:focus-within {
907
+ outline: 2px solid var(--_primary-100);
908
+ border: 1px solid var(--_primary-300);
909
+ }
910
+ }
911
+ }
912
+ .chk_gft_crd_wrapper {
913
+ &_btn {
914
+ text-align: left;
915
+ margin-bottom: 16px;
916
+ color: var(--_primary-400);
917
+ &:hover {
918
+ text-decoration: underline;
919
+ }
920
+ }
921
+ }
922
+
923
+ // payment other options styles
924
+ .chk_pmnt_other_options {
925
+ display: flex;
926
+ justify-content: space-between;
927
+ gap: 80px;
928
+ padding: 16px;
929
+ .chk_pmnt_other_options_left_container {
930
+ display: flex;
931
+ gap: 12px;
932
+ .chk_pmnt_option_info_wrapper {
933
+ display: flex;
934
+ gap: 12px;
935
+ .cards {
936
+ display: flex;
937
+ flex-direction: column;
938
+ gap: 8px;
939
+ .chk_payment_options_name {
940
+ font-weight: 600;
941
+ }
942
+ span {
943
+ font-size: 12px;
944
+ .chk_payment_options_label {
945
+ color: var(--_gray-600);
946
+ }
947
+ .chk_payment_options_value {
948
+ color: var(--_gray-900);
949
+ }
950
+ }
951
+ }
952
+ }
953
+ }
954
+ .chk_pmnt_other_options_container {
955
+ padding: 16px;
956
+ }
957
+ }
958
+
959
+ &__other_option_wrapper {
960
+ display: flex;
961
+ width: 100%;
962
+ justify-content: space-between;
963
+ padding: 16px;
964
+
965
+ @media (max-width: 500px) {
966
+ flex-direction: column;
967
+ }
968
+ }
969
+
970
+ &_left_container {
971
+ display: flex;
972
+ gap: 12px;
973
+ align-items: flex-start;
974
+ .chk_payment_option__info_wrapper {
975
+ display: flex;
976
+ gap: 0px;
977
+ }
978
+
979
+ @media (max-width: 500px) {
980
+ flex-wrap: wrap;
981
+ }
982
+ }
983
+
984
+ &__left_wrapper {
985
+ display: flex;
986
+ flex-direction: column;
987
+ align-items: flex-start;
988
+ gap: 16px;
989
+ }
990
+
991
+ &__card_icon {
992
+ width: 60px;
993
+ height: 40px;
994
+ }
995
+
996
+ &__info_wrapper {
997
+ display: flex;
998
+ flex-direction: column;
999
+
1000
+ .chk_payment_options_name {
1001
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1002
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1003
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1004
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1005
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1006
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1007
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1008
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1009
+ }
1010
+
1011
+ .chk_payment_options_label {
1012
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1013
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1014
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1015
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1016
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1017
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1018
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1019
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1020
+ }
1021
+
1022
+ .chk_payment_options_value {
1023
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1024
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1025
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1026
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1027
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1028
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1029
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1030
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1031
+ }
1032
+ }
1033
+
1034
+ &_right_container {
1035
+ display: flex;
1036
+ gap: 6px;
1037
+ align-items: flex-start;
1038
+
1039
+ @media (max-width: 500px) {
1040
+ justify-content: flex-end;
1041
+ }
1042
+ }
1043
+
1044
+ &_input {
1045
+ display: flex;
1046
+ padding: 9px 12px;
1047
+ align-items: center;
1048
+ max-width: 96px;
1049
+ background-color: var(--_base-white);
1050
+ border: 1px solid var(--_gray-300);
1051
+ border-radius: 6px;
1052
+ color: var(--_gray-700);
1053
+
1054
+ &:focus-within {
1055
+ border: 1px solid var(--_primary-300);
1056
+ outline: 2px solid var(--_primary-100);
1057
+ }
1058
+
1059
+ .icon {
1060
+ svg {
1061
+ path {
1062
+ stroke: var(--_primary-400);
1063
+ }
1064
+ }
1065
+ }
1066
+
1067
+ .input_field {
1068
+ background-color: var(--_base-white);
1069
+ border: 1px solid var(--_gray-300);
1070
+ border-radius: 6px;
1071
+ color: var(--_gray-700);
1072
+
1073
+ &:focus-within {
1074
+ border: 1px solid var(--_primary-300);
1075
+ outline: 2px solid var(--_primary-100);
1076
+ }
1077
+ }
1078
+ }
1079
+ }
1080
+ }
1081
+ }
1082
+ }
1074
1083
  }
1075
1084
 
1076
- .chk_payment_option {
1085
+ .chk_gft_crd_container {
1077
1086
  width: 100%;
1078
1087
  display: flex;
1079
1088
  flex-direction: column;
1080
1089
  gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1081
1090
  background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1082
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
1083
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-rs);
1084
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
1085
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-wh);
1086
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1087
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1088
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1089
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1091
+ border: 1px solid var(--_gray-300);
1092
+ border-radius: 4px;
1093
+ overflow: hidden;
1090
1094
 
1091
- .chk_payment_options_heading {
1092
- color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
1093
- font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1094
- font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1095
- font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1096
- font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
1097
- line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1098
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1099
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1095
+ .chk_gft_crd_option_heading {
1096
+ display: flex;
1097
+ justify-content: space-between;
1098
+ align-items: center;
1099
+ padding: 8px 12px;
1100
+ border-bottom: 1px solid var(--_gray-300);
1100
1101
  }
1101
1102
 
1102
1103
  // gift card styles
@@ -1160,7 +1161,7 @@ $dark-color: #343a40;
1160
1161
  border-radius: 4px;
1161
1162
  background-color: var(--_base-white);
1162
1163
  height: 44px;
1163
- width: 100px;
1164
+ width: 120px;
1164
1165
  display: flex;
1165
1166
  align-items: center;
1166
1167
  gap: 8px;
@@ -1235,7 +1236,7 @@ $dark-color: #343a40;
1235
1236
 
1236
1237
  &_left_container {
1237
1238
  display: flex;
1238
- gap: 80px;
1239
+ gap: 12px;
1239
1240
  align-items: flex-start;
1240
1241
  & > div {
1241
1242
  display: flex;
@@ -1259,59 +1260,14 @@ $dark-color: #343a40;
1259
1260
  height: 40px;
1260
1261
  }
1261
1262
 
1262
- &__remove_card_btn {
1263
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
1264
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
1265
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
1266
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
1267
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
1268
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
1269
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
1270
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
1271
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
1272
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
1273
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
1274
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
1275
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
1276
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
1277
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
1278
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
1279
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
1280
-
1281
- &:hover {
1282
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
1283
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
1284
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
1285
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
1286
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
1287
- color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
1288
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
1289
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
1290
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
1291
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
1292
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
1293
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
1294
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
1295
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
1296
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
1297
- var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
1298
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
1299
- }
1300
- }
1301
-
1302
1263
  &__info_wrapper {
1303
1264
  display: flex;
1304
1265
  flex-direction: column;
1305
1266
 
1306
1267
  .chk_payment_options_name {
1307
- color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1308
- font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1309
- font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1310
- font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1311
- font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1312
- line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1313
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1314
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1268
+ color: var(--_gray-900);
1269
+ font-size: 16px;
1270
+ font-weight: 600;
1315
1271
  }
1316
1272
 
1317
1273
  .chk_payment_options_label {
@@ -1349,81 +1305,38 @@ $dark-color: #343a40;
1349
1305
 
1350
1306
  &_input {
1351
1307
  display: flex;
1352
- padding: 9px 12px;
1353
- align-items: center;
1354
- max-width: 96px;
1355
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-bd-cr);
1356
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-cr);
1357
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-rs);
1358
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-se);
1359
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-wh);
1360
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1361
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1362
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1363
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1364
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1365
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1366
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1367
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-ae)
1368
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-br)
1369
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-sd)
1370
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-cr);
1371
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1308
+ padding: 8px 12px;
1309
+ width: -webkit-fill-available;
1310
+ background-color: var(--_base-white);
1311
+ border-radius: 6px;
1312
+ border: 1px solid var(--_gray-300);
1372
1313
 
1373
1314
  &:focus-within {
1374
- background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-bd-cr);
1375
- border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-cr);
1376
- border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-rs);
1377
- border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-se);
1378
- border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-wh);
1379
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1380
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1381
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1382
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1383
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1384
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1385
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1386
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-ae)
1387
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-br)
1388
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-sd)
1389
- var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-cr);
1390
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1315
+ border: 1px solid var(--_primary-300);
1316
+ outline: 2px solid var(--_primary-100);
1391
1317
  }
1392
1318
 
1393
1319
  .icon {
1394
1320
  svg {
1395
1321
  path {
1396
- stroke: #667085;
1322
+ stroke: var(--_primary-400);
1397
1323
  }
1398
1324
  }
1399
1325
  }
1400
1326
 
1401
1327
  .input_field {
1402
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1403
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1404
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1405
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1406
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1407
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1408
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1409
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1328
+ padding: 8px 12px;
1329
+ width: -webkit-fill-available;
1330
+ background-color: var(--_base-white);
1331
+ border-radius: 6px;
1332
+ border: 1px solid var(--_gray-300);
1410
1333
 
1411
1334
  &:focus-within {
1412
- color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1413
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1414
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1415
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1416
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1417
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1418
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1419
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1335
+ border: 1px solid var(--_primary-300);
1336
+ outline: 2px solid var(--_primary-100);
1420
1337
  }
1421
1338
  }
1422
1339
  }
1423
- &_error {
1424
- font-size: 14px;
1425
- color: var(--_error-700);
1426
- }
1427
1340
  }
1428
1341
 
1429
1342
  .chk_billing_address {
@@ -1445,14 +1358,9 @@ $dark-color: #343a40;
1445
1358
  }
1446
1359
 
1447
1360
  .chk_payment_options_heading {
1448
- color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
1449
- font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1450
- font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1451
- font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1452
- font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
1453
- line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1454
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1455
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1361
+ font-size: 18px;
1362
+ color: var(--_gray-900);
1363
+ font-weight: 600;
1456
1364
  &.pl_0 {
1457
1365
  padding-left: 0px;
1458
1366
  }
@@ -1519,79 +1427,32 @@ $dark-color: #343a40;
1519
1427
  }
1520
1428
 
1521
1429
  .chk_shipping_address_form_label {
1522
- white-space: nowrap;
1523
- color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
1524
- font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
1525
- font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
1526
- font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
1527
- font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
1528
- line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
1529
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
1530
- text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
1430
+ color: var(--_gray-600);
1431
+ font-size: 14px;
1531
1432
  }
1532
1433
 
1533
1434
  .chk_shiping_address_form_input {
1534
1435
  padding: 8px 12px;
1535
1436
  width: -webkit-fill-available;
1536
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1537
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
1538
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
1539
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
1540
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
1541
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1542
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1543
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1544
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1545
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1546
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1547
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1548
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
1549
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
1550
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
1551
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
1552
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1437
+ background-color: var(--_base-white);
1438
+ border-radius: 6px;
1439
+ border: 1px solid var(--_gray-300);
1553
1440
 
1554
1441
  &:focus-within {
1555
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1556
- border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
1557
- border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
1558
- border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
1559
- border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
1560
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1561
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1562
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1563
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1564
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1565
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1566
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1567
- box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
1568
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
1569
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
1570
- var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
1571
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1442
+ border: 1px solid var(--_primary-300);
1443
+ outline: 2px solid var(--_primary-100);
1572
1444
  }
1573
1445
 
1574
1446
  .input-field {
1575
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1576
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1577
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1578
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1579
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1580
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1581
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1582
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1583
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1447
+ padding: 8px 12px;
1448
+ width: -webkit-fill-available;
1449
+ background-color: var(--_base-white);
1450
+ border-radius: 6px;
1451
+ border: 1px solid var(--_gray-300);
1584
1452
 
1585
1453
  &:focus-within {
1586
- background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1587
- color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1588
- font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1589
- font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1590
- font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1591
- font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1592
- line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1593
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1594
- text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1454
+ border: 1px solid var(--_primary-300);
1455
+ outline: 2px solid var(--_primary-100);
1595
1456
  }
1596
1457
  }
1597
1458
  }
@@ -1660,48 +1521,6 @@ $dark-color: #343a40;
1660
1521
  gap: 8px;
1661
1522
  }
1662
1523
 
1663
- .chk_shipping_address_submit_btn {
1664
- padding: 12px 24px;
1665
- width: fit-content;
1666
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1667
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1668
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1669
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1670
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1671
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1672
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1673
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1674
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1675
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1676
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1677
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1678
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1679
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1680
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1681
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1682
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
1683
-
1684
- &:hover {
1685
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1686
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1687
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1688
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1689
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1690
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1691
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1692
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1693
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1694
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1695
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1696
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1697
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1698
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1699
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1700
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1701
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
1702
- }
1703
- }
1704
-
1705
1524
  &_same_as_billing_address_chkbx {
1706
1525
  color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1707
1526
  font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
@@ -1722,53 +1541,10 @@ $dark-color: #343a40;
1722
1541
 
1723
1542
  .payment_heading {
1724
1543
  padding: 12px;
1725
- border-bottom-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
1726
- border-bottom-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
1727
- border-bottom-width: thin;
1728
1544
  display: flex;
1729
1545
  justify-content: space-between;
1730
- }
1731
- }
1732
-
1733
- .chk_submit-btn {
1734
- padding: 12px 24px;
1735
- width: fit-content;
1736
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1737
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1738
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1739
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1740
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1741
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1742
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1743
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1744
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1745
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1746
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1747
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1748
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1749
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1750
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1751
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1752
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
1753
-
1754
- &:hover {
1755
- background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1756
- border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1757
- border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1758
- border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1759
- border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1760
- color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1761
- font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1762
- font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1763
- font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1764
- font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1765
- line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1766
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1767
- box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1768
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1769
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1770
- var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1771
- text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
1546
+ border-bottom: 1px solid var(--_gray-100);
1547
+ font-weight: 600;
1772
1548
  }
1773
1549
  }
1774
1550
 
@@ -1798,10 +1574,16 @@ $dark-color: #343a40;
1798
1574
  width: fit-content;
1799
1575
  align-items: center;
1800
1576
  font-family: sans-serif;
1577
+ gap: 12px;
1801
1578
 
1802
1579
  input[type="checkbox"] {
1803
1580
  display: none;
1804
1581
  }
1582
+ .payment_program_title {
1583
+ font-size: 14px;
1584
+ font-weight: 500;
1585
+ color: var(--_gray-900);
1586
+ }
1805
1587
 
1806
1588
  .chk_payment_options_use_as_billing_address_chkbx {
1807
1589
  display: flex;
@@ -1895,21 +1677,9 @@ $dark-color: #343a40;
1895
1677
  display: flex;
1896
1678
  align-items: center;
1897
1679
  gap: 6px;
1898
- background-color: var(--_ctm-dn-pt-os-dn-ne-dn-bd-cr);
1899
- border-color: var(--_ctm-dn-pt-os-dn-ne-dn-br-cr);
1900
- border-style: var(--_ctm-dn-pt-os-dn-ne-dn-br-se);
1901
- border-width: var(--_ctm-dn-pt-os-dn-ne-dn-br-wh);
1902
- color: var(--_ctm-dn-pt-os-dn-ne-dn-cr);
1903
- font-family: var(--_ctm-dn-pt-os-dn-ne-dn-ft-fy);
1904
- font-size: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se);
1905
- font-style: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se-ic);
1906
- font-weight: var(--_ctm-dn-pt-os-dn-ne-dn-ft-wt);
1907
- line-height: var(--_ctm-dn-pt-os-dn-ne-dn-le-ht);
1908
- letter-spacing: var(--_ctm-dn-pt-os-dn-ne-dn-lr-sg);
1909
- box-shadow: var(--_ctm-dn-pt-os-dn-ne-dn-sw-ae) var(--_ctm-dn-pt-os-dn-ne-dn-sw-br)
1910
- var(--_ctm-dn-pt-os-dn-ne-dn-sw-sd) var(--_ctm-dn-pt-os-dn-ne-dn-sw-cr);
1911
- text-align: var(--_ctm-dn-pt-os-dn-ne-dn-tt-an);
1912
- text-decoration: var(--_ctm-dn-pt-os-dn-ne-dn-ue);
1680
+ padding: 8px 16px;
1681
+ background-color: var(--_warning-100);
1682
+ color: var(--_warning-700);
1913
1683
 
1914
1684
  .icon {
1915
1685
  svg {
@@ -1945,47 +1715,24 @@ $dark-color: #343a40;
1945
1715
  gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
1946
1716
 
1947
1717
  .chk_saved_address_name {
1948
- color: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-cr);
1949
- font-family: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-fy);
1950
- font-size: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se);
1951
- font-style: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se-ic);
1952
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-wt);
1953
- line-height: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-le-ht);
1954
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-lr-sg);
1955
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ue);
1718
+ color: var(--_gray-700);
1719
+ font-size: 16px;
1720
+ font-weight: 600;
1956
1721
  }
1957
1722
 
1958
1723
  .chk_saved_address {
1959
- color: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-cr);
1960
- font-family: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-fy);
1961
- font-size: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se);
1962
- font-style: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se-ic);
1963
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-wt);
1964
- line-height: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-le-ht);
1965
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-lr-sg);
1966
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ue);
1724
+ color: var(--_gray-600);
1725
+ font-size: 12px;
1967
1726
  }
1968
1727
 
1969
1728
  .chk_saved_address_label {
1970
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-cr);
1971
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-fy);
1972
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se);
1973
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se-ic);
1974
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-wt);
1975
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-le-ht);
1976
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-lr-sg);
1977
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ue);
1729
+ color: var(--_gray-500);
1730
+ font-size: 12px;
1978
1731
  }
1979
1732
 
1980
1733
  .chk_saved_address_value {
1981
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-cr);
1982
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-fy);
1983
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se);
1984
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se-ic);
1985
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-wt);
1986
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-le-ht);
1987
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-lr-sg);
1988
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ue);
1734
+ color: var(--_gray-700);
1735
+ font-size: 12px;
1989
1736
  }
1990
1737
  }
1991
1738
 
@@ -2003,51 +1750,6 @@ $dark-color: #343a40;
2003
1750
  &:has(.chk_saved_address_button.selected) {
2004
1751
  display: flex !important;
2005
1752
  }
2006
-
2007
- .chk_saved_address_button {
2008
- cursor: pointer;
2009
- align-self: flex-start;
2010
- white-space: nowrap;
2011
- display: flex;
2012
- gap: 4px;
2013
- align-items: flex-start;
2014
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
2015
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
2016
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
2017
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
2018
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
2019
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
2020
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
2021
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
2022
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
2023
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
2024
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
2025
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
2026
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
2027
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
2028
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
2029
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
2030
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
2031
- &:hover {
2032
- background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
2033
- border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
2034
- border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
2035
- border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
2036
- border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
2037
- color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
2038
- font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
2039
- font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
2040
- font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
2041
- font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
2042
- line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
2043
- letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
2044
- box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
2045
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
2046
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
2047
- var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
2048
- text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
2049
- }
2050
- }
2051
1753
  }
2052
1754
 
2053
1755
  &:hover {
@@ -2066,7 +1768,7 @@ $dark-color: #343a40;
2066
1768
 
2067
1769
  // credit card form syles
2068
1770
  .chk_cred_form_details {
2069
- border-top: 1px solid var(--_gray-300);
1771
+ border-top: 1px solid var(--_gray-100);
2070
1772
  padding: 16px;
2071
1773
  .chk_basic_form_title {
2072
1774
  font-size: 14px;
@@ -2106,6 +1808,10 @@ $dark-color: #343a40;
2106
1808
  color: var(--_gray-400);
2107
1809
  padding-left: 16px;
2108
1810
  }
1811
+ &:focus {
1812
+ border: 1px solid var(--_primary-300);
1813
+ outline: 2px solid var(--_primary-100);
1814
+ }
2109
1815
  }
2110
1816
  .error_msg {
2111
1817
  display: block;
@@ -2199,6 +1905,14 @@ $dark-color: #343a40;
2199
1905
  border-radius: 6px;
2200
1906
  height: 40px;
2201
1907
  padding-inline: 10px;
1908
+ &:placeholder-shown {
1909
+ padding-left: 10px;
1910
+ color: var(--_gray-400);
1911
+ }
1912
+ &:focus {
1913
+ border: 1px solid var(--_primary-300);
1914
+ outline: 2px solid var(--_primary-100);
1915
+ }
2202
1916
  }
2203
1917
  &.pin {
2204
1918
  width: 110px;
@@ -2240,3 +1954,106 @@ $dark-color: #343a40;
2240
1954
  }
2241
1955
  }
2242
1956
  }
1957
+
1958
+ .chk_payment_cred_section {
1959
+ display: flex;
1960
+ justify-content: space-between;
1961
+ align-items: center;
1962
+ padding: 16px 16px 8px 16px;
1963
+
1964
+ .chk_currency_inp {
1965
+ height: 44px;
1966
+ border: 1px solid var(--_gray-200);
1967
+ border-radius: 4px;
1968
+ background-color: var(--_base-white);
1969
+ display: flex;
1970
+ width: 120px;
1971
+ overflow: hidden;
1972
+ align-items: center;
1973
+ padding-inline: 12px;
1974
+ gap: 12px;
1975
+ &:focus-within {
1976
+ border: 1px solid var(--_primary-200);
1977
+ outline: 2px solid var(--_primary-50);
1978
+ }
1979
+ input {
1980
+ height: inherit;
1981
+ }
1982
+ }
1983
+ .chk_payment_cred_section_col_left {
1984
+ .chk_payment_cred_section_col_left_crd_details {
1985
+ display: flex;
1986
+ gap: 80px;
1987
+ align-items: center;
1988
+ & > div {
1989
+ display: flex;
1990
+ gap: 12px;
1991
+ .card_icon {
1992
+ width: 60px;
1993
+ height: 40px;
1994
+ border-radius: 4px;
1995
+ }
1996
+ .card_details {
1997
+ .card_details_num {
1998
+ font-size: 12px;
1999
+ font-weight: 600;
2000
+ color: var(--_gray-900);
2001
+ }
2002
+ & > div {
2003
+ display: flex;
2004
+ .card_details_label {
2005
+ font-size: 12px;
2006
+ color: var(--_gray-500);
2007
+ }
2008
+ .card_details_value {
2009
+ font-size: 12px;
2010
+ color: var(--_gray-900);
2011
+ }
2012
+ }
2013
+ }
2014
+ }
2015
+ }
2016
+ }
2017
+ }
2018
+
2019
+ .chk_payment_remove_card {
2020
+ padding-inline: 16px;
2021
+ margin-bottom: 16px;
2022
+ .error_msg {
2023
+ font-size: 12px;
2024
+ color: var(--_error-700);
2025
+ }
2026
+ }
2027
+
2028
+ .tertiary_primary_btn {
2029
+ font-size: 12px;
2030
+ color: var(--_primary-400);
2031
+ display: inline-flex;
2032
+ &:hover {
2033
+ color: var(--_primary-500);
2034
+ text-decoration: underline;
2035
+ }
2036
+ }
2037
+ .chk_primary_bnt {
2038
+ padding: 12px 24px;
2039
+ background-color: var(--_primary-400);
2040
+ color: var(--_base-white);
2041
+ font-weight: 600;
2042
+ border-radius: 6px;
2043
+ width: max-content;
2044
+ &:hover {
2045
+ background-color: var(--_primary-500);
2046
+ }
2047
+ }
2048
+ .chk_secondary_bnt {
2049
+ padding: 12px 24px;
2050
+ background-color: transparent;
2051
+ color: var(--_gray-600);
2052
+ font-weight: 600;
2053
+ border-radius: 6px;
2054
+
2055
+ &:hover {
2056
+ background-color: var(--_gray-50);
2057
+ color: var(--_gray-900);
2058
+ }
2059
+ }