@sc-360-v2/storefront-cms-library 0.3.39 → 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 (18) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/buyForHeaders.scss +120 -2
  3. package/dist/buyForPopup.scss +41 -7
  4. package/dist/cart-details.scss +30 -30
  5. package/dist/cartAttributes.scss +97 -0
  6. package/dist/cartDropdownOverlay.scss +6 -0
  7. package/dist/checkout.scss +1007 -719
  8. package/dist/functions.js +1 -1
  9. package/dist/icons.js +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/modal.scss +24 -0
  12. package/dist/review-cart.scss +196 -0
  13. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +412 -288
  14. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1747 -38
  15. package/dist/types/builder/tools/element-edit/checkout.d.ts +793 -254
  16. package/dist/video.scss +16 -7
  17. package/dist/widget.scss +1 -0
  18. package/package.json +1 -1
package/dist/checkout.scss CHANGED
@@ -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,42 +141,44 @@ $dark-color: #343a40;
138
141
  }
139
142
 
140
143
  .btn_secondary {
141
- padding: 16px 24px;
144
+ padding: 12px 24px;
142
145
  width: fit-content;
143
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
144
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
145
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
146
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
147
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
148
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
149
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
150
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
151
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
152
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
153
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
154
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
155
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
156
- var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
157
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
158
- text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
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);
159
163
 
160
164
  &:hover {
161
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
162
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
163
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
164
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
165
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
166
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
167
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
168
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
169
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
170
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
171
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
172
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
173
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
174
- var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
175
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
176
- text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
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);
177
182
  }
178
183
  }
179
184
  }
@@ -187,75 +192,100 @@ $dark-color: #343a40;
187
192
  display: flex;
188
193
  padding: var(--_ctm-lt-pg);
189
194
  flex-direction: column;
190
- gap: var(--_ctm-lt-im-gp);
195
+ gap: var(--_ctm-lt-te-ad-it-gp);
191
196
  word-break: keep-all;
192
197
 
193
198
  .chk_checkout_title {
194
- font-size: 24px;
195
- font-weight: 700;
196
- line-height: 32px;
197
- color: var(--_ctm-dn-it-hs-dn-cr);
198
- 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);
199
209
  }
200
210
 
201
211
  .accordion {
202
212
  border-radius: 4px;
203
213
  display: flex;
204
- gap: var(--_ctm-lt-te-ad-it-gp);
214
+ gap: var(--_ctm-lt-an-hg-ad-ve-gp);
205
215
  flex-direction: column;
206
216
 
207
217
  .accordion-header {
208
- padding: 1rem;
218
+ padding: 12px;
209
219
  display: flex;
210
220
  justify-content: space-between;
211
- align-items: flex-start;
221
+ align-items: center;
212
222
  cursor: pointer;
213
- background-color: var(--_ctm-dn-sn-an-cr-dn-bd-cr);
214
- border-color: var(--_ctm-dn-sn-an-cr-dn-br-cr);
215
- border-radius: var(--_ctm-dn-sn-an-cr-dn-br-rs);
216
- border-style: var(--_ctm-dn-sn-an-cr-dn-br-se);
217
- border-width: var(--_ctm-dn-sn-an-cr-dn-br-wh);
218
- box-shadow: var(--_ctm-dn-sn-an-cr-dn-sw-ae) var(--_ctm-dn-sn-an-cr-dn-sw-br)
219
- 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);
220
232
 
221
233
  .accordion-title {
222
234
  margin-right: 1rem;
223
235
  white-space: nowrap;
224
236
  display: flex;
225
237
  align-items: center;
226
- gap: 8px;
227
- color: var(--_ctm-dn-sn-an-te-dn-cr);
228
- font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
229
- font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
230
- font-style: var(--_ctm-dn-sn-an-te-dn-ft-se-ic);
231
- font-weight: var(--_ctm-dn-sn-an-te-dn-ft-wt);
232
- line-height: var(--_ctm-dn-sn-an-te-dn-le-ht);
233
- letter-spacing: var(--_ctm-dn-sn-an-te-dn-lr-sg);
234
- text-align: var(--_ctm-dn-sn-an-te-dn-tt-an);
235
- text-decoration: var(--_ctm-dn-sn-an-te-dn-ue);
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);
236
247
  }
