@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.40

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 (42) hide show
  1. package/dist/add-products-tab.scss +388 -0
  2. package/dist/badge.scss +84 -82
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +29 -34
  5. package/dist/buyForHeaders.scss +120 -2
  6. package/dist/buyForPopup.scss +41 -7
  7. package/dist/cart-details.scss +62 -65
  8. package/dist/cart-products-sidebar.scss +113 -83
  9. package/dist/cartAttributes.scss +277 -183
  10. package/dist/cartDropdownOverlay.scss +55 -27
  11. package/dist/checkout.scss +1017 -640
  12. package/dist/customization-tree.scss +42 -10
  13. package/dist/dropdownTemplate.scss +35 -25
  14. package/dist/employee-bulk-order.scss +219 -47
  15. package/dist/empty-states.scss +66 -66
  16. package/dist/functions.js +1 -1
  17. package/dist/functions.scss +7 -5
  18. package/dist/icons.js +1 -1
  19. package/dist/index.js +1 -1
  20. package/dist/item-stock.scss +27 -28
  21. package/dist/menu-v2.scss +2 -2
  22. package/dist/modal.scss +128 -75
  23. package/dist/past-orders.scss +272 -258
  24. package/dist/payment-methods.scss +70 -71
  25. package/dist/prefix-list.scss +1 -0
  26. package/dist/product-actions.scss +68 -68
  27. package/dist/product-sizechart.scss +13 -13
  28. package/dist/quick-links.scss +47 -48
  29. package/dist/quick-order-pad.scss +51 -51
  30. package/dist/quotes.scss +118 -116
  31. package/dist/review-cart.scss +196 -0
  32. package/dist/rfqs.scss +118 -116
  33. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  34. package/dist/types/builder/enums/index.d.ts +2 -0
  35. package/dist/types/builder/index.d.ts +2 -1
  36. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +542 -0
  37. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1747 -38
  38. package/dist/types/builder/tools/element-edit/checkout.d.ts +793 -254
  39. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  40. package/dist/video.scss +16 -7
  41. package/dist/widget.scss +2 -0
  42. package/package.json +1 -1
@@ -38,9 +38,15 @@ $dark-color: #343a40;
38
38
  padding: 2rem;
39
39
  gap: 2rem;
40
40
 
41
+ @media (max-width: 500px) {
42
+ flex-direction: column;
43
+ padding: 1rem;
44
+ }
45
+
41
46
  .sign_in_section {
42
47
  flex: 1;
43
48
  max-width: 500px;
49
+ word-break: keep-all;
44
50
 
45
51
  h2 {
46
52
  font-size: 1.75rem;
@@ -121,10 +127,7 @@ $dark-color: #343a40;
121
127
 
122
128
  .guest_box,
123
129
  .create_account_box {
124
- background: #f9f9f9;
125
130
  padding: 1.5rem;
126
- border-radius: 6px;
127
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
128
131
 
129
132
  h3 {
130
133
  font-size: 1.25rem;
@@ -138,16 +141,44 @@ $dark-color: #343a40;
138
141
  }
139
142
 
140
143
  .btn_secondary {
141
- background-color: #0032cc;
142
- color: white;
143
- border: none;
144
- padding: 0.6rem 1.2rem;
145
- font-size: 0.9rem;
146
- border-radius: 4px;
147
- cursor: pointer;
144
+ padding: 12px 24px;
145
+ width: fit-content;
146
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
147
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
148
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
149
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
150
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
151
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
152
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
153
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
154
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
155
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
156
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
157
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
158
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
159
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
160
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
161
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
162
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
148
163
 
149
164
  &:hover {
150
- background-color: #0028a3;
165
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
166
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
167
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
168
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
169
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
170
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
171
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
172
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
173
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
174
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
175
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
176
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
177
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
178
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
179
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
180
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
181
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
151
182
  }
152
183
  }
153
184
  }
@@ -161,73 +192,100 @@ $dark-color: #343a40;
161
192
  display: flex;
162
193
  padding: var(--_ctm-lt-pg);
163
194
  flex-direction: column;
164
- gap: var(--_ctm-lt-im-gp);
195
+ gap: var(--_ctm-lt-te-ad-it-gp);
165
196
  word-break: keep-all;
166
197
 
167
198
  .chk_checkout_title {
168
- font-size: 24px;
169
- font-weight: 700;
170
- line-height: 32px;
171
- color: var(--_ctm-dn-it-hs-dn-cr);
172
- font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
199
+ color: var(--_ctm-dn-ct-hg-dn-cr);
200
+ font-family: var(--_ctm-dn-ct-hg-dn-ft-fy);
201
+ font-size: var(--_ctm-dn-ct-hg-dn-ft-se);
202
+ font-style: var(--_ctm-dn-ct-hg-dn-ft-se-ic);
203
+ font-weight: var(--_ctm-dn-ct-hg-dn-ft-wt);
204
+ line-height: var(--_ctm-dn-ct-hg-dn-le-ht);
205
+ letter-spacing: var(--_ctm-dn-ct-hg-dn-lr-sg);
206
+ text-align: var(--_ctm-dn-ct-hg-dn-tt-an);
207
+ width: 100%;
208
+ text-decoration: var(--_ctm-dn-ct-hg-dn-ue);
173
209
  }
174
210
 
175
211
  .accordion {
176
212
  border-radius: 4px;
177
213
  display: flex;
178
- gap: var(--_ctm-lt-te-ad-it-gp);
214
+ gap: var(--_ctm-lt-an-hg-ad-ve-gp);
179
215
  flex-direction: column;
180
216
 
181
217
  .accordion-header {
182
- padding: 1rem;
218
+ padding: 12px;
183
219
  display: flex;
184
220
  justify-content: space-between;
185
- align-items: flex-start;
221
+ align-items: center;
186
222
  cursor: pointer;
187
- background-color: var(--_ctm-dn-sn-an-cr-dn-bd-cr);
188
- border-color: var(--_ctm-dn-sn-an-cr-dn-br-cr);
189
- border-radius: var(--_ctm-dn-sn-an-cr-dn-br-rs);
190
- border-style: var(--_ctm-dn-sn-an-cr-dn-br-se);
191
- border-width: var(--_ctm-dn-sn-an-cr-dn-br-wh);
192
- box-shadow: var(--_ctm-dn-sn-an-cr-dn-sw-ae) var(--_ctm-dn-sn-an-cr-dn-sw-br)
193
- var(--_ctm-dn-sn-an-cr-dn-sw-sd) var(--_ctm-dn-sn-an-cr-dn-sw-cr);
223
+ background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-bd-cr);
224
+ border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-cr);
225
+ border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-rs);
226
+ border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-se);
227
+ border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-wh);
228
+ box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-ae)
229
+ var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-br)
230
+ var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-sd)
231
+ var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-cr);
194
232
 
