@sc-360-v2/storefront-cms-library 0.3.42 → 0.3.43

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 (14) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart-details.scss +350 -44
  3. package/dist/cart-summary.scss +1347 -167
  4. package/dist/icons.js +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/order-status.scss +1068 -202
  7. package/dist/section.scss +1 -1
  8. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +306 -460
  9. package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +7 -1
  10. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +818 -99
  11. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +96 -12
  12. package/dist/types/builder/tools/element-edit/common.d.ts +3 -0
  13. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +128 -66
  14. package/package.json +1 -1
package/dist/order-status.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @use "./functions.scss" as *;
3
+ @use "../functions.scss" as *;
4
4
 
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="orderStatus"] {
@@ -33,6 +33,8 @@
33
33
  }
34
34
 
35
35
  .order-confirmation {
36
+ display: flex;
37
+ flex-direction: column;
36
38
  border-color: var(
37
39
  --_ctm-mob-dn-or-wt-br-cr,
38
40
  var(--_ctm-tab-dn-or-wt-br-cr, var(--_ctm-dn-or-wt-br-cr))
@@ -49,7 +51,11 @@
49
51
  --_ctm-mob-dn-or-wt-br-rs,
50
52
  var(--_ctm-tab-dn-or-wt-br-rs, var(--_ctm-dn-or-wt-br-rs))
51
53
  );
52
- padding: prepareMediaVariable(--_ctm-lt-pg);
54
+ gap: var(
55
+ --_ctm-mob-dn-or-wt-im-gp,
56
+ var(--_ctm-tab-dn-or-wt-im-gp, var(--_ctm-dn-or-wt-im-gp))
57
+ );
58
+ padding: prepareMediaVariable(--_ctm-dn-or-wt-pg);
53
59
  width: 100%;
54
60
  height: 100%;
55
61
  // margin: 24px auto;
@@ -64,102 +70,145 @@
64
70
  .order-header {
65
71
  color: var(--_ctm-mob-dn-dn-hr-cr, var(--_ctm-tab-dn-dn-hr-cr, var(--_ctm-dn-dn-hr-cr)));
66
72
  background-color: var(
67
- --_ctm-mob-dn-dn-hr-bd-cr,
68
- var(--_ctm-tab-dn-dn-hr-bd-cr, var(--_ctm-dn-dn-hr-bd-cr))
73
+ --_ctm-mob-dn-hr-cr-hr-wr-bd-cr,
74
+ var(--_ctm-tab-dn-hr-cr-hr-wr-bd-cr, var(--_ctm-dn-hr-cr-hr-wr-bd-cr))
69
75
  );
70
76
  margin: var(--_ctm-mob-dn-dn-hr-mn, var(--_ctm-tab-dn-dn-hr-mn, var(--_ctm-dn-dn-hr-mn)));
71
- padding: var(--_ctm-mob-dn-dn-hr-pg, var(--_ctm-tab-dn-dn-hr-pg, var(--_ctm-dn-dn-hr-pg)));
77
+ padding: var(
78
+ --_ctm-mob-dn-hr-cr-hr-wr-pg,
79
+ var(--_ctm-tab-dn-hr-cr-hr-wr-pg, var(--_ctm-dn-hr-cr-hr-wr-pg))
80
+ );
72
81
  border-color: var(
73
- --_ctm-mob-dn-dn-hr-br-cr,
74
- var(--_ctm-tab-dn-dn-hr-br-cr, var(--_ctm-dn-dn-hr-br-cr))
82
+ --_ctm-mob-dn-hr-cr-hr-wr-br-cr,
83
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-cr, var(--_ctm-dn-hr-cr-hr-wr-br-cr))
75
84
  );
76
85
  border-style: var(
77
- --_ctm-mob-dn-dn-hr-br-se,
78
- var(--_ctm-tab-dn-dn-hr-br-se, var(--_ctm-dn-dn-hr-br-se))
86
+ --_ctm-mob-dn-hr-cr-hr-wr-br-se,
87
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-se, var(--_ctm-dn-hr-cr-hr-wr-br-se))
79
88
  );
80
89
  border-width: var(
81
- --_ctm-mob-dn-dn-hr-br-wh,
82
- var(--_ctm-tab-dn-dn-hr-br-wh, var(--_ctm-dn-dn-hr-br-wh))
90
+ --_ctm-mob-dn-hr-cr-hr-wr-br-wh,
91
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-wh, var(--_ctm-dn-hr-cr-hr-wr-br-wh))
83
92
  );
84
93
  border-radius: var(
85
- --_ctm-mob-dn-dn-hr-br-rs,
86
- var(--_ctm-tab-dn-dn-hr-br-rs, var(--_ctm-dn-dn-hr-br-rs))
94
+ --_ctm-mob-dn-hr-cr-hr-wr-br-rs,
95
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-rs, var(--_ctm-dn-hr-cr-hr-wr-br-rs))
87
96
  );