237
248
  .edit-btn {
238
249
  cursor: pointer;
239
250
  padding: 0;
240
- background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
241
- border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
242
- border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
243
- border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
244
- border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
245
- color: var(--_ctm-dn-sn-an-bn-dn-cr);
246
- font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
247
- font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
248
- font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
249
- font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
250
- line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
251
- letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
252
- box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
253
- var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
254
- text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
255
- 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);
256
269
 
257
270
  &:hover {
258
- 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);
259
289
  }
260
290
  }
261
291
  }
@@ -293,7 +323,7 @@ $dark-color: #343a40;
293
323
  display: flex;
294
324
  justify-content: space-between;
295
325
  flex-direction: row;
296
- gap: var(--_ctm-lt-im-gp);
326
+ gap: 12px;
297
327
  }
298
328
 
299
329
  .chk_shipping_address_input_container {
@@ -310,49 +340,85 @@ $dark-color: #343a40;
310
340
 
311
341
  .chk_shipping_address_form_label {
312
342
  white-space: nowrap;
313
- color: var(--_ctm-dn-it-ll-dn-cr);
314
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
315
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
316
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
317
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
318
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
319
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
320
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
321
- 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);
322
351
  }
323
352
 
324
353
  .chk_shiping_address_form_input {
325
- padding: 10px;
354
+ padding: 8px 12px;
326
355
  width: -webkit-fill-available;
327
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
328
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
329
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
330
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
331
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
332
- color: var(--_ctm-dn-it-bx-dn-cr);
333
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
334
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
335
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
336
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
337
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
338
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
339
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
340
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
341
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
342
- 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
+ }
343
393
 
344
- .input-field {
345
- color: var(--_ctm-dn-it-bx-dn-cr);
346
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
347
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
348
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
349
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
350
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
351
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
352
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
353
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
354
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
355
- 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);
356
422
  }
357
423
  }
358
424
 
@@ -381,54 +447,91 @@ $dark-color: #343a40;
381
447
  .chk_shipping_address_submit_btn {
382
448
  padding: 12px 24px;
383
449
  width: fit-content;
384
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
385
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
386
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
387
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
388
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
389
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
390
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
391
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
392
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
393
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
394
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
395
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
396
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
397
- var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
398
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
399
- 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);
400
467
 
401
468
  &:hover {
402
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
403
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
404
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
405
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
406
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
407
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
408
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
409
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
410
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
411
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
412
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
413
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
414
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae)
415
- var(--_ctm-dn-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-it-bn-dn-hr-se-sw-sd)
416
- var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
417
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
418
- 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);
419
486
  }
420
487
  }
421
488
 
422
489
  .chk_shipping_address_use_as_billing_address_chkbx {
423
- color: var(--_ctm-dn-cx-ll-dn-cr);
424
- font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
425
- font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
426
- font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
427
- font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
428
- line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
429
- letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
430
- text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
431
- 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
+ }
432
535
  }
433
536
  }
434
537
 
@@ -436,7 +539,7 @@ $dark-color: #343a40;
436
539
  display: flex;
437
540
  flex-direction: column;
438
541
  width: 100%;
439
- gap: var(--_ctm-lt-im-gp);
542
+ gap: 48px;
440
543
 
441
544
  &_product_container {
442
545
  display: flex;
@@ -461,29 +564,64 @@ $dark-color: #343a40;
461
564
  display: flex;
462
565
  flex: 1 0 0;
463
566
  width: 100%;
464
- gap: 16px;
567
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
465
568
  }
466
569
 
467
570
  &_product_image {
468
- height: 148px;
469
- 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;
470
575
  }
471
576
 
472
577
  &_product_info_wrapper {
473
578
  display: flex;
474
579
  flex-direction: column;
475
- 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
+ }
476
603
  }
477
604
 
478
605
  &_product_right_container {
479
606
  display: flex;
480
607
  flex-direction: row;
481
- gap: var(--_ctm-lt-im-gp);
482
- align-items: flex-start;
608
+ gap: 30px;
609
+ align-items: center;
483
610
 
484
611
  @media (max-width: 500px) {
485
612
  align-self: flex-end;
486
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
+ }
487
625
  }
488
626
 
489
627
  &_qty_wrapper {
@@ -491,12 +629,34 @@ $dark-color: #343a40;
491
629
  flex-direction: row;
492
630
  align-items: center;
493
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
+ }
494
654
  }