195
233
  .accordion-title {
196
234
  margin-right: 1rem;
197
235
  white-space: nowrap;
198
- color: var(--_ctm-dn-sn-an-te-dn-cr);
199
- font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
200
- font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
201
- font-style: var(--_ctm-dn-sn-an-te-dn-ft-se-ic);
202
- font-weight: var(--_ctm-dn-sn-an-te-dn-ft-wt);
203
- line-height: var(--_ctm-dn-sn-an-te-dn-le-ht);
204
- letter-spacing: var(--_ctm-dn-sn-an-te-dn-lr-sg);
205
- text-align: var(--_ctm-dn-sn-an-te-dn-tt-an);
206
- text-decoration: var(--_ctm-dn-sn-an-te-dn-ue);
236
+ display: flex;
237
+ align-items: center;
238
+ gap: var(--_ctm-lt-an-in-tt-gp);
239
+ color: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-cr);
240
+ font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-fy);
241
+ font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se);
242
+ font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se-ic);
243
+ font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-wt);
244
+ line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-le-ht);
245
+ letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-lr-sg);
246
+ text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ue);
207
247
  }
208
248
  .edit-btn {
209
- align-self: flex-end;
210
249
  cursor: pointer;
211
250
  padding: 0;
212
- background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
213
- border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
214
- border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
215
- border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
216
- border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
217
- color: var(--_ctm-dn-sn-an-bn-dn-cr);
218
- font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
219
- font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
220
- font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
221
- font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
222
- line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
223
- letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
224
- box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
225
- var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
226
- text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
227
- text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
251
+ background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-bd-cr);
252
+ border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-cr);
253
+ border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-rs);
254
+ border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-se);
255
+ border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-wh);
256
+ color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-cr);
257
+ font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-fy);
258
+ font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se);
259
+ font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se-ic);
260
+ font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-wt);
261
+ line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-le-ht);
262
+ letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-lr-sg);
263
+ box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-ae)
264
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-br)
265
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-sd)
266
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-cr);
267
+ text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-tt-an);
268
+ text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ue);
228
269
 
229
270
  &:hover {
230
- text-decoration: underline;
271
+ background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-bd-cr);
272
+ border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-cr);
273
+ border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-rs);
274
+ border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-se);
275
+ border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-wh);
276
+ color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-cr);
277
+ font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-fy);
278
+ font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se);
279
+ font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se-ic);
280
+ font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-wt);
281
+ line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-le-ht);
282
+ letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-lr-sg);
283
+ box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-ae)
284
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-br)
285
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-sd)
286
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-cr);
287
+ text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-tt-an);
288
+ text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ue);
231
289
  }
232
290
  }
233
291
  }
@@ -265,7 +323,7 @@ $dark-color: #343a40;
265
323
  display: flex;
266
324
  justify-content: space-between;
267
325
  flex-direction: row;
268
- gap: var(--_ctm-lt-im-gp);
326
+ gap: 12px;
269
327
  }
270
328
 
271
329
  .chk_shipping_address_input_container {
@@ -282,49 +340,85 @@ $dark-color: #343a40;
282
340
 
283
341
  .chk_shipping_address_form_label {
284
342
  white-space: nowrap;
285
- color: var(--_ctm-dn-it-ll-dn-cr);
286
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
287
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
288
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
289
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
290
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
291
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
292
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
293
- text-decoration: var(--_ctm-dn-it-ll-dn-ue);
343
+ color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
344
+ font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
345
+ font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
346
+ font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
347
+ font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
348
+ line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
349
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
350
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
294
351
  }
295
352
 
296
353
  .chk_shiping_address_form_input {
297
- padding: 10px;
354
+ padding: 8px 12px;
298
355
  width: -webkit-fill-available;
299
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
300
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
301
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
302
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
303
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
304
- color: var(--_ctm-dn-it-bx-dn-cr);
305
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
306
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
307
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
308
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
309
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
310
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
311
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
312
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
313
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
314
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
356
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
357
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
358
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
359
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
360
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
361
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
362
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
363
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
364
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
365
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
366
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
367
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
368
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
369
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
370
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
371
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
372
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
373
+
374
+ &:focus-within {
375
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
376
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
377
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
378
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
379
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
380
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
381
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
382
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
383
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
384
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
385
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
386
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
387
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
388
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
389
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
390
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
391
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
392
+ }
315
393
 
316
- .input-field {
317
- color: var(--_ctm-dn-it-bx-dn-cr);
318
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
319
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
320
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
321
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
322
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
323
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
324
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
325
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
326
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
327
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
394
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
395
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
396
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
397
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
398
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
399
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
400
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
401
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
402
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
403
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
404
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
405
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
406
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
407
+
408
+ &:focus-within {
409
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
410
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
411
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
412
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
413
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
414
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
415
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
416
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
417
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
418
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
419
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
420
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
421
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
328
422
  }
329
423
  }
330
424
 
@@ -351,56 +445,93 @@ $dark-color: #343a40;
351
445
  }
352
446
 
353
447
  .chk_shipping_address_submit_btn {
354
- padding: 8px 24px;
448
+ padding: 12px 24px;
355
449
  width: fit-content;
356
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
357
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
358
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
359
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
360
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
361
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
362
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
363
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
364
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
365
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
366
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
367
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
368
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
369
- var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
370
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
371
- text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
450
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
451
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
452
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
453
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
454
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
455
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
456
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
457
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
458
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
459
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
460
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
461
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
462
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
463
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
464
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
465
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
466
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
372
467
 
373
468
  &:hover {
374
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
375
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
376
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
377
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
378
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
379
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
380
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
381
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
382
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
383
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
384
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
385
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
386
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae)
387
- var(--_ctm-dn-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-it-bn-dn-hr-se-sw-sd)
388
- var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
389
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
390
- text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
469
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
470
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
471
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
472
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
473
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
474
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
475
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
476
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
477
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
478
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
479
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
480
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
481
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
482
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
483
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
484
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
485
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
391
486
  }
392
487
  }
393
488
 
