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

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 (21) 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/checkout.scss +196 -5
  5. package/dist/icons.js +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/layouter-pro-item.scss +41 -5
  8. package/dist/layouter-pro.scss +2 -2
  9. package/dist/order-status.scss +1108 -202
  10. package/dist/overflow-module.scss +4 -3
  11. package/dist/responsive-behaviour.scss +7 -1
  12. package/dist/section.scss +1 -1
  13. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +538 -458
  14. package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +7 -1
  15. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +641 -97
  16. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +96 -12
  17. package/dist/types/builder/tools/element-edit/common.d.ts +3 -0
  18. package/dist/types/builder/tools/element-edit/layouter-pro-item.d.ts +22 -1
  19. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +128 -66
  20. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +903 -0
  21. package/package.json +1 -1
package/dist/order-status.scss CHANGED
@@ -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;
245
268
  }
246
269
  }
247
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;
311
+ }
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
+ }
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,127 @@
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;
994
+ padding: var(
995
+ --_ctm-mob-dn-pt-wt-pt-te-pg,
996
+ var(--_ctm-tab-dn-pt-wt-pt-te-im-pg, var(--_ctm-dn-pt-wt-pt-te-pg))
997
+ );
998
+ font-family: var(
999
+ --_ctm-mob-dn-pt-wt-pt-te-ft-fy,
1000
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-fy, var(--_ctm-dn-pt-wt-pt-te-ft-fy))
1001
+ );
1002
+ font-size: var(
1003
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se,
1004
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se, var(--_ctm-dn-pt-wt-pt-te-ft-se))
1005
+ );
1006
+ color: var(
1007
+ --_ctm-mob-dn-pt-wt-pt-te-cr,
1008
+ var(--_ctm-tab-dn-pt-wt-pt-te-cr, var(--_ctm-dn-pt-wt-pt-te-cr))
1009
+ );
1010
+ font-weight: var(
1011
+ --_ctm-mob-dn-pt-wt-pt-te-ft-wt,
1012
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-wt, var(--_ctm-dn-pt-wt-pt-te-ft-wt))
1013
+ );
1014
+ text-decoration: var(
1015
+ --_ctm-mob-dn-pt-wt-pt-te-ue,
1016
+ var(--_ctm-tab-dn-pt-wt-pt-te-ue, var(--_ctm-dn-pt-wt-pt-te-ue))
1017
+ );
1018
+ letter-spacing: var(
1019
+ --_ctm-mob-dn-pt-wt-pt-te-lr-sg,
1020
+ var(--_ctm-tab-dn-pt-wt-pt-te-lr-sg, var(--_ctm-dn-pt-wt-pt-te-lr-sg))
1021
+ );
1022
+ line-height: var(
1023
+ --_ctm-mob-dn-pt-wt-pt-te-le-ht,
1024
+ var(--_ctm-tab-dn-pt-wt-pt-te-le-ht, var(--_ctm-dn-pt-wt-pt-te-le-ht))
1025
+ );
1026
+ font-style: var(
1027
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se-ic,
1028
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-dn-pt-wt-pt-te-ft-se-ic))
1029
+ );
1030
+ text-align: var(
1031
+ --_ctm-mob-dn-pt-wt-pt-te-tt-an,
1032
+ var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an))
1033
+ );
505
1034
  }
506
1035
 
507
1036
  .items-grid {
508
1037
  display: grid;
509
1038
  grid-template-columns: repeat(3, 1fr);
510
- gap: 24px;
511
- margin-bottom: 16px;
1039
+ gap: var(
1040
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
1041
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
1042
+ );
1043
+ background-color: var(
1044
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-bd-cr,
1045
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-bd-cr))
1046
+ );
1047
+ margin: var(
1048
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-mn,
1049
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-mn, var(--_ctm-dn-pt-wt-pt-wt-wr-mn))
1050
+ );
1051
+ padding: var(
1052
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-pg,
1053
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-dn-pt-wt-pt-wt-wr-pg))
1054
+ );
1055
+ border-color: var(
1056
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-cr,
1057
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-br-cr))
1058
+ );
1059
+ border-style: var(
1060
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-se,
1061
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-dn-pt-wt-pt-wt-wr-br-se))
1062
+ );
1063
+ border-width: var(
1064
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-wh,
1065
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-dn-pt-wt-pt-wt-wr-br-wh))
1066
+ );
1067
+
1068
+ border-radius: var(
1069
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-rs,
1070
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs))
1071
+ );
1072
+ margin-bottom: 24px;
512
1073
  }