495
655
 
496
656
  &_shipping_option_container {
497
657
  display: flex;
498
658
  flex-direction: column;
499
- gap: 24px;
659
+ gap: var(--_ctm-lt-me-as-pt-io-hl-gp);
500
660
 
501
661
  @media (max-width: 500px) {
502
662
  flex-direction: row;
@@ -505,18 +665,37 @@ $dark-color: #343a40;
505
665
 
506
666
  &_shiping_option_heading_wrapper {
507
667
  display: grid;
508
- grid-template-columns: 1fr 2fr 2fr 0.5fr;
509
- gap: 16px;
668
+ grid-template-columns: 0.5fr 2fr 2fr auto;
669
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
510
670
  white-space: nowrap;
511
671
  align-items: center;
512
672
 
513
673
  @media (max-width: 500px) {
514
674
  grid-template-columns: auto;
515
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
+ }
516
687
  }
517
688
 
518
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
+ }
519
697
  &:hover {
698
+ cursor: pointer;
520
699
  svg {
521
700
  path {
522
701
  stroke: var(--_error-700);
@@ -525,25 +704,46 @@ $dark-color: #343a40;
525
704
  }
526
705
  }
527
706
  .chk_shiping_address_form_input {
528
- padding: 10px;
707
+ padding: 8px 12px;
529
708
  width: -webkit-fill-available;
530
709
  position: relative;
531
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
532
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
533
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
534
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
535
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
536
- color: var(--_ctm-dn-it-bx-dn-cr);
537
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
538
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
539
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
540
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
541
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
542
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
543
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
544
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
545
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
546
- 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
+ }
547
747
 
548
748
  .custom-arrows {
549
749
  position: absolute;
@@ -562,17 +762,27 @@ $dark-color: #343a40;
562
762
  }
563
763
 
564
764
  .input-field {
565
- color: var(--_ctm-dn-it-bx-dn-cr);
566
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
567
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
568
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
569
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
570
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
571
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
572
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
573
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
574
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
575
- 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
+ }
576
786
  }
577
787
  }
578
788
  }