394
489
  .chk_shipping_address_use_as_billing_address_chkbx {
395
- color: var(--_ctm-dn-cx-ll-dn-cr);
396
- font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
397
- font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
398
- font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
399
- font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
400
- line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
401
- letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
402
- text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
403
- text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
490
+ display: flex;
491
+ align-items: center;
492
+ gap: 0.5rem;
493
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
494
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
495
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
496
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
497
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
498
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
499
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
500
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
501
+
502
+ .custom-checkbox {
503
+ width: 20px;
504
+ height: 20px;
505
+ border: 1px solid #d0d5dd;
506
+ border-radius: 4px;
507
+ position: relative;
508
+ background-color: #fff;
509
+ transition: all 0.2s ease;
510
+
511
+ &::after {
512
+ content: "";
513
+ position: absolute;
514
+ display: none;
515
+ left: 5px;
516
+ top: 0.5px;
517
+ width: 5px;
518
+ height: 10px;
519
+ border: solid #fff;
520
+ border-width: 0 2px 2px 0;
521
+ transform: rotate(45deg);
522
+ }
523
+ }
524
+ }
525
+
526
+ input[type="checkbox"]:checked + label {
527
+ .custom-checkbox {
528
+ background-color: #004dff;
529
+ border-color: #004dff;
530
+
531
+ &::after {
532
+ display: block;
533
+ }
534
+ }
404
535
  }
405
536
  }
406
537
 
@@ -408,7 +539,7 @@ $dark-color: #343a40;
408
539
  display: flex;
409
540
  flex-direction: column;
410
541
  width: 100%;
411
- gap: var(--_ctm-lt-im-gp);
542
+ gap: 48px;
412
543
 
413
544
  &_product_container {
414
545
  display: flex;
@@ -433,29 +564,64 @@ $dark-color: #343a40;
433
564
  display: flex;
434
565
  flex: 1 0 0;
435
566
  width: 100%;
436
- gap: 16px;
567
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
437
568
  }
438
569
 
439
570
  &_product_image {
440
- height: 148px;
441
- width: 128px;
571
+ height: var(--_ctm-lt-me-as-pt-ie-ht);
572
+ width: var(--_ctm-lt-me-as-pt-ie-wh);
573
+ border: 1px solid var(--_gray-100);
574
+ border-radius: 6px;
442
575
  }
443
576
 
444
577
  &_product_info_wrapper {
445
578
  display: flex;
446
579
  flex-direction: column;
447
- gap: 6px;
580
+ gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
581
+
582
+ .chk_multi_address_product_name {
583
+ color: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-cr);
584
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-fy);
585
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se);
586
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se-ic);
587
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-wt);
588
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-le-ht);
589
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-lr-sg);
590
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ue);
591
+ }
592
+
593
+ .chk_multi_address_product_info {
594
+ color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
595
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
596
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
597
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
598
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
599
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
600
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
601
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
602
+ }
448
603
  }
449
604
 
450
605
  &_product_right_container {
451
606
  display: flex;
452
607
  flex-direction: row;
453
- gap: var(--_ctm-lt-im-gp);
454
- align-items: flex-start;
608
+ gap: 30px;
609
+ align-items: center;
455
610
 
456
611
  @media (max-width: 500px) {
457
612
  align-self: flex-end;
458
613
  }
614
+
615
+ .chk_multi_address_product_price {
616
+ color: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-cr);
617
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-fy);
618
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se);
619
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se-ic);
620
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
621
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
622
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-lr-sg);
623
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ue);
624
+ }
459
625
  }
460
626
 
461
627
  &_qty_wrapper {
@@ -463,12 +629,34 @@ $dark-color: #343a40;
463
629
  flex-direction: row;
464
630
  align-items: center;
465
631
  gap: 4px;
632
+
633
+ .chk_multi_address_product_label {
634
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-cr);
635
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-fy);
636
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se);
637
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se-ic);
638
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-wt);
639
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-le-ht);
640
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-lr-sg);
641
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ue);
642
+ }
643
+
644
+ .chk_multi_address_product_qty {
645
+ color: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-cr);
646
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-fy);
647
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se);
648
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se-ic);
649
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-wt);
650
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-le-ht);
651
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-lr-sg);
652
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ue);
653
+ }
466
654
  }
467
655
 
468
656
  &_shipping_option_container {
469
657
  display: flex;
470
658
  flex-direction: column;
471
- gap: 24px;
659
+ gap: var(--_ctm-lt-me-as-pt-io-hl-gp);
472
660
 
473
661
  @media (max-width: 500px) {
474
662
  flex-direction: row;
@@ -477,18 +665,37 @@ $dark-color: #343a40;
477
665
 
478
666
  &_shiping_option_heading_wrapper {
479
667
  display: grid;
480
- grid-template-columns: 1fr 2fr 2fr 0.5fr;
481
- gap: 16px;
668
+ grid-template-columns: 0.5fr 2fr 2fr auto;
669
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
482
670
  white-space: nowrap;
483
671
  align-items: center;
484
672
 
485
673
  @media (max-width: 500px) {
486
674
  grid-template-columns: auto;
487
675
  }
676
+
677
+ .chk_multi_address_product_label {
678
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-cr);
679
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-fy);
680
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se);
681
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se-ic);
682
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-wt);
683
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-le-ht);
684
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-lr-sg);
685
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ue);
686
+ }
488
687
  }
489
688
 
490
689
  .chk_multi_address_icon {
690
+ svg {
691
+ width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
692
+ height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
693
+ path {
694
+ stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
695
+ }
696
+ }
491
697
  &:hover {
698
+ cursor: pointer;
492
699
  svg {
493
700
  path {
494
701
  stroke: var(--_error-700);
@@ -497,25 +704,46 @@ $dark-color: #343a40;
497
704
  }
498
705
  }
499
706
  .chk_shiping_address_form_input {
500
- padding: 10px;
707
+ padding: 8px 12px;
501
708
  width: -webkit-fill-available;
502
709
  position: relative;
503
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
504
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
505
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
506
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
507
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
508
- color: var(--_ctm-dn-it-bx-dn-cr);
509
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
510
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
511
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
512
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
513
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
514
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
515
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
516
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
517
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
518
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
710
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
711
+ border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-cr);
712
+ border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-rs);
713
+ border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-se);
714
+ border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-wh);
715
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
716
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
717
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
718
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
719
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
720
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
721
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
722
+ box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-ae)
723
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-br)
724
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-sd)
725
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-cr);
726
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
727
+
728
+ &:focus-within {
729
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
730
+ border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-cr);
731
+ border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-rs);
732
+ border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-se);
733
+ border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-wh);
734
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
735
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
736
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
737
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
738
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
739
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
740
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
741
+ box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-ae)
742
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-br)
743
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-sd)
744
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-cr);
745
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
746
+ }
519
747
 