88
97
  box-shadow: var(
89
98
  --_show-shadow,
90
99
  var(
91
100
  --_ctm-mob-dn-bd-ad-fl-sw-ae,
92
- var(--_ctm-dn-dn-hr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
101
+ var(--_ctm-dn-hr-cr-hr-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
93
102
  )
94
103
  var(
95
104
  --_ctm-mob-dn-bd-ad-fl-sw-br,
96
- var(--_ctm-dn-dn-hr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
105
+ var(--_ctm-dn-hr-cr-hr-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
97
106
  )
98
107
  var(
99
108
  --_ctm-mob-dn-bd-ad-fl-sw-sd,
100
- var(--_ctm-dn-dn-hr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
109
+ var(--_ctm-dn-hr-cr-hr-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
101
110
  )
102
111
  var(
103
112
  --_ctm-mob-dn-bd-ad-fl-sw-cr,
104
- var(--_ctm-dn-dn-hr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
113
+ var(--_ctm-dn-hr-cr-hr-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
105
114
  )
106
115
  );
107
116
 
108
117
  .user-info {
118
+ display: flex;
119
+ flex-direction: column;
120
+ gap: var(
121
+ --_ctm-mob-dn-hr-cr-hr-wr-im-gp,
122
+ var(--_ctm-tab-dn-hr-cr-hr-wr-im-gp, var(--_ctm-dn-hr-cr-hr-wr-im-gp))
123
+ );
109
124
  h3 {
110
125
  // font-size: 1.1rem;
111
126
  // margin: 0;
112
127
  // color: #1e293b;
113
128
 
114
- font-family:
115
- var(
116
- --_ctm-mob-dn-dn-hr-ft-fy,
117
- var(--_ctm-tab-dn-dn-hr-ft-fy, var(--_ctm-dn-dn-hr-ft-fy))
118
- ),
119
- sans-serif;
120
- font-size: 20px;
121
- font-weight: 700;
122
- line-height: 30px;
123
- color: var(--_gray-900);
124
- // font-size: var(
125
- // --_ctm-mob-dn-dn-hr-ft-se,
126
- // var(--_ctm-tab-dn-dn-hr-ft-se, var(--_ctm-dn-dn-hr-ft-se))
127
- // );
128
- // font-weight: var(
129
- // --_ctm-mob-dn-dn-hr-ft-wt,
130
- // var(--_ctm-tab-dn-dn-hr-ft-wt, var(--_ctm-dn-dn-hr-ft-wt))
131
- // );
132
- // font-style: var(
133
- // --_ctm-mob-dn-dn-hr-ft-se-ic,
134
- // var(--_ctm-tab-dn-dn-hr-ft-se-ic, var(--_ctm-dn-dn-hr-ft-se-ic))
135
- // );
136
- // text-align: var(
137
- // --_ctm-mob-dn-dn-hr-tt-an,
138
- // var(--_ctm-tab-dn-dn-hr-tt-an, var(--_ctm-dn-dn-hr-tt-an))
139
- // );
140
- // letter-spacing: var(
141
- // --_ctm-mob-dn-dn-hr-lr-sg,
142
- // var(--_ctm-tab-dn-dn-hr-lr-sg, var(--_ctm-dn-dn-hr-lr-sg))
143
- // );
144
- // line-height: var(
145
- // --_ctm-mob-dn-dn-hr-le-ht,
146
- // var(--_ctm-tab-dn-dn-hr-le-ht, var(--_ctm-dn-dn-hr-le-ht-dc))
147
- // );
148
- // text-decoration: var(
149
- // --_ctm-mob-dn-dn-hr-ue,
150
- // var(--_ctm-tab-dn-dn-hr-ue, var(--_ctm-dn-dn-hr-ue))
151
- // );
129
+ font-family: var(
130
+ --_ctm-mob-dn-hr-cr-te-ft-fy,
131
+ var(--_ctm-tab-dn-hr-cr-te-ft-fy, var(--_ctm-dn-hr-cr-te-ft-fy))
132
+ );
133
+ font-size: var(
134
+ --_ctm-mob-dn-hr-cr-te-ft-se,
135
+ var(--_ctm-tab-dn-hr-cr-te-ft-se, var(--_ctm-dn-hr-cr-te-ft-se))
136
+ );
137
+ color: var(
138
+ --_ctm-mob-dn-hr-cr-te-cr,
139
+ var(--_ctm-tab-dn-hr-cr-te-cr, var(--_ctm-dn-hr-cr-te-cr))
140
+ );
141
+ font-weight: var(
142
+ --_ctm-mob-dn-hr-cr-te-ft-wt,
143
+ var(--_ctm-tab-dn-hr-cr-te-ft-wt, var(--_ctm-dn-hr-cr-te-ft-wt))
144
+ );
145
+ text-decoration: var(
146
+ --_ctm-mob-dn-hr-cr-te-ue,
147
+ var(--_ctm-tab-dn-hr-cr-te-ue, var(--_ctm-dn-hr-cr-te-ue))
148
+ );
149
+ letter-spacing: var(
150
+ --_ctm-mob-dn-hr-cr-te-lr-sg,
151
+ var(--_ctm-tab-dn-hr-cr-te-lr-sg, var(--_ctm-dn-hr-cr-te-lr-sg))
152
+ );
153
+ line-height: var(
154
+ --_ctm-mob-dn-hr-cr-te-le-ht,
155
+ var(--_ctm-tab-dn-hr-cr-te-le-ht, var(--_ctm-dn-hr-cr-te-le-ht))
156
+ );
157
+ font-style: var(
158
+ --_ctm-mob-dn-hr-cr-te-ft-se-ic,
159
+ var(--_ctm-tab-dn-hr-cr-te-ft-se-ic, var(--_ctm-dn-hr-cr-te-ft-se-ic))
160
+ );
161
+ text-align: var(
162
+ --_ctm-mob-dn-hr-cr-te-tt-an,
163
+ var(--_ctm-tab-dn-hr-cr-te-tt-an, var(--_ctm-dn-hr-cr-te-tt-an))
164
+ );
152
165
  span {
153
- margin-left: 10px;
166
+ margin-left: 6px;
167
+ svg {
168
+ path {
169
+ stroke: #475467;
170
+ }
171
+ }
154
172
  }
155
173
  }
156
174
 
157
175
  .user-meta {
158
- font-size: 12px;
159
- font-weight: 400;
160
- color: var(--_gray-600);
161
- line-height: 18px;
162
- margin: 4px 0 0;
176
+ font-family: var(
177
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-fy,
178
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-fy, var(--_ctm-dn-hr-cr-ee-ds-ft-fy))
179
+ );
180
+ font-size: var(
181
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-se,
182
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se, var(--_ctm-dn-hr-cr-ee-ds-ft-se))
183
+ );
184
+ color: var(
185
+ --_ctm-mob-dn-hr-cr-ee-ds-cr,
186
+ var(--_ctm-tab-dn-hr-cr-ee-ds-cr, var(--_ctm-dn-hr-cr-ee-ds-cr))
187
+ );
188
+ font-weight: var(
189
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-wt,
190
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-wt, var(--_ctm-dn-hr-cr-ee-ds-ft-wt))
191
+ );
192
+ text-decoration: var(
193
+ --_ctm-mob-dn-hr-cr-ee-ds-ue,
194
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ue, var(--_ctm-dn-hr-cr-ee-ds-ue))
195
+ );
196
+ letter-spacing: var(
197
+ --_ctm-mob-dn-hr-cr-ee-ds-lr-sg,
198
+ var(--_ctm-tab-dn-hr-cr-ee-ds-lr-sg, var(--_ctm-dn-hr-cr-ee-ds-lr-sg))
199
+ );
200
+ line-height: var(
201
+ --_ctm-mob-dn-hr-cr-ee-ds-le-ht,
202
+ var(--_ctm-tab-dn-hr-cr-ee-ds-le-ht, var(--_ctm-dn-hr-cr-ee-ds-le-ht))
203
+ );
204
+ font-style: var(
205
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-se-ic,
206
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se-ic, var(--_ctm-dn-hr-cr-ee-ds-ft-se-ic))
207
+ );
208
+ text-align: var(
209
+ --_ctm-mob-dn-hr-cr-ee-ds-tt-an,
210
+ var(--_ctm-tab-dn-hr-cr-ee-ds-tt-an, var(--_ctm-dn-hr-cr-ee-ds-tt-an))
211
+ );
163
212
  }
164
213
  }
165
214
  }
@@ -172,48 +221,10 @@
172
221
  // border-radius: 6px;
173
222
  // padding: 16px;
174
223
  // margin-bottom: 24px;
175
-
176
- background-color: var(
177
- --_ctm-mob-dn-dn-tt-bd-cr,
178
- var(--_ctm-tab-dn-dn-tt-bd-cr, var(--_ctm-dn-dn-tt-bd-cr))
179
- );
180
- margin: var(--_ctm-mob-dn-dn-tt-mn, var(--_ctm-tab-dn-dn-tt-mn, var(--_ctm-dn-dn-tt-mn)));
181
- padding: var(--_ctm-mob-dn-dn-tt-pg, var(--_ctm-tab-dn-dn-tt-pg, var(--_ctm-dn-dn-tt-pg)));
182
- border-color: var(
183
- --_ctm-mob-dn-dn-tt-br-cr,
184
- var(--_ctm-tab-dn-dn-tt-br-cr, var(--_ctm-dn-dn-tt-br-cr))
185
- );
186
- border-style: var(
187
- --_ctm-mob-dn-dn-tt-br-se,
188
- var(--_ctm-tab-dn-dn-tt-br-se, var(--_ctm-dn-dn-tt-br-se))
189
- );
190
- border-width: var(
191
- --_ctm-mob-dn-dn-tt-br-wh,
192
- var(--_ctm-tab-dn-dn-tt-br-wh, var(--_ctm-dn-dn-tt-br-wh))
193
- );
194
- border-radius: var(
195
- --_ctm-mob-dn-dn-tt-br-rs,
196
- var(--_ctm-tab-dn-dn-tt-br-rs, var(--_ctm-dn-dn-tt-br-rs))
197
- );
198
- box-shadow: var(
199
- --_show-shadow,
200
- var(
201
- --_ctm-mob-dn-bd-ad-fl-sw-ae,
202
- var(--_ctm-dn-dn-tt-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
203
- )
204
- var(
205
- --_ctm-mob-dn-bd-ad-fl-sw-br,
206
- var(--_ctm-dn-dn-tt-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
207
- )
208
- var(
209
- --_ctm-mob-dn-bd-ad-fl-sw-sd,
210
- var(--_ctm-dn-dn-tt-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
211
- )
212
- var(
213
- --_ctm-mob-dn-bd-ad-fl-sw-cr,
214
- var(--_ctm-dn-dn-tt-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
215
- )
216
- );
224
+ background-color: #f6fef9;
225
+ border-radius: 6px;
226
+ border: 1px solid #d0d5dd;
227
+ padding: 12px;
217
228
 
218
229
  .check-icon {
219
230
  font-size: 28px;
@@ -221,50 +232,308 @@
221
232
  }
222
233
 
223
234
  .success-text {
224
- font-size: 24px;
225
- font-weight: 600;
226
- color: var(--_gray-900);
227
- .icon {
228
- margin-right: 6px;
229
- }
230
- h2 {
231
- margin: 0 0 4px;
232
- font-size: var(--_ctm-dn-dn-tt-ft-se);
233
- color: var(--_ctm-dn-dn-tt-cr);
234
- font-weight: var(--_ctm-dn-dn-tt-ft-wt);
235
- font-family: var(--_ctm-dn-dn-tt-ft-fy);
235
+ display: flex;
236
+ flex-direction: column;
237
+ justify-content: center;
238
+ gap: 8px;
239
+ .success_toast_header {
240
+ display: flex;
241
+ gap: 6px;
242
+ align-items: center;
243
+ .success__dropdown__icon {
244
+ svg {
245
+ width: 32px;
246
+ height: 32px;
247
+ path {
248
+ stroke: #099250;
249
+ fill: #ffffff;
250
+ stroke-width: 0.8;
251
+ }
252
+ }
253
+ }
254
+ h2 {
255
+ color: #101828;
256
+ font-size: 24px;
257
+ font-weight: 600;
258
+ line-height: 32px;
259
+ font-family: "Lato";
260
+ }
236
261
  }
237
262
 
238
263
  p {
239
- margin: 0;
240
- font-size: var(--_ctm-dn-dn-tt-ft-se-dc);
241
- color: var(--_ctm-dn-dn-tt-cr-dc);
242
- font-weight: var(--_ctm-dn-dn-tt-ft-wt-dc);
243
- font-family: var(--_ctm-dn-dn-tt-ft-fy-dc);
244
- padding-top: 6px;
264
+ color: #475467;
265
+ font-size: 14px;
266
+ font-weight: 400;
267
+ line-height: 20px;
268
+ }
269
+ }
270
+ }
271
+ .error_toast_message_wrapper {
272
+ display: flex;
273
+ justify-content: space-between;
274
+ align-items: center;
275
+ background-color: #fffbfa;
276
+ border-radius: 6px;
277
+ border: 1px solid #fda29b;
278
+ padding: 12px;
279
+ .error_toast_message_left_section {
280
+ display: flex;
281
+ flex-direction: column;
282
+ gap: 8px;
283
+ .error_toast_message_header {
284
+ display: flex;
285
+ gap: 8px;
286
+ align-items: center;
287
+ h2 {
288
+ color: #101828;
289
+ font-size: 24px;
290
+ font-weight: 600;
291
+ line-height: 32px;
292
+ font-family: "Lato";
293
+ }
294
+ .error__dropdown__icon {
295
+ svg {
296
+ width: 32px;
297
+ height: 32px;
298
+ path {
299
+ stroke: #d92d20;
300
+ fill: #ffffff;
301
+ stroke-width: 0.8;
302
+ }
303
+ }
304
+ }
305
+ }
306
+ p {
307
+ color: #475467;
308
+ font-size: 14px;
309
+ font-weight: 400;
310
+ line-height: 20px;
245
311
  }
246
312
  }
313
+ .error_message_btn {
314
+ background-color: #243dc6;
315
+ color: #ffffff;
316
+ border-radius: 6px;
317
+ font-size: 16px;
318
+ font-weight: 600;
319
+ padding: 12px 24px;
320
+ }
247
321
  }
248
322
 
249
323
  /* ──────────── Order Details ──────────── */
250
324
  .order-details-wrapper {
251
325
  display: grid;
252
326
  grid-template-columns: 2fr 1fr;
253
- gap: 16px;
254
- border-radius: 6px;
255
- margin-bottom: 24px;
327
+ border-color: var(
328
+ --_ctm-mob-dn-or-cr-br-cr,
329
+ var(--_ctm-tab-dn-or-cr-br-cr, var(--_ctm-dn-or-cr-br-cr))
330
+ );
331
+ border-style: var(
332
+ --_ctm-mob-dn-or-cr-br-se,
333
+ var(--_ctm-tab-dn-or-cr-br-se, var(--_ctm-dn-or-cr-br-se))
334
+ );
335
+ border-width: var(
336
+ --_ctm-mob-dn-or-cr-br-wh,
337
+ var(--_ctm-tab-dn-or-cr-br-wh, var(--_ctm-dn-or-cr-br-wh))
338
+ );
339
+ border-radius: var(
340
+ --_ctm-mob-dn-or-cr-br-rs,
341
+ var(--_ctm-tab-dn-or-cr-br-rs, var(--_ctm-dn-or-cr-br-rs))
342
+ );
343
+ gap: var(
344
+ --_ctm-mob-dn-or-cr-im-gp,
345
+ var(--_ctm-tab-dn-or-cr-im-gp, var(--_ctm-dn-or-cr-im-gp))
346
+ );
347
+ margin: var(--_ctm-mob-dn-or-cr-mn, var(--_ctm-tab-dn-or-cr-mn, var(--_ctm-dn-or-cr-mn)));
348
+ padding: prepareMediaVariable(--_ctm-dn-or-cr-pg);
349
+ background-color: var(
350
+ --_ctm-mob-dn-or-cr-bd-cr,
351
+ var(--_ctm-tab-dn-or-cr-bd-cr, var(--_ctm-dn-or-cr-bd-cr))
352
+ );
353
+ box-shadow: var(
354
+ --_ctm-mob-dn-or-cr-sw-ae,
355
+ var(--_ctm-tab-dn-or-cr-sw-ae, var(--_ctm-dn-or-cr-sw-ae))
356
+ )
357
+ var(
358
+ --_ctm-mob-dn--or-cr-sw-br,
359
+ var(--_ctm-tab-dn--or-cr-sw-br, var(--_ctm-dn--or-cr-sw-br))
360
+ )
361
+ var(--_ctm-mob-dn-or-cr-sw-sd, var(--_ctm-tab-dn-or-cr-sw-sd, var(--_ctm-dn-or-cr-sw-sd)))
362
+ var(--_ctm-mob-dn-or-cr-sw-cr, var(--_ctm-tab-dn-or-cr-sw-cr, var(--_ctm-dn-or-cr-sw-cr)));
256
363
  }
257
364
 
258
- .order-info-section,
365
+ .order-info-section {
366
+ display: flex;
367
+ flex-direction: column;
368
+ gap: var(
369
+ --_ctm-mob-dn-or-io-or-io-cr-im-gp,
370
+ var(--_ctm-tab-dn-or-io-or-io-cr-im-gp, var(--_ctm-dn-or-io-or-io-cr-im-gp))
371
+ );
372
+ margin: var(
373
+ --_ctm-mob-dn-or-io-or-io-cr-mn,
374
+ var(--_ctm-tab-dn-or-io-or-io-cr-mn, var(--_ctm-dn-or-io-or-io-cr-mn))
375
+ );
376
+ padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-pg);
377
+ background-color: var(
378
+ --_ctm-mob-dn-or-io-or-io-cr-bd-cr,
379
+ var(--_ctm-tab-dn-or-io-or-io-cr-bd-cr, var(--_ctm-dn-or-io-or-io-cr-bd-cr))
380
+ );
381
+ .order_info_header {
382
+ font-family: var(
383
+ --_ctm-mob-dn-or-io-or-io-hr-ft-fy,
384
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-fy, var(--_ctm-dn-or-io-or-io-hr-ft-fy))
385
+ );
386
+ font-size: var(
387
+ --_ctm-mob-dn-or-io-or-io-hr-ft-se,
388
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-se, var(--_ctm-dn-or-io-or-io-hr-ft-se))
389
+ );
390
+ color: var(
391
+ --_ctm-mob-dn-or-io-or-io-hr-cr,
392
+ var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr))
393
+ );
394
+ font-weight: var(
395
+ --_ctm-mob-dn-or-io-or-io-hr-ft-wt,
396
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-wt, var(--_ctm-dn-or-io-or-io-hr-ft-wt))
397
+ );
398
+ text-decoration: var(
399
+ --_ctm-mob-dn-or-io-or-io-hr-ue,
400
+ var(--_ctm-tab-dn-or-io-or-io-hr-ue, var(--_ctm-dn-or-io-or-io-hr-ue))
401
+ );
402
+ letter-spacing: var(
403
+ --_ctm-mob-dn-or-io-or-io-hr-lr-sg,
404
+ var(--_ctm-tab-dn-or-io-or-io-hr-lr-sg, var(--_ctm-dn-or-io-or-io-hr-lr-sg))
405
+ );
406
+ line-height: var(
407
+ --_ctm-mob-dn-or-io-or-io-hr-le-ht,
408
+ var(--_ctm-tab-dn-or-io-or-io-hr-le-ht, var(--_ctm-dn-or-io-or-io-hr-le-ht))
409
+ );
410
+ font-style: var(
411
+ --_ctm-mob-dn-or-io-or-io-hr-ft-se-ic,
412
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-se-ic, var(--_ctm-dn-or-io-or-io-hr-ft-se-ic))
413
+ );
414
+ text-align: var(
415
+ --_ctm-mob-dn-or-io-or-io-hr-tt-an,
416
+ var(--_ctm-tab-dn-or-io-or-io-hr-tt-an, var(--_ctm-dn-or-io-or-io-hr-tt-an))
417
+ );
418
+ padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-pg);
419
+ background-color: var(
420
+ --_ctm-mob-dn-or-io-or-io-hr-bd-cr,
421
+ var(--_ctm-tab-dn-or-io-or-io-hr-bd-cr, var(--_ctm-dn-or-io-or-io-hr-bd-cr))
422
+ );
423
+ border-color: var(
424
+ --_ctm-mob-dn-or-io-or-io-hr-br-cr,
425
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr))
426
+ );
427
+ border-style: var(
428
+ --_ctm-mob-dn-or-io-or-io-hr-br-se,
429
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-se, var(--_ctm-dn-or-io-or-io-hr-br-se))
430
+ );
431
+ border-width: var(
432
+ --_ctm-mob-dn-or-io-or-io-hr-br-wh,
433
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-wh, var(--_ctm-dn-or-io-or-io-hr-br-wh))
434
+ );
435
+ border-radius: var(
436
+ --_ctm-mob-dn-or-io-or-io-hr-br-rs,
437
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-rs, var(--_ctm-dn-or-io-or-io-hr-br-rs))
438
+ );
439
+ span {
440
+ font-size: 14px;
441
+ font-weight: 600;
442
+ color: var(--_gray-600);
443
+ }
444
+ }
445
+ }
259
446
  .quick-actions-section {
260
- h4 {
261
- font-size: 14px;
262
- font-weight: 600;
263
- color: var(--_gray-600);
264
- padding: 12px 16px;
265
- border-radius: 6px;
266
- margin-bottom: 16px;
267
- border: 1px solid #eaecf0;
447
+ display: flex;
448
+ flex-direction: column;
449
+ gap: var(
450
+ --_ctm-mob-dn-qk-as-cr-im-gp,
451
+ var(--_ctm-tab-dn-qk-as-cr-im-gp, var(--_ctm-dn-qk-as-cr-im-gp))
452
+ );
453
+ padding: prepareMediaVariable(--_ctm-dn-qk-as-cr-pg);
454
+ background-color: var(
455
+ --_ctm-mob-dn-qk-as-cr-bd-cr,
456
+ var(--_ctm-tab-dn-qk-as-cr-bd-cr, var(--_ctm-dn-qk-as-cr-bd-cr))
457
+ );
458
+ border-color: var(
459
+ --_ctm-mob-dn-qk-as-cr-br-cr,
460
+ var(--_ctm-tab-dn-qk-as-cr-br-cr, var(--_ctm-dn-qk-as-cr-br-cr))
461
+ );
462
+ border-style: var(
463
+ --_ctm-mob-dn-qk-as-cr-br-se,
464
+ var(--_ctm-tab-dn-qk-as-cr-br-se, var(--_ctm-dn-qk-as-cr-br-se))
465
+ );
466
+ border-width: var(
467
+ --_ctm-mob-dn-qk-as-cr-br-wh,
468
+ var(--_ctm-tab-dn-qk-as-cr-br-wh, var(--_ctm-dn-qk-as-cr-br-wh))
469
+ );
470
+ border-radius: var(
471
+ --_ctm-mob-dn-qk-as-cr-br-rs,
472
+ var(--_ctm-tab-dn-qk-as-cr-br-rs, var(--_ctm-dn-qk-as-cr-br-rs))
473
+ );
474
+ .quick_actions_header {
475
+ padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-pg);
476
+ background-color: var(
477
+ --_ctm-mob-dn-qk-as-qk-hr-bd-cr,
478
+ var(--_ctm-tab-dn-qk-as-qk-hr-bd-cr, var(--_ctm-dn-qk-as-qk-hr-bd-cr))
479
+ );
480
+ border-color: var(
481
+ --_ctm-mob-dn-qk-as-qk-hr-br-cr,
482
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-cr, var(--_ctm-dn-qk-as-qk-hr-br-cr))
483
+ );
484
+ border-style: var(
485
+ --_ctm-mob-dn-qk-as-qk-hr-br-se,
486
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-se, var(--_ctm-dn-qk-as-qk-hr-br-se))
487
+ );
488
+ border-width: var(
489
+ --_ctm-mob-dn-qk-as-qk-hr-br-wh,
490
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-wh, var(--_ctm-dn-qk-as-qk-hr-br-wh))
491
+ );
492
+ border-radius: var(
493
+ --_ctm-mob-dn-qk-as-qk-hr-br-rs,
494
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-rs, var(--_ctm-dn-qk-as-qk-hr-br-rs))
495
+ );
496
+ span {
497
+ // font-size: 14px;
498
+ // font-weight: 600;
499
+ // color: var(--_gray-600);
500
+ font-family: var(
501
+ --_ctm-mob-dn-qk-as-qk-hr-ft-fy,
502
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-fy, var(--_ctm-dn-qk-as-qk-hr-ft-fy))
503
+ );
504
+ font-size: var(
505
+ --_ctm-mob-dn-qk-as-qk-hr-ft-se,
506
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-se, var(--_ctm-dn-qk-as-qk-hr-ft-se))
507
+ );
508
+ color: var(
509
+ --_ctm-mob-dn-qk-as-qk-hr-cr,
510
+ var(--_ctm-tab-dn-qk-as-qk-hr-cr, var(--_ctm-dn-qk-as-qk-hr-cr))
511
+ );
512
+ font-weight: var(
513
+ --_ctm-mob-dn-qk-as-qk-hr-ft-wt,
514
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-wt, var(--_ctm-dn-qk-as-qk-hr-ft-wt))
515
+ );
516
+ text-decoration: var(
517
+ --_ctm-mob-dn-qk-as-qk-hr-ue,
518
+ var(--_ctm-tab-dn-qk-as-qk-hr-ue, var(--_ctm-dn-qk-as-qk-hr-ue))
519
+ );
520
+ letter-spacing: var(
521
+ --_ctm-mob-dn-qk-as-qk-hr-lr-sg,
522
+ var(--_ctm-tab-dn-qk-as-qk-hr-lr-sg, var(--_ctm-dn-qk-as-qk-hr-lr-sg))
523
+ );
524
+ line-height: var(
525
+ --_ctm-mob-dn-qk-as-qk-hr-le-ht,
526
+ var(--_ctm-tab-dn-qk-as-qk-hr-le-ht, var(--_ctm-dn-qk-as-qk-hr-le-ht))
527
+ );
528
+ font-style: var(
529
+ --_ctm-mob-dn-qk-as-qk-hr-ft-se-ic,
530
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-se-ic, var(--_ctm-dn-qk-as-qk-hr-ft-se-ic))
531
+ );
532
+ text-align: var(
533
+ --_ctm-mob-dn-qk-as-qk-hr-tt-an,
534
+ var(--_ctm-tab-dn-qk-as-qk-hr-tt-an, var(--_ctm-dn-qk-as-qk-hr-tt-an))
535
+ );
536
+ }
268
537
  }