@@ -580,7 +790,7 @@ $dark-color: #343a40;
580
790
  .shipping-method {
581
791
  display: flex;
582
792
  flex-direction: column;
583
- gap: var(--_ctm-lt-im-gp);
793
+ gap: var(--_ctm-lt-sg-md-le-gp);
584
794
 
585
795
  &__grid {
586
796
  display: grid;
@@ -595,7 +805,18 @@ $dark-color: #343a40;
595
805
  &__group {
596
806
  display: flex;
597
807
  flex-direction: column;
598
- 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
+ }
599
820
  }
600
821
 
601
822
  &__options {
@@ -610,12 +831,78 @@ $dark-color: #343a40;
610
831
  cursor: pointer;
611
832
  transition: all 0.2s ease;
612
833
 
613
- input[type="radio"] {
834
+ .custom_radio {
835
+ width: 20px;
614
836
  margin-right: 12px;
615
- width: 16px;
616
- height: 16px;
617
- accent-color: #2563eb;
618
- 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
+ }
619
906
  }
620
907
 
621
908
  &.selected {
@@ -628,25 +915,79 @@ $dark-color: #343a40;
628
915
  .chk_payment-options {
629
916
  display: flex;
630
917
  flex-direction: column;
631
- 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
+ }
632
959
 
633
960
  .chk_payment_option_wrapper {
634
961
  display: flex;
635
- gap: var(--_ctm-lt-im-gp);
636
962
  flex-direction: column;
963
+ gap: var(--_ctm-lt-pt-os-gp-bn-cs);
637
964
  }
638
965
 
639
966
  .chk_payment_option {
640
967
  width: 100%;
641
968
  display: flex;
642
969
  flex-direction: column;
643
- background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
644
- border-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
645
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
646
- border-style: var(--_ctm-dn-pt-os-cr-dn-br-se);
647
- border-width: var(--_ctm-dn-pt-os-cr-dn-br-wh);
648
- box-shadow: var(--_ctm-dn-pt-os-cr-dn-sw-ae) var(--_ctm-dn-pt-os-cr-dn-sw-br)
649
- 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
+ }
650
991
 
651
992
  &__other_option_wrapper {
652
993
  display: flex;
@@ -661,7 +1002,7 @@ $dark-color: #343a40;
661
1002
 
662
1003
  &_left_container {
663
1004
  display: flex;
664
- gap: 24px;
1005
+ gap: var(--_ctm-lt-pt-os-cr-vl-gp);
665
1006
  align-items: flex-start;
666
1007
 
667
1008
  @media (max-width: 500px) {
@@ -682,42 +1023,42 @@ $dark-color: #343a40;
682
1023
  }
683
1024
 
684
1025
  &__remove_card_btn {
685
- background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
686
- border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
687
- border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
688
- border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
689
- border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
690
- color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
691
- font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
692
- font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
693
- font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
694
- font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
695
- line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
696
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
697
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
698
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
699
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
700
- text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
701
- 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);
702
1043
 
703
1044
  &:hover {
704
- background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
705
- border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
706
- border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
707
- border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
708
- border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
709
- color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
710
- font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
711
- font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
712
- font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
713
- font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
714
- line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
715
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
716
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
717
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
718
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
719
- text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
720
- 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);
721
1062
  }
722
1063
  }
723
1064
 
@@ -726,6 +1067,39 @@ $dark-color: #343a40;
726
1067
  flex-direction: column;
727
1068
  gap: var(--_ctm-lt-ll-ad-it-gp);
728
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
+ }
729
1103
  }
730
1104
 
731
1105
  &_right_container {
@@ -740,24 +1114,46 @@ $dark-color: #343a40;
740
1114
 
741
1115
  &_input {
742
1116
  display: flex;
743
- padding: 10px;
1117
+ padding: 10px 12px;
1118
+ align-items: center;
744
1119
  max-width: 96px;
745
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
746
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
747
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
748
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
749
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
750
- color: var(--_ctm-dn-it-bx-dn-cr);
751
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
752
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
753
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
754
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
755
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
756
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
757
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
758
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
759
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
760
- 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
+ }
761
1157
 
762
1158
  .icon {
763
1159
  svg {
@@ -768,15 +1164,25 @@ $dark-color: #343a40;
768
1164
  }
769
1165
 
770
1166
  .input_field {
771
- color: var(--_ctm-dn-it-bx-dn-cr);
772
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
773
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
774
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
775
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
776
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
777
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
778
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
779
- 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
+ }
780
1186
  }
781
1187
  }
782
1188
  }
@@ -785,8 +1191,11 @@ $dark-color: #343a40;
785
1191
  width: 100%;
786
1192
  display: flex;
787
1193
  flex-direction: column;
788
- background-color: var(--_ctm-dn-pt-os-cr-dn-bd-cr);
789
- 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);
790
1199
 
791
1200
  &_form_container {
792
1201
  border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
@@ -813,13 +1222,24 @@ $dark-color: #343a40;
813
1222
  display: flex;
814
1223
  justify-content: space-between;
815
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
+ }
816
1236
  }
817
1237
 
818
1238
  form {
819
1239
  display: flex;
820
1240
  flex-direction: column;
821
1241
  gap: 0.75rem;
822
- max-width: calc(100% - 200px);
1242
+ max-width: 85%;
823
1243
 
824
1244
  @media (max-width: 500px) {
825
1245
  max-width: 100%;
@@ -830,7 +1250,7 @@ $dark-color: #343a40;
830
1250
  display: flex;
831
1251
  justify-content: space-between;
832
1252
  flex-direction: row;
833
- gap: var(--_ctm-lt-im-gp);
1253
+ gap: 12px;
834
1254
  }
835
1255
 
836
1256
  .chk_shipping_address_input_container {
@@ -847,49 +1267,79 @@ $dark-color: #343a40;
847
1267
 
848
1268
  .chk_shipping_address_form_label {
849
1269
  white-space: nowrap;
850
- color: var(--_ctm-dn-it-ll-dn-cr);
851
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
852
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
853
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
854
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
855
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
856
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
857
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
858
- 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);
859
1278
  }
860
1279
 
861
1280
  .chk_shiping_address_form_input {
862
- padding: 10px;
1281
+ padding: 8px 12px;
863
1282
  width: -webkit-fill-available;
864
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
865
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
866
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
867
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
868
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
869
- color: var(--_ctm-dn-it-bx-dn-cr);
870
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
871
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
872
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
873
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
874
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
875
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
876
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
877
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
878
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
879
- 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
+ }
880
1320
 
881
1321
  .input-field {
882
- color: var(--_ctm-dn-it-bx-dn-cr);
883
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
884
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
885
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
886
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
887
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
888
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
889
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
890
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
891
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
892
- 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
+ }
893
1343
  }