520
748
  .custom-arrows {
521
749
  position: absolute;
@@ -534,17 +762,27 @@ $dark-color: #343a40;
534
762
  }
535
763
 
536
764
  .input-field {
537
- color: var(--_ctm-dn-it-bx-dn-cr);
538
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
539
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
540
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
541
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
542
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
543
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
544
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
545
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
546
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
547
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
765
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
766
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
767
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
768
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
769
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
770
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
771
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
772
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
773
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
774
+
775
+ &:focus-within {
776
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
777
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
778
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
779
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
780
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
781
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
782
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
783
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
784
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
785
+ }
548
786
  }
549
787
  }
550
788
  }
@@ -552,7 +790,7 @@ $dark-color: #343a40;
552
790
  .shipping-method {
553
791
  display: flex;
554
792
  flex-direction: column;
555
- gap: var(--_ctm-lt-im-gp);
793
+ gap: var(--_ctm-lt-sg-md-le-gp);
556
794
 
557
795
  &__grid {
558
796
  display: grid;
@@ -567,7 +805,18 @@ $dark-color: #343a40;
567
805
  &__group {
568
806
  display: flex;
569
807
  flex-direction: column;
570
- gap: var(--_ctm-lt-ll-ad-it-gp);
808
+ gap: var(--_ctm-lt-sg-md-le-gp);
809
+
810
+ .chk_shipping_method_heading {
811
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
812
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
813
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
814
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
815
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
816
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
817
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
818
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
819
+ }
571
820
  }
572
821
 
573
822
  &__options {
@@ -582,12 +831,78 @@ $dark-color: #343a40;
582
831
  cursor: pointer;
583
832
  transition: all 0.2s ease;
584
833
 
585
- input[type="radio"] {
834
+ .custom_radio {
835
+ width: 20px;
586
836
  margin-right: 12px;
587
- width: 16px;
588
- height: 16px;
589
- accent-color: #2563eb;
590
- cursor: pointer;
837
+ height: 20px;
838
+ border: 1px solid #d0d5dd; /* blue ring */
839
+ border-radius: 50%;
840
+ display: inline-block;
841
+ box-sizing: border-box;
842
+ background-color: white;
843
+ transition: all 0.2s ease;
844
+
845
+ input[type="radio"]:checked + .radio-style {
846
+ background-color: #1a3dcc;
847
+ border: 6px solid;
848
+ }
849
+ }
850
+
851
+ .chk_shipping_method_label {
852
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
853
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
854
+ font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
855
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
856
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
857
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
858
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
859
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
860
+ }
861
+
862
+ .chk_shipping_method_value {
863
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-cr);
864
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
865
+ font-size: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se);
866
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
867
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
868
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
869
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg);
870
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue);
871
+ }
872
+
873
+ // input[type="radio"] {
874
+ // margin-right: 12px;
875
+ // width: 16px;
876
+ // height: 16px;
877
+ // accent-color: #2563eb;
878
+ // cursor: pointer;
879
+ // // display: none;
880
+ // }
881
+
882
+ .custom_radio {
883
+ position: relative;
884
+ input[type="radio"] {
885
+ margin-right: 12px;
886
+ width: 16px;
887
+ height: 16px;
888
+ accent-color: #2563eb;
889
+ cursor: pointer;
890
+ display: none;
891
+ }
892
+ .radio-style {
893
+ width: 20px;
894
+ height: 20px;
895
+ border-radius: 50%;
896
+ border: 1px solid #d0d5dd;
897
+ background: white;
898
+ display: inline-block;
899
+ box-sizing: border-box;
900
+ transition: all 0.2s;
901
+ }
902
+ input[type="radio"]:checked + .radio-style {
903
+ background-color: #fff;
904
+ border: 5px solid #1a3dcc;
905
+ }
591
906
  }
592
907
 
593
908
  &.selected {
@@ -600,25 +915,79 @@ $dark-color: #343a40;
600
915
  .chk_payment-options {
601
916
  display: flex;
602
917
  flex-direction: column;
603
- gap: var(--_ctm-lt-im-gp);
918
+ gap: var(--_ctm-lt-pt-os-gp-bn-cs);
919
+
920
+ .chk_primary_btn_link {
921
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
922
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
923
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
924
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
925
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
926
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
927
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
928
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
929
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
930
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
931
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
932
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
933
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
934
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
935
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
936
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
937
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
938
+
939
+ &:hover {
940
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
941
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
942
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
943
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
944
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
945
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
946
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
947
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
948
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
949
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
950
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
951
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
952
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
953
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
954
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
955
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
956
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
957
+ }
958
+ }
604
959
 
605
960
  .chk_payment_option_wrapper {
606
961
  display: flex;
607
- gap: var(--_ctm-lt-im-gp);
608
962
  flex-direction: column;
963
+ gap: var(--_ctm-lt-pt-os-gp-bn-cs);
609
964
  }
610
965
 
611
966
  .chk_payment_option {
612
967
  width: 100%;
613
968
  display: flex;
614
969
  flex-direction: column;
615
- background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
616
- border-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
617
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
618
- border-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
619
- border-width: var(--_ctm-dn-pt-os-cr-dn-br-wh);
620
- box-shadow: var(--_ctm-dn-pt-os-cr-dn-sw-ae) var(--_ctm-dn-pt-os-cr-dn-sw-br)
621
- var(--_ctm-dn-pt-os-cr-dn-sw-sd) var(--_ctm-dn-pt-os-cr-dn-sw-cr);
970
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
971
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
972
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
973
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-rs);
974
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
975
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-wh);
976
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
977
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
978
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
979
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
980
+
981
+ .chk_payment_options_heading {
982
+ color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
983
+ font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
984
+ font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
985
+ font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
986
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
987
+ line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
988
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
989
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
990
+ }
622
991
 
623
992
  &__other_option_wrapper {
624
993
  display: flex;
@@ -633,7 +1002,7 @@ $dark-color: #343a40;
633
1002
 
634
1003
  &_left_container {
635
1004
  display: flex;
636
- gap: 24px;
1005
+ gap: var(--_ctm-lt-pt-os-cr-vl-gp);
637
1006
  align-items: flex-start;
638
1007
 
639
1008
  @media (max-width: 500px) {
@@ -654,42 +1023,42 @@ $dark-color: #343a40;
654
1023
  }
655
1024
 
656
1025
  &__remove_card_btn {
657
- background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
658
- border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
659
- border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
660
- border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
661
- border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
662
- color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
663
- font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
664
- font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
665
- font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
666
- font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
667
- line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
668
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
669
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
670
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
671
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
672
- text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
673
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
1026
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
1027
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
1028
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
1029
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
1030
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
1031
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
1032
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
1033
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
1034
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
1035
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
1036
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
1037
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
1038
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
1039
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
1040
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
1041
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
1042
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
674
1043
 
675
1044
  &:hover {
676
- background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
677
- border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
678
- border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
679
- border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
680
- border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
681
- color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
682
- font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
683
- font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
684
- font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
685
- font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
686
- line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
687
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
688
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
689
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
690
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
691
- text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
692
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
1045
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
1046
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
1047
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
1048
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
1049
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
1050
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
1051
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
1052
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
1053
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
1054
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
1055
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
1056
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
1057
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
1058
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
1059
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
1060
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
1061
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
693
1062
  }
694
1063
  }
695
1064
 
@@ -698,6 +1067,39 @@ $dark-color: #343a40;
698
1067
  flex-direction: column;
699
1068
  gap: var(--_ctm-lt-ll-ad-it-gp);
700
1069
  white-space: nowrap;
1070
+
1071
+ .chk_payment_options_name {
1072
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1073
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1074
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1075
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1076
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1077
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1078
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1079
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1080
+ }
1081
+
1082
+ .chk_payment_options_label {
1083
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1084
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1085
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1086
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1087
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1088
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1089
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1090
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1091
+ }
1092
+
1093
+ .chk_payment_options_value {
1094
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1095
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1096
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1097
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1098
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1099
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1100
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1101
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1102
+ }
701
1103
  }
702
1104
 
703
1105
  &_right_container {
@@ -712,24 +1114,46 @@ $dark-color: #343a40;
712
1114
 
713
1115
  &_input {
714
1116
  display: flex;
715
- padding: 10px;
1117
+ padding: 10px 12px;
1118
+ align-items: center;
716
1119
  max-width: 96px;
717
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
718
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
719
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
720
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
721
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
722
- color: var(--_ctm-dn-it-bx-dn-cr);
723
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
724
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
725
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
726
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
727
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
728
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
729
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
730
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
731
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
732
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1120
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-bd-cr);
1121
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-cr);
1122
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-rs);
1123
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-se);
1124
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-wh);
1125
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1126
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1127
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1128
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1129
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1130
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1131
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1132
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-ae)
1133
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-br)
1134
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-sd)
1135
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-cr);
1136
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1137
+
1138
+ &:focus-within {
1139
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-bd-cr);
1140
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-cr);
1141
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-rs);
1142
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-se);
1143
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-wh);
1144
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1145
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1146
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1147
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1148
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1149
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1150
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1151
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-ae)
1152
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-br)
1153
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-sd)
1154
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-cr);
1155
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1156
+ }
733
1157
 
