@sc-360-v2/storefront-cms-library 0.3.39 → 0.3.41

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 (24) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/buyForHeaders.scss +126 -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 +1187 -742
  8. package/dist/customization-tree.scss +2 -0
  9. package/dist/functions.js +1 -1
  10. package/dist/icons.js +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/modal.scss +24 -0
  13. package/dist/review-cart.scss +197 -0
  14. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +658 -288
  15. package/dist/types/builder/tools/element-edit/allocations.d.ts +17 -1
  16. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +0 -441
  17. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +530 -0
  18. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1768 -38
  19. package/dist/types/builder/tools/element-edit/checkout.d.ts +793 -254
  20. package/dist/types/builder/tools/element-edit/productActions.d.ts +0 -441
  21. package/dist/types/builder/tools/element-edit/repeater.d.ts +1 -439
  22. package/dist/video.scss +16 -7
  23. package/dist/widget.scss +1 -0
  24. package/package.json +1 -1
package/dist/checkout.scss CHANGED
@@ -38,23 +38,34 @@ $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 {
47
+ display: flex;
48
+ flex-direction: column;
49
+ gap: 12px;
42
50
  flex: 1;
43
51
  max-width: 500px;
52
+ word-break: keep-all;
44
53
 
45
54
  h2 {
46
- font-size: 1.75rem;
47
- font-weight: bold;
48
- margin-bottom: 0.5rem;
55
+ margin-bottom: -6px;
56
+ font-family: "Lato";
57
+ font-weight: 700;
58
+ font-size: 24px;
59
+ line-height: 32px;
60
+ color: var(--_gray-900);
49
61
  }
50
62
 
51
63
  p {
52
- font-size: 0.95rem;
53
- margin-bottom: 1rem;
54
- }
55
-
56
- .sign_in_form {
57
- margin-bottom: 0.75rem;
64
+ font-family: "Lato";
65
+ font-weight: 400;
66
+ font-size: 14px;
67
+ line-height: 20px;
68
+ color: var(--_gray-600);
58
69
  }
59
70
 
60
71
  .forgot_password {
@@ -79,20 +90,32 @@ $dark-color: #343a40;
79
90
  .create_account_section {
80
91
  display: flex;
81
92
  justify-content: space-between;
82
- gap: 2rem;
93
+ gap: 12px;
94
+ word-break: keep-all;
83
95
 
84
96
  .create_form_wrapper {
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 12px;
85
100
  flex: 1;
86
101
  max-width: 500px;
102
+ word-break: keep-all;
87
103
 
88
104
  h2 {
89
- font-size: 1.5rem;
90
- font-weight: bold;
105
+ margin-bottom: -6px;
106
+ font-family: "Lato";
107
+ font-weight: 700;
108
+ font-size: 24px;
109
+ line-height: 32px;
110
+ color: var(--_gray-900);
91
111
  }
92
112
 
93
113
  p {
94
- font-size: 0.95rem;
95
- margin-bottom: 1rem;
114
+ font-family: "Lato";
115
+ font-weight: 400;
116
+ font-size: 14px;
117
+ line-height: 20px;
118
+ color: var(--_gray-600);
96
119
  }
97
120
 
98
121
  .create_account_text {
@@ -117,63 +140,67 @@ $dark-color: #343a40;
117
140
  display: flex;
118
141
  flex-direction: column;
119
142
  justify-content: center;
120
- gap: 2rem;
143
+ gap: 48px;
121
144
 
122
145
  .guest_box,
123
146
  .create_account_box {
124
- background: #f9f9f9;
125
- padding: 1.5rem;
126
- border-radius: 6px;
127
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
128
-
129
147
  h3 {
130
- font-size: 1.25rem;
131
- font-weight: bold;
132
- margin-bottom: 0.5rem;
148
+ margin-bottom: 6px;
149
+ font-family: "Lato";
150
+ font-weight: 700;
151
+ font-size: 24px;
152
+ line-height: 32px;
153
+ color: var(--_gray-900);
133
154
  }
134
155
 
135
156
  p {
136
- font-size: 0.9rem;
137
- margin-bottom: 1rem;
157
+ margin-bottom: 12px;
158
+ font-family: "Lato";
159
+ font-weight: 400;
160
+ font-size: 14px;
161
+ line-height: 20px;
162
+ color: var(--_gray-600);
138
163
  }
139
164
 
140
165
  .btn_secondary {
141
- padding: 16px 24px;
166
+ padding: 12px 24px;
142
167
  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);
168
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
169
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
170
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
171
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
172
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
173
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
174
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
175
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
176
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
177
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
178
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
179
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
180
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
181
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
182
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
183
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
184
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
159
185
 
160
186
  &: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);
187
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
188
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
189
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
190
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
191
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
192
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
193
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
194
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
195
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
196
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
197
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
198
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
199
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
200
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
201
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
202
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
203
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
177
204
  }
178
205
  }
179
206
  }
@@ -187,85 +214,185 @@ $dark-color: #343a40;
187
214
  display: flex;
188
215
  padding: var(--_ctm-lt-pg);
189
216
  flex-direction: column;
190
- gap: var(--_ctm-lt-im-gp);
217
+ gap: var(--_ctm-lt-te-ad-it-gp);
191
218
  word-break: keep-all;
192
219
 
193
220
  .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);
221
+ color: var(--_ctm-dn-ct-hg-dn-cr);
222
+ font-family: var(--_ctm-dn-ct-hg-dn-ft-fy);
223
+ font-size: var(--_ctm-dn-ct-hg-dn-ft-se);
224
+ font-style: var(--_ctm-dn-ct-hg-dn-ft-se-ic);
225
+ font-weight: var(--_ctm-dn-ct-hg-dn-ft-wt);
226
+ line-height: var(--_ctm-dn-ct-hg-dn-le-ht);
227
+ letter-spacing: var(--_ctm-dn-ct-hg-dn-lr-sg);
228
+ text-align: var(--_ctm-dn-ct-hg-dn-tt-an);
229
+ width: 100%;
230
+ text-decoration: var(--_ctm-dn-ct-hg-dn-ue);
199
231
  }