894
1344
  }
895
1345
 
@@ -901,11 +1351,53 @@ $dark-color: #343a40;
901
1351
  font-size: 12px;
902
1352
  color: #ff0000;
903
1353
  }
904
- label {
1354
+
1355
+ .chk_shipping_address_use_as_billing_address_chkbx {
905
1356
  display: flex;
906
1357
  align-items: center;
907
1358
  gap: 0.5rem;
908
- 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
+ }
909
1401
  }
910
1402
 
911
1403
  .checkbox-group {
@@ -918,95 +1410,54 @@ $dark-color: #343a40;
918
1410
  .chk_shipping_address_submit_btn {
919
1411
  padding: 12px 24px;
920
1412
  width: fit-content;
921
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
922
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
923
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
924
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
925
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
926
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
927
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
928
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
929
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
930
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
931
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
932
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
933
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae)
934
- var(--_ctm-dn-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-it-bn-dn-dt-se-sw-sd)
935
- var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
936
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
937
- text-decoration: var(--_ctm-dn-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);
938
1430
 
939
1431
  &:hover {
940
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
941
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
942
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
943
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
944
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
945
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
946
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
947
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
948
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
949
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
950
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
951
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
952
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae)
953
- var(--_ctm-dn-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-it-bn-dn-hr-se-sw-sd)
954
- var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
955
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
956
- text-decoration: var(--_ctm-dn-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);
957
1449
  }
958
1450
  }
959
1451
 
960
1452
  &_same_as_billing_address_chkbx {
961
- color: var(--_ctm-dn-cx-ll-dn-cr);
962
- font-family: var(--_ctm-dn-cx-ll-dn-ft-fy);
963
- font-size: var(--_ctm-dn-cx-ll-dn-ft-se);
964
- font-style: var(--_ctm-dn-cx-ll-dn-ft-se-ic);
965
- font-weight: var(--_ctm-dn-cx-ll-dn-ft-wt);
966
- line-height: var(--_ctm-dn-cx-ll-dn-le-ht);
967
- letter-spacing: var(--_ctm-dn-cx-ll-dn-lr-sg);
968
- text-align: var(--_ctm-dn-cx-ll-dn-tt-an);
969
- text-decoration: var(--_ctm-dn-cx-ll-dn-ue);
970
- }
971
-
972
- &_secondary_button {
973
- background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
974
- border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
975
- border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
976
- border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
977
- border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
978
- color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
979
- font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
980
- font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
981
- font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
982
- font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
983
- line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
984
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
985
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
986
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
987
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
988
- text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
989
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
990
-
991
- &:hover {
992
- background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
993
- border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
994
- border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
995
- border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
996
- border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
997
- color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
998
- font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
999
- font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
1000
- font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
1001
- font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
1002
- line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
1003
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
1004
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
1005
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
1006
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
1007
- text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
1008
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
1009
- }
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);
1010
1461
  }
1011
1462
 
1012
1463
  &_button_wrapper {
@@ -1018,211 +1469,53 @@ $dark-color: #343a40;
1018
1469
 
1019
1470
  .payment_heading {
1020
1471
  padding: 12px;
1021
- border-bottom-color: var(--_ctm-dn-pt-os-cr-dn-br-cr);
1022
- 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);
1023
1474
  border-bottom-width: thin;
1024
1475
  display: flex;
1025
1476
  justify-content: space-between;
1026
1477
  }