269
538
  }
270
539
 
@@ -273,44 +542,50 @@
273
542
  flex-direction: column;
274
543
  /* space between the two rows */
275
544
  background-color: var(
276
- --_ctm-mob-dn-dn-ds-bd-cr,
277
- var(--_ctm-tab-dn-dn-ds-bd-cr, var(--_ctm-dn-dn-ds-bd-cr))
545
+ --_ctm-mob-dn-or-io-or-io-wr-bd-cr,
546
+ var(--_ctm-tab-dn-or-io-or-io-wr-bd-cr, var(--_ctm-dn-or-io-or-io-wr-bd-cr))
547
+ );
548
+ margin: var(
549
+ --_ctm-mob-dn-or-io-or-io-wr-mn,
550
+ var(--_ctm-tab-dn-or-io-or-io-wr-mn, var(--_ctm-dn-or-io-or-io-wr-mn))
551
+ );
552
+ padding: var(
553
+ --_ctm-mob-dn-or-io-or-io-wr-pg,
554
+ var(--_ctm-tab-dn-or-io-or-io-wr-pg, var(--_ctm-dn-or-io-or-io-wr-pg))
278
555
  );
279
- margin: var(--_ctm-mob-dn-dn-ds-mn, var(--_ctm-tab-dn-dn-ds-mn, var(--_ctm-dn-dn-ds-mn)));
280
- padding: var(--_ctm-mob-dn-dn-ds-pg, var(--_ctm-tab-dn-dn-ds-pg, var(--_ctm-dn-dn-ds-pg)));
281
556
  border-color: var(
282
- --_ctm-mob-dn-dn-ds-br-cr,
283
- var(--_ctm-tab-dn-dn-ds-br-cr, var(--_ctm-dn-dn-ds-br-cr))
557
+ --_ctm-mob-dn-or-io-or-io-wr-br-cr,
558
+ var(--_ctm-tab-dn-or-io-or-io-wr-br-cr, var(--_ctm-dn-or-io-or-io-wr-br-cr))
284
559
  );