200
232
 
201
233
  .accordion {
202
234
  border-radius: 4px;
203
235
  display: flex;
204
- gap: var(--_ctm-lt-te-ad-it-gp);
236
+ gap: var(--_ctm-lt-an-hg-ad-ve-gp);
205
237
  flex-direction: column;
206
238
 
207
239
  .accordion-header {
208
- padding: 1rem;
240
+ padding: 12px;
209
241
  display: flex;
210
242
  justify-content: space-between;
211
- align-items: flex-start;
243
+ align-items: center;
212
244
  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);
245
+ background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-bd-cr);
246
+ border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-cr);
247
+ border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-rs);
248
+ border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-se);
249
+ border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-br-wh);
250
+ box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-ae)
251
+ var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-br)
252
+ var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-sd)
253
+ var(--_ctm-dn-ct-on-an-cr-dn-an-cr-dn-sw-cr);
220
254
 
221
255
  .accordion-title {
222
256
  margin-right: 1rem;
223
257
  white-space: nowrap;
224
258
  display: flex;
225
259
  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);
260
+ gap: var(--_ctm-lt-an-in-tt-gp);
261
+ color: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-cr);
262
+ font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-fy);
263
+ font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se);
264
+ font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-se-ic);
265
+ font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ft-wt);
266
+ line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-le-ht);
267
+ letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-lr-sg);
268
+ text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-te-dn-ue);
269
+ span {
270
+ display: flex;
271
+ }
236
272
  }
237
273
  .edit-btn {
238
274
  cursor: pointer;
239
275
  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);
276
+ background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-bd-cr);
277
+ border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-cr);
278
+ border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-rs);
279
+ border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-se);
280
+ border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-br-wh);
281
+ color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-cr);
282
+ font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-fy);
283
+ font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se);
284
+ font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-se-ic);
285
+ font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ft-wt);
286
+ line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-le-ht);
287
+ letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-lr-sg);
288
+ box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-ae)
289
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-br)
290
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-sd)
291
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-sw-cr);
292
+ text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-tt-an);
293
+ text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-dt-se-ue);
256
294
 
257
295
  &:hover {
258
- text-decoration: underline;
296
+ background-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-bd-cr);
297
+ border-color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-cr);
298
+ border-radius: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-rs);
299
+ border-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-se);
300
+ border-width: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-br-wh);
301
+ color: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-cr);
302
+ font-family: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-fy);
303
+ font-size: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se);
304
+ font-style: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-se-ic);
305
+ font-weight: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ft-wt);
306
+ line-height: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-le-ht);
307
+ letter-spacing: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-lr-sg);
308
+ box-shadow: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-ae)
309
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-br)
310
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-sd)
311
+ var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-sw-cr);
312
+ text-align: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-tt-an);
313
+ text-decoration: var(--_ctm-dn-ct-on-an-cr-dn-an-bn-dn-hr-se-ue);
259
314
  }
260
315
  }
261
316
  }
262
317
 
263
318
  .accordion-body {
319
+ .summary {
320
+ .chk_shipping_method_label {
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 4px;
324
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
325
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
326
+ font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
327
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
328
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
329
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
330
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
331
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
332
+ }
333
+
334
+ .chk_shipping_method_heading {
335
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
336
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
337
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
338
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
339
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
340
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
341
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
342
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
343
+ }
344
+ }
345
+
264
346
  .shipping-address {
265
347
  display: flex;
266
348
  flex-direction: column;
267
349
  gap: 24px;
268
350
 
351
+ .chk_saved_address_button {
352
+ cursor: pointer;
353
+ align-self: flex-start;
354
+ white-space: nowrap;
355
+ display: flex;
356
+ gap: 4px;
357
+ align-items: flex-start;
358
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
359
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
360
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
361
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
362
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
363
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
364
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
365
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
366
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
367
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
368
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
369
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
370
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
371
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
372
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
373
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
374
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
375
+ &:hover {
376
+ background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
377
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
378
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
379
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
380
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
381
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
382
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
383
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
384
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
385
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
386
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
387
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
388
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
389
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
390
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
391
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
392
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
393
+ }
394
+ }
395
+
269
396
  .shipping_address_container {
270
397
  display: flex;
271
398
  flex-direction: column;
@@ -293,7 +420,7 @@ $dark-color: #343a40;
293
420
  display: flex;
294
421
  justify-content: space-between;
295
422
  flex-direction: row;
296
- gap: var(--_ctm-lt-im-gp);
423
+ gap: 12px;
297
424
  }
298
425
 
299
426
  .chk_shipping_address_input_container {
@@ -310,49 +437,85 @@ $dark-color: #343a40;
310
437
 
311
438
  .chk_shipping_address_form_label {
312
439
  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);
440
+ color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
441
+ font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
442
+ font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
443
+ font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
444
+ font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
445
+ line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
446
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
447
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
322
448
  }
323
449
 
324
450
  .chk_shiping_address_form_input {
325
- padding: 10px;
451
+ padding: 8px 12px;
326
452
  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);
453
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
454
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
455
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
456
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
457
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
458
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
459
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
460
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
461
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
462
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
463
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
464
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
465
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
466
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
467
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
468
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
469
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
470
+
471
+ &:focus-within {
472
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
473
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
474
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
475
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
476
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
477
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
478
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
479
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
480
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
481
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
482
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
483
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
484
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
485
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
486
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
487
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
488
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
489
+ }
343
490
 
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);
491
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
492
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
493
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
494
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
495
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
496
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
497
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
498
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
499
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
500
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
501
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
502
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
503
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
504
+
505
+ &:focus-within {
506
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
507
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
508
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
509
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
510
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
511
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
512
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
513
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
514
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
515
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
516
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
517
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
518
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
356
519
  }
357
520
  }