1027
-
1028
- .chk_payment-card {
1029
- max-width: 50%;
1030
-
1031
- &__form {
1032
- display: grid;
1033
- gap: 12px;
1034
- }
1035
-
1036
- &__input_wrapper {
1037
- display: flex;
1038
- flex-direction: column;
1039
- gap: var(--_ctm-lt-ll-ad-it-gp);
1040
- width: 100%;
1041
- }
1042
-
1043
- &__label {
1044
- display: flex;
1045
- flex-direction: column;
1046
- white-space: nowrap;
1047
- color: var(--_ctm-dn-it-ll-dn-cr);
1048
- font-family: var(--_ctm-dn-it-ll-dn-ft-fy);
1049
- font-size: var(--_ctm-dn-it-ll-dn-ft-se);
1050
- font-style: var(--_ctm-dn-it-ll-dn-ft-se-ic);
1051
- font-weight: var(--_ctm-dn-it-ll-dn-ft-wt);
1052
- line-height: var(--_ctm-dn-it-ll-dn-le-ht);
1053
- letter-spacing: var(--_ctm-dn-it-ll-dn-lr-sg);
1054
- text-align: var(--_ctm-dn-it-ll-dn-tt-an);
1055
- text-decoration: var(--_ctm-dn-it-ll-dn-ue);
1056
- }
1057
-
1058
- &__card-input-with-logo {
1059
- position: relative;
1060
-
1061
- input {
1062
- padding-right: 50px;
1063
- }
1064
-
1065
- .chk_payment-card__logo {
1066
- position: absolute;
1067
- right: 10px;
1068
- top: 50%;
1069
- transform: translateY(-50%);
1070
- height: 24px;
1071
- width: auto;
1072
- pointer-events: none;
1073
- }
1074
- }
1075
-
1076
- &__input {
1077
- padding: 10px;
1078
- width: -webkit-fill-available;
1079
- background-color: var(--_ctm-dn-it-bx-dn-bd-cr);
1080
- border-color: var(--_ctm-dn-it-bx-dn-br-cr);
1081
- border-radius: var(--_ctm-dn-it-bx-dn-br-rs);
1082
- border-style: var(--_ctm-dn-it-bx-dn-br-se);
1083
- border-width: var(--_ctm-dn-it-bx-dn-br-wh);
1084
- color: var(--_ctm-dn-it-bx-dn-cr);
1085
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1086
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1087
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1088
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1089
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1090
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1091
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1092
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1093
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1094
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1095
-
1096
- .input-field {
1097
- color: var(--_ctm-dn-it-bx-dn-cr);
1098
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1099
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1100
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1101
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1102
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1103
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1104
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1105
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1106
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1107
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1108
- }
1109
- }
1110
-
1111
- &__row {
1112
- display: flex;
1113
- gap: var(--_ctm-lt-im-gp);
1114
- }
1115
-
1116
- &__half {
1117
- flex: 1;
1118
- }
1119
-
1120
- &__button {
1121
- padding: 10px;
1122
- background-color: #007bff;
1123
- color: white;
1124
- border: none;
1125
- border-radius: 4px;
1126
- font-weight: bold;
1127
- cursor: pointer;
1128
- }
1129
-
1130
- &__saved {
1131
- border: 1px solid #ccc;
1132
- border-radius: 8px;
1133
- padding: 16px;
1134
- display: grid;
1135
- gap: 10px;
1136
- }
1137
-
1138
- &__info {
1139
- display: flex;
1140
- align-items: center;
1141
- gap: 10px;
1142
-
1143
- img {
1144
- width: 40px;
1145
- height: auto;
1146
- }
1147
- }
1148
-
1149
- &__meta {
1150
- font-size: 0.9rem;
1151
- color: #666;
1152
- }
1153
-
1154
- &__actions {
1155
- display: flex;
1156
- gap: 10px;
1157
-
1158
- button {
1159
- flex: 1;
1160
- }
1161
-
1162
- input {
1163
- flex: 1;
1164
- }
1165
- }
1166
-
1167
- &__remove {
1168
- background: none;
1169
- border: none;
1170
- color: #007bff;
1171
- padding: 0;
1172
- font-size: 0.9rem;
1173
- cursor: pointer;
1174
- text-align: left;
1175
- }
1176
- }
1177
1478
  }
1178
1479
 
1179
1480
  .chk_submit-btn {
1180
1481
  padding: 12px 24px;
1181
1482
  width: fit-content;
1182
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
1183
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
1184
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
1185
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
1186
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
1187
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
1188
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
1189
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
1190
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
1191
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
1192
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
1193
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
1194
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
1195
- var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
1196
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
1197
- 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);
1198
1500
 
1199
1501
  &:hover {
1200
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
1201
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
1202
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
1203
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
1204
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
1205
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
1206
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
1207
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
1208
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
1209
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
1210
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
1211
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
1212
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
1213
- var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
1214
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
1215
- text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
1216
- }
1217
- }
1218
-
1219
- .chk_checkbox_wrapper {
1220
- display: flex;
1221
- align-items: flex-start;
1222
- gap: 6px;
1223
-
1224
- input {
1225
- 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);
1226
1519
  }