513
1074
 
514
1075
  .item-card {
515
- border-radius: 6px;
1076
+ // border-radius: 6px;
1077
+ gap: var(
1078
+ --_ctm-mob-dn-pt-wt-pt-wt-im-im-gp,
1079
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp))
1080
+ );
1081
+ background-color: var(
1082
+ --_ctm-mob-dn-pt-wt-pt-wt-im-bd-cr,
1083
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-im-bd-cr))
1084
+ );
1085
+ margin: var(
1086
+ --_ctm-mob-dn-pt-wt-pt-wt-im-mn,
1087
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-mn, var(--_ctm-dn-pt-wt-pt-wt-im-mn))
1088
+ );
1089
+ padding: var(
1090
+ --_ctm-mob-dn-pt-wt-pt-wt-im-pg,
1091
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-pg, var(--_ctm-dn-pt-wt-pt-wt-im-pg))
1092
+ );
1093
+ border-color: var(
1094
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-cr,
1095
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-cr, var(--_ctm-dn-pt-wt-pt-wt-im-br-cr))
1096
+ );
1097
+ border-style: var(
1098
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-se,
1099
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-se, var(--_ctm-dn-pt-wt-pt-wt-im-br-se))
1100
+ );
1101
+ border-width: var(
1102
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-wh,
1103
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-wh, var(--_ctm-dn-pt-wt-pt-wt-im-br-wh))
1104
+ );
516
1105
 
1106
+ border-radius: var(
1107
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-rs,
1108
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-rs, var(--_ctm-dn-pt-wt-pt-wt-im-br-rs))
1109
+ );
517
1110
  display: flex;
518
1111
  align-items: flex-start;
519
1112
 
@@ -521,8 +1114,43 @@
521
1114
  width: 60px;
522
1115
  height: 60px;
523
1116
  object-fit: cover;
524
- border-radius: 4px;
525
- margin-right: 12px;
1117
+ // border-radius: 4px;
1118
+ // margin-right: 12px;
1119
+ gap: var(
1120
+ --_ctm-mob-dn-pt-wt-pt-ie-im-gp,
1121
+ var(--_ctm-tab-dn-pt-wt-pt-ie-im-gp, var(--_ctm-dn-pt-wt-pt-ie-im-gp))
1122
+ );
1123
+ background-color: var(
1124
+ --_ctm-mob-dn-pt-wt-pt-ie-bd-cr,
1125
+ var(--_ctm-tab-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-dn-pt-wt-pt-ie-bd-cr))
1126
+ );
1127
+ margin: var(
1128
+ --_ctm-mob-dn-pt-wt-pt-ie-mn,
1129
+ var(--_ctm-tab-dn-pt-wt-pt-ie-mn, var(--_ctm-dn-pt-wt-pt-ie-mn))
1130
+ );
1131
+ padding: var(
1132
+ --_ctm-mob-dn-pt-wt-pt-ie-pg,
1133
+ var(--_ctm-tab-dn-pt-wt-pt-ie-pg, var(--_ctm-dn-pt-wt-pt-ie-pg))
1134
+ );
1135
+ border-color: var(
1136
+ --_ctm-mob-dn-pt-wt-pt-ie-br-cr,
1137
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-cr, var(--_ctm-dn-pt-wt-pt-ie-br-cr))
1138
+ );
1139
+ border-style: var(
1140
+ --_ctm-mob-dn-pt-wt-pt-ie-br-se,
1141
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-se, var(--_ctm-dn-pt-wt-pt-ie-br-se))
1142
+ );
1143
+ border-width: var(
1144
+ --_ctm-mob-dn-pt-wt-pt-ie-br-wh,
1145
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-wh, var(--_ctm-dn-pt-wt-pt-ie-br-wh))
1146
+ );
1147
+
1148
+ border-radius: var(
1149
+ --_ctm-mob-dn-pt-wt-pt-ie-br-rs,
1150
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-rs, var(--_ctm-dn-pt-wt-pt-ie-br-rs))
1151
+ );
1152
+ display: flex;
1153
+ align-items: flex-start;
526
1154
  }
527
1155
 