285
560
  border-style: var(
286
- --_ctm-mob-dn-dn-ds-br-se,
287
- var(--_ctm-tab-dn-dn-ds-br-se, var(--_ctm-dn-dn-ds-br-se))
561
+ --_ctm-mob-dn-or-io-or-io-wr-br-se,
562
+ var(--_ctm-tab-dn-or-io-or-io-wr-br-se, var(--_ctm-dn-or-io-or-io-wr-br-se))
288
563
  );
289
564
  border-width: var(
290
- --_ctm-mob-dn-dn-ds-br-wh,
291
- var(--_ctm-tab-dn-dn-ds-br-wh, var(--_ctm-dn-dn-ds-br-wh))
565
+ --_ctm-mob-dn-or-io-or-io-wr-br-wh,
566
+ var(--_ctm-tab-dn-or-io-or-io-wr-br-wh, var(--_ctm-dn-or-io-or-io-wr-br-wh))
292
567
  );
293
568
  border-radius: var(
294
- --_ctm-mob-dn-dn-ds-br-rs,
295
- var(--_ctm-mob-dn-dn-ds-br-rs, var(--_ctm-mob-dn-dn-ds-br-rs))
569
+ --_ctm-mob-dn-or-io-or-io-wr-br-rs,
570
+ var(--_ctm-mob-dn-or-io-or-io-wr-br-rs, var(--_ctm-mob-dn-or-io-or-io-wr-br-rs))
296
571
  );