734
1158
  .icon {
735
1159
  svg {
@@ -740,15 +1164,25 @@ $dark-color: #343a40;
740
1164
  }
741
1165
 
742
1166
  .input_field {
743
- color: var(--_ctm-dn-it-bx-dn-cr);
744
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
745
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
746
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
747
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
748
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
749
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
750
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
751
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1167
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1168
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1169
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1170
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1171
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1172
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1173
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1174
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1175
+
1176
+ &:focus-within {
1177
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1178
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1179
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1180
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1181
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1182
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1183
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1184
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1185
+ }
752
1186
  }
753
1187
  }
754
1188
  }
@@ -757,8 +1191,11 @@ $dark-color: #343a40;
757
1191
  width: 100%;
758
1192
  display: flex;
759
1193
  flex-direction: column;
760
- background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
761
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1194
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1195
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1196
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1197
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1198
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
762
1199
 
763
1200
  &_form_container {
764
1201
  border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
@@ -785,13 +1222,24 @@ $dark-color: #343a40;
785
1222
  display: flex;
786
1223
  justify-content: space-between;
787
1224
  align-items: center;
1225
+
1226
+ .chk_heading_info {
1227
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1228
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1229
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1230
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1231
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1232
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1233
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1234
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1235
+ }
788
1236
  }
789
1237
 