358
521
 
@@ -381,54 +544,91 @@ $dark-color: #343a40;
381
544
  .chk_shipping_address_submit_btn {
382
545
  padding: 12px 24px;
383
546
  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);
547
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
548
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
549
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
550
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
551
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
552
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
553
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
554
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
555
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
556
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
557
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
558
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
559
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
560
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
561
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
562
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
563
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
400
564
 
401
565
  &: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);
566
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
567
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
568
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
569
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
570
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
571
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
572
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
573
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
574
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
575
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
576
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
577
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
578
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
579
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
580
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
581
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
582
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
419
583
  }
420
584
  }
421
585
 
422
586
  .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);
587
+ display: flex;
588
+ align-items: center;
589
+ gap: 0.5rem;
590
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
591
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
592
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
593
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
594
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
595
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
596
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
597
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
598
+
599
+ .custom-checkbox {
600
+ width: 20px;
601
+ height: 20px;
602
+ border: 1px solid #d0d5dd;
603
+ border-radius: 4px;
604
+ position: relative;
605
+ background-color: #fff;
606
+ transition: all 0.2s ease;
607
+
608
+ &::after {
609
+ content: "";
610
+ position: absolute;
611
+ display: none;
612
+ left: 5px;
613
+ top: 0.5px;
614
+ width: 5px;
615
+ height: 10px;
616
+ border: solid #fff;
617
+ border-width: 0 2px 2px 0;
618
+ transform: rotate(45deg);
619
+ }
620
+ }
621
+ }
622
+
623
+ input[type="checkbox"]:checked + label {
624
+ .custom-checkbox {
625
+ background-color: #004dff;
626
+ border-color: #004dff;
627
+
628
+ &::after {
629
+ display: block;
630
+ }
631
+ }
432
632
  }
433
633
  }
434
634
 
@@ -436,7 +636,7 @@ $dark-color: #343a40;
436
636
  display: flex;
437
637
  flex-direction: column;
438
638
  width: 100%;
439
- gap: var(--_ctm-lt-im-gp);
639
+ gap: 48px;
440
640
 
441
641
  &_product_container {
442
642
  display: flex;
@@ -461,29 +661,64 @@ $dark-color: #343a40;
461
661
  display: flex;
462
662
  flex: 1 0 0;
463
663
  width: 100%;
464
- gap: 16px;
664
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
465
665
  }
466
666
 
467
667
  &_product_image {
468
- height: 148px;
469
- width: 128px;
668
+ height: var(--_ctm-lt-me-as-pt-ie-ht);
669
+ width: var(--_ctm-lt-me-as-pt-ie-wh);
670
+ border: 1px solid var(--_gray-100);
671
+ border-radius: 6px;
470
672
  }
471
673
 
472
674
  &_product_info_wrapper {
473
675
  display: flex;
474
676
  flex-direction: column;
475
- gap: 6px;
677
+ gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
678
+
679
+ .chk_multi_address_product_name {
680
+ color: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-cr);
681
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-fy);
682
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se);
683
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-se-ic);
684
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ft-wt);
685
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-le-ht);
686
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-lr-sg);
687
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-ne-dn-ue);
688
+ }
689
+
690
+ .chk_multi_address_product_info {
691
+ color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
692
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
693
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
694
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
695
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
696
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
697
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
698
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
699
+ }
476
700
  }
477
701
 
478
702
  &_product_right_container {
479
703
  display: flex;
480
704
  flex-direction: row;
481
- gap: var(--_ctm-lt-im-gp);
482
- align-items: flex-start;
705
+ gap: 30px;
706
+ align-items: center;
483
707
 
484
708
  @media (max-width: 500px) {
485
709
  align-self: flex-end;
486
710
  }
711
+
712
+ .chk_multi_address_product_price {
713
+ color: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-cr);
714
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-fy);
715
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se);
716
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-se-ic);
717
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
718
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ft-wt);
719
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-lr-sg);
720
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-pe-dn-ue);
721
+ }
487
722
  }
488
723
 
489
724
  &_qty_wrapper {
@@ -491,12 +726,34 @@ $dark-color: #343a40;
491
726
  flex-direction: row;
492
727
  align-items: center;
493
728
  gap: 4px;
729
+
730
+ .chk_multi_address_product_info {
731
+ color: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-cr);
732
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-fy);
733
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se);
734
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-se-ic);
735
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ft-wt);
736
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-le-ht);
737
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-lr-sg);
738
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-in-dn-ue);
739
+ }
740
+
741
+ .chk_multi_address_product_qty {
742
+ color: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-cr);
743
+ font-family: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-fy);
744
+ font-size: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se);
745
+ font-style: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-se-ic);
746
+ font-weight: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ft-wt);
747
+ line-height: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-le-ht);
748
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-lr-sg);
749
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-pt-qy-dn-ue);
750
+ }
494
751
  }
495
752
 