297
572
  box-shadow: var(
298
573
  --_show-shadow,
299
574
  var(
300
575
  --_ctm-mob-dn-bd-ad-fl-sw-ae,
301
- var(--_ctm-dn-dn-ds-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
576
+ var(--_ctm-dn-or-io-or-io-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
302
577
  )
303
578
  var(
304
579
  --_ctm-mob-dn-bd-ad-fl-sw-br,
305
- var(--_ctm-dn-dn-ds-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
580
+ var(--_ctm-dn-or-io-or-io-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
306
581
  )
307
582
  var(
308
583
  --_ctm-mob-dn-bd-ad-fl-sw-sd,
309
- var(--_ctm-dn-dn-ds-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
584
+ var(--_ctm-dn-or-io-or-io-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
310
585
  )
311
586
  var(
312
587
  --_ctm-mob-dn-bd-ad-fl-sw-cr,
313
- var(--_ctm-dn-dn-ds-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
588
+ var(--_ctm-dn-or-io-or-io-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
314
589
  )
315
590
  );
316
591
 
@@ -336,19 +611,92 @@
336
611
  > div {
337
612
  strong {
338
613
  display: block;
339
- font-size: 14px;
340
- color: var(--_gray-500);
341
- line-height: 20px;
614
+ // font-size: 14px;
615
+ // color: var(--_gray-500);
616
+ // line-height: 20px;
342
617
  margin-bottom: 4px;
343
- font-weight: 400;
618
+ // font-weight: 400;
619
+ font-family: var(
620
+ --_ctm-mob-dn-or-io-or-ne-ft-fy,
621
+ var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy))
622
+ );
623
+ font-size: var(
624
+ --_ctm-mob-dn-or-io-or-ne-ft-se,
625
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
626
+ );
627
+ color: var(
628
+ --_ctm-mob-dn-or-io-or-ne-cr,
629
+ var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr))
630
+ );
631
+ font-weight: var(
632
+ --_ctm-mob-dn-or-io-or-ne-ft-wt,
633
+ var(--_ctm-tab-dn-or-io-or-ne-ft-wt, var(--_ctm-dn-or-io-or-ne-ft-wt))
634
+ );
635
+ text-decoration: var(
636
+ --_ctm-mob-dn-or-io-or-ne-ue,
637
+ var(--_ctm-tab-dn-or-io-or-ne-ue, var(--_ctm-dn-or-io-or-ne-ue))
638
+ );
639
+ letter-spacing: var(
640
+ --_ctm-mob-dn-or-io-or-ne-lr-sg,
641
+ var(--_ctm-tab-dn-or-io-or-ne-lr-sg, var(--_ctm-dn-or-io-or-ne-lr-sg))
642
+ );
643
+ line-height: var(
644
+ --_ctm-mob-dn-or-io-or-ne-le-ht,
645
+ var(--_ctm-tab-dn-or-io-or-ne-le-ht, var(--_ctm-dn-or-io-or-ne-le-ht))
646
+ );
647
+ font-style: var(
648
+ --_ctm-mob-dn-or-io-or-ne-ft-se-ic,
649
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se-ic, var(--_ctm-dn-or-io-or-ne-ft-se-ic))
650
+ );
651
+ text-align: var(
652
+ --_ctm-mob-dn-or-io-or-ne-tt-an,
653
+ var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an))
654
+ );
344
655
  }
345
656
 
346
657
  p {
347
658
  margin: 0;
348
- font-size: 20px;
349
- font-weight: 700;
350
- color: var(--_gray-900);
351
- line-height: 30px;
659
+ margin-bottom: 4px;
660
+ // font-size: 20px;
661
+ // font-weight: 700;
662
+ // color: var(--_gray-900);
663
+ // line-height: 30px;
664
+ font-family: var(
665
+ --_ctm-mob-dn-or-io-or-id-ft-fy,
666
+ var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
667
+ );
668
+ font-size: var(
669
+ --_ctm-mob-dn-or-io-or-id-ft-se,
670
+ var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se))
671
+ );
672
+ color: var(
673
+ --_ctm-mob-dn-or-io-or-id-cr,
674
+ var(--_ctm-tab-dn-or-io-or-id-cr, var(--_ctm-dn-or-io-or-id-cr))
675
+ );
676
+ font-weight: var(
677
+ --_ctm-mob-dn-or-io-or-id-ft-wt,
678
+ var(--_ctm-tab-dn-or-io-or-id-ft-wt, var(--_ctm-dn-or-io-or-id-ft-wt))
679
+ );
680
+ text-decoration: var(
681
+ --_ctm-mob-dn-or-io-or-id-ue,
682
+ var(--_ctm-tab-dn-or-io-or-id-ue, var(--_ctm-dn-or-io-or-id-ue))
683
+ );
684
+ letter-spacing: var(
685
+ --_ctm-mob-dn-or-io-or-id-lr-sg,
686
+ var(--_ctm-tab-dn-or-io-or-id-lr-sg, var(--_ctm-dn-or-io-or-id-lr-sg))
687
+ );
688
+ line-height: var(
689
+ --_ctm-mob-dn-or-io-or-id-le-ht,
690
+ var(--_ctm-tab-dn-or-io-or-id-le-ht, var(--_ctm-dn-or-io-or-id-le-ht))
691
+ );
692
+ font-style: var(
693
+ --_ctm-mob-dn-or-io-or-id-ft-se-ic,
694
+ var(--_ctm-tab-dn-or-io-or-id-ft-se-ic, var(--_ctm-dn-or-io-or-id-ft-se-ic))
695
+ );
696
+ text-align: var(
697
+ --_ctm-mob-dn-or-io-or-id-tt-an,
698
+ var(--_ctm-tab-dn-or-io-or-id-tt-an, var(--_ctm-dn-or-io-or-id-tt-an))
699
+ );
352
700
  }
353
701
  .delivery_address {
354
702
  font-size: 14px;
@@ -365,26 +713,79 @@
365
713
 
366
714
  .status {
367
715
  margin-left: 6px;
368
- padding: 2px 6px;
716
+ padding: 2px 8px;
369
717
  border-radius: 8px;
370
718
  font-size: 0.7rem;
371
719
  font-weight: 500;
372
720
  }
373
721
 
374
722
  .link-button {
375
- color: #2a33df;
723
+ color: #243dc6;
724
+ font-size: 14px;
725
+ font-weight: 400;
726
+ line-height: 20px;
376
727
  }
377
728
 
378
729
  .submitted {
379
- background: #e0f2fe;
380
- color: #0369a1;
730
+ font-size: 12px;
731
+ font-weight: 500;
732
+ line-height: 18px;
733
+ background: #eff8ff;
734
+ color: #0040c1;
735
+ &::before {
736
+ content: "";
737
+ display: inline-block;
738
+ width: 6px;
739
+ height: 6px;
740
+ background-color: #0040c1;
741
+ border-radius: 50%;
742
+ margin-right: 6px;
743
+ vertical-align: middle;
744
+ margin-top: -1px;
745
+ }
381
746
  }
382
747
 
383
748
  .order-date {
384
- font-size: 14px;
385
- font-weight: 400;
386
- color: var(--_gray-400);
387
- line-height: 20px;
749
+ // font-size: 14px;
750
+ // font-weight: 400;
751
+ // color: var(--_gray-400);
752
+ // line-height: 20px;
753
+ font-family: var(
754
+ --_ctm-mob-dn-or-io-or-de-ft-fy,
755
+ var(--_ctm-tab-dn-or-io-or-de-ft-fy, var(--_ctm-dn-or-io-or-de-ft-fy))
756
+ );
757
+ font-size: var(
758
+ --_ctm-mob-dn-or-io-or-de-ft-se,
759
+ var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se))
760
+ );
761
+ color: var(
762
+ --_ctm-mob-dn-or-io-or-de-cr,
763
+ var(--_ctm-tab-dn-or-io-or-de-cr, var(--_ctm-dn-or-io-or-de-cr))
764
+ );
765
+ font-weight: var(
766
+ --_ctm-mob-dn-or-io-or-de-ft-wt,
767
+ var(--_ctm-tab-dn-or-io-or-de-ft-wt, var(--_ctm-dn-or-io-or-de-ft-wt))
768
+ );
769
+ text-decoration: var(
770
+ --_ctm-mob-dn-or-io-or-de-ue,
771
+ var(--_ctm-tab-dn-or-io-or-de-ue, var(--_ctm-dn-or-io-or-de-ue))
772
+ );
773
+ letter-spacing: var(
774
+ --_ctm-mob-dn-or-io-or-de-lr-sg,
775
+ var(--_ctm-tab-dn-or-io-or-de-lr-sg, var(--_ctm-dn-or-io-or-de-lr-sg))
776
+ );
777
+ line-height: var(
778
+ --_ctm-mob-dn-or-io-or-de-le-ht,
779
+ var(--_ctm-tab-dn-or-io-or-de-le-ht, var(--_ctm-dn-or-io-or-de-le-ht))
780
+ );
781
+ font-style: var(
782
+ --_ctm-mob-dn-or-io-or-de-ft-se-ic,
783
+ var(--_ctm-tab-dn-or-io-or-de-ft-se-ic, var(--_ctm-dn-or-io-or-de-ft-se-ic))
784
+ );
785
+ text-align: var(
786
+ --_ctm-mob-dn-or-io-or-de-tt-an,
787
+ var(--_ctm-tab-dn-or-io-or-de-tt-an, var(--_ctm-dn-or-io-or-de-tt-an))
788
+ );
388
789
  }