1227
1520
  }
1228
1521
 
@@ -1247,82 +1540,6 @@ $dark-color: #343a40;
1247
1540
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1248
1541
  }
1249
1542
 
1250
- .chk_heading_info {
1251
- color: var(--_ctm-dn-it-hs-dn-cr);
1252
- font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
1253
- font-size: var(--_ctm-dn-it-hs-dn-ft-se);
1254
- font-style: var(--_ctm-dn-it-hs-dn-ft-se-ic);
1255
- font-weight: var(--_ctm-dn-it-hs-dn-ft-wt);
1256
- line-height: var(--_ctm-dn-it-hs-dn-le-ht);
1257
- letter-spacing: var(--_ctm-dn-it-hs-dn-lr-sg);
1258
- text-align: var(--_ctm-dn-it-hs-dn-tt-an);
1259
- text-decoration: var(--_ctm-dn-it-hs-dn-ue);
1260
- }
1261
-
1262
- .chk_primary_info {
1263
- color: var(--_ctm-dn-py-ve-tt-dn-cr);
1264
- font-family: var(--_ctm-dn-py-ve-tt-dn-ft-fy);
1265
- font-size: var(--_ctm-dn-py-ve-tt-dn-ft-se);
1266
- font-style: var(--_ctm-dn-py-ve-tt-dn-ft-se-ic);
1267
- font-weight: var(--_ctm-dn-py-ve-tt-dn-ft-wt);
1268
- line-height: var(--_ctm-dn-py-ve-tt-dn-le-ht);
1269
- letter-spacing: var(--_ctm-dn-py-ve-tt-dn-lr-sg);
1270
- text-align: var(--_ctm-dn-py-ve-tt-dn-tt-an);
1271
- text-decoration: var(--_ctm-dn-py-ve-tt-dn-ue);
1272
- }
1273
-
1274
- .chk_secondary_info {
1275
- color: var(--_ctm-dn-sy-ve-tt-dn-cr);
1276
- font-family: var(--_ctm-dn-sy-ve-tt-dn-ft-fy);
1277
- font-size: var(--_ctm-dn-sy-ve-tt-dn-ft-se);
1278
- font-style: var(--_ctm-dn-sy-ve-tt-dn-ft-se-ic);
1279
- font-weight: var(--_ctm-dn-sy-ve-tt-dn-ft-wt);
1280
- line-height: var(--_ctm-dn-sy-ve-tt-dn-le-ht);
1281
- letter-spacing: var(--_ctm-dn-sy-ve-tt-dn-lr-sg);
1282
- text-align: var(--_ctm-dn-sy-ve-tt-dn-tt-an);
1283
- text-decoration: var(--_ctm-dn-sy-ve-tt-dn-ue);
1284
- }
1285
-
1286
- .chk_primary_btn_link {
1287
- background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
1288
- border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
1289
- border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
1290
- border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
1291
- border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
1292
- color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
1293
- font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
1294
- font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
1295
- font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
1296
- font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
1297
- line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
1298
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
1299
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
1300
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
1301
- var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
1302
- text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
1303
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
1304
-
1305
- &:hover {
1306
- background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
1307
- border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
1308
- border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
1309
- border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
1310
- border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
1311
- color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
1312
- font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
1313
- font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
1314
- font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
1315
- font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
1316
- line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
1317
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
1318
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
1319
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
1320
- var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
1321
- text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
1322
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
1323
- }
1324
- }
1325
-
1326
1543
  .chk_checkbox_wrapper {
1327
1544
  display: flex;
1328
1545
  width: fit-content;
@@ -1333,11 +1550,19 @@ $dark-color: #343a40;
1333
1550
  display: none;
1334
1551
  }
1335
1552
 
1336
- .chk_shipping_address_use_as_billing_address_chkbx {
1553
+ .chk_payment_options_use_as_billing_address_chkbx {
1337
1554
  display: flex;
1338
1555
  align-items: center;
1339
1556
  cursor: pointer;
1340
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);
1341
1566
 
1342
1567
  .custom-checkbox {
1343
1568
  width: 20px;
@@ -1374,60 +1599,34 @@ $dark-color: #343a40;
1374
1599
  }
1375
1600
  }