496
753
  &_shipping_option_container {
497
754
  display: flex;
498
755
  flex-direction: column;
499
- gap: 24px;
756
+ gap: var(--_ctm-lt-me-as-pt-io-hl-gp);
500
757
 
501
758
  @media (max-width: 500px) {
502
759
  flex-direction: row;
@@ -505,18 +762,37 @@ $dark-color: #343a40;
505
762
 
506
763
  &_shiping_option_heading_wrapper {
507
764
  display: grid;
508
- grid-template-columns: 1fr 2fr 2fr 0.5fr;
509
- gap: 16px;
765
+ grid-template-columns: 0.5fr 2fr 2fr auto;
766
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
510
767
  white-space: nowrap;
511
768
  align-items: center;
512
769
 
513
770
  @media (max-width: 500px) {
514
771
  grid-template-columns: auto;
515
772
  }
773
+
774
+ .chk_multi_address_product_label {
775
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-cr);
776
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-fy);
777
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se);
778
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-se-ic);
779
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ft-wt);
780
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-le-ht);
781
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-lr-sg);
782
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-ll-dn-ue);
783
+ }
516
784
  }
517
785
 
518
786
  .chk_multi_address_icon {
787
+ svg {
788
+ width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
789
+ height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
790
+ path {
791
+ stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
792
+ }
793
+ }
519
794
  &:hover {
795
+ cursor: pointer;
520
796
  svg {
521
797
  path {
522
798
  stroke: var(--_error-700);
@@ -525,25 +801,46 @@ $dark-color: #343a40;
525
801
  }
526
802
  }
527
803
  .chk_shiping_address_form_input {
528
- padding: 10px;
804
+ padding: 8px 12px;
529
805
  width: -webkit-fill-available;
530
806
  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);
807
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
808
+ border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-cr);
809
+ border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-rs);
810
+ border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-se);
811
+ border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-br-wh);
812
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
813
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
814
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
815
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
816
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
817
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
818
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
819
+ box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-ae)
820
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-br)
821
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-sd)
822
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-sw-cr);
823
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
824
+
825
+ &:focus-within {
826
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
827
+ border-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-cr);
828
+ border-radius: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-rs);
829
+ border-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-se);
830
+ border-width: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-br-wh);
831
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
832
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
833
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
834
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
835
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
836
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
837
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
838
+ box-shadow: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-ae)
839
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-br)
840
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-sd)
841
+ var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-sw-cr);
842
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
843
+ }
547
844
 
548
845
  .custom-arrows {
549
846
  position: absolute;
@@ -562,17 +859,27 @@ $dark-color: #343a40;
562
859
  }
563
860
 
564
861
  .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);
862
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-bd-cr);
863
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-cr);
864
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-fy);
865
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se);
866
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-se-ic);
867
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ft-wt);
868
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-le-ht);
869
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-lr-sg);
870
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-dt-se-ue);
871
+
872
+ &:focus-within {
873
+ background-color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-bd-cr);
874
+ color: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-cr);
875
+ font-family: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-fy);
876
+ font-size: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se);
877
+ font-style: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-se-ic);
878
+ font-weight: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ft-wt);
879
+ line-height: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-le-ht);
880
+ letter-spacing: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-lr-sg);
881
+ text-decoration: var(--_ctm-dn-me-sg-as-dn-me-sg-as-it-dn-sd-se-ue);
882
+ }
576
883
  }
577
884
  }
578
885
  }
@@ -580,12 +887,12 @@ $dark-color: #343a40;
580
887
  .shipping-method {
581
888
  display: flex;
582
889
  flex-direction: column;
583
- gap: var(--_ctm-lt-im-gp);
890
+ gap: var(--_ctm-lt-sg-md-le-gp);
584
891
 
585
892
  &__grid {
586
893
  display: grid;
587
894
  grid-template-columns: 1fr;
588
- gap: var(--_ctm-lt-im-gp);
895
+ gap: var(--_ctm-lt-sg-md-le-gp);
589
896
 
590
897
  @media (min-width: 768px) {
591
898
  grid-template-columns: 1fr 1fr;
@@ -595,7 +902,18 @@ $dark-color: #343a40;
595
902
  &__group {
596
903
  display: flex;
597
904
  flex-direction: column;
598
- gap: var(--_ctm-lt-ll-ad-it-gp);
905
+ gap: var(--_ctm-lt-sg-md-le-gp);
906
+
907
+ .chk_shipping_method_heading {
908
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
909
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
910
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
911
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
912
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
913
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
914
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
915
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
916
+ }
599
917
  }
600
918
 
601
919
  &__options {
@@ -610,12 +928,78 @@ $dark-color: #343a40;
610
928
  cursor: pointer;
611
929
  transition: all 0.2s ease;
612
930
 
613
- input[type="radio"] {
931
+ .custom_radio {
932
+ width: 20px;
614
933
  margin-right: 12px;
615
- width: 16px;
616
- height: 16px;
617
- accent-color: #2563eb;
618
- cursor: pointer;
934
+ height: 20px;
935
+ border: 1px solid transparent; /* blue ring */
936
+ border-radius: 50%;
937
+ display: inline-block;
938
+ box-sizing: border-box;
939
+ background-color: white;
940
+ transition: all 0.2s ease;
941
+
942
+ input[type="radio"]:checked + .radio-style {
943
+ background-color: #1a3dcc;
944
+ border: 6px solid;
945
+ }
946
+ }
947
+
948
+ .chk_shipping_method_label {
949
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
950
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
951
+ font-size: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se);
952
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
953
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
954
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
955
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
956
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
957
+ }
958
+
959
+ .chk_shipping_method_value {
960
+ color: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-cr);
961
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
962
+ font-size: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se);
963
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
964
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
965
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
966
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg);
967
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue);
968
+ }
969
+
970
+ // input[type="radio"] {
971
+ // margin-right: 12px;
972
+ // width: 16px;
973
+ // height: 16px;
974
+ // accent-color: #2563eb;
975
+ // cursor: pointer;
976
+ // // display: none;
977
+ // }
978
+
979
+ .custom_radio {
980
+ position: relative;
981
+ input[type="radio"] {
982
+ margin-right: 12px;
983
+ width: 16px;
984
+ height: 16px;
985
+ accent-color: #2563eb;
986
+ cursor: pointer;
987
+ display: none;
988
+ }
989
+ .radio-style {
990
+ width: 20px;
991
+ height: 20px;
992
+ border-radius: 50%;
993
+ border: 1px solid #d0d5dd;
994
+ background: white;
995
+ display: inline-block;
996
+ box-sizing: border-box;
997
+ transition: all 0.2s;
998
+ }
999
+ input[type="radio"]:checked + .radio-style {
1000
+ background-color: #fff;
1001
+ border: 5px solid #1a3dcc;
1002
+ }
619
1003
  }