389
790
 
390
791
  .inclusive-tax {
@@ -433,13 +834,100 @@
433
834
  );
434
835
 
435
836
  .action-button {
436
- padding: 8px;
437
- font-size: 14px;
438
- border-radius: 4px;
439
- background: none;
440
- color: #243dc6;
837
+ // padding: 8px;
838
+ // font-size: 14px;
839
+ // border-radius: 4px;
840
+ // background: none;
841
+ // color: #243dc6;
842
+ margin: var(
843
+ --_ctm-mob-dn-qk-as-as-mn,
844
+ var(--_ctm-tab-dn-qk-as-as-mn, var(--_ctm-dn-qk-as-as-mn))
845
+ );
846
+ padding: var(
847
+ --_ctm-mob-dn-qk-as-as-pg,
848
+ var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg))
849
+ );
850
+ border-color: var(
851
+ --_ctm-mob-dn-qk-as-as-br-cr,
852
+ var(--_ctm-tab-dn-qk-as-as-br-cr, var(--_ctm-dn-qk-as-as-br-cr))
853
+ );
854
+ border-style: var(
855
+ --_ctm-mob-dn-qk-as-as-br-se,
856
+ var(--_ctm-tab-dn-qk-as-as-br-se, var(--_ctm-dn-qk-as-as-br-se))
857
+ );
858
+ border-width: var(
859
+ --_ctm-mob-dn-qk-as-as-br-wh,
860
+ var(--_ctm-tab-dn-qk-as-as-br-wh, var(--_ctm-dn-qk-as-as-br-wh))
861
+ );
862
+ border-radius: var(
863
+ --_ctm-mob-dn-qk-as-as-br-rs,
864
+ var(--_ctm-mob-dn-qk-as-as-br-rs, var(--_ctm-mob-dn-qk-as-as-br-rs))
865
+ );
866
+ box-shadow: var(
867
+ --_show-shadow,
868
+ var(
869
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
870
+ var(--_ctm-dn-qk-as-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
871
+ )
872
+ var(
873
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
874
+ var(--_ctm-dn-qk-as-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
875
+ )
876
+ var(
877
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
878
+ var(--_ctm-dn-qk-as-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
879
+ )
880
+ var(
881
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
882
+ var(--_ctm-dn-qk-as-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
883
+ )
884
+ );
885
+ background-color: var(
886
+ --_ctm-mob-dn-qk-as-as-bd-cr,
887
+ var(--_ctm-tab-dn-qk-as-as-bd-cr, var(--_ctm-dn-qk-as-as-bd-cr))
888
+ );
889
+ font-family: var(
890
+ --_ctm-mob-dn-qk-as-as-ft-fy,
891
+ var(--_ctm-tab-dn-qk-as-as-ft-fy, var(--_ctm-dn-qk-as-as-ft-fy))
892
+ );
893
+ font-size: var(
894
+ --_ctm-mob-dn-qk-as-as-ft-se,
895
+ var(--_ctm-tab-dn-qk-as-as-ft-se, var(--_ctm-dn-qk-as-as-ft-se))
896
+ );
897
+ color: var(
898
+ --_ctm-mob-dn-qk-as-as-cr,
899
+ var(--_ctm-tab-dn-qk-as-as-cr, var(--_ctm-dn-qk-as-as-cr))
900
+ );
901
+ font-weight: var(
902
+ --_ctm-mob-dn-qk-as-as-ft-wt,
903
+ var(--_ctm-tab-dn-qk-as-as-ft-wt, var(--_ctm-dn-qk-as-as-ft-wt))
904
+ );
905
+ text-decoration: var(
906
+ --_ctm-mob-dn-qk-as-as-ue,
907
+ var(--_ctm-tab-dn-qk-as-as-ue, var(--_ctm-dn-qk-as-as-ue))
908
+ );
909
+ letter-spacing: var(
910
+ --_ctm-mob-dn-qk-as-as-lr-sg,
911
+ var(--_ctm-tab-dn-qk-as-as-lr-sg, var(--_ctm-dn-qk-as-as-lr-sg))
912
+ );
913
+ line-height: var(
914
+ --_ctm-mob-dn-qk-as-as-le-ht,
915
+ var(--_ctm-tab-dn-qk-as-as-le-ht, var(--_ctm-dn-qk-as-as-le-ht))
916
+ );
917
+ font-style: var(
918
+ --_ctm-mob-dn-qk-as-as-ft-se-ic,
919
+ var(--_ctm-tab-dn-qk-as-as-ft-se-ic, var(--_ctm-dn-qk-as-as-ft-se-ic))
920
+ );
921
+ text-align: var(
922
+ --_ctm-mob-dn-qk-as-as-tt-an,
923
+ var(--_ctm-tab-dn-qk-as-as-tt-an, var(--_ctm-dn-qk-as-as-tt-an))
924
+ );
925
+ padding: var(
926
+ --_ctm-mob-dn-qk-as-as-pg,
927
+ var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg))
928
+ );
441
929
  cursor: pointer;
442
- text-align: start;
930
+ // text-align: start;
443
931
 
444
932
  &:hover {
445
933
  color: #0d60e5;
@@ -498,22 +986,87 @@
498
986
  );
499
987
 
500
988
  h3 {
501
- font-size: 1rem;
502
- color: #374151;
503
- margin-bottom: 12px;
504
- font-weight: 600;
989
+ font-size: 14px;
990
+ color: #667085;
991
+ margin-bottom: 24px;
992
+ line-height: 20px;
993
+ font-weight: 400;
505
994
  }
506
995
 
507
996
  .items-grid {
508
997
  display: grid;
509
998
  grid-template-columns: repeat(3, 1fr);
510
- gap: 24px;
511
- margin-bottom: 16px;
999
+ gap: var(
1000
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
1001
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
1002
+ );
1003
+ background-color: var(
1004
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-bd-cr,
1005
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-bd-cr))
1006
+ );
1007
+ margin: var(
1008
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-mn,
1009
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-mn, var(--_ctm-dn-pt-wt-pt-wt-wr-mn))
1010
+ );
1011
+ padding: var(
1012
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-pg,
1013
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-dn-pt-wt-pt-wt-wr-pg))
1014
+ );
1015
+ border-color: var(
1016
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-cr,
1017
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-br-cr))
1018
+ );
1019
+ border-style: var(
1020
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-se,
1021
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-dn-pt-wt-pt-wt-wr-br-se))
1022
+ );
1023
+ border-width: var(
1024
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-wh,
1025
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-dn-pt-wt-pt-wt-wr-br-wh))
1026
+ );
1027
+
1028
+ border-radius: var(
1029
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-rs,
1030
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs))
1031
+ );
1032
+ margin-bottom: 24px;
512
1033
  }
513
1034
 