790
1238
  form {
791
1239
  display: flex;
792
1240
  flex-direction: column;
793
1241
  gap: 0.75rem;
794
- max-width: calc(100% - 200px);
1242
+ max-width: 85%;
795
1243
 
796
1244
  @media (max-width: 500px) {
797
1245
  max-width: 100%;
@@ -802,7 +1250,7 @@ $dark-color: #343a40;
802
1250
  display: flex;
803
1251
  justify-content: space-between;
804
1252
  flex-direction: row;
805
- gap: var(--_ctm-lt-im-gp);
1253
+ gap: 12px;
806
1254
  }
807
1255
 
808
1256
  .chk_shipping_address_input_container {
@@ -819,49 +1267,79 @@ $dark-color: #343a40;
819
1267
 
820
1268
  .chk_shipping_address_form_label {
821
1269
  white-space: nowrap;
822
- color: var(--_ctm-dn-it-ll-dn-cr);
823
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
824
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
825
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
826
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
827
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
828
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
829
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
830
- text-decoration: var(--_ctm-dn-it-ll-dn-ue);
1270
+ color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
1271
+ font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
1272
+ font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
1273
+ font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
1274
+ font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
1275
+ line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
1276
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
1277
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
831
1278
  }
832
1279
 
833
1280
  .chk_shiping_address_form_input {
834
- padding: 10px;
1281
+ padding: 8px 12px;
835
1282
  width: -webkit-fill-available;
836
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
837
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
838
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
839
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
840
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
841
- color: var(--_ctm-dn-it-bx-dn-cr);
842
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
843
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
844
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
845
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
846
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
847
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
848
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
849
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
850
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
851
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1283
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1284
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
1285
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
1286
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
1287
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
1288
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1289
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1290
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1291
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1292
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1293
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1294
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1295
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
1296
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
1297
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
1298
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
1299
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1300
+
1301
+ &:focus-within {
1302
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1303
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
1304
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
1305
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
1306
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
1307
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1308
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1309
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1310
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1311
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1312
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1313
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1314
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
1315
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
1316
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
1317
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
1318
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1319
+ }
852
1320
 
853
1321
  .input-field {
854
- color: var(--_ctm-dn-it-bx-dn-cr);
855
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
856
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
857
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
858
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
859
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
860
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
861
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
862
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
863
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
864
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1322
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1323
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1324
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1325
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1326
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1327
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1328
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1329
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1330
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1331
+
1332
+ &:focus-within {
1333
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1334
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1335
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1336
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1337
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1338
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1339
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1340
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1341
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1342
+ }
865
1343
  }
866
1344
  }
867
1345
 
@@ -873,11 +1351,53 @@ $dark-color: #343a40;
873
1351
  font-size: 12px;
874
1352
  color: #ff0000;
875
1353
  }
876
- label {
1354
+
1355
+ .chk_shipping_address_use_as_billing_address_chkbx {
877
1356
  display: flex;
878
1357
  align-items: center;
879
1358
  gap: 0.5rem;
880
- font-size: 14px;
1359
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1360
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1361
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1362
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1363
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1364
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1365
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1366
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1367
+
1368
+ .custom-checkbox {
1369
+ width: 20px;
1370
+ height: 20px;
1371
+ border: 1px solid #d0d5dd;
1372
+ border-radius: 4px;
1373
+ position: relative;
1374
+ background-color: #fff;
1375
+ transition: all 0.2s ease;
1376
+
1377
+ &::after {
1378
+ content: "";
1379
+ position: absolute;
1380
+ display: none;
1381
+ left: 5px;
1382
+ top: 0.5px;
1383
+ width: 5px;
1384
+ height: 10px;
1385
+ border: solid #fff;
1386
+ border-width: 0 2px 2px 0;
1387
+ transform: rotate(45deg);
1388
+ }
1389
+ }
1390
+ }
1391
+
1392
+ input[type="checkbox"]:checked + label {
1393
+ .custom-checkbox {
1394
+ background-color: #004dff;
1395
+ border-color: #004dff;
1396
+
1397
+ &::after {
1398
+ display: block;
1399
+ }
1400
+ }
881
1401
  }
882
1402
 
883
1403
  .checkbox-group {
@@ -888,78 +1408,58 @@ $dark-color: #343a40;
888
1408
  }
889
1409
 
890
1410
  .chk_shipping_address_submit_btn {
891
- padding: 8px 24px;
1411
+ padding: 12px 24px;
892
1412
  width: fit-content;
893
- background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
894
- border-color: var(--_ctm-dn-it-bn-dn-br-cr);
895
- border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
896
- border-style: var(--_ctm-dn-it-bn-dn-br-se);
897
- border-width: var(--_ctm-dn-it-bn-dn-br-wh);
898
- color: var(--_ctm-dn-it-bn-dn-cr);
899
- font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
900
- font-size: var(--_ctm-dn-it-bn-dn-ft-se);
901
- font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
902
- font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
903
- line-height: var(--_ctm-dn-it-bn-dn-le-ht);
904
- letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
905
- box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
906
- var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
907
- text-align: var(--_ctm-dn-it-bn-dn-tt-an);
908
- text-decoration: var(--_ctm-dn-it-bn-dn-ue);
909
- }
910
-
911
- &_same_as_billing_address_chkbx {
912
- color: var(--_ctm-dn-cx-ll-dn-cr);
913
- font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
914
- font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
915
- font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
916
- font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
917
- line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
918
- letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
919
- text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
920
- text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
921
- }
922
-
923
- &_secondary_button {
924
- background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
925
- border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
926
- border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
927
- border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
928
- border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
929
- color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
930
- font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
931
- font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
932
- font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
933
- font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
934
- line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
935
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
936
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
937
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
938
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
939
- text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
940
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
1413
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1414
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1415
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1416
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1417
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1418
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1419
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1420
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1421
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1422
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1423
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1424
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1425
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1426
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1427
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1428
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1429
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
941
1430
 
942
1431
  &:hover {
943
- background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
944
- border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
945
- border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
946
- border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
947
- border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
948
- color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
949
- font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
950
- font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
951
- font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
952
- font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
953
- line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
954
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
955
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
956
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
957
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
958
- text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
959
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
1432
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1433
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1434
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1435
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1436
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1437
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1438
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1439
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1440
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1441
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1442
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1443
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1444
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1445
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1446
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1447
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1448
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
960
1449
  }
961
1450
  }
962
1451
 
1452
+ &_same_as_billing_address_chkbx {
1453
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1454
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1455
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1456
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1457
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1458
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1459
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1460
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1461
+ }
1462
+
963
1463
  &_button_wrapper {
964
1464
  display: flex;
965
1465
  align-items: center;
@@ -969,211 +1469,53 @@ $dark-color: #343a40;
969
1469
 
970
1470
  .payment_heading {
971
1471
  padding: 12px;
972
- border-bottom-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
973
- border-bottom-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
1472
+ border-bottom-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
1473
+ border-bottom-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
974
1474
  border-bottom-width: thin;
975
1475
  display: flex;
976
1476
  justify-content: space-between;
977
1477
  }
978
-
979
- .chk_payment-card {
980
- max-width: 50%;
981
-
982
- &__form {
983
- display: grid;
984
- gap: 12px;
985
- }
986
-
987
- &__input_wrapper {
988
- display: flex;
989
- flex-direction: column;
990
- gap: var(--_ctm-lt-ll-ad-it-gp);
991
- width: 100%;
992
- }
993
-
994
- &__label {
995
- display: flex;
996
- flex-direction: column;
997
- white-space: nowrap;
998
- color: var(--_ctm-dn-it-ll-dn-cr);
999
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
1000
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
1001
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
1002
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
1003
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
1004
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
1005
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
1006
- text-decoration: var(--_ctm-dn-it-ll-dn-ue);
1007
- }
1008
-
1009
- &__card-input-with-logo {
1010
- position: relative;
1011
-
1012
- input {
1013
- padding-right: 50px;
1014
- }
1015
-
1016
- .chk_payment-card__logo {
1017
- position: absolute;
1018
- right: 10px;
1019
- top: 50%;
1020
- transform: translateY(-50%);
1021
- height: 24px;
1022
- width: auto;
1023
- pointer-events: none;
1024
- }
1025
- }
1026
-
1027
- &__input {
1028
- padding: 10px;
1029
- width: -webkit-fill-available;
1030
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
1031
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
1032
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
1033
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
1034
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
1035
- color: var(--_ctm-dn-it-bx-dn-cr);
1036
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1037
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1038
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1039
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1040
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1041
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1042
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1043
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1044
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1045
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1046
-
1047
- .input-field {
1048
- color: var(--_ctm-dn-it-bx-dn-cr);
1049
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1050
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1051
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1052
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1053
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1054
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1055
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1056
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1057
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1058
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1059
- }
1060
- }
1061
-
1062
- &__row {
1063
- display: flex;
1064
- gap: var(--_ctm-lt-im-gp);
1065
- }
1066
-
1067
- &__half {
1068
- flex: 1;
1069
- }
1070
-
1071
- &__button {
1072
- padding: 10px;
1073
- background-color: #007bff;
1074
- color: white;
1075
- border: none;
1076
- border-radius: 4px;
1077
- font-weight: bold;
1078
- cursor: pointer;
1079
- }
1080
-
1081
- &__saved {
1082
- border: 1px solid #ccc;
1083
- border-radius: 8px;
1084
- padding: 16px;
1085
- display: grid;
1086
- gap: 10px;
1087
- }
1088
-
1089
- &__info {
1090
- display: flex;
1091
- align-items: center;
1092
- gap: 10px;
1093
-
1094
- img {
1095
- width: 40px;
1096
- height: auto;
1097
- }
1098
- }
1099
-
1100
- &__meta {
1101
- font-size: 0.9rem;
1102
- color: #666;
1103
- }
1104
-
1105
- &__actions {
1106
- display: flex;
1107
- gap: 10px;
1108
-
1109
- button {
1110
- flex: 1;
1111
- }
1112
-
1113
- input {
1114
- flex: 1;
1115
- }
1116
- }
1117
-
1118
- &__remove {
1119
- background: none;
1120
- border: none;
1121
- color: #007bff;
1122
- padding: 0;
1123
- font-size: 0.9rem;
1124
- cursor: pointer;
1125
- text-align: left;
1126
- }
1127
- }
1128
1478
  }
1129
1479
 
1130
1480
  .chk_submit-btn {
1131
- padding: 8px 24px;
1481
+ padding: 12px 24px;
1132
1482
  width: fit-content;
1133
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
1134
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
1135
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
1136
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
1137
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
1138
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
1139
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
1140
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
1141
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
1142
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
1143
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
1144
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
1145
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
1146
- var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
1147
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
1148
- text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
1483
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1484
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1485
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1486
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1487
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1488
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1489
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1490
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1491
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1492
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1493
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1494
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1495
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1496
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1497
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1498
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1499
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
1149
1500
 
1150
1501
  &:hover {
1151
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
1152
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
1153
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
1154
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
1155
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
1156
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
1157
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
1158
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
1159
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
1160
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
1161
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
1162
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
1163
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
1164
- var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
1165
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
1166
- text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
1167
- }
1168
- }
1169
-
1170
- .chk_checkbox_wrapper {
1171
- display: flex;
1172
- align-items: flex-start;
1173
- gap: 6px;
1174
-
1175
- input {
1176
- width: auto !important;
1502
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1503
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1504
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1505
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1506
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1507
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1508
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1509
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1510
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1511
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1512
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1513
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1514
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1515
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1516
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1517
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1518
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
1177
1519
  }
1178
1520
  }
1179
1521
 
@@ -1192,48 +1534,12 @@ $dark-color: #343a40;
1192
1534
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1193
1535
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1194
1536
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1195
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1537
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1196
1538
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1197
1539
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1198
1540
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1199
1541
  }
1200
1542
 
1201
- .chk_heading_info {
1202
- color: var(--_ctm-dn-it-hs-dn-cr);
1203
- font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
1204
- font-size: var(--_ctm-dn-it-hs-dn-ft-se);
1205
- font-style: var(--_ctm-dn-it-hs-dn-ft-se-ic);
1206
- font-weight: var(--_ctm-dn-it-hs-dn-ft-wt);
1207
- line-height: var(--_ctm-dn-it-hs-dn-le-ht);
1208
- letter-spacing: var(--_ctm-dn-it-hs-dn-lr-sg);
1209
- text-align: var(--_ctm-dn-it-hs-dn-tt-an);
1210
- text-decoration: var(--_ctm-dn-it-hs-dn-ue);
1211
- }
1212
-
1213
- .chk_primary_info {
1214
- color: var(--_ctm-dn-py-ve-tt-dn-cr);
1215
- font-family: var(--_ctm-dn-py-ve-tt-dn-ft-fy);
1216
- font-size: var(--_ctm-dn-py-ve-tt-dn-ft-se);
1217
- font-style: var(--_ctm-dn-py-ve-tt-dn-ft-se-ic);
1218
- font-weight: var(--_ctm-dn-py-ve-tt-dn-ft-wt);
1219
- line-height: var(--_ctm-dn-py-ve-tt-dn-le-ht);
1220
- letter-spacing: var(--_ctm-dn-py-ve-tt-dn-lr-sg);
1221
- text-align: var(--_ctm-dn-py-ve-tt-dn-tt-an);
1222
- text-decoration: var(--_ctm-dn-py-ve-tt-dn-ue);
1223
- }
1224
-
1225
- .chk_secondary_info {
1226
- color: var(--_ctm-dn-sy-ve-tt-dn-cr);
1227
- font-family: var(--_ctm-dn-sy-ve-tt-dn-ft-fy);
1228
- font-size: var(--_ctm-dn-sy-ve-tt-dn-ft-se);
1229
- font-style: var(--_ctm-dn-sy-ve-tt-dn-ft-se-ic);
1230
- font-weight: var(--_ctm-dn-sy-ve-tt-dn-ft-wt);
1231
- line-height: var(--_ctm-dn-sy-ve-tt-dn-le-ht);
1232
- letter-spacing: var(--_ctm-dn-sy-ve-tt-dn-lr-sg);
1233
- text-align: var(--_ctm-dn-sy-ve-tt-dn-tt-an);
1234
- text-decoration: var(--_ctm-dn-sy-ve-tt-dn-ue);
1235
- }
1236
-
1237
1543
  .chk_checkbox_wrapper {
1238
1544
  display: flex;
1239
1545
  width: fit-content;
@@ -1244,11 +1550,19 @@ $dark-color: #343a40;
1244
1550
  display: none;
1245
1551
  }
1246
1552
 
1247
- .chk_shipping_address_use_as_billing_address_chkbx {
1553
+ .chk_payment_options_use_as_billing_address_chkbx {
1248
1554
  display: flex;
1249
1555
  align-items: center;
1250
1556
  cursor: pointer;
1251
1557
  gap: 10px;
1558
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
1559
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
1560
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
1561
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
1562
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
1563
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
1564
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
1565
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
1252
1566
 
1253
1567
  .custom-checkbox {
1254
1568
  width: 20px;
@@ -1285,60 +1599,34 @@ $dark-color: #343a40;
1285
1599
  }
1286
1600
  }
1287
1601
  }
1288
-
1289
- .chk_change-link {
1290
- cursor: pointer;
1291
- align-self: flex-start;
1292
- white-space: nowrap;
1293
- display: flex;
1294
- gap: 4px;
1295
- align-items: center;
1296
- background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
1297
- border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
1298
- border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1299
- border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
1300
- border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
1301
- color: var(--_ctm-dn-sn-an-bn-dn-cr);
1302
- font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
1303
- font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
1304
- font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
1305
- font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
1306
- line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
1307
- letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
1308
- box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
1309
- var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
1310
- text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
1311
- text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
1312
- }
1313
-
1314
1602
  .chk_payment-card__note {
1315
1603
  padding: 8px 6px;
1316
1604
  display: flex;
1317
1605
  align-items: center;
1318
1606
  gap: 6px;
1319
- background-color: var(--_ctm-dn-ne-cr-dn-bd-cr);
1320
- border-color: var(--_ctm-dn-ne-cr-dn-br-cr);
1321
- border-radius: var(--_ctm-dn-ne-cr-dn-br-rs);
1322
- border-style: var(--_ctm-dn-ne-cr-dn-br-se);
1323
- border-width: var(--_ctm-dn-ne-cr-dn-br-wh);
1324
- color: var(--_ctm-dn-ne-cr-dn-cr);
1325
- font-family: var(--_ctm-dn-ne-cr-dn-ft-fy);
1326
- font-size: var(--_ctm-dn-ne-cr-dn-ft-se);
1327
- font-style: var(--_ctm-dn-ne-cr-dn-ft-se-ic);
1328
- font-weight: var(--_ctm-dn-ne-cr-dn-ft-wt);
1329
- line-height: var(--_ctm-dn-ne-cr-dn-le-ht);
1330
- letter-spacing: var(--_ctm-dn-ne-cr-dn-lr-sg);
1331
- box-shadow: var(--_ctm-dn-ne-cr-dn-sw-ae) var(--_ctm-dn-ne-cr-dn-sw-br)
1332
- var(--_ctm-dn-ne-cr-dn-sw-sd) var(--_ctm-dn-ne-cr-dn-sw-cr);
1333
- text-align: var(--_ctm-dn-ne-cr-dn-tt-an);
1334
- text-decoration: var(--_ctm-dn-ne-cr-dn-ue);
1607
+ background-color: var(--_ctm-dn-pt-os-dn-ne-dn-bd-cr);
1608
+ border-color: var(--_ctm-dn-pt-os-dn-ne-dn-br-cr);
1609
+ border-radius: var(--_ctm-dn-pt-os-dn-ne-dn-br-rs);
1610
+ border-style: var(--_ctm-dn-pt-os-dn-ne-dn-br-se);
1611
+ border-width: var(--_ctm-dn-pt-os-dn-ne-dn-br-wh);
1612
+ color: var(--_ctm-dn-pt-os-dn-ne-dn-cr);
1613
+ font-family: var(--_ctm-dn-pt-os-dn-ne-dn-ft-fy);
1614
+ font-size: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se);
1615
+ font-style: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se-ic);
1616
+ font-weight: var(--_ctm-dn-pt-os-dn-ne-dn-ft-wt);
1617
+ line-height: var(--_ctm-dn-pt-os-dn-ne-dn-le-ht);
1618
+ letter-spacing: var(--_ctm-dn-pt-os-dn-ne-dn-lr-sg);
1619
+ box-shadow: var(--_ctm-dn-pt-os-dn-ne-dn-sw-ae) var(--_ctm-dn-pt-os-dn-ne-dn-sw-br)
1620
+ var(--_ctm-dn-pt-os-dn-ne-dn-sw-sd) var(--_ctm-dn-pt-os-dn-ne-dn-sw-cr);
1621
+ text-align: var(--_ctm-dn-pt-os-dn-ne-dn-tt-an);
1622
+ text-decoration: var(--_ctm-dn-pt-os-dn-ne-dn-ue);
1335
1623
 