528
1156
  .item-details {
@@ -530,56 +1158,334 @@
530
1158
 
531
1159
  .item-name {
532
1160
  margin: 0 0 4px;
533
- font-size: 14px;
534
- font-weight: 600;
535
- color: var(--_gray-900);
536
- line-height: 20px;
1161
+ // font-size: 14px;
1162
+ // font-weight: 600;
1163
+ // color: var(--_gray-900);
1164
+ // line-height: 20px;
1165
+ padding: var(
1166
+ --_ctm-mob-dn-pt-wt-pt-ne-pg,
1167
+ var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1168
+ );
1169
+ font-family: var(
1170
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
1171
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
1172
+ );
1173
+ font-size: var(
1174
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-se,
1175
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se))
1176
+ );
1177
+ color: var(
1178
+ --_ctm-mob-dn-pt-wt-pt-ne-cr,
1179
+ var(--_ctm-tab-dn-pt-wt-pt-ne-cr, var(--_ctm-dn-pt-wt-pt-ne-cr))
1180
+ );
1181
+ font-weight: var(
1182
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-wt,
1183
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-dn-pt-wt-pt-ne-ft-wt))
1184
+ );
1185
+ text-decoration: var(
1186
+ --_ctm-mob-dn-pt-wt-pt-ne-ue,
1187
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ue, var(--_ctm-dn-pt-wt-pt-ne-ue))
1188
+ );
1189
+ letter-spacing: var(
1190
+ --_ctm-mob-dn-pt-wt-pt-ne-lr-sg,
1191
+ var(--_ctm-tab-dn-pt-wt-pt-ne-lr-sg, var(--_ctm-dn-pt-wt-pt-ne-lr-sg))
1192
+ );
1193
+ line-height: var(
1194
+ --_ctm-mob-dn-pt-wt-pt-ne-le-ht,
1195
+ var(--_ctm-tab-dn-pt-wt-pt-ne-le-ht, var(--_ctm-dn-pt-wt-pt-ne-le-ht))
1196
+ );
1197
+ font-style: var(
1198
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-se-ic,
1199
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ne-ft-se-ic))
1200
+ );
1201
+ text-align: var(
1202
+ --_ctm-mob-dn-pt-wt-pt-ne-tt-an,
1203
+ var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an))
1204
+ );
537
1205
  }
538
1206
 