514
1035
  .item-card {
515
- border-radius: 6px;
1036
+ // border-radius: 6px;
1037
+ gap: var(
1038
+ --_ctm-mob-dn-pt-wt-pt-wt-im-im-gp,
1039
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp))
1040
+ );
1041
+ background-color: var(
1042
+ --_ctm-mob-dn-pt-wt-pt-wt-im-bd-cr,
1043
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-im-bd-cr))
1044
+ );
1045
+ margin: var(
1046
+ --_ctm-mob-dn-pt-wt-pt-wt-im-mn,
1047
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-mn, var(--_ctm-dn-pt-wt-pt-wt-im-mn))
1048
+ );
1049
+ padding: var(
1050
+ --_ctm-mob-dn-pt-wt-pt-wt-im-pg,
1051
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-pg, var(--_ctm-dn-pt-wt-pt-wt-im-pg))
1052
+ );
1053
+ border-color: var(
1054
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-cr,
1055
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-cr, var(--_ctm-dn-pt-wt-pt-wt-im-br-cr))
1056
+ );
1057
+ border-style: var(
1058
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-se,
1059
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-se, var(--_ctm-dn-pt-wt-pt-wt-im-br-se))
1060
+ );
1061
+ border-width: var(
1062
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-wh,
1063
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-wh, var(--_ctm-dn-pt-wt-pt-wt-im-br-wh))
1064
+ );
516
1065
 
1066
+ border-radius: var(
1067
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-rs,
1068
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-rs, var(--_ctm-dn-pt-wt-pt-wt-im-br-rs))
1069
+ );
517
1070
  display: flex;
518
1071
  align-items: flex-start;
519
1072
 
@@ -521,8 +1074,43 @@
521
1074
  width: 60px;
522
1075
  height: 60px;
523
1076
  object-fit: cover;
524
- border-radius: 4px;
525
- margin-right: 12px;
1077
+ // border-radius: 4px;
1078
+ // margin-right: 12px;
1079
+ gap: var(
1080
+ --_ctm-mob-dn-pt-wt-pt-ie-im-gp,
1081
+ var(--_ctm-tab-dn-pt-wt-pt-ie-im-gp, var(--_ctm-dn-pt-wt-pt-ie-im-gp))
1082
+ );
1083
+ background-color: var(
1084
+ --_ctm-mob-dn-pt-wt-pt-ie-bd-cr,
1085
+ var(--_ctm-tab-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-dn-pt-wt-pt-ie-bd-cr))
1086
+ );
1087
+ margin: var(
1088
+ --_ctm-mob-dn-pt-wt-pt-ie-mn,
1089
+ var(--_ctm-tab-dn-pt-wt-pt-ie-mn, var(--_ctm-dn-pt-wt-pt-ie-mn))
1090
+ );
1091
+ padding: var(
1092
+ --_ctm-mob-dn-pt-wt-pt-ie-pg,
1093
+ var(--_ctm-tab-dn-pt-wt-pt-ie-pg, var(--_ctm-dn-pt-wt-pt-ie-pg))
1094
+ );
1095
+ border-color: var(
1096
+ --_ctm-mob-dn-pt-wt-pt-ie-br-cr,
1097
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-cr, var(--_ctm-dn-pt-wt-pt-ie-br-cr))
1098
+ );
1099
+ border-style: var(
1100
+ --_ctm-mob-dn-pt-wt-pt-ie-br-se,
1101
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-se, var(--_ctm-dn-pt-wt-pt-ie-br-se))
1102
+ );
1103
+ border-width: var(
1104
+ --_ctm-mob-dn-pt-wt-pt-ie-br-wh,
1105
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-wh, var(--_ctm-dn-pt-wt-pt-ie-br-wh))
1106
+ );
1107
+
1108
+ border-radius: var(
1109
+ --_ctm-mob-dn-pt-wt-pt-ie-br-rs,
1110
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-rs, var(--_ctm-dn-pt-wt-pt-ie-br-rs))
1111
+ );
1112
+ display: flex;
1113
+ align-items: flex-start;
526
1114
  }
527
1115
 
528
1116
  .item-details {
@@ -530,56 +1118,334 @@
530
1118
 
531
1119
  .item-name {
532
1120
  margin: 0 0 4px;
533
- font-size: 14px;
534
- font-weight: 600;
535
- color: var(--_gray-900);
536
- line-height: 20px;
1121
+ // font-size: 14px;
1122
+ // font-weight: 600;
1123
+ // color: var(--_gray-900);
1124
+ // line-height: 20px;
1125
+ padding: var(
1126
+ --_ctm-mob-dn-pt-wt-pt-te-pg,
1127
+ var(--_ctm-tab-dn-pt-wt-pt-te-im-pg, var(--_ctm-dn-pt-wt-pt-te-pg))
1128
+ );
1129
+ font-family: var(
1130
+ --_ctm-mob-dn-pt-wt-pt-te-ft-fy,
1131
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-fy, var(--_ctm-dn-pt-wt-pt-te-ft-fy))
1132
+ );
1133
+ font-size: var(
1134
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se,
1135
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se, var(--_ctm-dn-pt-wt-pt-te-ft-se))
1136
+ );
1137
+ color: var(
1138
+ --_ctm-mob-dn-pt-wt-pt-te-cr,
1139
+ var(--_ctm-tab-dn-pt-wt-pt-te-cr, var(--_ctm-dn-pt-wt-pt-te-cr))
1140
+ );
1141
+ font-weight: var(
1142
+ --_ctm-mob-dn-pt-wt-pt-te-ft-wt,
1143
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-wt, var(--_ctm-dn-pt-wt-pt-te-ft-wt))
1144
+ );
1145
+ text-decoration: var(
1146
+ --_ctm-mob-dn-pt-wt-pt-te-ue,
1147
+ var(--_ctm-tab-dn-pt-wt-pt-te-ue, var(--_ctm-dn-pt-wt-pt-te-ue))
1148
+ );
1149
+ letter-spacing: var(
1150
+ --_ctm-mob-dn-pt-wt-pt-te-lr-sg,
1151
+ var(--_ctm-tab-dn-pt-wt-pt-te-lr-sg, var(--_ctm-dn-pt-wt-pt-te-lr-sg))
1152
+ );
1153
+ line-height: var(
1154
+ --_ctm-mob-dn-pt-wt-pt-te-le-ht,
1155
+ var(--_ctm-tab-dn-pt-wt-pt-te-le-ht, var(--_ctm-dn-pt-wt-pt-te-le-ht))
1156
+ );
1157
+ font-style: var(
1158
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se-ic,
1159
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-dn-pt-wt-pt-te-ft-se-ic))
1160
+ );
1161
+ text-align: var(
1162
+ --_ctm-mob-dn-pt-wt-pt-te-tt-an,
1163
+ var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an))
1164
+ );
537
1165
  }
538
1166
 