1336
1624
  .icon {
1337
1625
  svg {
1338
- width: var(--_ctm-dn-ne-cr-dn-in-se);
1339
- height: var(--_ctm-dn-ne-cr-dn-in-se);
1626
+ width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
1627
+ height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
1340
1628
  path {
1341
- stroke: var(--_ctm-dn-ne-cr-dn-in-c1);
1629
+ stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
1342
1630
  }
1343
1631
  }
1344
1632
  }
@@ -1359,12 +1647,56 @@ $dark-color: #343a40;
1359
1647
  .chk_shipping-summary {
1360
1648
  display: flex;
1361
1649
  flex-direction: column;
1362
- gap: 12px;
1650
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
1363
1651
 
1364
1652
  .chk_address {
1365
1653
  display: flex;
1366
1654
  flex-direction: column;
1367
- gap: 6px;
1655
+ gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
1656
+
1657
+ .chk_saved_address_name {
1658
+ color: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-cr);
1659
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-fy);
1660
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se);
1661
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se-ic);
1662
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-wt);
1663
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-le-ht);
1664
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-lr-sg);
1665
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ue);
1666
+ }
1667
+
1668
+ .chk_saved_address {
1669
+ color: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-cr);
1670
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-fy);
1671
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se);
1672
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se-ic);
1673
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-wt);
1674
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-le-ht);
1675
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-lr-sg);
1676
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ue);
1677
+ }
1678
+
1679
+ .chk_saved_address_label {
1680
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-cr);
1681
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-fy);
1682
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se);
1683
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se-ic);
1684
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-wt);
1685
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-le-ht);
1686
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-lr-sg);
1687
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ue);
1688
+ }
1689
+
1690
+ .chk_saved_address_value {
1691
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-cr);
1692
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-fy);
1693
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se);
1694
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se-ic);
1695
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-wt);
1696
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-le-ht);
1697
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-lr-sg);
1698
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ue);
1699
+ }
1368
1700
  }
1369
1701
 
1370
1702
  .contact {
@@ -1377,6 +1709,51 @@ $dark-color: #343a40;
1377
1709
  .right-btn {
1378
1710
  display: flex;
1379
1711
  gap: 24px;
1712
+
1713
+ .chk_saved_address_button {
1714
+ cursor: pointer;
1715
+ align-self: flex-start;
1716
+ white-space: nowrap;
1717
+ display: flex;
1718
+ gap: 4px;
1719
+ align-items: center;
1720
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
1721
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
1722
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
1723
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
1724
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
1725
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
1726
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
1727
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
1728
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
1729
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
1730
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
1731
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
1732
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
1733
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
1734
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
1735
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
1736
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
1737
+ &:hover {
1738
+ background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
1739
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
1740
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
1741
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
1742
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
1743
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
1744
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
1745
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
1746
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
1747
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
1748
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
1749
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
1750
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
1751
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
1752
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
1753
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
1754
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
1755
+ }
1756
+ }
1380
1757
  }
1381
1758
  }
1382
1759
  }