539
- .item-specs,
540
- .item-qty,
1207
+ .item-specs {
1208
+ padding: var(
1209
+ --_ctm-mob-dn-pt-wt-pt-ce-pg,
1210
+ var(--_ctm-tab-dn-pt-wt-pt-ce-im-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
1211
+ );
1212
+ font-family: var(
1213
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-fy,
1214
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy))
1215
+ );
1216
+ font-size: var(
1217
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1218
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1219
+ );
1220
+ color: var(
1221
+ --_ctm-mob-dn-pt-wt-pt-ce-cr,
1222
+ var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr))
1223
+ );
1224
+ font-weight: var(
1225
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-wt,
1226
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-dn-pt-wt-pt-ce-ft-wt))
1227
+ );
1228
+ text-decoration: var(
1229
+ --_ctm-mob-dn-pt-wt-pt-ce-ue,
1230
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ue, var(--_ctm-dn-pt-wt-pt-ce-ue))
1231
+ );
1232
+ letter-spacing: var(
1233
+ --_ctm-mob-dn-pt-wt-pt-ce-lr-sg,
1234
+ var(--_ctm-tab-dn-pt-wt-pt-ce-lr-sg, var(--_ctm-dn-pt-wt-pt-ce-lr-sg))
1235
+ );
1236
+ line-height: var(
1237
+ --_ctm-mob-dn-pt-wt-pt-ce-le-ht,
1238
+ var(--_ctm-tab-dn-pt-wt-pt-ce-le-ht, var(--_ctm-dn-pt-wt-pt-ce-le-ht))
1239
+ );
1240
+ font-style: var(
1241
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se-ic,
1242
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ce-ft-se-ic))
1243
+ );
1244
+ text-align: var(
1245
+ --_ctm-mob-dn-pt-wt-pt-ce-tt-an,
1246
+ var(--_ctm-tab-dn-pt-wt-pt-ce-tt-an, var(--_ctm-dn-pt-wt-pt-ce-tt-an))
1247
+ );
1248
+ }
1249
+ .item-qty {
1250
+ padding: var(
1251
+ --_ctm-mob-dn-pt-wt-pt-qy-pg,
1252
+ var(--_ctm-tab-dn-pt-wt-pt-qy-pg, var(--_ctm-dn-pt-wt-pt-qy-pg))
1253
+ );
1254
+ font-family: var(
1255
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-fy,
1256
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy))
1257
+ );
1258
+ font-size: var(
1259
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1260
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1261
+ );
1262
+ color: var(
1263
+ --_ctm-mob-dn-pt-wt-pt-qy-cr,
1264
+ var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr))
1265
+ );
1266
+ font-weight: var(
1267
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-wt,
1268
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-dn-pt-wt-pt-qy-ft-wt))
1269
+ );
1270
+ text-decoration: var(
1271
+ --_ctm-mob-dn-pt-wt-pt-qy-ue,
1272
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ue, var(--_ctm-dn-pt-wt-pt-qy-ue))
1273
+ );
1274
+ letter-spacing: var(
1275
+ --_ctm-mob-dn-pt-wt-pt-qy-lr-sg,
1276
+ var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-dn-pt-wt-pt-qy-lr-sg))
1277
+ );
1278
+ line-height: var(
1279
+ --_ctm-mob-dn-pt-wt-pt-qy-le-ht,
1280
+ var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht, var(--_ctm-dn-pt-wt-pt-qy-le-ht))
1281
+ );
1282
+ font-style: var(
1283
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic,
1284
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic))
1285
+ );
1286
+ text-align: var(
1287
+ --_ctm-mob-dn-pt-wt-pt-qy-tt-an,
1288
+ var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an))
1289
+ );
1290
+ span {
1291
+ font-family: var(
1292
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-fy-dc,
1293
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-fy-dc))
1294
+ );
1295
+ font-size: var(
1296
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc,
1297
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc))
1298
+ );
1299
+ color: var(
1300
+ --_ctm-mob-dn-pt-wt-pt-qy-cr-dc,
1301
+ var(--_ctm-tab-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-dn-pt-wt-pt-qy-cr-dc))
1302
+ );
1303
+ font-weight: var(
1304
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-wt-dc,
1305
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-wt-dc))
1306
+ );
1307
+ text-decoration: var(
1308
+ --_ctm-mob-dn-pt-wt-pt-qy-ue-dc,
1309
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-dn-pt-wt-pt-qy-ue-dc))
1310
+ );
1311
+ letter-spacing: var(
1312
+ --_ctm-mob-dn-pt-wt-pt-qy-lr-sg-dc,
1313
+ var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-qy-lr-sg-dc))
1314
+ );
1315
+ line-height: var(
1316
+ --_ctm-mob-dn-pt-wt-pt-qy-le-ht-dc,
1317
+ var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-dn-pt-wt-pt-qy-le-ht-dc))
1318
+ );
1319
+ font-style: var(
1320
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic-dc,
1321
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic-dc))
1322
+ );
1323
+ text-align: var(
1324
+ --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc,
1325
+ var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc))
1326
+ );
1327
+ }
1328
+ }
541
1329
  .estimated-delivery {
542
1330
  margin: 0;
543
- font-size: 12px;
544
- color: var(--_gray-600);
545
- line-height: 18px;
1331
+ // font-size: 12px;
1332
+ // color: var(--_gray-600);
1333
+ // line-height: 18px;
1334
+ padding: var(
1335
+ --_ctm-mob-dn-pt-wt-pt-ed-de-pg,
1336
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg, var(--_ctm-dn-pt-wt-pt-ed-de-pg))
1337
+ );
1338
+ font-family: var(
1339
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy,
1340
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy))
1341
+ );
1342
+ font-size: var(
1343
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se,
1344
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se))
1345
+ );
1346
+ color: var(
1347
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
1348
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
1349
+ );
1350
+ font-weight: var(
1351
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt,
1352
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt))
1353
+ );
1354
+ text-decoration: var(
1355
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue,
1356
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue))
1357
+ );
1358
+ letter-spacing: var(
1359
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg,
1360
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg))
1361
+ );
1362
+ line-height: var(
1363
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht,
1364
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht))
1365
+ );
1366
+ font-style: var(
1367
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic,
1368
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic))
1369
+ );
1370
+ text-align: var(
1371
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
1372
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an))
1373
+ );
546
1374
  }
547
1375
 