539
- .item-specs,
540
- .item-qty,
1167
+ .item-specs {
1168
+ padding: var(
1169
+ --_ctm-mob-dn-pt-wt-pt-ce-pg,
1170
+ var(--_ctm-tab-dn-pt-wt-pt-ce-im-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
1171
+ );
1172
+ font-family: var(
1173
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-fy,
1174
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy))
1175
+ );
1176
+ font-size: var(
1177
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1178
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1179
+ );
1180
+ color: var(
1181
+ --_ctm-mob-dn-pt-wt-pt-ce-cr,
1182
+ var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr))
1183
+ );
1184
+ font-weight: var(
1185
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-wt,
1186
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-dn-pt-wt-pt-ce-ft-wt))
1187
+ );
1188
+ text-decoration: var(
1189
+ --_ctm-mob-dn-pt-wt-pt-ce-ue,
1190
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ue, var(--_ctm-dn-pt-wt-pt-ce-ue))
1191
+ );
1192
+ letter-spacing: var(
1193
+ --_ctm-mob-dn-pt-wt-pt-ce-lr-sg,
1194
+ var(--_ctm-tab-dn-pt-wt-pt-ce-lr-sg, var(--_ctm-dn-pt-wt-pt-ce-lr-sg))
1195
+ );
1196
+ line-height: var(
1197
+ --_ctm-mob-dn-pt-wt-pt-ce-le-ht,
1198
+ var(--_ctm-tab-dn-pt-wt-pt-ce-le-ht, var(--_ctm-dn-pt-wt-pt-ce-le-ht))
1199
+ );
1200
+ font-style: var(
1201
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se-ic,
1202
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ce-ft-se-ic))
1203
+ );
1204
+ text-align: var(
1205
+ --_ctm-mob-dn-pt-wt-pt-ce-tt-an,
1206
+ var(--_ctm-tab-dn-pt-wt-pt-ce-tt-an, var(--_ctm-dn-pt-wt-pt-ce-tt-an))
1207
+ );
1208
+ }
1209
+ .item-qty {
1210
+ padding: var(
1211
+ --_ctm-mob-dn-pt-wt-pt-qy-pg,
1212
+ var(--_ctm-tab-dn-pt-wt-pt-qy-pg, var(--_ctm-dn-pt-wt-pt-qy-pg))
1213
+ );
1214
+ font-family: var(
1215
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-fy,
1216
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy))
1217
+ );
1218
+ font-size: var(
1219
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1220
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1221
+ );
1222
+ color: var(
1223
+ --_ctm-mob-dn-pt-wt-pt-qy-cr,
1224
+ var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr))
1225
+ );
1226
+ font-weight: var(
1227
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-wt,
1228
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-dn-pt-wt-pt-qy-ft-wt))
1229
+ );
1230
+ text-decoration: var(
1231
+ --_ctm-mob-dn-pt-wt-pt-qy-ue,
1232
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ue, var(--_ctm-dn-pt-wt-pt-qy-ue))
1233
+ );
1234
+ letter-spacing: var(
1235
+ --_ctm-mob-dn-pt-wt-pt-qy-lr-sg,
1236
+ var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-dn-pt-wt-pt-qy-lr-sg))
1237
+ );
1238
+ line-height: var(
1239
+ --_ctm-mob-dn-pt-wt-pt-qy-le-ht,
1240
+ var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht, var(--_ctm-dn-pt-wt-pt-qy-le-ht))
1241
+ );
1242
+ font-style: var(
1243
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic,
1244
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic))
1245
+ );
1246
+ text-align: var(
1247
+ --_ctm-mob-dn-pt-wt-pt-qy-tt-an,
1248
+ var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an))
1249
+ );
1250
+ span {
1251
+ font-family: var(
1252
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-fy-dc,
1253
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-fy-dc))
1254
+ );
1255
+ font-size: var(
1256
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc,
1257
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc))
1258
+ );
1259
+ color: var(
1260
+ --_ctm-mob-dn-pt-wt-pt-qy-cr-dc,
1261
+ var(--_ctm-tab-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-dn-pt-wt-pt-qy-cr-dc))
1262
+ );
1263
+ font-weight: var(
1264
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-wt-dc,
1265
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-wt-dc))
1266
+ );
1267
+ text-decoration: var(
1268
+ --_ctm-mob-dn-pt-wt-pt-qy-ue-dc,
1269
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-dn-pt-wt-pt-qy-ue-dc))
1270
+ );
1271
+ letter-spacing: var(
1272
+ --_ctm-mob-dn-pt-wt-pt-qy-lr-sg-dc,
1273
+ var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-qy-lr-sg-dc))
1274
+ );
1275
+ line-height: var(
1276
+ --_ctm-mob-dn-pt-wt-pt-qy-le-ht-dc,
1277
+ var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-dn-pt-wt-pt-qy-le-ht-dc))
1278
+ );
1279
+ font-style: var(
1280
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic-dc,
1281
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic-dc))
1282
+ );
1283
+ text-align: var(
1284
+ --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc,
1285
+ var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc))
1286
+ );
1287
+ }
1288
+ }
541
1289
  .estimated-delivery {
542
1290
  margin: 0;
543
- font-size: 12px;
544
- color: var(--_gray-600);
545
- line-height: 18px;
1291
+ // font-size: 12px;
1292
+ // color: var(--_gray-600);
1293
+ // line-height: 18px;
1294
+ padding: var(
1295
+ --_ctm-mob-dn-pt-wt-pt-ed-de-pg,
1296
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg, var(--_ctm-dn-pt-wt-pt-ed-de-pg))
1297
+ );
1298
+ font-family: var(
1299
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy,
1300
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy))
1301
+ );
1302
+ font-size: var(
1303
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se,
1304
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se))
1305
+ );
1306
+ color: var(
1307
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
1308
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
1309
+ );
1310
+ font-weight: var(
1311
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt,
1312
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt))
1313
+ );
1314
+ text-decoration: var(
1315
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue,
1316
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue))
1317
+ );
1318
+ letter-spacing: var(
1319
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg,
1320
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg))
1321
+ );
1322
+ line-height: var(
1323
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht,
1324
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht))
1325
+ );
1326
+ font-style: var(
1327
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic,
1328
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic))
1329
+ );
1330
+ text-align: var(
1331
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
1332
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an))
1333
+ );
546
1334
  }
547
1335
 
548
1336
  .delivery-date {
549
1337
  margin: 0;
550
- font-size: 0.75rem;
551
- color: #1e293b;
552
- font-weight: 600;
1338
+ // font-size: 0.75rem;
1339
+ // color: #1e293b;
1340
+ // font-weight: 600;
1341
+ padding: var(
1342
+ --_ctm-mob-dn-pt-wt-pt-ed-de-pg-dc,
1343
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-pg-dc))
1344
+ );
1345
+ font-family: var(
1346
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
1347
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc))
1348
+ );
1349
+ font-size: var(
1350
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1351
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1352
+ );
1353
+ color: var(
1354
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
1355
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
1356
+ );
1357
+ font-weight: var(
1358
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc,
1359
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc))
1360
+ );
1361
+ text-decoration: var(
1362
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc,
1363
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc))
1364
+ );
1365
+ letter-spacing: var(
1366
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc,
1367
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc))
1368
+ );
1369
+ line-height: var(
1370
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc,
1371
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc))
1372
+ );
1373
+ font-style: var(
1374
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1375
+ var(
1376
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1377
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc)
1378
+ )
1379
+ );
1380
+ text-align: var(
1381
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc,
1382
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc))
1383
+ );
553
1384
  }
554
1385
  }
555
1386
 
556
1387
  .item-price {
557
- font-size: 0.85rem;
558
- font-weight: 600;
559
- color: #1e293b;
1388
+ // font-size: 0.85rem;
1389
+ // font-weight: 600;
1390
+ // color: #1e293b;
1391
+ font-family: var(
1392
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-fy,
1393
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-fy, var(--_ctm-dn-pt-wt-pt-pe-ft-fy))
1394
+ );
1395
+ font-size: var(
1396
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-se,
1397
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se, var(--_ctm-dn-pt-wt-pt-pe-ft-se))
1398
+ );
1399
+ color: var(
1400
+ --_ctm-mob-dn-pt-wt-pt-pe-cr,
1401
+ var(--_ctm-tab-dn-pt-wt-pt-pe-cr, var(--_ctm-dn-pt-wt-pt-pe-cr))
1402
+ );
1403
+ font-weight: var(
1404
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-wt,
1405
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-wt, var(--_ctm-dn-pt-wt-pt-pe-ft-wt))
1406
+ );
1407
+ text-decoration: var(
1408
+ --_ctm-mob-dn-pt-wt-pt-pe-ue,
1409
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue))
1410
+ );
1411
+ letter-spacing: var(
1412
+ --_ctm-mob-dn-pt-wt-pt-pe-lr-sg,
1413
+ var(--_ctm-tab-dn-pt-wt-pt-pe-lr-sg, var(--_ctm-dn-pt-wt-pt-pe-lr-sg))
1414
+ );
1415
+ line-height: var(
1416
+ --_ctm-mob-dn-pt-wt-pt-pe-le-ht,
1417
+ var(--_ctm-tab-dn-pt-wt-pt-pe-le-ht, var(--_ctm-dn-pt-wt-pt-pe-le-ht))
1418
+ );
1419
+ font-style: var(
1420
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-se-ic,
1421
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se-ic, var(--_ctm-dn-pt-wt-pt-pe-ft-se-ic))
1422
+ );
1423
+ text-align: var(
1424
+ --_ctm-mob-dn-pt-wt-pt-pe-tt-an,
1425
+ var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an))
1426
+ );
560
1427
  margin-left: 12px;
561
1428
  }
562
1429
  }
563
1430
 
564
1431
  .more-link {
565
- font-size: 0.85rem;
566
- background: none;
567
- border: none;
568
- color: #3b82f6;
1432
+ color: #243dc6;
1433
+ font-size: 14px;
1434
+ font-weight: 400;
1435
+ line-height: 20px;
569
1436
  cursor: pointer;
570
- margin-bottom: 20px;
571
1437
  }
572
1438
  }
573
1439
 
574
1440
  /* ───────── Order Attributes ───────── */
575
1441
  .order-attributes {
576
1442
  border-top: 1px dashed #e0e0e0;
577
- padding-top: 12px;
1443
+ padding-top: 24px;
578
1444
 
579
1445
  h4 {
580
1446
  font-size: 14px;
581
1447
  font-weight: 400;
582
- color: var(--_gray-400);
1448
+ color: var(--_gray-500);
583
1449
  line-height: 20px;
584
1450
  }
585
1451