620
1004
 
621
1005
  &.selected {
@@ -628,25 +1012,80 @@ $dark-color: #343a40;
628
1012
  .chk_payment-options {
629
1013
  display: flex;
630
1014
  flex-direction: column;
631
- gap: var(--_ctm-lt-im-gp);
1015
+ gap: var(--_ctm-lt-pt-os-gp-bn-cs);
1016
+
1017
+ .chk_primary_btn_link {
1018
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
1019
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
1020
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
1021
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
1022
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
1023
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
1024
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
1025
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
1026
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
1027
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
1028
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
1029
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
1030
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
1031
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
1032
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
1033
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
1034
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
1035
+ text-align: left;
1036
+
1037
+ &:hover {
1038
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
1039
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
1040
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
1041
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
1042
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
1043
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
1044
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
1045
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
1046
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
1047
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
1048
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
1049
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
1050
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
1051
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
1052
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
1053
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
1054
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
1055
+ }
1056
+ }
632
1057
 
633
1058
  .chk_payment_option_wrapper {
634
1059
  display: flex;
635
- gap: var(--_ctm-lt-im-gp);
636
1060
  flex-direction: column;
1061
+ gap: var(--_ctm-lt-pt-os-gp-bn-cs);
637
1062
  }
638
1063
 
639
1064
  .chk_payment_option {
640
1065
  width: 100%;
641
1066
  display: flex;
642
1067
  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);
1068
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1069
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1070
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
1071
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-rs);
1072
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
1073
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-wh);
1074
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1075
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1076
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1077
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1078
+
1079
+ .chk_payment_options_heading {
1080
+ color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
1081
+ font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1082
+ font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1083
+ font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1084
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
1085
+ line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1086
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1087
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1088
+ }
650
1089
 
651
1090
  &__other_option_wrapper {
652
1091
  display: flex;
@@ -661,7 +1100,7 @@ $dark-color: #343a40;
661
1100
 
662
1101
  &_left_container {
663
1102
  display: flex;
664
- gap: 24px;
1103
+ gap: var(--_ctm-lt-pt-os-cr-vl-gp);
665
1104
  align-items: flex-start;
666
1105
 
667
1106
  @media (max-width: 500px) {
@@ -682,42 +1121,42 @@ $dark-color: #343a40;
682
1121
  }
683
1122
 
684
1123
  &__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);
1124
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-bd-cr);
1125
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-cr);
1126
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-rs);
1127
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-se);
1128
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-br-wh);
1129
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-cr);
1130
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-fy);
1131
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se);
1132
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-se-ic);
1133
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ft-wt);
1134
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-le-ht);
1135
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-lr-sg);
1136
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-ae)
1137
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-br)
1138
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-sd)
1139
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-sw-cr);
1140
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-dt-se-ue);
702
1141
 
703
1142
  &: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);
1143
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-bd-cr);
1144
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-cr);
1145
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-rs);
1146
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-se);
1147
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-br-wh);
1148
+ color: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-cr);
1149
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-fy);
1150
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se);
1151
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-se-ic);
1152
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ft-wt);
1153
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-le-ht);
1154
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-lr-sg);
1155
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-ae)
1156
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-br)
1157
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-sd)
1158
+ var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-sw-cr);
1159
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-bn-dn-hr-se-ue);
721
1160
  }
722
1161
  }
723
1162
 
@@ -726,6 +1165,39 @@ $dark-color: #343a40;
726
1165
  flex-direction: column;
727
1166
  gap: var(--_ctm-lt-ll-ad-it-gp);
728
1167
  white-space: nowrap;
1168
+
1169
+ .chk_payment_options_name {
1170
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1171
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1172
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1173
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1174
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1175
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1176
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1177
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1178
+ }
1179
+
1180
+ .chk_payment_options_label {
1181
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1182
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1183
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1184
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1185
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1186
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1187
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1188
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1189
+ }
1190
+
1191
+ .chk_payment_options_value {
1192
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1193
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1194
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1195
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1196
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1197
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1198
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1199
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1200
+ }
729
1201
  }
730
1202
 
731
1203
  &_right_container {
@@ -740,24 +1212,46 @@ $dark-color: #343a40;
740
1212
 
741
1213
  &_input {
742
1214
  display: flex;
743
- padding: 10px;
1215
+ padding: 10px 12px;
1216
+ align-items: center;
744
1217
  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);
1218
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-bd-cr);
1219
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-cr);
1220
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-rs);
1221
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-se);
1222
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-br-wh);
1223
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1224
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1225
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1226
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1227
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1228
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1229
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1230
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-ae)
1231
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-br)
1232
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-sd)
1233
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-sw-cr);
1234
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1235
+
1236
+ &:focus-within {
1237
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-bd-cr);
1238
+ border-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-cr);
1239
+ border-radius: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-rs);
1240
+ border-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-se);
1241
+ border-width: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-br-wh);
1242
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1243
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1244
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1245
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1246
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1247
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1248
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1249
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-ae)
1250
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-br)
1251
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-sd)
1252
+ var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-sw-cr);
1253
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1254
+ }
761
1255
 