548
1376
  .delivery-date {
549
1377
  margin: 0;
550
- font-size: 0.75rem;
551
- color: #1e293b;
552
- font-weight: 600;
1378
+ // font-size: 0.75rem;
1379
+ // color: #1e293b;
1380
+ // font-weight: 600;
1381
+ padding: var(
1382
+ --_ctm-mob-dn-pt-wt-pt-ed-de-pg-dc,
1383
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-pg-dc))
1384
+ );
1385
+ font-family: var(
1386
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
1387
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc))
1388
+ );
1389
+ font-size: var(
1390
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1391
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1392
+ );
1393
+ color: var(
1394
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
1395
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
1396
+ );
1397
+ font-weight: var(
1398
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc,
1399
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc))
1400
+ );
1401
+ text-decoration: var(
1402
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc,
1403
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc))
1404
+ );
1405
+ letter-spacing: var(
1406
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc,
1407
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc))
1408
+ );
1409
+ line-height: var(
1410
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc,
1411
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc))
1412
+ );
1413
+ font-style: var(
1414
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1415
+ var(
1416
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1417
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc)
1418
+ )
1419
+ );
1420
+ text-align: var(
1421
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc,
1422
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc))
1423
+ );
553
1424
  }
554
1425
  }
555
1426
 
556
1427
  .item-price {
557
- font-size: 0.85rem;
558
- font-weight: 600;
559
- color: #1e293b;
1428
+ // font-size: 0.85rem;
1429
+ // font-weight: 600;
1430
+ // color: #1e293b;
1431
+ font-family: var(
1432
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-fy,
1433
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-fy, var(--_ctm-dn-pt-wt-pt-pe-ft-fy))
1434
+ );
1435
+ font-size: var(
1436
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-se,
1437
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se, var(--_ctm-dn-pt-wt-pt-pe-ft-se))
1438
+ );
1439
+ color: var(
1440
+ --_ctm-mob-dn-pt-wt-pt-pe-cr,
1441
+ var(--_ctm-tab-dn-pt-wt-pt-pe-cr, var(--_ctm-dn-pt-wt-pt-pe-cr))
1442
+ );
1443
+ font-weight: var(
1444
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-wt,
1445
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-wt, var(--_ctm-dn-pt-wt-pt-pe-ft-wt))
1446
+ );
1447
+ text-decoration: var(
1448
+ --_ctm-mob-dn-pt-wt-pt-pe-ue,
1449
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue))
1450
+ );
1451
+ letter-spacing: var(
1452
+ --_ctm-mob-dn-pt-wt-pt-pe-lr-sg,
1453
+ var(--_ctm-tab-dn-pt-wt-pt-pe-lr-sg, var(--_ctm-dn-pt-wt-pt-pe-lr-sg))
1454
+ );
1455
+ line-height: var(
1456
+ --_ctm-mob-dn-pt-wt-pt-pe-le-ht,
1457
+ var(--_ctm-tab-dn-pt-wt-pt-pe-le-ht, var(--_ctm-dn-pt-wt-pt-pe-le-ht))
1458
+ );
1459
+ font-style: var(
1460
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-se-ic,
1461
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se-ic, var(--_ctm-dn-pt-wt-pt-pe-ft-se-ic))
1462
+ );
1463
+ text-align: var(
1464
+ --_ctm-mob-dn-pt-wt-pt-pe-tt-an,
1465
+ var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an))
1466
+ );
560
1467
  margin-left: 12px;
561
1468
  }
562
1469
  }
563
1470
 
564
1471
  .more-link {
565
- font-size: 0.85rem;
566
- background: none;
567
- border: none;
568
- color: #3b82f6;
1472
+ color: #243dc6;
1473
+ font-size: 14px;
1474
+ font-weight: 400;
1475
+ line-height: 20px;
569
1476
  cursor: pointer;
570
- margin-bottom: 20px;
571
1477
  }
572
1478
  }
573
1479
 
574
1480
  /* ───────── Order Attributes ───────── */
575
1481
  .order-attributes {
576
- border-top: 1px dashed #e0e0e0;
577
- padding-top: 12px;
1482
+ border-top: 1px solid #eaecf0;
1483
+ padding-top: 24px;
578
1484
 
579
1485
  h4 {
580
1486
  font-size: 14px;
581
1487
  font-weight: 400;
582
- color: var(--_gray-400);
1488
+ color: var(--_gray-500);
583
1489
  line-height: 20px;
584
1490
  }
585
1491