1376
1601
  }
1377
-
1378
- .chk_change-link {
1379
- cursor: pointer;
1380
- align-self: flex-start;
1381
- white-space: nowrap;
1382
- display: flex;
1383
- gap: 4px;
1384
- align-items: center;
1385
- background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
1386
- border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
1387
- border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1388
- border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
1389
- border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
1390
- color: var(--_ctm-dn-sn-an-bn-dn-cr);
1391
- font-family: var(--_ctm-dn-sn-an-bn-dn-ft-fy);
1392
- font-size: var(--_ctm-dn-sn-an-bn-dn-ft-se);
1393
- font-style: var(--_ctm-dn-sn-an-bn-dn-ft-se-ic);
1394
- font-weight: var(--_ctm-dn-sn-an-bn-dn-ft-wt);
1395
- line-height: var(--_ctm-dn-sn-an-bn-dn-le-ht);
1396
- letter-spacing: var(--_ctm-dn-sn-an-bn-dn-lr-sg);
1397
- box-shadow: var(--_ctm-dn-sn-an-bn-dn-sw-ae) var(--_ctm-dn-sn-an-bn-dn-sw-br)
1398
- var(--_ctm-dn-sn-an-bn-dn-sw-sd) var(--_ctm-dn-sn-an-bn-dn-sw-cr);
1399
- text-align: var(--_ctm-dn-sn-an-bn-dn-tt-an);
1400
- text-decoration: var(--_ctm-dn-sn-an-bn-dn-ue);
1401
- }
1402
-
1403
1602
  .chk_payment-card__note {
1404
1603
  padding: 8px 6px;
1405
1604
  display: flex;
1406
1605
  align-items: center;
1407
1606
  gap: 6px;
1408
- background-color: var(--_ctm-dn-ne-cr-dn-bd-cr);
1409
- border-color: var(--_ctm-dn-ne-cr-dn-br-cr);
1410
- border-radius: var(--_ctm-dn-ne-cr-dn-br-rs);
1411
- border-style: var(--_ctm-dn-ne-cr-dn-br-se);
1412
- border-width: var(--_ctm-dn-ne-cr-dn-br-wh);
1413
- color: var(--_ctm-dn-ne-cr-dn-cr);
1414
- font-family: var(--_ctm-dn-ne-cr-dn-ft-fy);
1415
- font-size: var(--_ctm-dn-ne-cr-dn-ft-se);
1416
- font-style: var(--_ctm-dn-ne-cr-dn-ft-se-ic);
1417
- font-weight: var(--_ctm-dn-ne-cr-dn-ft-wt);
1418
- line-height: var(--_ctm-dn-ne-cr-dn-le-ht);
1419
- letter-spacing: var(--_ctm-dn-ne-cr-dn-lr-sg);
1420
- box-shadow: var(--_ctm-dn-ne-cr-dn-sw-ae) var(--_ctm-dn-ne-cr-dn-sw-br)
1421
- var(--_ctm-dn-ne-cr-dn-sw-sd) var(--_ctm-dn-ne-cr-dn-sw-cr);
1422
- text-align: var(--_ctm-dn-ne-cr-dn-tt-an);
1423
- 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);
1424
1623
 
1425
1624
  .icon {
1426
1625
  svg {
1427
- width: var(--_ctm-dn-ne-cr-dn-in-se);
1428
- 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);
1429
1628
  path {
1430
- stroke: var(--_ctm-dn-ne-cr-dn-in-c1);
1629
+ stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
1431
1630
  }
1432
1631
  }
1433
1632
  }
@@ -1448,12 +1647,56 @@ $dark-color: #343a40;
1448
1647
  .chk_shipping-summary {
1449
1648
  display: flex;
1450
1649
  flex-direction: column;
1451
- gap: 12px;
1650
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
1452
1651
 
1453
1652
  .chk_address {
1454
1653
  display: flex;
1455
1654
  flex-direction: column;
1456
- 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
+ }
1457
1700
  }
1458
1701
 
1459
1702
  .contact {
@@ -1466,6 +1709,51 @@ $dark-color: #343a40;
1466
1709
  .right-btn {
1467
1710
  display: flex;
1468
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
+ }
1469
1757
  }
1470
1758
  }
1471
1759
  }