762
1256
  .icon {
763
1257
  svg {
@@ -768,15 +1262,25 @@ $dark-color: #343a40;
768
1262
  }
769
1263
 
770
1264
  .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);
1265
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-cr);
1266
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-fy);
1267
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se);
1268
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-se-ic);
1269
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ft-wt);
1270
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-le-ht);
1271
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-lr-sg);
1272
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-ue);
1273
+
1274
+ &:focus-within {
1275
+ color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-cr);
1276
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-fy);
1277
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se);
1278
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-se-ic);
1279
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ft-wt);
1280
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-le-ht);
1281
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-lr-sg);
1282
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-sd-se-ue);
1283
+ }
780
1284
  }
781
1285
  }
782
1286
  }
@@ -785,8 +1289,11 @@ $dark-color: #343a40;
785
1289
  width: 100%;
786
1290
  display: flex;
787
1291
  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);
1292
+ background-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-bd-cr);
1293
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1294
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1295
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1296
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
790
1297
 
791
1298
  &_form_container {
792
1299
  border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
@@ -796,6 +1303,17 @@ $dark-color: #343a40;
796
1303
  gap: 24px;
797
1304
  }
798
1305
 
1306
+ .chk_payment_options_heading {
1307
+ color: var(--_ctm-dn-pt-os-dn-pt-hg-dn-cr);
1308
+ font-family: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-fy);
1309
+ font-size: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se);
1310
+ font-style: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-se-ic);
1311
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ft-wt);
1312
+ line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1313
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1314
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1315
+ }
1316
+
799
1317
  &_form_wrapper {
800
1318
  display: flex;
801
1319
  flex-direction: column;
@@ -813,13 +1331,24 @@ $dark-color: #343a40;
813
1331
  display: flex;
814
1332
  justify-content: space-between;
815
1333
  align-items: center;
1334
+
1335
+ .chk_heading_info {
1336
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1337
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1338
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1339
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1340
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1341
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1342
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1343
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1344
+ }
816
1345
  }
817
1346
 
818
1347
  form {
819
1348
  display: flex;
820
1349
  flex-direction: column;
821
1350
  gap: 0.75rem;
822
- max-width: calc(100% - 200px);
1351
+ max-width: 85%;
823
1352
 
824
1353
  @media (max-width: 500px) {
825
1354
  max-width: 100%;
@@ -830,7 +1359,7 @@ $dark-color: #343a40;
830
1359
  display: flex;
831
1360
  justify-content: space-between;
832
1361
  flex-direction: row;
833
- gap: var(--_ctm-lt-im-gp);
1362
+ gap: 12px;
834
1363
  }
835
1364
 
836
1365
  .chk_shipping_address_input_container {
@@ -847,49 +1376,79 @@ $dark-color: #343a40;
847
1376
 
848
1377
  .chk_shipping_address_form_label {
849
1378
  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);
1379
+ color: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-cr);
1380
+ font-family: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-fy);
1381
+ font-size: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se);
1382
+ font-style: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-se-ic);
1383
+ font-weight: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ft-wt);
1384
+ line-height: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-le-ht);
1385
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-lr-sg);
1386
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-se-sg-as-ll-dn-ue);
859
1387
  }
860
1388
 
861
1389
  .chk_shiping_address_form_input {
862
- padding: 10px;
1390
+ padding: 8px 12px;
863
1391
  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);
1392
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1393
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-cr);
1394
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-rs);
1395
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-se);
1396
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-br-wh);
1397
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1398
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1399
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1400
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1401
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1402
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1403
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1404
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-ae)
1405
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-br)
1406
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-sd)
1407
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-sw-cr);
1408
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1409
+
1410
+ &:focus-within {
1411
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1412
+ border-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-cr);
1413
+ border-radius: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-rs);
1414
+ border-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-se);
1415
+ border-width: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-br-wh);
1416
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1417
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1418
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1419
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1420
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1421
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1422
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1423
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-ae)
1424
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-br)
1425
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-sd)
1426
+ var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-sw-cr);
1427
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1428
+ }
880
1429
 
881
1430
  .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);
1431
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-bd-cr);
1432
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-cr);
1433
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-fy);
1434
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se);
1435
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-se-ic);
1436
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ft-wt);
1437
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-le-ht);
1438
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-lr-sg);
1439
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-dt-se-ue);
1440
+
1441
+ &:focus-within {
1442
+ background-color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-bd-cr);
1443
+ color: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-cr);
1444
+ font-family: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-fy);
1445
+ font-size: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se);
1446
+ font-style: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-se-ic);
1447
+ font-weight: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ft-wt);
1448
+ line-height: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-le-ht);
1449
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-lr-sg);
1450
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-it-bx-dn-sd-se-ue);
1451
+ }
893
1452
  }
894
1453
  }
895
1454
 
@@ -901,11 +1460,53 @@ $dark-color: #343a40;
901
1460
  font-size: 12px;
902
1461
  color: #ff0000;
903
1462
  }
904
- label {
1463
+
1464
+ .chk_shipping_address_use_as_billing_address_chkbx {
905
1465
  display: flex;
906
1466
  align-items: center;
907
1467
  gap: 0.5rem;
908
- font-size: 14px;
1468
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1469
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1470
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1471
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1472
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1473
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1474
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1475
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1476
+
1477
+ .custom-checkbox {
1478
+ width: 20px;
1479
+ height: 20px;
1480
+ border: 1px solid #d0d5dd;
1481
+ border-radius: 4px;
1482
+ position: relative;
1483
+ background-color: #fff;
1484
+ transition: all 0.2s ease;
1485
+
1486
+ &::after {
1487
+ content: "";
1488
+ position: absolute;
1489
+ display: none;
1490
+ left: 5px;
1491
+ top: 0.5px;
1492
+ width: 5px;
1493
+ height: 10px;
1494
+ border: solid #fff;
1495
+ border-width: 0 2px 2px 0;
1496
+ transform: rotate(45deg);
1497
+ }
1498
+ }
1499
+ }
1500
+
1501
+ input[type="checkbox"]:checked + label {
1502
+ .custom-checkbox {
1503
+ background-color: #004dff;
1504
+ border-color: #004dff;
1505
+
1506
+ &::after {
1507
+ display: block;
1508
+ }
1509
+ }
909
1510
  }
910
1511
 
911
1512
  .checkbox-group {
@@ -918,95 +1519,54 @@ $dark-color: #343a40;
918
1519
  .chk_shipping_address_submit_btn {
919
1520
  padding: 12px 24px;
920
1521
  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);
1522
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1523
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1524
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1525
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1526
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1527
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1528
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1529
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1530
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1531
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1532
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1533
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1534
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1535
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1536
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1537
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1538
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
938
1539
 
939
1540
  &: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);
1541
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1542
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1543
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1544
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1545
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1546
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1547
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1548
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1549
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1550
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1551
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1552
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1553
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1554
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1555
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1556
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1557
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
957
1558
  }
958
1559
  }
959
1560
 
960
1561
  &_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
- }
1562
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1563
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1564
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1565
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1566
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1567
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1568
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1569
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1010
1570
  }
1011
1571
 
1012
1572
  &_button_wrapper {
@@ -1018,211 +1578,53 @@ $dark-color: #343a40;
1018
1578
 
1019
1579
  .payment_heading {
1020
1580
  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);
1581
+ border-bottom-color: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-cr);
1582
+ border-bottom-style: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-br-se);
1023
1583
  border-bottom-width: thin;
1024
1584
  display: flex;
1025
1585
  justify-content: space-between;
1026
1586
  }
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
1587
  }
1178
1588
 
1179
1589
  .chk_submit-btn {
1180
1590
  padding: 12px 24px;
1181
1591
  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);
1592
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-bd-cr);
1593
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-cr);
1594
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-rs);
1595
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-se);
1596
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-br-wh);
1597
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-cr);
1598
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-fy);
1599
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se);
1600
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-se-ic);
1601
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ft-wt);
1602
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-le-ht);
1603
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-lr-sg);
1604
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-ae)
1605
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-br)
1606
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-sd)
1607
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-sw-cr);
1608
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-dt-se-ue);
1198
1609
 
1199
1610
  &: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;
1611
+ background-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-bd-cr);
1612
+ border-color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-cr);
1613
+ border-radius: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-rs);
1614
+ border-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-se);
1615
+ border-width: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-br-wh);
1616
+ color: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-cr);
1617
+ font-family: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-fy);
1618
+ font-size: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se);
1619
+ font-style: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-se-ic);
1620
+ font-weight: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ft-wt);
1621
+ line-height: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-le-ht);
1622
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-lr-sg);
1623
+ box-shadow: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-ae)
1624
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-br)
1625
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-sd)
1626
+ var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-sw-cr);
1627
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-py-bn-dn-hr-se-ue);
1226
1628
  }
1227
1629
  }
1228
1630
 
@@ -1247,82 +1649,6 @@ $dark-color: #343a40;
1247
1649
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1248
1650
  }
1249
1651
 
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
1652
  .chk_checkbox_wrapper {
1327
1653
  display: flex;
1328
1654
  width: fit-content;
@@ -1333,11 +1659,57 @@ $dark-color: #343a40;
1333
1659
  display: none;
1334
1660
  }
1335
1661
 
1662
+ .chk_payment_options_use_as_billing_address_chkbx {
1663
+ display: flex;
1664
+ align-items: center;
1665
+ cursor: pointer;
1666
+ gap: 10px;
1667
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
1668
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
1669
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
1670
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
1671
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
1672
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
1673
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
1674
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
1675
+
1676
+ .custom-checkbox {
1677
+ width: 20px;
1678
+ height: 20px;
1679
+ border: 1px solid #d0d5dd;
1680
+ border-radius: 4px;
1681
+ position: relative;
1682
+ background-color: #fff;
1683
+ transition: all 0.2s ease;
1684
+
1685
+ &::after {
1686
+ content: "";
1687
+ position: absolute;
1688
+ display: none;
1689
+ left: 5px;
1690
+ top: 0.5px;
1691
+ width: 5px;
1692
+ height: 10px;
1693
+ border: solid #fff;
1694
+ border-width: 0 2px 2px 0;
1695
+ transform: rotate(45deg);
1696
+ }
1697
+ }
1698
+ }
1699
+
1336
1700
  .chk_shipping_address_use_as_billing_address_chkbx {
1337
1701
  display: flex;
1338
1702
  align-items: center;
1339
1703
  cursor: pointer;
1340
1704
  gap: 10px;
1705
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
1706
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
1707
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
1708
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
1709
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
1710
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
1711
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
1712
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
1341
1713
 
1342
1714
  .custom-checkbox {
1343
1715
  width: 20px;
@@ -1374,60 +1746,34 @@ $dark-color: #343a40;
1374
1746
  }
1375
1747
  }
1376
1748
  }
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
1749
  .chk_payment-card__note {
1404
1750
  padding: 8px 6px;
1405
1751
  display: flex;
1406
1752
  align-items: center;
1407
1753
  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);
1754
+ background-color: var(--_ctm-dn-pt-os-dn-ne-dn-bd-cr);
1755
+ border-color: var(--_ctm-dn-pt-os-dn-ne-dn-br-cr);
1756
+ border-radius: var(--_ctm-dn-pt-os-dn-ne-dn-br-rs);
1757
+ border-style: var(--_ctm-dn-pt-os-dn-ne-dn-br-se);
1758
+ border-width: var(--_ctm-dn-pt-os-dn-ne-dn-br-wh);
1759
+ color: var(--_ctm-dn-pt-os-dn-ne-dn-cr);
1760
+ font-family: var(--_ctm-dn-pt-os-dn-ne-dn-ft-fy);
1761
+ font-size: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se);
1762
+ font-style: var(--_ctm-dn-pt-os-dn-ne-dn-ft-se-ic);
1763
+ font-weight: var(--_ctm-dn-pt-os-dn-ne-dn-ft-wt);
1764
+ line-height: var(--_ctm-dn-pt-os-dn-ne-dn-le-ht);
1765
+ letter-spacing: var(--_ctm-dn-pt-os-dn-ne-dn-lr-sg);
1766
+ box-shadow: var(--_ctm-dn-pt-os-dn-ne-dn-sw-ae) var(--_ctm-dn-pt-os-dn-ne-dn-sw-br)
1767
+ var(--_ctm-dn-pt-os-dn-ne-dn-sw-sd) var(--_ctm-dn-pt-os-dn-ne-dn-sw-cr);
1768
+ text-align: var(--_ctm-dn-pt-os-dn-ne-dn-tt-an);
1769
+ text-decoration: var(--_ctm-dn-pt-os-dn-ne-dn-ue);
1424
1770
 
1425
1771
  .icon {
1426
1772
  svg {
1427
- width: var(--_ctm-dn-ne-cr-dn-in-se);
1428
- height: var(--_ctm-dn-ne-cr-dn-in-se);
1773
+ width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
1774
+ height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
1429
1775
  path {
1430
- stroke: var(--_ctm-dn-ne-cr-dn-in-c1);
1776
+ stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
1431
1777
  }
1432
1778
  }
1433
1779
  }
@@ -1448,12 +1794,56 @@ $dark-color: #343a40;
1448
1794
  .chk_shipping-summary {
1449
1795
  display: flex;
1450
1796
  flex-direction: column;
1451
- gap: 12px;
1797
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
1452
1798
 
1453
1799
  .chk_address {
1454
1800
  display: flex;
1455
1801
  flex-direction: column;
1456
- gap: 6px;
1802
+ gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
1803
+
1804
+ .chk_saved_address_name {
1805
+ color: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-cr);
1806
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-fy);
1807
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se);
1808
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-se-ic);
1809
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ft-wt);
1810
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-le-ht);
1811
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-lr-sg);
1812
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-ne-dn-ue);
1813
+ }
1814
+
1815
+ .chk_saved_address {
1816
+ color: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-cr);
1817
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-fy);
1818
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se);
1819
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-se-ic);
1820
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ft-wt);
1821
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-le-ht);
1822
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-lr-sg);
1823
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sg-as-dn-ue);
1824
+ }
1825
+
1826
+ .chk_saved_address_label {
1827
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-cr);
1828
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-fy);
1829
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se);
1830
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-se-ic);
1831
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ft-wt);
1832
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-le-ht);
1833
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-lr-sg);
1834
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ll-dn-ue);
1835
+ }
1836
+
1837
+ .chk_saved_address_value {
1838
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-cr);
1839
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-fy);
1840
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se);
1841
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-se-ic);
1842
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ft-wt);
1843
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-le-ht);
1844
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-lr-sg);
1845
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-ve-dn-ue);
1846
+ }
1457
1847
  }
1458
1848
 
1459
1849
  .contact {
@@ -1464,8 +1854,63 @@ $dark-color: #343a40;
1464
1854
  }
1465
1855
 
1466
1856
  .right-btn {
1467
- display: flex;
1857
+ display: none;
1468
1858
  gap: 24px;
1859
+
1860
+ &:has(.chk_saved_address_button.selected) {
1861
+ display: flex !important;
1862
+ }
1863
+
1864
+ .chk_saved_address_button {
1865
+ cursor: pointer;
1866
+ align-self: flex-start;
1867
+ white-space: nowrap;
1868
+ display: flex;
1869
+ gap: 4px;
1870
+ align-items: flex-start;
1871
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-bd-cr);
1872
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-cr);
1873
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-rs);
1874
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-se);
1875
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-br-wh);
1876
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-cr);
1877
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-fy);
1878
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se);
1879
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-se-ic);
1880
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ft-wt);
1881
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-le-ht);
1882
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-lr-sg);
1883
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-ae)
1884
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-br)
1885
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-sd)
1886
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-sw-cr);
1887
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-dt-se-ue);
1888
+ &:hover {
1889
+ background-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-bd-cr);
1890
+ border-color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-cr);
1891
+ border-radius: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-rs);
1892
+ border-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-se);
1893
+ border-width: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-br-wh);
1894
+ color: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-cr);
1895
+ font-family: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-fy);
1896
+ font-size: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se);
1897
+ font-style: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-se-ic);
1898
+ font-weight: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ft-wt);
1899
+ line-height: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-le-ht);
1900
+ letter-spacing: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-lr-sg);
1901
+ box-shadow: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
1902
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-ae)
1903
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-sd)
1904
+ var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-sw-cr);
1905
+ text-decoration: var(--_ctm-dn-sd-sg-as-dn-sd-sg-as-bn-dn-hr-se-ue);
1906
+ }
1907
+ }
1908
+ }
1909
+
1910
+ &:hover {
1911
+ .right-btn {
1912
+ display: flex;
1913
+ }
1469
1914
  }
1470
1915
  }
1471
1916
  }