@sc-360-v2/storefront-cms-library 0.3.59 → 0.3.61

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/button.scss +1 -1
  3. package/dist/cart-details.scss +1 -1
  4. package/dist/category-groups-element.scss +130 -0
  5. package/dist/employee-bulk-order.scss +425 -373
  6. package/dist/icons.js +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/modal.scss +1 -0
  9. package/dist/order-status.scss +1319 -1257
  10. package/dist/prefix-list.scss +1 -0
  11. package/dist/product-image.scss +12 -1
  12. package/dist/types/builder/enums/index.d.ts +4 -2
  13. package/dist/widget.scss +1 -0
  14. package/package.json +1 -1
package/dist/order-status.scss CHANGED
@@ -65,1487 +65,1549 @@
65
65
  --_ctm-mob-dn-or-wt-bd-cr,
66
66
  var(--_ctm-tab-dn-or-wt-bd-cr, var(--_ctm-dn-or-wt-bd-cr))
67
67
  );
68
-
69
- /* ───────────── Header ───────────── */
70
- .order-header {
71
- color: var(--_ctm-mob-dn-dn-hr-cr, var(--_ctm-tab-dn-dn-hr-cr, var(--_ctm-dn-dn-hr-cr)));
72
- background-color: var(
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))
75
- );
76
- margin: var(--_ctm-mob-dn-dn-hr-mn, var(--_ctm-tab-dn-dn-hr-mn, var(--_ctm-dn-dn-hr-mn)));
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
- );
81
- border-color: var(
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))
84
- );
85
- border-style: var(
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))
88
- );
89
- border-width: var(
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))
92
- );
93
- border-radius: var(
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))
96
- );
97
- box-shadow: var(
98
- --_show-shadow,
99
- var(
100
- --_ctm-mob-dn-bd-ad-fl-sw-ae,
101
- var(--_ctm-dn-hr-cr-hr-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
102
- )
103
- var(
104
- --_ctm-mob-dn-bd-ad-fl-sw-br,
105
- var(--_ctm-dn-hr-cr-hr-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
106
- )
107
- var(
108
- --_ctm-mob-dn-bd-ad-fl-sw-sd,
109
- var(--_ctm-dn-hr-cr-hr-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
110
- )
68
+ .each-order {
69
+ border: 1px solid var(--_gray-200);
70
+ border-radius: 8px;
71
+ padding: 16px;
72
+ /* ───────────── Header ───────────── */
73
+ .order-header {
74
+ color: var(--_ctm-mob-dn-dn-hr-cr, var(--_ctm-tab-dn-dn-hr-cr, var(--_ctm-dn-dn-hr-cr)));
75
+ background-color: var(
76
+ --_ctm-mob-dn-hr-cr-hr-wr-bd-cr,
77
+ var(--_ctm-tab-dn-hr-cr-hr-wr-bd-cr, var(--_ctm-dn-hr-cr-hr-wr-bd-cr))
78
+ );
79
+ margin: var(--_ctm-mob-dn-dn-hr-mn, var(--_ctm-tab-dn-dn-hr-mn, var(--_ctm-dn-dn-hr-mn)));
80
+ padding: var(
81
+ --_ctm-mob-dn-hr-cr-hr-wr-pg,
82
+ var(--_ctm-tab-dn-hr-cr-hr-wr-pg, var(--_ctm-dn-hr-cr-hr-wr-pg))
83
+ );
84
+ border-color: var(
85
+ --_ctm-mob-dn-hr-cr-hr-wr-br-cr,
86
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-cr, var(--_ctm-dn-hr-cr-hr-wr-br-cr))
87
+ );
88
+ border-style: var(
89
+ --_ctm-mob-dn-hr-cr-hr-wr-br-se,
90
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-se, var(--_ctm-dn-hr-cr-hr-wr-br-se))
91
+ );
92
+ border-width: var(
93
+ --_ctm-mob-dn-hr-cr-hr-wr-br-wh,
94
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-wh, var(--_ctm-dn-hr-cr-hr-wr-br-wh))
95
+ );
96
+ border-radius: var(
97
+ --_ctm-mob-dn-hr-cr-hr-wr-br-rs,
98
+ var(--_ctm-tab-dn-hr-cr-hr-wr-br-rs, var(--_ctm-dn-hr-cr-hr-wr-br-rs))
99
+ );
100
+ box-shadow: var(
101
+ --_show-shadow,
111
102
  var(
112
- --_ctm-mob-dn-bd-ad-fl-sw-cr,
113
- var(--_ctm-dn-hr-cr-hr-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
114
- )
115
- );
116
-
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))
103
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
104
+ var(--_ctm-dn-hr-cr-hr-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
105
+ )
106
+ var(
107
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
108
+ var(--_ctm-dn-hr-cr-hr-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
109
+ )
110
+ var(
111
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
112
+ var(--_ctm-dn-hr-cr-hr-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
113
+ )
114
+ var(
115
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
116
+ var(--_ctm-dn-hr-cr-hr-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
117
+ )
123
118
  );
124
- h3 {
125
- // font-size: 1.1rem;
126
- // margin: 0;
127
- // color: #1e293b;
128
119
 
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
- );
165
- span {
166
- margin-left: 6px;
167
- svg {
168
- path {
169
- stroke: #475467;
170
- }
171
- }
172
- }
173
- }
174
- .user-meta-list {
120
+ .user-info {
175
121
  display: flex;
176
- align-items: center;
122
+ flex-direction: column;
123
+ padding-bottom: 12px;
124
+ margin-bottom: 12px;
125
+ border-bottom: 1px solid var(--_gray-200);
177
126
  gap: var(
178
- --_ctm-mob-dn-hr-cr-ee-ds-im-gp,
179
- var(--_ctm-tab-dn-hr-cr-ee-ds-im-gp, var(--_ctm-dn-hr-cr-ee-ds-im-gp))
127
+ --_ctm-mob-dn-hr-cr-hr-wr-im-gp,
128
+ var(--_ctm-tab-dn-hr-cr-hr-wr-im-gp, var(--_ctm-dn-hr-cr-hr-wr-im-gp))
180
129
  );
181
- .meta-item {
182
- display: flex;
183
- flex-direction: row;
184
- align-items: center;
185
- padding: var(
186
- --_ctm-mob-dn-hr-cr-ee-ds-pg,
187
- var(--_ctm-tab-dn-hr-cr-ee-ds-pg, var(--_ctm-dn-hr-cr-ee-ds-pg))
130
+ h3 {
131
+ // font-size: 1.1rem;
132
+ // margin: 0;
133
+ // color: #1e293b;
134
+
135
+ font-family: var(
136
+ --_ctm-mob-dn-hr-cr-te-ft-fy,
137
+ var(--_ctm-tab-dn-hr-cr-te-ft-fy, var(--_ctm-dn-hr-cr-te-ft-fy))
138
+ );
139
+ // font-size: var(
140
+ // --_ctm-mob-dn-hr-cr-te-ft-se,
141
+ // var(--_ctm-tab-dn-hr-cr-te-ft-se, var(--_ctm-dn-hr-cr-te-ft-se))
142
+ // );
143
+ font-size: 20px;
144
+ // color: var(
145
+ // --_ctm-mob-dn-hr-cr-te-cr,
146
+ // var(--_ctm-tab-dn-hr-cr-te-cr, var(--_ctm-dn-hr-cr-te-cr))
147
+ // );
148
+ color: var(--_gray-900);
149
+ // font-weight: var(
150
+ // --_ctm-mob-dn-hr-cr-te-ft-wt,
151
+ // var(--_ctm-tab-dn-hr-cr-te-ft-wt, var(--_ctm-dn-hr-cr-te-ft-wt))
152
+ // );
153
+ font-weight: 700;
154
+ text-decoration: var(
155
+ --_ctm-mob-dn-hr-cr-te-ue,
156
+ var(--_ctm-tab-dn-hr-cr-te-ue, var(--_ctm-dn-hr-cr-te-ue))
157
+ );
158
+ letter-spacing: var(
159
+ --_ctm-mob-dn-hr-cr-te-lr-sg,
160
+ var(--_ctm-tab-dn-hr-cr-te-lr-sg, var(--_ctm-dn-hr-cr-te-lr-sg))
188
161
  );
189
- // gap: 6px;
190
- .meta-icon {
162
+ line-height: var(
163
+ --_ctm-mob-dn-hr-cr-te-le-ht,
164
+ var(--_ctm-tab-dn-hr-cr-te-le-ht, var(--_ctm-dn-hr-cr-te-le-ht))
165
+ );
166
+ font-style: var(
167
+ --_ctm-mob-dn-hr-cr-te-ft-se-ic,
168
+ var(--_ctm-tab-dn-hr-cr-te-ft-se-ic, var(--_ctm-dn-hr-cr-te-ft-se-ic))
169
+ );
170
+ text-align: var(
171
+ --_ctm-mob-dn-hr-cr-te-tt-an,
172
+ var(--_ctm-tab-dn-hr-cr-te-tt-an, var(--_ctm-dn-hr-cr-te-tt-an))
173
+ );
174
+ margin-bottom: 6px;
175
+ span {
176
+ margin-left: 6px;
191
177
  svg {
192
- width: 12px;
193
- height: 12px;
178
+ path {
179
+ stroke: #475467;
180
+ }
194
181
  }
195
- padding-right: 6px;
196
182
  }
197
- .meta-text {
198
- font-family: var(
199
- --_ctm-mob-dn-hr-cr-ee-ds-ft-fy,
200
- var(--_ctm-tab-dn-hr-cr-ee-ds-ft-fy, var(--_ctm-dn-hr-cr-ee-ds-ft-fy))
201
- );
202
- font-size: var(
203
- --_ctm-mob-dn-hr-cr-ee-ds-ft-se,
204
- var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se, var(--_ctm-dn-hr-cr-ee-ds-ft-se))
205
- );
206
- color: var(
207
- --_ctm-mob-dn-hr-cr-ee-ds-cr,
208
- var(--_ctm-tab-dn-hr-cr-ee-ds-cr, var(--_ctm-dn-hr-cr-ee-ds-cr))
209
- );
210
- font-weight: var(
211
- --_ctm-mob-dn-hr-cr-ee-ds-ft-wt,
212
- var(--_ctm-tab-dn-hr-cr-ee-ds-ft-wt, var(--_ctm-dn-hr-cr-ee-ds-ft-wt))
213
- );
214
- text-decoration: var(
215
- --_ctm-mob-dn-hr-cr-ee-ds-ue,
216
- var(--_ctm-tab-dn-hr-cr-ee-ds-ue, var(--_ctm-dn-hr-cr-ee-ds-ue))
217
- );
218
- letter-spacing: var(
219
- --_ctm-mob-dn-hr-cr-ee-ds-lr-sg,
220
- var(--_ctm-tab-dn-hr-cr-ee-ds-lr-sg, var(--_ctm-dn-hr-cr-ee-ds-lr-sg))
221
- );
222
- line-height: var(
223
- --_ctm-mob-dn-hr-cr-ee-ds-le-ht,
224
- var(--_ctm-tab-dn-hr-cr-ee-ds-le-ht, var(--_ctm-dn-hr-cr-ee-ds-le-ht))
225
- );
226
- font-style: var(
227
- --_ctm-mob-dn-hr-cr-ee-ds-ft-se-ic,
228
- var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se-ic, var(--_ctm-dn-hr-cr-ee-ds-ft-se-ic))
229
- );
230
- text-align: var(
231
- --_ctm-mob-dn-hr-cr-ee-ds-tt-an,
232
- var(--_ctm-tab-dn-hr-cr-ee-ds-tt-an, var(--_ctm-dn-hr-cr-ee-ds-tt-an))
183
+ }
184
+ .user-meta-list {
185
+ display: flex;
186
+ align-items: center;
187
+
188
+ .meta-item {
189
+ display: flex;
190
+ flex-direction: row;
191
+ align-items: center;
192
+ padding: var(
193
+ --_ctm-mob-dn-hr-cr-ee-ds-pg,
194
+ var(--_ctm-tab-dn-hr-cr-ee-ds-pg, var(--_ctm-dn-hr-cr-ee-ds-pg))
233
195
  );
234
- }
235
- &:not(:first-child)::before {
236
- content: "";
237
- display: inline-block;
238
- width: 5px;
239
- height: 5px;
240
- background: #d0d5dd;
241
- border-radius: 50%;
242
- margin-right: 12px;
196
+ // gap: 6px;
197
+ .meta-icon {
198
+ display: flex;
199
+ svg {
200
+ width: 18px;
201
+ height: 18px;
202
+ }
203
+ }
204
+ .meta-text {
205
+ font-family: var(
206
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-fy,
207
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-fy, var(--_ctm-dn-hr-cr-ee-ds-ft-fy))
208
+ );
209
+ font-size: var(
210
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-se,
211
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se, var(--_ctm-dn-hr-cr-ee-ds-ft-se))
212
+ );
213
+ color: var(
214
+ --_ctm-mob-dn-hr-cr-ee-ds-cr,
215
+ var(--_ctm-tab-dn-hr-cr-ee-ds-cr, var(--_ctm-dn-hr-cr-ee-ds-cr))
216
+ );
217
+ font-weight: var(
218
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-wt,
219
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-wt, var(--_ctm-dn-hr-cr-ee-ds-ft-wt))
220
+ );
221
+ text-decoration: var(
222
+ --_ctm-mob-dn-hr-cr-ee-ds-ue,
223
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ue, var(--_ctm-dn-hr-cr-ee-ds-ue))
224
+ );
225
+ letter-spacing: var(
226
+ --_ctm-mob-dn-hr-cr-ee-ds-lr-sg,
227
+ var(--_ctm-tab-dn-hr-cr-ee-ds-lr-sg, var(--_ctm-dn-hr-cr-ee-ds-lr-sg))
228
+ );
229
+ line-height: var(
230
+ --_ctm-mob-dn-hr-cr-ee-ds-le-ht,
231
+ var(--_ctm-tab-dn-hr-cr-ee-ds-le-ht, var(--_ctm-dn-hr-cr-ee-ds-le-ht))
232
+ );
233
+ font-style: var(
234
+ --_ctm-mob-dn-hr-cr-ee-ds-ft-se-ic,
235
+ var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se-ic, var(--_ctm-dn-hr-cr-ee-ds-ft-se-ic))
236
+ );
237
+ text-align: var(
238
+ --_ctm-mob-dn-hr-cr-ee-ds-tt-an,
239
+ var(--_ctm-tab-dn-hr-cr-ee-ds-tt-an, var(--_ctm-dn-hr-cr-ee-ds-tt-an))
240
+ );
241
+ }
242
+ &:not(:first-child)::before {
243
+ content: "";
244
+ display: inline-block;
245
+ width: 5px;
246
+ height: 5px;
247
+ background: #d0d5dd;
248
+ border-radius: 50%;
249
+ }
243
250
  }
244
251
  }
245
252
  }
246
253
  }
247
- }
248
254
 
249
- /* ─────────── Success Banner ─────────── */
250
- .order-successful {
251
- display: flex;
252
- align-items: center;
253
- // background: #f0fdf4;
254
- // border-radius: 6px;
255
- // padding: 16px;
256
- // margin-bottom: 24px;
257
- background-color: #f6fef9;
258
- border-radius: 6px;
259
- border: 1px solid #d0d5dd;
260
- padding: 12px;
255
+ /* ─────────── Success Banner ─────────── */
256
+ .order-successful,
257
+ .order-pending,
258
+ .order-failed {
259
+ display: flex;
260
+ align-items: center;
261
+ // background: #f0fdf4;
262
+ // border-radius: 6px;
263
+ // padding: 16px;
264
+ // margin-bottom: 24px;
265
+ background-color: #f6fef9;
266
+ border-radius: 6px;
267
+ border: 1px solid #d0d5dd;
268
+ padding: 12px;
269
+ margin-block: 16px;
261
270
 
262
- .check-icon {
263
- font-size: 28px;
264
- margin-right: 12px;
265
- }
271
+ .check-icon {
272
+ font-size: 28px;
273
+ margin-right: 12px;
274
+ }
266
275
 
267
- .success-text {
268
- display: flex;
269
- flex-direction: column;
270
- justify-content: center;
271
- gap: 8px;
272
- .success_toast_header {
276
+ .success-text {
273
277
  display: flex;
274
- gap: 6px;
275
- align-items: center;
276
- .success__dropdown__icon {
277
- svg {
278
- width: 32px;
279
- height: 32px;
280
- path {
281
- stroke: #099250;
282
- fill: #ffffff;
283
- stroke-width: 0.8;
278
+ flex-direction: column;
279
+ justify-content: center;
280
+ gap: 8px;
281
+ .success_toast_header {
282
+ display: flex;
283
+ gap: 6px;
284
+ align-items: center;
285
+ .success__dropdown__icon {
286
+ display: flex;
287
+ svg {
288
+ width: 24px;
289
+ height: 24px;
290
+ path {
291
+ stroke: #099250;
292
+ fill: #fff;
293
+ }
284
294
  }
285
295
  }
296
+ h2 {
297
+ color: #101828;
298
+ font-size: 20px;
299
+ font-weight: 600;
300
+ line-height: 32px;
301
+ font-family: "Lato";
302
+ }
286
303
  }
287
- h2 {
288
- color: #101828;
289
- font-size: 24px;
290
- font-weight: 600;
291
- line-height: 32px;
292
- font-family: "Lato";
304
+
305
+ p {
306
+ color: #475467;
307
+ font-size: 14px;
308
+ font-weight: 400;
309
+ line-height: 20px;
293
310
  }
294
311
  }
295
-
296
- p {
297
- color: #475467;
298
- font-size: 14px;
299
- font-weight: 400;
300
- line-height: 20px;
312
+ }
313
+ .order-failed {
314
+ background-color: #fffbfa;
315
+ border: 1px solid #fda29b;
316
+ .success__dropdown__icon {
317
+ svg path {
318
+ stroke: var(--_error-700) !important;
319
+ }
301
320
  }
302
321
  }
303
- }
304
- .error_toast_message_wrapper {
305
- display: flex;
306
- justify-content: space-between;
307
- align-items: center;
308
- background-color: #fffbfa;
309
- border-radius: 6px;
310
- border: 1px solid #fda29b;
311
- padding: 12px;
312
- .error_toast_message_left_section {
322
+ .order-pending {
323
+ background-color: #f5f6f9;
324
+ border: 1px solid #c5d2fc;
325
+ svg path {
326
+ stroke: var(--_primary-700);
327
+ }
328
+ }
329
+ .error_toast_message_wrapper {
313
330
  display: flex;
314
- flex-direction: column;
315
- gap: 8px;
316
- .error_toast_message_header {
331
+ justify-content: space-between;
332
+ align-items: center;
333
+ background-color: #fffbfa;
334
+ border-radius: 6px;
335
+ border: 1px solid #fda29b;
336
+ padding: 12px;
337
+ .error_toast_message_left_section {
317
338
  display: flex;
339
+ flex-direction: column;
318
340
  gap: 8px;
319
- align-items: center;
320
- h2 {
321
- color: #101828;
322
- font-size: 24px;
323
- font-weight: 600;
324
- line-height: 32px;
325
- font-family: "Lato";
326
- }
327
- .error__dropdown__icon {
328
- svg {
329
- width: 32px;
330
- height: 32px;
331
- path {
332
- stroke: #d92d20;
333
- fill: #ffffff;
334
- stroke-width: 0.8;
341
+ .error_toast_message_header {
342
+ display: flex;
343
+ gap: 8px;
344
+ align-items: center;
345
+ h2 {
346
+ color: #101828;
347
+ font-size: 24px;
348
+ font-weight: 600;
349
+ line-height: 32px;
350
+ font-family: "Lato";
351
+ }
352
+ .error__dropdown__icon {
353
+ svg {
354
+ width: 32px;
355
+ height: 32px;
356
+ path {
357
+ stroke: #d92d20;
358
+ fill: #ffffff;
359
+ stroke-width: 0.8;
360
+ }
335
361
  }
336
362
  }
337
363
  }
364
+ p {
365
+ color: #475467;
366
+ font-size: 14px;
367
+ font-weight: 400;
368
+ line-height: 20px;
369
+ }
338
370
  }
339
- p {
340
- color: #475467;
341
- font-size: 14px;
342
- font-weight: 400;
343
- line-height: 20px;
371
+ .error_message_btn {
372
+ background-color: #243dc6;
373
+ color: #ffffff;
374
+ border-radius: 6px;
375
+ font-size: 16px;
376
+ font-weight: 600;
377
+ padding: 12px 24px;
344
378
  }
345
379
  }
346
- .error_message_btn {
347
- background-color: #243dc6;
348
- color: #ffffff;
349
- border-radius: 6px;
350
- font-size: 16px;
351
- font-weight: 600;
352
- padding: 12px 24px;
353
- }
354
- }
355
380
 
356
- /* ──────────── Order Details ──────────── */
357
- .order-details-wrapper {
358
- display: grid;
359
- grid-template-columns: 2fr 1fr;
360
- border-color: var(
361
- --_ctm-mob-dn-or-cr-br-cr,
362
- var(--_ctm-tab-dn-or-cr-br-cr, var(--_ctm-dn-or-cr-br-cr))
363
- );
364
- border-style: var(
365
- --_ctm-mob-dn-or-cr-br-se,
366
- var(--_ctm-tab-dn-or-cr-br-se, var(--_ctm-dn-or-cr-br-se))
367
- );
368
- border-width: var(
369
- --_ctm-mob-dn-or-cr-br-wh,
370
- var(--_ctm-tab-dn-or-cr-br-wh, var(--_ctm-dn-or-cr-br-wh))
371
- );
372
- border-radius: var(
373
- --_ctm-mob-dn-or-cr-br-rs,
374
- var(--_ctm-tab-dn-or-cr-br-rs, var(--_ctm-dn-or-cr-br-rs))
375
- );
376
- gap: var(
377
- --_ctm-mob-dn-or-cr-im-gp,
378
- var(--_ctm-tab-dn-or-cr-im-gp, var(--_ctm-dn-or-cr-im-gp))
379
- );
380
- margin: var(--_ctm-mob-dn-or-cr-mn, var(--_ctm-tab-dn-or-cr-mn, var(--_ctm-dn-or-cr-mn)));
381
- padding: prepareMediaVariable(--_ctm-dn-or-cr-pg);
382
- background-color: var(
383
- --_ctm-mob-dn-or-cr-bd-cr,
384
- var(--_ctm-tab-dn-or-cr-bd-cr, var(--_ctm-dn-or-cr-bd-cr))
385
- );
386
- box-shadow: var(
387
- --_ctm-mob-dn-or-cr-sw-ae,
388
- var(--_ctm-tab-dn-or-cr-sw-ae, var(--_ctm-dn-or-cr-sw-ae))
389
- )
390
- var(
391
- --_ctm-mob-dn--or-cr-sw-br,
392
- var(--_ctm-tab-dn--or-cr-sw-br, var(--_ctm-dn--or-cr-sw-br))
393
- )
394
- var(--_ctm-mob-dn-or-cr-sw-sd, var(--_ctm-tab-dn-or-cr-sw-sd, var(--_ctm-dn-or-cr-sw-sd)))
395
- var(--_ctm-mob-dn-or-cr-sw-cr, var(--_ctm-tab-dn-or-cr-sw-cr, var(--_ctm-dn-or-cr-sw-cr)));
396
- }
381
+ /* ──────────── Order Details ──────────── */
397
382
 
398
- .order-info-section {
399
- display: flex;
400
- flex-direction: column;
401
- gap: var(
402
- --_ctm-mob-dn-or-io-or-io-cr-im-gp,
403
- var(--_ctm-tab-dn-or-io-or-io-cr-im-gp, var(--_ctm-dn-or-io-or-io-cr-im-gp))
404
- );
405
- margin: var(
406
- --_ctm-mob-dn-or-io-or-io-cr-mn,
407
- var(--_ctm-tab-dn-or-io-or-io-cr-mn, var(--_ctm-dn-or-io-or-io-cr-mn))
408
- );
409
- padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-pg);
410
- background-color: var(
411
- --_ctm-mob-dn-or-io-or-io-cr-bd-cr,
412
- var(--_ctm-tab-dn-or-io-or-io-cr-bd-cr, var(--_ctm-dn-or-io-or-io-cr-bd-cr))
413
- );
414
- .order_info_header {
415
- font-family: var(
416
- --_ctm-mob-dn-or-io-or-io-hr-ft-fy,
417
- var(--_ctm-tab-dn-or-io-or-io-hr-ft-fy, var(--_ctm-dn-or-io-or-io-hr-ft-fy))
418
- );
419
- font-size: var(
420
- --_ctm-mob-dn-or-io-or-io-hr-ft-se,
421
- var(--_ctm-tab-dn-or-io-or-io-hr-ft-se, var(--_ctm-dn-or-io-or-io-hr-ft-se))
422
- );
423
- color: var(
424
- --_ctm-mob-dn-or-io-or-io-hr-cr,
425
- var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr))
426
- );
427
- font-weight: var(
428
- --_ctm-mob-dn-or-io-or-io-hr-ft-wt,
429
- var(--_ctm-tab-dn-or-io-or-io-hr-ft-wt, var(--_ctm-dn-or-io-or-io-hr-ft-wt))
430
- );
431
- text-decoration: var(
432
- --_ctm-mob-dn-or-io-or-io-hr-ue,
433
- var(--_ctm-tab-dn-or-io-or-io-hr-ue, var(--_ctm-dn-or-io-or-io-hr-ue))
434
- );
435
- letter-spacing: var(
436
- --_ctm-mob-dn-or-io-or-io-hr-lr-sg,
437
- var(--_ctm-tab-dn-or-io-or-io-hr-lr-sg, var(--_ctm-dn-or-io-or-io-hr-lr-sg))
438
- );
439
- line-height: var(
440
- --_ctm-mob-dn-or-io-or-io-hr-le-ht,
441
- var(--_ctm-tab-dn-or-io-or-io-hr-le-ht, var(--_ctm-dn-or-io-or-io-hr-le-ht))
442
- );
443
- font-style: var(
444
- --_ctm-mob-dn-or-io-or-io-hr-ft-se-ic,
445
- var(--_ctm-tab-dn-or-io-or-io-hr-ft-se-ic, var(--_ctm-dn-or-io-or-io-hr-ft-se-ic))
446
- );
447
- text-align: var(
448
- --_ctm-mob-dn-or-io-or-io-hr-tt-an,
449
- var(--_ctm-tab-dn-or-io-or-io-hr-tt-an, var(--_ctm-dn-or-io-or-io-hr-tt-an))
450
- );
451
- padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-pg);
452
- background-color: var(
453
- --_ctm-mob-dn-or-io-or-io-hr-bd-cr,
454
- var(--_ctm-tab-dn-or-io-or-io-hr-bd-cr, var(--_ctm-dn-or-io-or-io-hr-bd-cr))
455
- );
383
+ .order-details-wrapper {
384
+ display: grid;
385
+ grid-template-columns: 2fr 1fr;
456
386
  border-color: var(
457
- --_ctm-mob-dn-or-io-or-io-hr-br-cr,
458
- var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr))
387
+ --_ctm-mob-dn-or-cr-br-cr,
388
+ var(--_ctm-tab-dn-or-cr-br-cr, var(--_ctm-dn-or-cr-br-cr))
459
389
  );
460
390
  border-style: var(
461
- --_ctm-mob-dn-or-io-or-io-hr-br-se,
462
- var(--_ctm-tab-dn-or-io-or-io-hr-br-se, var(--_ctm-dn-or-io-or-io-hr-br-se))
391
+ --_ctm-mob-dn-or-cr-br-se,
392
+ var(--_ctm-tab-dn-or-cr-br-se, var(--_ctm-dn-or-cr-br-se))
463
393
  );
464
394
  border-width: var(
465
- --_ctm-mob-dn-or-io-or-io-hr-br-wh,
466
- var(--_ctm-tab-dn-or-io-or-io-hr-br-wh, var(--_ctm-dn-or-io-or-io-hr-br-wh))
395
+ --_ctm-mob-dn-or-cr-br-wh,
396
+ var(--_ctm-tab-dn-or-cr-br-wh, var(--_ctm-dn-or-cr-br-wh))
467
397
  );
468
398
  border-radius: var(
469
- --_ctm-mob-dn-or-io-or-io-hr-br-rs,
470
- var(--_ctm-tab-dn-or-io-or-io-hr-br-rs, var(--_ctm-dn-or-io-or-io-hr-br-rs))
399
+ --_ctm-mob-dn-or-cr-br-rs,
400
+ var(--_ctm-tab-dn-or-cr-br-rs, var(--_ctm-dn-or-cr-br-rs))
471
401
  );
472
- span {
473
- font-size: 14px;
474
- font-weight: 600;
475
- color: var(--_gray-600);
476
- }
477
- }
478
- }
479
- .quick-actions-section {
480
- display: flex;
481
- flex-direction: column;
482
- gap: var(
483
- --_ctm-mob-dn-qk-as-cr-im-gp,
484
- var(--_ctm-tab-dn-qk-as-cr-im-gp, var(--_ctm-dn-qk-as-cr-im-gp))
485
- );
486
- padding: prepareMediaVariable(--_ctm-dn-qk-as-cr-pg);
487
- background-color: var(
488
- --_ctm-mob-dn-qk-as-cr-bd-cr,
489
- var(--_ctm-tab-dn-qk-as-cr-bd-cr, var(--_ctm-dn-qk-as-cr-bd-cr))
490
- );
491
- border-color: var(
492
- --_ctm-mob-dn-qk-as-cr-br-cr,
493
- var(--_ctm-tab-dn-qk-as-cr-br-cr, var(--_ctm-dn-qk-as-cr-br-cr))
494
- );
495
- border-style: var(
496
- --_ctm-mob-dn-qk-as-cr-br-se,
497
- var(--_ctm-tab-dn-qk-as-cr-br-se, var(--_ctm-dn-qk-as-cr-br-se))
498
- );
499
- border-width: var(
500
- --_ctm-mob-dn-qk-as-cr-br-wh,
501
- var(--_ctm-tab-dn-qk-as-cr-br-wh, var(--_ctm-dn-qk-as-cr-br-wh))
502
- );
503
- border-radius: var(
504
- --_ctm-mob-dn-qk-as-cr-br-rs,
505
- var(--_ctm-tab-dn-qk-as-cr-br-rs, var(--_ctm-dn-qk-as-cr-br-rs))
506
- );
507
- .quick_actions_header {
508
- padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-pg);
509
- background-color: var(
510
- --_ctm-mob-dn-qk-as-qk-hr-bd-cr,
511
- var(--_ctm-tab-dn-qk-as-qk-hr-bd-cr, var(--_ctm-dn-qk-as-qk-hr-bd-cr))
402
+ gap: var(
403
+ --_ctm-mob-dn-or-cr-im-gp,
404
+ var(--_ctm-tab-dn-or-cr-im-gp, var(--_ctm-dn-or-cr-im-gp))
512
405
  );
513
- border-color: var(
514
- --_ctm-mob-dn-qk-as-qk-hr-br-cr,
515
- var(--_ctm-tab-dn-qk-as-qk-hr-br-cr, var(--_ctm-dn-qk-as-qk-hr-br-cr))
406
+ margin: var(--_ctm-mob-dn-or-cr-mn, var(--_ctm-tab-dn-or-cr-mn, var(--_ctm-dn-or-cr-mn)));
407
+ padding: prepareMediaVariable(--_ctm-dn-or-cr-pg);
408
+ background-color: var(
409
+ --_ctm-mob-dn-or-cr-bd-cr,
410
+ var(--_ctm-tab-dn-or-cr-bd-cr, var(--_ctm-dn-or-cr-bd-cr))
516
411
  );
517
- border-style: var(
518
- --_ctm-mob-dn-qk-as-qk-hr-br-se,
519
- var(--_ctm-tab-dn-qk-as-qk-hr-br-se, var(--_ctm-dn-qk-as-qk-hr-br-se))
412
+ box-shadow: var(
413
+ --_ctm-mob-dn-or-cr-sw-ae,
414
+ var(--_ctm-tab-dn-or-cr-sw-ae, var(--_ctm-dn-or-cr-sw-ae))
415
+ )
416
+ var(
417
+ --_ctm-mob-dn--or-cr-sw-br,
418
+ var(--_ctm-tab-dn--or-cr-sw-br, var(--_ctm-dn--or-cr-sw-br))
419
+ )
420
+ var(
421
+ --_ctm-mob-dn-or-cr-sw-sd,
422
+ var(--_ctm-tab-dn-or-cr-sw-sd, var(--_ctm-dn-or-cr-sw-sd))
423
+ )
424
+ var(
425
+ --_ctm-mob-dn-or-cr-sw-cr,
426
+ var(--_ctm-tab-dn-or-cr-sw-cr, var(--_ctm-dn-or-cr-sw-cr))
427
+ );
428
+ }
429
+
430
+ .order-info-section {
431
+ display: flex;
432
+ flex-direction: column;
433
+ gap: var(
434
+ --_ctm-mob-dn-or-io-or-io-cr-im-gp,
435
+ var(--_ctm-tab-dn-or-io-or-io-cr-im-gp, var(--_ctm-dn-or-io-or-io-cr-im-gp))
520
436
  );
521
- border-width: var(
522
- --_ctm-mob-dn-qk-as-qk-hr-br-wh,
523
- var(--_ctm-tab-dn-qk-as-qk-hr-br-wh, var(--_ctm-dn-qk-as-qk-hr-br-wh))
437
+ margin: var(
438
+ --_ctm-mob-dn-or-io-or-io-cr-mn,
439
+ var(--_ctm-tab-dn-or-io-or-io-cr-mn, var(--_ctm-dn-or-io-or-io-cr-mn))
524
440
  );
525
- border-radius: var(
526
- --_ctm-mob-dn-qk-as-qk-hr-br-rs,
527
- var(--_ctm-tab-dn-qk-as-qk-hr-br-rs, var(--_ctm-dn-qk-as-qk-hr-br-rs))
441
+ padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-cr-pg);
442
+ background-color: var(
443
+ --_ctm-mob-dn-or-io-or-io-cr-bd-cr,
444
+ var(--_ctm-tab-dn-or-io-or-io-cr-bd-cr, var(--_ctm-dn-or-io-or-io-cr-bd-cr))
528
445
  );
529
- span {
530
- // font-size: 14px;
531
- // font-weight: 600;
532
- // color: var(--_gray-600);
446
+ .order_info_header {
533
447
  font-family: var(
534
- --_ctm-mob-dn-qk-as-qk-hr-ft-fy,
535
- var(--_ctm-tab-dn-qk-as-qk-hr-ft-fy, var(--_ctm-dn-qk-as-qk-hr-ft-fy))
448
+ --_ctm-mob-dn-or-io-or-io-hr-ft-fy,
449
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-fy, var(--_ctm-dn-or-io-or-io-hr-ft-fy))
536
450
  );
537
451
  font-size: var(
538
- --_ctm-mob-dn-qk-as-qk-hr-ft-se,
539
- var(--_ctm-tab-dn-qk-as-qk-hr-ft-se, var(--_ctm-dn-qk-as-qk-hr-ft-se))
452
+ --_ctm-mob-dn-or-io-or-io-hr-ft-se,
453
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-se, var(--_ctm-dn-or-io-or-io-hr-ft-se))
540
454
  );
541
455
  color: var(
542
- --_ctm-mob-dn-qk-as-qk-hr-cr,
543
- var(--_ctm-tab-dn-qk-as-qk-hr-cr, var(--_ctm-dn-qk-as-qk-hr-cr))
456
+ --_ctm-mob-dn-or-io-or-io-hr-cr,
457
+ var(--_ctm-tab-dn-or-io-or-io-hr-cr, var(--_ctm-dn-or-io-or-io-hr-cr))
544
458
  );
545
459
  font-weight: var(
546
- --_ctm-mob-dn-qk-as-qk-hr-ft-wt,
547
- var(--_ctm-tab-dn-qk-as-qk-hr-ft-wt, var(--_ctm-dn-qk-as-qk-hr-ft-wt))
460
+ --_ctm-mob-dn-or-io-or-io-hr-ft-wt,
461
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-wt, var(--_ctm-dn-or-io-or-io-hr-ft-wt))
548
462
  );
549
463
  text-decoration: var(
550
- --_ctm-mob-dn-qk-as-qk-hr-ue,
551
- var(--_ctm-tab-dn-qk-as-qk-hr-ue, var(--_ctm-dn-qk-as-qk-hr-ue))
464
+ --_ctm-mob-dn-or-io-or-io-hr-ue,
465
+ var(--_ctm-tab-dn-or-io-or-io-hr-ue, var(--_ctm-dn-or-io-or-io-hr-ue))
552
466
  );
553
467
  letter-spacing: var(
554
- --_ctm-mob-dn-qk-as-qk-hr-lr-sg,
555
- var(--_ctm-tab-dn-qk-as-qk-hr-lr-sg, var(--_ctm-dn-qk-as-qk-hr-lr-sg))
468
+ --_ctm-mob-dn-or-io-or-io-hr-lr-sg,
469
+ var(--_ctm-tab-dn-or-io-or-io-hr-lr-sg, var(--_ctm-dn-or-io-or-io-hr-lr-sg))
556
470
  );
557
471
  line-height: var(
558
- --_ctm-mob-dn-qk-as-qk-hr-le-ht,
559
- var(--_ctm-tab-dn-qk-as-qk-hr-le-ht, var(--_ctm-dn-qk-as-qk-hr-le-ht))
472
+ --_ctm-mob-dn-or-io-or-io-hr-le-ht,
473
+ var(--_ctm-tab-dn-or-io-or-io-hr-le-ht, var(--_ctm-dn-or-io-or-io-hr-le-ht))
560
474
  );
561
475
  font-style: var(
562
- --_ctm-mob-dn-qk-as-qk-hr-ft-se-ic,
563
- var(--_ctm-tab-dn-qk-as-qk-hr-ft-se-ic, var(--_ctm-dn-qk-as-qk-hr-ft-se-ic))
476
+ --_ctm-mob-dn-or-io-or-io-hr-ft-se-ic,
477
+ var(--_ctm-tab-dn-or-io-or-io-hr-ft-se-ic, var(--_ctm-dn-or-io-or-io-hr-ft-se-ic))
564
478
  );
565
479
  text-align: var(
566
- --_ctm-mob-dn-qk-as-qk-hr-tt-an,
567
- var(--_ctm-tab-dn-qk-as-qk-hr-tt-an, var(--_ctm-dn-qk-as-qk-hr-tt-an))
480
+ --_ctm-mob-dn-or-io-or-io-hr-tt-an,
481
+ var(--_ctm-tab-dn-or-io-or-io-hr-tt-an, var(--_ctm-dn-or-io-or-io-hr-tt-an))
568
482
  );
569
- }
570
- }
571
- }
572
-
573
- .order-info {
574
- display: flex;
575
- flex-direction: column;
576
- /* space between the two rows */
577
- background-color: var(
578
- --_ctm-mob-dn-or-io-or-io-wr-bd-cr,
579
- var(--_ctm-tab-dn-or-io-or-io-wr-bd-cr, var(--_ctm-dn-or-io-or-io-wr-bd-cr))
580
- );
581
- margin: var(
582
- --_ctm-mob-dn-or-io-or-io-wr-mn,
583
- var(--_ctm-tab-dn-or-io-or-io-wr-mn, var(--_ctm-dn-or-io-or-io-wr-mn))
584
- );
585
- padding: var(
586
- --_ctm-mob-dn-or-io-or-io-wr-pg,
587
- var(--_ctm-tab-dn-or-io-or-io-wr-pg, var(--_ctm-dn-or-io-or-io-wr-pg))
588
- );
589
- border-color: var(
590
- --_ctm-mob-dn-or-io-or-io-wr-br-cr,
591
- var(--_ctm-tab-dn-or-io-or-io-wr-br-cr, var(--_ctm-dn-or-io-or-io-wr-br-cr))
592
- );
593
- border-style: var(
594
- --_ctm-mob-dn-or-io-or-io-wr-br-se,
595
- var(--_ctm-tab-dn-or-io-or-io-wr-br-se, var(--_ctm-dn-or-io-or-io-wr-br-se))
596
- );
597
- border-width: var(
598
- --_ctm-mob-dn-or-io-or-io-wr-br-wh,
599
- var(--_ctm-tab-dn-or-io-or-io-wr-br-wh, var(--_ctm-dn-or-io-or-io-wr-br-wh))
600
- );
601
- border-radius: var(
602
- --_ctm-mob-dn-or-io-or-io-wr-br-rs,
603
- var(--_ctm-mob-dn-or-io-or-io-wr-br-rs, var(--_ctm-mob-dn-or-io-or-io-wr-br-rs))
604
- );
605
- box-shadow: var(
606
- --_show-shadow,
607
- var(
608
- --_ctm-mob-dn-bd-ad-fl-sw-ae,
609
- var(--_ctm-dn-or-io-or-io-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
610
- )
611
- var(
612
- --_ctm-mob-dn-bd-ad-fl-sw-br,
613
- var(--_ctm-dn-or-io-or-io-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
614
- )
615
- var(
616
- --_ctm-mob-dn-bd-ad-fl-sw-sd,
617
- var(--_ctm-dn-or-io-or-io-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
618
- )
619
- var(
620
- --_ctm-mob-dn-bd-ad-fl-sw-cr,
621
- var(--_ctm-dn-or-io-or-io-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
622
- )
623
- );
624
-
625
- .order-row {
626
- display: grid;
627
- gap: 12px 24px;
628
- /* 12px vertical, 24px horizontal */
629
-
630
- /* First row: two equal columns + bottom border */
631
- &:first-child {
632
- grid-template-columns: repeat(2, 1fr);
633
- border-bottom: 1px dashed var(--_gray-400);
634
- padding-bottom: 24px;
635
- }
636
-
637
- /* Second row: three equal columns */
638
- &:nth-child(2) {
639
- grid-template-columns: repeat(3, 1fr);
640
- margin-top: 24px;
641
- }
642
-
643
- /* Each individual info‐cell styling */
644
- > div {
645
- strong {
646
- display: block;
647
- // font-size: 14px;
648
- // color: var(--_gray-500);
649
- // line-height: 20px;
650
- margin-bottom: 4px;
651
- // font-weight: 400;
652
- font-family: var(
653
- --_ctm-mob-dn-or-io-or-ne-ft-fy,
654
- var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy))
655
- );
656
- font-size: var(
657
- --_ctm-mob-dn-or-io-or-ne-ft-se,
658
- var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
659
- );
660
- color: var(
661
- --_ctm-mob-dn-or-io-or-ne-cr,
662
- var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr))
663
- );
664
- font-weight: var(
665
- --_ctm-mob-dn-or-io-or-ne-ft-wt,
666
- var(--_ctm-tab-dn-or-io-or-ne-ft-wt, var(--_ctm-dn-or-io-or-ne-ft-wt))
667
- );
668
- text-decoration: var(
669
- --_ctm-mob-dn-or-io-or-ne-ue,
670
- var(--_ctm-tab-dn-or-io-or-ne-ue, var(--_ctm-dn-or-io-or-ne-ue))
671
- );
672
- letter-spacing: var(
673
- --_ctm-mob-dn-or-io-or-ne-lr-sg,
674
- var(--_ctm-tab-dn-or-io-or-ne-lr-sg, var(--_ctm-dn-or-io-or-ne-lr-sg))
675
- );
676
- line-height: var(
677
- --_ctm-mob-dn-or-io-or-ne-le-ht,
678
- var(--_ctm-tab-dn-or-io-or-ne-le-ht, var(--_ctm-dn-or-io-or-ne-le-ht))
679
- );
680
- font-style: var(
681
- --_ctm-mob-dn-or-io-or-ne-ft-se-ic,
682
- var(--_ctm-tab-dn-or-io-or-ne-ft-se-ic, var(--_ctm-dn-or-io-or-ne-ft-se-ic))
683
- );
684
- text-align: var(
685
- --_ctm-mob-dn-or-io-or-ne-tt-an,
686
- var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an))
687
- );
688
- }
689
-
690
- p {
691
- margin: 0;
692
- margin-bottom: 4px;
693
- // font-size: 20px;
694
- // font-weight: 700;
695
- // color: var(--_gray-900);
696
- // line-height: 30px;
697
- font-family: var(
698
- --_ctm-mob-dn-or-io-or-id-ft-fy,
699
- var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
700
- );
701
- font-size: var(
702
- --_ctm-mob-dn-or-io-or-id-ft-se,
703
- var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se))
704
- );
705
- color: var(
706
- --_ctm-mob-dn-or-io-or-id-cr,
707
- var(--_ctm-tab-dn-or-io-or-id-cr, var(--_ctm-dn-or-io-or-id-cr))
708
- );
709
- font-weight: var(
710
- --_ctm-mob-dn-or-io-or-id-ft-wt,
711
- var(--_ctm-tab-dn-or-io-or-id-ft-wt, var(--_ctm-dn-or-io-or-id-ft-wt))
712
- );
713
- text-decoration: var(
714
- --_ctm-mob-dn-or-io-or-id-ue,
715
- var(--_ctm-tab-dn-or-io-or-id-ue, var(--_ctm-dn-or-io-or-id-ue))
716
- );
717
- letter-spacing: var(
718
- --_ctm-mob-dn-or-io-or-id-lr-sg,
719
- var(--_ctm-tab-dn-or-io-or-id-lr-sg, var(--_ctm-dn-or-io-or-id-lr-sg))
720
- );
721
- line-height: var(
722
- --_ctm-mob-dn-or-io-or-id-le-ht,
723
- var(--_ctm-tab-dn-or-io-or-id-le-ht, var(--_ctm-dn-or-io-or-id-le-ht))
724
- );
725
- font-style: var(
726
- --_ctm-mob-dn-or-io-or-id-ft-se-ic,
727
- var(--_ctm-tab-dn-or-io-or-id-ft-se-ic, var(--_ctm-dn-or-io-or-id-ft-se-ic))
728
- );
729
- text-align: var(
730
- --_ctm-mob-dn-or-io-or-id-tt-an,
731
- var(--_ctm-tab-dn-or-io-or-id-tt-an, var(--_ctm-dn-or-io-or-id-tt-an))
732
- );
733
- }
734
- .delivery_address {
735
- font-size: 14px;
736
- font-weight: 400;
737
- color: var(--_gray-400);
738
- line-height: 20px;
739
- }
740
- .shipping-type {
741
- font-size: 14px;
742
- font-weight: 400;
743
- color: var(--_gray-900);
744
- line-height: 20px;
745
- }
746
-
747
- .status {
748
- margin-left: 6px;
749
- padding: 2px 8px;
750
- border-radius: 4px;
751
- font-size: 12;
752
- font-weight: 500;
753
- line-height: 18px;
754
- }
755
-
756
- .link-button {
757
- color: #243dc6;
483
+ padding: prepareMediaVariable(--_ctm-dn-or-io-or-io-hr-pg);
484
+ background-color: var(
485
+ --_ctm-mob-dn-or-io-or-io-hr-bd-cr,
486
+ var(--_ctm-tab-dn-or-io-or-io-hr-bd-cr, var(--_ctm-dn-or-io-or-io-hr-bd-cr))
487
+ );
488
+ border-color: var(
489
+ --_ctm-mob-dn-or-io-or-io-hr-br-cr,
490
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr))
491
+ );
492
+ border-style: var(
493
+ --_ctm-mob-dn-or-io-or-io-hr-br-se,
494
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-se, var(--_ctm-dn-or-io-or-io-hr-br-se))
495
+ );
496
+ border-width: var(
497
+ --_ctm-mob-dn-or-io-or-io-hr-br-wh,
498
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-wh, var(--_ctm-dn-or-io-or-io-hr-br-wh))
499
+ );
500
+ border-radius: var(
501
+ --_ctm-mob-dn-or-io-or-io-hr-br-rs,
502
+ var(--_ctm-tab-dn-or-io-or-io-hr-br-rs, var(--_ctm-dn-or-io-or-io-hr-br-rs))
503
+ );
504
+ span {
758
505
  font-size: 14px;
759
- font-weight: 400;
760
- line-height: 20px;
761
- }
762
-
763
- .submitted {
764
- font-size: 12px;
765
- font-weight: 500;
766
- line-height: 18px;
767
- background: #eff8ff;
768
- color: #0040c1;
769
- display: inline-block;
770
- height: 22px;
771
- &::before {
772
- content: "";
773
- display: inline-block;
774
- width: 6px;
775
- height: 6px;
776
- background-color: #0040c1;
777
- border-radius: 50%;
778
- margin-right: 6px;
779
- vertical-align: middle;
780
- margin-top: -1px;
781
- }
506
+ font-weight: 600;
507
+ color: var(--_gray-600);
782
508
  }
783
-
784
- .order-date {
509
+ }
510
+ }
511
+ .quick-actions-section {
512
+ display: flex;
513
+ flex-direction: column;
514
+ gap: var(
515
+ --_ctm-mob-dn-qk-as-cr-im-gp,
516
+ var(--_ctm-tab-dn-qk-as-cr-im-gp, var(--_ctm-dn-qk-as-cr-im-gp))
517
+ );
518
+ padding: prepareMediaVariable(--_ctm-dn-qk-as-cr-pg);
519
+ background-color: var(
520
+ --_ctm-mob-dn-qk-as-cr-bd-cr,
521
+ var(--_ctm-tab-dn-qk-as-cr-bd-cr, var(--_ctm-dn-qk-as-cr-bd-cr))
522
+ );
523
+ border-color: var(
524
+ --_ctm-mob-dn-qk-as-cr-br-cr,
525
+ var(--_ctm-tab-dn-qk-as-cr-br-cr, var(--_ctm-dn-qk-as-cr-br-cr))
526
+ );
527
+ border-style: var(
528
+ --_ctm-mob-dn-qk-as-cr-br-se,
529
+ var(--_ctm-tab-dn-qk-as-cr-br-se, var(--_ctm-dn-qk-as-cr-br-se))
530
+ );
531
+ border-width: var(
532
+ --_ctm-mob-dn-qk-as-cr-br-wh,
533
+ var(--_ctm-tab-dn-qk-as-cr-br-wh, var(--_ctm-dn-qk-as-cr-br-wh))
534
+ );
535
+ border-radius: var(
536
+ --_ctm-mob-dn-qk-as-cr-br-rs,
537
+ var(--_ctm-tab-dn-qk-as-cr-br-rs, var(--_ctm-dn-qk-as-cr-br-rs))
538
+ );
539
+ .quick_actions_header {
540
+ padding: prepareMediaVariable(--_ctm-dn-qk-as-qk-hr-pg);
541
+ background-color: var(
542
+ --_ctm-mob-dn-qk-as-qk-hr-bd-cr,
543
+ var(--_ctm-tab-dn-qk-as-qk-hr-bd-cr, var(--_ctm-dn-qk-as-qk-hr-bd-cr))
544
+ );
545
+ border-color: var(
546
+ --_ctm-mob-dn-qk-as-qk-hr-br-cr,
547
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-cr, var(--_ctm-dn-qk-as-qk-hr-br-cr))
548
+ );
549
+ border-style: var(
550
+ --_ctm-mob-dn-qk-as-qk-hr-br-se,
551
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-se, var(--_ctm-dn-qk-as-qk-hr-br-se))
552
+ );
553
+ border-width: var(
554
+ --_ctm-mob-dn-qk-as-qk-hr-br-wh,
555
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-wh, var(--_ctm-dn-qk-as-qk-hr-br-wh))
556
+ );
557
+ border-radius: var(
558
+ --_ctm-mob-dn-qk-as-qk-hr-br-rs,
559
+ var(--_ctm-tab-dn-qk-as-qk-hr-br-rs, var(--_ctm-dn-qk-as-qk-hr-br-rs))
560
+ );
561
+ span {
785
562
  // font-size: 14px;
786
- // font-weight: 400;
787
- // color: var(--_gray-400);
788
- // line-height: 20px;
563
+ // font-weight: 600;
564
+ // color: var(--_gray-600);
789
565
  font-family: var(
790
- --_ctm-mob-dn-or-io-or-de-ft-fy,
791
- var(--_ctm-tab-dn-or-io-or-de-ft-fy, var(--_ctm-dn-or-io-or-de-ft-fy))
566
+ --_ctm-mob-dn-qk-as-qk-hr-ft-fy,
567
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-fy, var(--_ctm-dn-qk-as-qk-hr-ft-fy))
792
568
  );
793
569
  font-size: var(
794
- --_ctm-mob-dn-or-io-or-de-ft-se,
795
- var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se))
570
+ --_ctm-mob-dn-qk-as-qk-hr-ft-se,
571
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-se, var(--_ctm-dn-qk-as-qk-hr-ft-se))
796
572
  );
797
573
  color: var(
798
- --_ctm-mob-dn-or-io-or-de-cr,
799
- var(--_ctm-tab-dn-or-io-or-de-cr, var(--_ctm-dn-or-io-or-de-cr))
574
+ --_ctm-mob-dn-qk-as-qk-hr-cr,
575
+ var(--_ctm-tab-dn-qk-as-qk-hr-cr, var(--_ctm-dn-qk-as-qk-hr-cr))
800
576
  );
801
577
  font-weight: var(
802
- --_ctm-mob-dn-or-io-or-de-ft-wt,
803
- var(--_ctm-tab-dn-or-io-or-de-ft-wt, var(--_ctm-dn-or-io-or-de-ft-wt))
578
+ --_ctm-mob-dn-qk-as-qk-hr-ft-wt,
579
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-wt, var(--_ctm-dn-qk-as-qk-hr-ft-wt))
804
580
  );
805
581
  text-decoration: var(
806
- --_ctm-mob-dn-or-io-or-de-ue,
807
- var(--_ctm-tab-dn-or-io-or-de-ue, var(--_ctm-dn-or-io-or-de-ue))
582
+ --_ctm-mob-dn-qk-as-qk-hr-ue,
583
+ var(--_ctm-tab-dn-qk-as-qk-hr-ue, var(--_ctm-dn-qk-as-qk-hr-ue))
808
584
  );
809
585
  letter-spacing: var(
810
- --_ctm-mob-dn-or-io-or-de-lr-sg,
811
- var(--_ctm-tab-dn-or-io-or-de-lr-sg, var(--_ctm-dn-or-io-or-de-lr-sg))
586
+ --_ctm-mob-dn-qk-as-qk-hr-lr-sg,
587
+ var(--_ctm-tab-dn-qk-as-qk-hr-lr-sg, var(--_ctm-dn-qk-as-qk-hr-lr-sg))
812
588
  );
813
589
  line-height: var(
814
- --_ctm-mob-dn-or-io-or-de-le-ht,
815
- var(--_ctm-tab-dn-or-io-or-de-le-ht, var(--_ctm-dn-or-io-or-de-le-ht))
590
+ --_ctm-mob-dn-qk-as-qk-hr-le-ht,
591
+ var(--_ctm-tab-dn-qk-as-qk-hr-le-ht, var(--_ctm-dn-qk-as-qk-hr-le-ht))
816
592
  );
817
593
  font-style: var(
818
- --_ctm-mob-dn-or-io-or-de-ft-se-ic,
819
- var(--_ctm-tab-dn-or-io-or-de-ft-se-ic, var(--_ctm-dn-or-io-or-de-ft-se-ic))
594
+ --_ctm-mob-dn-qk-as-qk-hr-ft-se-ic,
595
+ var(--_ctm-tab-dn-qk-as-qk-hr-ft-se-ic, var(--_ctm-dn-qk-as-qk-hr-ft-se-ic))
820
596
  );
821
597
  text-align: var(
822
- --_ctm-mob-dn-or-io-or-de-tt-an,
823
- var(--_ctm-tab-dn-or-io-or-de-tt-an, var(--_ctm-dn-or-io-or-de-tt-an))
598
+ --_ctm-mob-dn-qk-as-qk-hr-tt-an,
599
+ var(--_ctm-tab-dn-qk-as-qk-hr-tt-an, var(--_ctm-dn-qk-as-qk-hr-tt-an))
824
600
  );
825
601
  }
826
-
827
- .inclusive-tax {
828
- margin-left: 4px;
829
- font-size: 0.7rem;
830
- color: #6b7280;
831
- }
832
602
  }
833
603
  }
834
- }
835
-
836
- /* ───────── Quick Actions ───────── */
837
- .quick-actions {
838
- display: flex;
839
- flex-direction: column;
840
-
841
- gap: 8px;
842
-
843
- background-color: var(--_ctm-dn-dn-qk-as-bd-cr);
844
- margin: var(--_ctm-dn-dn-qk-as-mn);
845
- padding: var(--_ctm-dn-dn-qk-as-pg);
846
- border-color: var(--_ctm-dn-dn-qk-as-br-cr);
847
-
848
- border-style: var(--_ctm-dn-dn-qk-as-br-se);
849
- border-width: var(--_ctm-dn-dn-qk-as-br-wh);
850
- border-radius: var(--_ctm-dn-dn-qk-as-br-rs);
851
-
852
- box-shadow: var(
853
- --_show-shadow,
854
- var(
855
- --_ctm-mob-dn-bd-ad-fl-sw-ae,
856
- var(--_ctm-dn-dn-qk-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
857
- )
858
- var(
859
- --_ctm-mob-dn-bd-ad-fl-sw-br,
860
- var(--_ctm-dn-dn-qk-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
861
- )
862
- var(
863
- --_ctm-mob-dn-bd-ad-fl-sw-sd,
864
- var(--_ctm-dn-dn-qk-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
865
- )
866
- var(
867
- --_ctm-mob-dn-bd-ad-fl-sw-cr,
868
- var(--_ctm-dn-dn-qk-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
869
- )
870
- );
871
604
 
872
- .action-button {
873
- width: fit-content;
605
+ .order-info {
606
+ display: flex;
607
+ flex-direction: column;
608
+ /* space between the two rows */
609
+ background-color: var(
610
+ --_ctm-mob-dn-or-io-or-io-wr-bd-cr,
611
+ var(--_ctm-tab-dn-or-io-or-io-wr-bd-cr, var(--_ctm-dn-or-io-or-io-wr-bd-cr))
612
+ );
874
613
  margin: var(
875
- --_ctm-mob-dn-qk-as-as-mn,
876
- var(--_ctm-tab-dn-qk-as-as-mn, var(--_ctm-dn-qk-as-as-mn))
614
+ --_ctm-mob-dn-or-io-or-io-wr-mn,
615
+ var(--_ctm-tab-dn-or-io-or-io-wr-mn, var(--_ctm-dn-or-io-or-io-wr-mn))
877
616
  );
878
617
  padding: var(
879
- --_ctm-mob-dn-qk-as-as-pg,
880
- var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg))
618
+ --_ctm-mob-dn-or-io-or-io-wr-pg,
619
+ var(--_ctm-tab-dn-or-io-or-io-wr-pg, var(--_ctm-dn-or-io-or-io-wr-pg))
881
620
  );
882
621
  border-color: var(
883
- --_ctm-mob-dn-qk-as-as-br-cr,
884
- var(--_ctm-tab-dn-qk-as-as-br-cr, var(--_ctm-dn-qk-as-as-br-cr))
622
+ --_ctm-mob-dn-or-io-or-io-wr-br-cr,
623
+ var(--_ctm-tab-dn-or-io-or-io-wr-br-cr, var(--_ctm-dn-or-io-or-io-wr-br-cr))
885
624
  );
886
625
  border-style: var(
887
- --_ctm-mob-dn-qk-as-as-br-se,
888
- var(--_ctm-tab-dn-qk-as-as-br-se, var(--_ctm-dn-qk-as-as-br-se))
626
+ --_ctm-mob-dn-or-io-or-io-wr-br-se,
627
+ var(--_ctm-tab-dn-or-io-or-io-wr-br-se, var(--_ctm-dn-or-io-or-io-wr-br-se))
889
628
  );
890
629
  border-width: var(
891
- --_ctm-mob-dn-qk-as-as-br-wh,
892
- var(--_ctm-tab-dn-qk-as-as-br-wh, var(--_ctm-dn-qk-as-as-br-wh))
630
+ --_ctm-mob-dn-or-io-or-io-wr-br-wh,
631
+ var(--_ctm-tab-dn-or-io-or-io-wr-br-wh, var(--_ctm-dn-or-io-or-io-wr-br-wh))
893
632
  );
894
633
  border-radius: var(
895
- --_ctm-mob-dn-qk-as-as-br-rs,
896
- var(--_ctm-mob-dn-qk-as-as-br-rs, var(--_ctm-mob-dn-qk-as-as-br-rs))
634
+ --_ctm-mob-dn-or-io-or-io-wr-br-rs,
635
+ var(--_ctm-mob-dn-or-io-or-io-wr-br-rs, var(--_ctm-mob-dn-or-io-or-io-wr-br-rs))
897
636
  );
898
637
  box-shadow: var(
899
638
  --_show-shadow,
900
639
  var(
901
640
  --_ctm-mob-dn-bd-ad-fl-sw-ae,
902
- var(--_ctm-dn-qk-as-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
641
+ var(--_ctm-dn-or-io-or-io-wr-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
903
642
  )
904
643
  var(
905
644
  --_ctm-mob-dn-bd-ad-fl-sw-br,
906
- var(--_ctm-dn-qk-as-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
645
+ var(--_ctm-dn-or-io-or-io-wr-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
907
646
  )
908
647
  var(
909
648
  --_ctm-mob-dn-bd-ad-fl-sw-sd,
910
- var(--_ctm-dn-qk-as-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
649
+ var(--_ctm-dn-or-io-or-io-wr-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
911
650
  )
912
651
  var(
913
652
  --_ctm-mob-dn-bd-ad-fl-sw-cr,
914
- var(--_ctm-dn-qk-as-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
653
+ var(--_ctm-dn-or-io-or-io-wr-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
915
654
  )
916
655
  );
917
- background-color: var(
918
- --_ctm-mob-dn-qk-as-as-bd-cr,
919
- var(--_ctm-tab-dn-qk-as-as-bd-cr, var(--_ctm-dn-qk-as-as-bd-cr))
920
- );
921
- font-family: var(
922
- --_ctm-mob-dn-qk-as-as-ft-fy,
923
- var(--_ctm-tab-dn-qk-as-as-ft-fy, var(--_ctm-dn-qk-as-as-ft-fy))
924
- );
925
- font-size: var(
926
- --_ctm-mob-dn-qk-as-as-ft-se,
927
- var(--_ctm-tab-dn-qk-as-as-ft-se, var(--_ctm-dn-qk-as-as-ft-se))
928
- );
929
- color: var(
930
- --_ctm-mob-dn-qk-as-as-cr,
931
- var(--_ctm-tab-dn-qk-as-as-cr, var(--_ctm-dn-qk-as-as-cr))
932
- );
933
- font-weight: var(
934
- --_ctm-mob-dn-qk-as-as-ft-wt,
935
- var(--_ctm-tab-dn-qk-as-as-ft-wt, var(--_ctm-dn-qk-as-as-ft-wt))
936
- );
937
- text-decoration: var(
938
- --_ctm-mob-dn-qk-as-as-ue,
939
- var(--_ctm-tab-dn-qk-as-as-ue, var(--_ctm-dn-qk-as-as-ue))
940
- );
941
- letter-spacing: var(
942
- --_ctm-mob-dn-qk-as-as-lr-sg,
943
- var(--_ctm-tab-dn-qk-as-as-lr-sg, var(--_ctm-dn-qk-as-as-lr-sg))
944
- );
945
- line-height: var(
946
- --_ctm-mob-dn-qk-as-as-le-ht,
947
- var(--_ctm-tab-dn-qk-as-as-le-ht, var(--_ctm-dn-qk-as-as-le-ht))
948
- );
949
- font-style: var(
950
- --_ctm-mob-dn-qk-as-as-ft-se-ic,
951
- var(--_ctm-tab-dn-qk-as-as-ft-se-ic, var(--_ctm-dn-qk-as-as-ft-se-ic))
952
- );
953
- text-align: var(
954
- --_ctm-mob-dn-qk-as-as-tt-an,
955
- var(--_ctm-tab-dn-qk-as-as-tt-an, var(--_ctm-dn-qk-as-as-tt-an))
956
- );
957
- padding: var(
958
- --_ctm-mob-dn-qk-as-as-pg,
959
- var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg))
960
- );
961
- cursor: pointer;
962
- // text-align: start;
963
656
 
964
- &:hover {
965
- color: #0d60e5;
966
- background-color: var(--_gray-100);
967
- border-radius: 6px;
657
+ .order-row {
658
+ display: grid;
659
+ gap: 12px 24px;
660
+ /* 12px vertical, 24px horizontal */
661
+
662
+ /* First row: two equal columns + bottom border */
663
+ &:first-child {
664
+ grid-template-columns: repeat(2, 1fr);
665
+ border-bottom: 1px dashed var(--_gray-400);
666
+ padding-bottom: 24px;
667
+ }
668
+
669
+ /* Second row: three equal columns */
670
+ &:nth-child(2) {
671
+ grid-template-columns: repeat(3, 1fr);
672
+ margin-top: 24px;
673
+ }
674
+
675
+ /* Each individual info‐cell styling */
676
+ > div {
677
+ strong {
678
+ display: block;
679
+ // font-size: 14px;
680
+ // color: var(--_gray-500);
681
+ // line-height: 20px;
682
+ margin-bottom: 4px;
683
+ // font-weight: 400;
684
+ font-family: var(
685
+ --_ctm-mob-dn-or-io-or-ne-ft-fy,
686
+ var(--_ctm-tab-dn-or-io-or-ne-ft-fy, var(--_ctm-dn-or-io-or-ne-ft-fy))
687
+ );
688
+ font-size: var(
689
+ --_ctm-mob-dn-or-io-or-ne-ft-se,
690
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se, var(--_ctm-dn-or-io-or-ne-ft-se))
691
+ );
692
+ color: var(
693
+ --_ctm-mob-dn-or-io-or-ne-cr,
694
+ var(--_ctm-tab-dn-or-io-or-ne-cr, var(--_ctm-dn-or-io-or-ne-cr))
695
+ );
696
+ font-weight: var(
697
+ --_ctm-mob-dn-or-io-or-ne-ft-wt,
698
+ var(--_ctm-tab-dn-or-io-or-ne-ft-wt, var(--_ctm-dn-or-io-or-ne-ft-wt))
699
+ );
700
+ text-decoration: var(
701
+ --_ctm-mob-dn-or-io-or-ne-ue,
702
+ var(--_ctm-tab-dn-or-io-or-ne-ue, var(--_ctm-dn-or-io-or-ne-ue))
703
+ );
704
+ letter-spacing: var(
705
+ --_ctm-mob-dn-or-io-or-ne-lr-sg,
706
+ var(--_ctm-tab-dn-or-io-or-ne-lr-sg, var(--_ctm-dn-or-io-or-ne-lr-sg))
707
+ );
708
+ line-height: var(
709
+ --_ctm-mob-dn-or-io-or-ne-le-ht,
710
+ var(--_ctm-tab-dn-or-io-or-ne-le-ht, var(--_ctm-dn-or-io-or-ne-le-ht))
711
+ );
712
+ font-style: var(
713
+ --_ctm-mob-dn-or-io-or-ne-ft-se-ic,
714
+ var(--_ctm-tab-dn-or-io-or-ne-ft-se-ic, var(--_ctm-dn-or-io-or-ne-ft-se-ic))
715
+ );
716
+ text-align: var(
717
+ --_ctm-mob-dn-or-io-or-ne-tt-an,
718
+ var(--_ctm-tab-dn-or-io-or-ne-tt-an, var(--_ctm-dn-or-io-or-ne-tt-an))
719
+ );
720
+ }
721
+
722
+ p {
723
+ margin: 0;
724
+ margin-bottom: 4px;
725
+ // font-size: 20px;
726
+ // font-weight: 700;
727
+ // color: var(--_gray-900);
728
+ // line-height: 30px;
729
+ font-family: var(
730
+ --_ctm-mob-dn-or-io-or-id-ft-fy,
731
+ var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
732
+ );
733
+ font-size: var(
734
+ --_ctm-mob-dn-or-io-or-id-ft-se,
735
+ var(--_ctm-tab-dn-or-io-or-id-ft-se, var(--_ctm-dn-or-io-or-id-ft-se))
736
+ );
737
+ color: var(
738
+ --_ctm-mob-dn-or-io-or-id-cr,
739
+ var(--_ctm-tab-dn-or-io-or-id-cr, var(--_ctm-dn-or-io-or-id-cr))
740
+ );
741
+ font-weight: var(
742
+ --_ctm-mob-dn-or-io-or-id-ft-wt,
743
+ var(--_ctm-tab-dn-or-io-or-id-ft-wt, var(--_ctm-dn-or-io-or-id-ft-wt))
744
+ );
745
+ text-decoration: var(
746
+ --_ctm-mob-dn-or-io-or-id-ue,
747
+ var(--_ctm-tab-dn-or-io-or-id-ue, var(--_ctm-dn-or-io-or-id-ue))
748
+ );
749
+ letter-spacing: var(
750
+ --_ctm-mob-dn-or-io-or-id-lr-sg,
751
+ var(--_ctm-tab-dn-or-io-or-id-lr-sg, var(--_ctm-dn-or-io-or-id-lr-sg))
752
+ );
753
+ line-height: var(
754
+ --_ctm-mob-dn-or-io-or-id-le-ht,
755
+ var(--_ctm-tab-dn-or-io-or-id-le-ht, var(--_ctm-dn-or-io-or-id-le-ht))
756
+ );
757
+ font-style: var(
758
+ --_ctm-mob-dn-or-io-or-id-ft-se-ic,
759
+ var(--_ctm-tab-dn-or-io-or-id-ft-se-ic, var(--_ctm-dn-or-io-or-id-ft-se-ic))
760
+ );
761
+ text-align: var(
762
+ --_ctm-mob-dn-or-io-or-id-tt-an,
763
+ var(--_ctm-tab-dn-or-io-or-id-tt-an, var(--_ctm-dn-or-io-or-id-tt-an))
764
+ );
765
+ }
766
+ .delivery_address {
767
+ font-size: 14px;
768
+ font-weight: 400;
769
+ color: var(--_gray-400);
770
+ line-height: 20px;
771
+ }
772
+ .shipping-type {
773
+ font-size: 14px;
774
+ font-weight: 400;
775
+ color: var(--_gray-900);
776
+ line-height: 20px;
777
+ }
778
+
779
+ .status {
780
+ margin-left: 6px;
781
+ padding: 2px 8px;
782
+ border-radius: 4px;
783
+ font-size: 12px;
784
+ font-weight: 500;
785
+ line-height: 18px;
786
+ background-color: #eff8ff;
787
+ color: #0040c1;
788
+
789
+ display: inline-flex;
790
+ align-items: center;
791
+ gap: 6px;
792
+ &::before {
793
+ content: "";
794
+ display: inline-block;
795
+ width: 6px;
796
+ height: 6px;
797
+ border-radius: 50%;
798
+ background-color: #0040c1;
799
+ }
800
+ // &.success {
801
+ // background-color: var(--_success-200);
802
+ // &::before {
803
+ // background-color: var(--_success-700);
804
+ // }
805
+ // }
806
+ // &.failed {
807
+ // background-color: var(--_error-100);
808
+ // &::before {
809
+ // background-color: var(--_error-700);
810
+ // }
811
+ // }
812
+ }
813
+
814
+ .link-button {
815
+ color: #243dc6;
816
+ font-size: 14px;
817
+ font-weight: 400;
818
+ line-height: 20px;
819
+ }
820
+
821
+ .submitted {
822
+ font-size: 12px;
823
+ font-weight: 500;
824
+ line-height: 18px;
825
+ background: #eff8ff;
826
+ color: #0040c1;
827
+ display: inline-block;
828
+ height: 22px;
829
+ &::before {
830
+ content: "";
831
+ display: inline-block;
832
+ width: 6px;
833
+ height: 6px;
834
+ background-color: #0040c1;
835
+ border-radius: 50%;
836
+ margin-right: 6px;
837
+ vertical-align: middle;
838
+ margin-top: -1px;
839
+ }
840
+ }
841
+
842
+ .order-date {
843
+ // font-size: 14px;
844
+ // font-weight: 400;
845
+ // color: var(--_gray-400);
846
+ // line-height: 20px;
847
+ font-family: var(
848
+ --_ctm-mob-dn-or-io-or-de-ft-fy,
849
+ var(--_ctm-tab-dn-or-io-or-de-ft-fy, var(--_ctm-dn-or-io-or-de-ft-fy))
850
+ );
851
+ font-size: var(
852
+ --_ctm-mob-dn-or-io-or-de-ft-se,
853
+ var(--_ctm-tab-dn-or-io-or-de-ft-se, var(--_ctm-dn-or-io-or-de-ft-se))
854
+ );
855
+ color: var(
856
+ --_ctm-mob-dn-or-io-or-de-cr,
857
+ var(--_ctm-tab-dn-or-io-or-de-cr, var(--_ctm-dn-or-io-or-de-cr))
858
+ );
859
+ font-weight: var(
860
+ --_ctm-mob-dn-or-io-or-de-ft-wt,
861
+ var(--_ctm-tab-dn-or-io-or-de-ft-wt, var(--_ctm-dn-or-io-or-de-ft-wt))
862
+ );
863
+ text-decoration: var(
864
+ --_ctm-mob-dn-or-io-or-de-ue,
865
+ var(--_ctm-tab-dn-or-io-or-de-ue, var(--_ctm-dn-or-io-or-de-ue))
866
+ );
867
+ letter-spacing: var(
868
+ --_ctm-mob-dn-or-io-or-de-lr-sg,
869
+ var(--_ctm-tab-dn-or-io-or-de-lr-sg, var(--_ctm-dn-or-io-or-de-lr-sg))
870
+ );
871
+ line-height: var(
872
+ --_ctm-mob-dn-or-io-or-de-le-ht,
873
+ var(--_ctm-tab-dn-or-io-or-de-le-ht, var(--_ctm-dn-or-io-or-de-le-ht))
874
+ );
875
+ font-style: var(
876
+ --_ctm-mob-dn-or-io-or-de-ft-se-ic,
877
+ var(--_ctm-tab-dn-or-io-or-de-ft-se-ic, var(--_ctm-dn-or-io-or-de-ft-se-ic))
878
+ );
879
+ text-align: var(
880
+ --_ctm-mob-dn-or-io-or-de-tt-an,
881
+ var(--_ctm-tab-dn-or-io-or-de-tt-an, var(--_ctm-dn-or-io-or-de-tt-an))
882
+ );
883
+ }
884
+
885
+ .inclusive-tax {
886
+ margin-left: 4px;
887
+ font-size: 0.7rem;
888
+ color: #6b7280;
889
+ }
890
+ }
968
891
  }
969
892
  }
970
- }
971
893
 
972
- /* ───────── Cart Items ───────── */
973
- .cart-items {
974
- background-color: var(
975
- --_ctm-mob-dn-dn-ct-is-bd-cr,
976
- var(--_ctm-tab-dn-dn-ct-is-bd-cr, var(--_ctm-dn-dn-ct-is-bd-cr))
977
- );
978
- margin: var(
979
- --_ctm-mob-dn-dn-ct-is-mn,
980
- var(--_ctm-tab-dn-dn-ct-is-mn, var(--_ctm-dn-dn-ct-is-mn))
981
- );
982
- padding: var(
983
- --_ctm-mob-dn-dn-ct-is-pg,
984
- var(--_ctm-tab-dn-dn-ct-is-pg, var(--_ctm-dn-dn-ct-is-pg))
985
- );
986
- border-color: var(
987
- --_ctm-mob-dn-dn-ct-is-br-cr,
988
- var(--_ctm-tab-dn-dn-ct-is-br-cr, var(--_ctm-dn-dn-ct-is-br-cr))
989
- );
990
- border-style: var(
991
- --_ctm-mob-dn-dn-ct-is-br-se,
992
- var(--_ctm-tab-dn-dn-ct-is-br-se, var(--_ctm-dn-dn-ct-is-br-se))
993
- );
994
- border-width: var(
995
- --_ctm-mob-dn-dn-ct-is-br-wh,
996
- var(--_ctm-tab-dn-dn-ct-is-br-wh, var(--_ctm-dn-dn-ct-is-br-wh))
997
- );
998
- border-radius: var(
999
- --_ctm-mob-dn-dn-ct-is-br-rs,
1000
- var(--_ctm-tab-dn-dn-ct-is-br-rs, var(--_ctm-dn-dn-ct-is-br-rs))
1001
- );
1002
- box-shadow: var(
1003
- --_show-shadow,
1004
- var(
1005
- --_ctm-mob-dn-bd-ad-fl-sw-ae,
1006
- var(--_ctm-dn-dn-ct-is-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
1007
- )
1008
- var(
1009
- --_ctm-mob-dn-bd-ad-fl-sw-br,
1010
- var(--_ctm-dn-dn-ct-is-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
1011
- )
1012
- var(
1013
- --_ctm-mob-dn-bd-ad-fl-sw-sd,
1014
- var(--_ctm-dn-dn-ct-is-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
1015
- )
1016
- var(
1017
- --_ctm-mob-dn-bd-ad-fl-sw-cr,
1018
- var(--_ctm-dn-dn-ct-is-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
1019
- )
1020
- );
894
+ /* ───────── Quick Actions ───────── */
895
+ .quick-actions {
896
+ display: flex;
897
+ flex-direction: column;
1021
898
 
1022
- h3 {
1023
- // font-size: 14px;
1024
- // color: #667085;
1025
- margin-bottom: 24px;
1026
- // line-height: 20px;
1027
- // font-weight: 400;
1028
- padding: var(
1029
- --_ctm-mob-dn-pt-wt-pt-te-pg,
1030
- var(--_ctm-tab-dn-pt-wt-pt-te-im-pg, var(--_ctm-dn-pt-wt-pt-te-pg))
1031
- );
1032
- font-family: var(
1033
- --_ctm-mob-dn-pt-wt-pt-te-ft-fy,
1034
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-fy, var(--_ctm-dn-pt-wt-pt-te-ft-fy))
1035
- );
1036
- font-size: var(
1037
- --_ctm-mob-dn-pt-wt-pt-te-ft-se,
1038
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-se, var(--_ctm-dn-pt-wt-pt-te-ft-se))
1039
- );
1040
- color: var(
1041
- --_ctm-mob-dn-pt-wt-pt-te-cr,
1042
- var(--_ctm-tab-dn-pt-wt-pt-te-cr, var(--_ctm-dn-pt-wt-pt-te-cr))
1043
- );
1044
- font-weight: var(
1045
- --_ctm-mob-dn-pt-wt-pt-te-ft-wt,
1046
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-wt, var(--_ctm-dn-pt-wt-pt-te-ft-wt))
1047
- );
1048
- text-decoration: var(
1049
- --_ctm-mob-dn-pt-wt-pt-te-ue,
1050
- var(--_ctm-tab-dn-pt-wt-pt-te-ue, var(--_ctm-dn-pt-wt-pt-te-ue))
1051
- );
1052
- letter-spacing: var(
1053
- --_ctm-mob-dn-pt-wt-pt-te-lr-sg,
1054
- var(--_ctm-tab-dn-pt-wt-pt-te-lr-sg, var(--_ctm-dn-pt-wt-pt-te-lr-sg))
1055
- );
1056
- line-height: var(
1057
- --_ctm-mob-dn-pt-wt-pt-te-le-ht,
1058
- var(--_ctm-tab-dn-pt-wt-pt-te-le-ht, var(--_ctm-dn-pt-wt-pt-te-le-ht))
1059
- );
1060
- font-style: var(
1061
- --_ctm-mob-dn-pt-wt-pt-te-ft-se-ic,
1062
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-dn-pt-wt-pt-te-ft-se-ic))
1063
- );
1064
- text-align: var(
1065
- --_ctm-mob-dn-pt-wt-pt-te-tt-an,
1066
- var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an))
899
+ gap: 8px;
900
+
901
+ background-color: var(--_ctm-dn-dn-qk-as-bd-cr);
902
+ margin: var(--_ctm-dn-dn-qk-as-mn);
903
+ padding: var(--_ctm-dn-dn-qk-as-pg);
904
+ border-color: var(--_ctm-dn-dn-qk-as-br-cr);
905
+
906
+ border-style: var(--_ctm-dn-dn-qk-as-br-se);
907
+ border-width: var(--_ctm-dn-dn-qk-as-br-wh);
908
+ border-radius: var(--_ctm-dn-dn-qk-as-br-rs);
909
+
910
+ box-shadow: var(
911
+ --_show-shadow,
912
+ var(
913
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
914
+ var(--_ctm-dn-dn-qk-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
915
+ )
916
+ var(
917
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
918
+ var(--_ctm-dn-dn-qk-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
919
+ )
920
+ var(
921
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
922
+ var(--_ctm-dn-dn-qk-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
923
+ )
924
+ var(
925
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
926
+ var(--_ctm-dn-dn-qk-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
927
+ )
1067
928
  );
929
+
930
+ .action-button {
931
+ width: fit-content;
932
+ margin: var(
933
+ --_ctm-mob-dn-qk-as-as-mn,
934
+ var(--_ctm-tab-dn-qk-as-as-mn, var(--_ctm-dn-qk-as-as-mn))
935
+ );
936
+ padding: var(
937
+ --_ctm-mob-dn-qk-as-as-pg,
938
+ var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg))
939
+ );
940
+ border-color: var(
941
+ --_ctm-mob-dn-qk-as-as-br-cr,
942
+ var(--_ctm-tab-dn-qk-as-as-br-cr, var(--_ctm-dn-qk-as-as-br-cr))
943
+ );
944
+ border-style: var(
945
+ --_ctm-mob-dn-qk-as-as-br-se,
946
+ var(--_ctm-tab-dn-qk-as-as-br-se, var(--_ctm-dn-qk-as-as-br-se))
947
+ );
948
+ border-width: var(
949
+ --_ctm-mob-dn-qk-as-as-br-wh,
950
+ var(--_ctm-tab-dn-qk-as-as-br-wh, var(--_ctm-dn-qk-as-as-br-wh))
951
+ );
952
+ border-radius: var(
953
+ --_ctm-mob-dn-qk-as-as-br-rs,
954
+ var(--_ctm-mob-dn-qk-as-as-br-rs, var(--_ctm-mob-dn-qk-as-as-br-rs))
955
+ );
956
+ box-shadow: var(
957
+ --_show-shadow,
958
+ var(
959
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
960
+ var(--_ctm-dn-qk-as-as-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
961
+ )
962
+ var(
963
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
964
+ var(--_ctm-dn-qk-as-as-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
965
+ )
966
+ var(
967
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
968
+ var(--_ctm-dn-qk-as-as-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
969
+ )
970
+ var(
971
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
972
+ var(--_ctm-dn-qk-as-as-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
973
+ )
974
+ );
975
+ background-color: var(
976
+ --_ctm-mob-dn-qk-as-as-bd-cr,
977
+ var(--_ctm-tab-dn-qk-as-as-bd-cr, var(--_ctm-dn-qk-as-as-bd-cr))
978
+ );
979
+ font-family: var(
980
+ --_ctm-mob-dn-qk-as-as-ft-fy,
981
+ var(--_ctm-tab-dn-qk-as-as-ft-fy, var(--_ctm-dn-qk-as-as-ft-fy))
982
+ );
983
+ font-size: var(
984
+ --_ctm-mob-dn-qk-as-as-ft-se,
985
+ var(--_ctm-tab-dn-qk-as-as-ft-se, var(--_ctm-dn-qk-as-as-ft-se))
986
+ );
987
+ color: var(
988
+ --_ctm-mob-dn-qk-as-as-cr,
989
+ var(--_ctm-tab-dn-qk-as-as-cr, var(--_ctm-dn-qk-as-as-cr))
990
+ );
991
+ font-weight: var(
992
+ --_ctm-mob-dn-qk-as-as-ft-wt,
993
+ var(--_ctm-tab-dn-qk-as-as-ft-wt, var(--_ctm-dn-qk-as-as-ft-wt))
994
+ );
995
+ text-decoration: var(
996
+ --_ctm-mob-dn-qk-as-as-ue,
997
+ var(--_ctm-tab-dn-qk-as-as-ue, var(--_ctm-dn-qk-as-as-ue))
998
+ );
999
+ letter-spacing: var(
1000
+ --_ctm-mob-dn-qk-as-as-lr-sg,
1001
+ var(--_ctm-tab-dn-qk-as-as-lr-sg, var(--_ctm-dn-qk-as-as-lr-sg))
1002
+ );
1003
+ line-height: var(
1004
+ --_ctm-mob-dn-qk-as-as-le-ht,
1005
+ var(--_ctm-tab-dn-qk-as-as-le-ht, var(--_ctm-dn-qk-as-as-le-ht))
1006
+ );
1007
+ font-style: var(
1008
+ --_ctm-mob-dn-qk-as-as-ft-se-ic,
1009
+ var(--_ctm-tab-dn-qk-as-as-ft-se-ic, var(--_ctm-dn-qk-as-as-ft-se-ic))
1010
+ );
1011
+ text-align: var(
1012
+ --_ctm-mob-dn-qk-as-as-tt-an,
1013
+ var(--_ctm-tab-dn-qk-as-as-tt-an, var(--_ctm-dn-qk-as-as-tt-an))
1014
+ );
1015
+ padding: var(
1016
+ --_ctm-mob-dn-qk-as-as-pg,
1017
+ var(--_ctm-tab-dn-qk-as-as-pg, var(--_ctm-dn-qk-as-as-pg))
1018
+ );
1019
+ cursor: pointer;
1020
+ // text-align: start;
1021
+
1022
+ &:hover {
1023
+ color: #0d60e5;
1024
+ background-color: var(--_gray-100);
1025
+ border-radius: 6px;
1026
+ }
1027
+ }
1068
1028
  }
1069
1029
 
1070
- .items-grid {
1071
- display: grid;
1072
- grid-template-columns: repeat(3, 1fr);
1073
- gap: var(
1074
- --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
1075
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
1076
- );
1030
+ /* ───────── Cart Items ───────── */
1031
+ .cart-items {
1077
1032
  background-color: var(
1078
- --_ctm-mob-dn-pt-wt-pt-wt-wr-bd-cr,
1079
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-bd-cr))
1033
+ --_ctm-mob-dn-dn-ct-is-bd-cr,
1034
+ var(--_ctm-tab-dn-dn-ct-is-bd-cr, var(--_ctm-dn-dn-ct-is-bd-cr))
1080
1035
  );
1081
1036
  margin: var(
1082
- --_ctm-mob-dn-pt-wt-pt-wt-wr-mn,
1083
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-mn, var(--_ctm-dn-pt-wt-pt-wt-wr-mn))
1037
+ --_ctm-mob-dn-dn-ct-is-mn,
1038
+ var(--_ctm-tab-dn-dn-ct-is-mn, var(--_ctm-dn-dn-ct-is-mn))
1084
1039
  );
1085
1040
  padding: var(
1086
- --_ctm-mob-dn-pt-wt-pt-wt-wr-pg,
1087
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-dn-pt-wt-pt-wt-wr-pg))
1041
+ --_ctm-mob-dn-dn-ct-is-pg,
1042
+ var(--_ctm-tab-dn-dn-ct-is-pg, var(--_ctm-dn-dn-ct-is-pg))
1088
1043
  );
1089
1044
  border-color: var(
1090
- --_ctm-mob-dn-pt-wt-pt-wt-wr-br-cr,
1091
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-br-cr))
1045
+ --_ctm-mob-dn-dn-ct-is-br-cr,
1046
+ var(--_ctm-tab-dn-dn-ct-is-br-cr, var(--_ctm-dn-dn-ct-is-br-cr))
1092
1047
  );
1093
1048
  border-style: var(
1094
- --_ctm-mob-dn-pt-wt-pt-wt-wr-br-se,
1095
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-dn-pt-wt-pt-wt-wr-br-se))
1049
+ --_ctm-mob-dn-dn-ct-is-br-se,
1050
+ var(--_ctm-tab-dn-dn-ct-is-br-se, var(--_ctm-dn-dn-ct-is-br-se))
1096
1051
  );
1097
1052
  border-width: var(
1098
- --_ctm-mob-dn-pt-wt-pt-wt-wr-br-wh,
1099
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-dn-pt-wt-pt-wt-wr-br-wh))
1053
+ --_ctm-mob-dn-dn-ct-is-br-wh,
1054
+ var(--_ctm-tab-dn-dn-ct-is-br-wh, var(--_ctm-dn-dn-ct-is-br-wh))
1100
1055
  );
1101
-
1102
1056
  border-radius: var(
1103
- --_ctm-mob-dn-pt-wt-pt-wt-wr-br-rs,
1104
- var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs))
1057
+ --_ctm-mob-dn-dn-ct-is-br-rs,
1058
+ var(--_ctm-tab-dn-dn-ct-is-br-rs, var(--_ctm-dn-dn-ct-is-br-rs))
1105
1059
  );
1106
- margin-bottom: 24px;
1107
- }
1060
+ box-shadow: var(
1061
+ --_show-shadow,
1062
+ var(
1063
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
1064
+ var(--_ctm-dn-dn-ct-is-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
1065
+ )
1066
+ var(
1067
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
1068
+ var(--_ctm-dn-dn-ct-is-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
1069
+ )
1070
+ var(
1071
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
1072
+ var(--_ctm-dn-dn-ct-is-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
1073
+ )
1074
+ var(
1075
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
1076
+ var(--_ctm-dn-dn-ct-is-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
1077
+ )
1078
+ );
1079
+
1080
+ h3 {
1081
+ // font-size: 14px;
1082
+ // color: #667085;
1083
+ margin-bottom: 24px;
1084
+ // line-height: 20px;
1085
+ // font-weight: 400;
1086
+ padding: var(
1087
+ --_ctm-mob-dn-pt-wt-pt-te-pg,
1088
+ var(--_ctm-tab-dn-pt-wt-pt-te-im-pg, var(--_ctm-dn-pt-wt-pt-te-pg))
1089
+ );
1090
+ font-family: var(
1091
+ --_ctm-mob-dn-pt-wt-pt-te-ft-fy,
1092
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-fy, var(--_ctm-dn-pt-wt-pt-te-ft-fy))
1093
+ );
1094
+ font-size: var(
1095
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se,
1096
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se, var(--_ctm-dn-pt-wt-pt-te-ft-se))
1097
+ );
1098
+ color: var(
1099
+ --_ctm-mob-dn-pt-wt-pt-te-cr,
1100
+ var(--_ctm-tab-dn-pt-wt-pt-te-cr, var(--_ctm-dn-pt-wt-pt-te-cr))
1101
+ );
1102
+ font-weight: var(
1103
+ --_ctm-mob-dn-pt-wt-pt-te-ft-wt,
1104
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-wt, var(--_ctm-dn-pt-wt-pt-te-ft-wt))
1105
+ );
1106
+ text-decoration: var(
1107
+ --_ctm-mob-dn-pt-wt-pt-te-ue,
1108
+ var(--_ctm-tab-dn-pt-wt-pt-te-ue, var(--_ctm-dn-pt-wt-pt-te-ue))
1109
+ );
1110
+ letter-spacing: var(
1111
+ --_ctm-mob-dn-pt-wt-pt-te-lr-sg,
1112
+ var(--_ctm-tab-dn-pt-wt-pt-te-lr-sg, var(--_ctm-dn-pt-wt-pt-te-lr-sg))
1113
+ );
1114
+ line-height: var(
1115
+ --_ctm-mob-dn-pt-wt-pt-te-le-ht,
1116
+ var(--_ctm-tab-dn-pt-wt-pt-te-le-ht, var(--_ctm-dn-pt-wt-pt-te-le-ht))
1117
+ );
1118
+ font-style: var(
1119
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se-ic,
1120
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-dn-pt-wt-pt-te-ft-se-ic))
1121
+ );
1122
+ text-align: var(
1123
+ --_ctm-mob-dn-pt-wt-pt-te-tt-an,
1124
+ var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an))
1125
+ );
1126
+ }
1108
1127
 
1109
- .item-card {
1110
- // border-radius: 6px;
1111
- gap: var(
1112
- --_ctm-mob-dn-pt-wt-pt-wt-im-im-gp,
1113
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp))
1114
- );
1115
- background-color: var(
1116
- --_ctm-mob-dn-pt-wt-pt-wt-im-bd-cr,
1117
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-im-bd-cr))
1118
- );
1119
- margin: var(
1120
- --_ctm-mob-dn-pt-wt-pt-wt-im-mn,
1121
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-mn, var(--_ctm-dn-pt-wt-pt-wt-im-mn))
1122
- );
1123
- padding: var(
1124
- --_ctm-mob-dn-pt-wt-pt-wt-im-pg,
1125
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-pg, var(--_ctm-dn-pt-wt-pt-wt-im-pg))
1126
- );
1127
- border-color: var(
1128
- --_ctm-mob-dn-pt-wt-pt-wt-im-br-cr,
1129
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-cr, var(--_ctm-dn-pt-wt-pt-wt-im-br-cr))
1130
- );
1131
- border-style: var(
1132
- --_ctm-mob-dn-pt-wt-pt-wt-im-br-se,
1133
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-se, var(--_ctm-dn-pt-wt-pt-wt-im-br-se))
1134
- );
1135
- border-width: var(
1136
- --_ctm-mob-dn-pt-wt-pt-wt-im-br-wh,
1137
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-wh, var(--_ctm-dn-pt-wt-pt-wt-im-br-wh))
1138
- );
1128
+ .items-grid {
1129
+ display: grid;
1130
+ grid-template-columns: repeat(3, 1fr);
1131
+ gap: var(
1132
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
1133
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
1134
+ );
1135
+ background-color: var(
1136
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-bd-cr,
1137
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-bd-cr))
1138
+ );
1139
+ margin: var(
1140
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-mn,
1141
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-mn, var(--_ctm-dn-pt-wt-pt-wt-wr-mn))
1142
+ );
1143
+ padding: var(
1144
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-pg,
1145
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-pg, var(--_ctm-dn-pt-wt-pt-wt-wr-pg))
1146
+ );
1147
+ border-color: var(
1148
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-cr,
1149
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-cr, var(--_ctm-dn-pt-wt-pt-wt-wr-br-cr))
1150
+ );
1151
+ border-style: var(
1152
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-se,
1153
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-se, var(--_ctm-dn-pt-wt-pt-wt-wr-br-se))
1154
+ );
1155
+ border-width: var(
1156
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-wh,
1157
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-wh, var(--_ctm-dn-pt-wt-pt-wt-wr-br-wh))
1158
+ );
1139
1159
 
1140
- border-radius: var(
1141
- --_ctm-mob-dn-pt-wt-pt-wt-im-br-rs,
1142
- var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-rs, var(--_ctm-dn-pt-wt-pt-wt-im-br-rs))
1143
- );
1144
- display: flex;
1145
- align-items: flex-start;
1160
+ border-radius: var(
1161
+ --_ctm-mob-dn-pt-wt-pt-wt-wr-br-rs,
1162
+ var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs))
1163
+ );
1164
+ margin-bottom: 24px;
1165
+ }
1146
1166
 
1147
- img {
1148
- width: 69px;
1149
- height: 80px;
1150
- object-fit: cover;
1151
- // border-radius: 4px;
1152
- // margin-right: 12px;
1167
+ .item-card {
1168
+ // border-radius: 6px;
1153
1169
  gap: var(
1154
- --_ctm-mob-dn-pt-wt-pt-ie-im-gp,
1155
- var(--_ctm-tab-dn-pt-wt-pt-ie-im-gp, var(--_ctm-dn-pt-wt-pt-ie-im-gp))
1170
+ --_ctm-mob-dn-pt-wt-pt-wt-im-im-gp,
1171
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp))
1156
1172
  );
1157
1173
  background-color: var(
1158
- --_ctm-mob-dn-pt-wt-pt-ie-bd-cr,
1159
- var(--_ctm-tab-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-dn-pt-wt-pt-ie-bd-cr))
1174
+ --_ctm-mob-dn-pt-wt-pt-wt-im-bd-cr,
1175
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-bd-cr, var(--_ctm-dn-pt-wt-pt-wt-im-bd-cr))
1160
1176
  );
1161
1177
  margin: var(
1162
- --_ctm-mob-dn-pt-wt-pt-ie-mn,
1163
- var(--_ctm-tab-dn-pt-wt-pt-ie-mn, var(--_ctm-dn-pt-wt-pt-ie-mn))
1178
+ --_ctm-mob-dn-pt-wt-pt-wt-im-mn,
1179
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-mn, var(--_ctm-dn-pt-wt-pt-wt-im-mn))
1164
1180
  );
1165
1181
  padding: var(
1166
- --_ctm-mob-dn-pt-wt-pt-ie-pg,
1167
- var(--_ctm-tab-dn-pt-wt-pt-ie-pg, var(--_ctm-dn-pt-wt-pt-ie-pg))
1182
+ --_ctm-mob-dn-pt-wt-pt-wt-im-pg,
1183
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-pg, var(--_ctm-dn-pt-wt-pt-wt-im-pg))
1168
1184
  );
1169
1185
  border-color: var(
1170
- --_ctm-mob-dn-pt-wt-pt-ie-br-cr,
1171
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-cr, var(--_ctm-dn-pt-wt-pt-ie-br-cr))
1186
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-cr,
1187
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-cr, var(--_ctm-dn-pt-wt-pt-wt-im-br-cr))
1172
1188
  );
1173
1189
  border-style: var(
1174
- --_ctm-mob-dn-pt-wt-pt-ie-br-se,
1175
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-se, var(--_ctm-dn-pt-wt-pt-ie-br-se))
1190
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-se,
1191
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-se, var(--_ctm-dn-pt-wt-pt-wt-im-br-se))
1176
1192
  );
1177
1193
  border-width: var(
1178
- --_ctm-mob-dn-pt-wt-pt-ie-br-wh,
1179
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-wh, var(--_ctm-dn-pt-wt-pt-ie-br-wh))
1194
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-wh,
1195
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-wh, var(--_ctm-dn-pt-wt-pt-wt-im-br-wh))
1180
1196
  );
1181
1197
 
1182
1198
  border-radius: var(
1183
- --_ctm-mob-dn-pt-wt-pt-ie-br-rs,
1184
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-rs, var(--_ctm-dn-pt-wt-pt-ie-br-rs))
1199
+ --_ctm-mob-dn-pt-wt-pt-wt-im-br-rs,
1200
+ var(--_ctm-tab-dn-pt-wt-pt-wt-im-br-rs, var(--_ctm-dn-pt-wt-pt-wt-im-br-rs))
1185
1201
  );
1186
1202
  display: flex;
1187
1203
  align-items: flex-start;
1188
- }
1189
1204
 
1190
- .item-details {
1191
- flex: 1;
1192
-
1193
- .item-name {
1194
- display: -webkit-box;
1195
- -webkit-line-clamp: 1;
1196
- -webkit-box-orient: vertical;
1197
- overflow: hidden;
1198
- text-overflow: ellipsis;
1199
- margin: 0 0 4px;
1200
- // font-size: 14px;
1201
- // font-weight: 600;
1202
- // color: var(--_gray-900);
1203
- // line-height: 20px;
1204
- padding: var(
1205
- --_ctm-mob-dn-pt-wt-pt-ne-pg,
1206
- var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1207
- );
1208
- font-family: var(
1209
- --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
1210
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
1211
- );
1212
- font-size: var(
1213
- --_ctm-mob-dn-pt-wt-pt-ne-ft-se,
1214
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se))
1215
- );
1216
- color: var(
1217
- --_ctm-mob-dn-pt-wt-pt-ne-cr,
1218
- var(--_ctm-tab-dn-pt-wt-pt-ne-cr, var(--_ctm-dn-pt-wt-pt-ne-cr))
1205
+ img {
1206
+ width: 69px;
1207
+ height: 80px;
1208
+ object-fit: cover;
1209
+ // border-radius: 4px;
1210
+ // margin-right: 12px;
1211
+ gap: var(
1212
+ --_ctm-mob-dn-pt-wt-pt-ie-im-gp,
1213
+ var(--_ctm-tab-dn-pt-wt-pt-ie-im-gp, var(--_ctm-dn-pt-wt-pt-ie-im-gp))
1214
+ );
1215
+ background-color: var(
1216
+ --_ctm-mob-dn-pt-wt-pt-ie-bd-cr,
1217
+ var(--_ctm-tab-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-dn-pt-wt-pt-ie-bd-cr))
1218
+ );
1219
+ margin: var(
1220
+ --_ctm-mob-dn-pt-wt-pt-ie-mn,
1221
+ var(--_ctm-tab-dn-pt-wt-pt-ie-mn, var(--_ctm-dn-pt-wt-pt-ie-mn))
1219
1222
  );
1220
- font-weight: var(
1221
- --_ctm-mob-dn-pt-wt-pt-ne-ft-wt,
1222
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-dn-pt-wt-pt-ne-ft-wt))
1223
- );
1224
- text-decoration: var(
1225
- --_ctm-mob-dn-pt-wt-pt-ne-ue,
1226
- var(--_ctm-tab-dn-pt-wt-pt-ne-ue, var(--_ctm-dn-pt-wt-pt-ne-ue))
1227
- );
1228
- letter-spacing: var(
1229
- --_ctm-mob-dn-pt-wt-pt-ne-lr-sg,
1230
- var(--_ctm-tab-dn-pt-wt-pt-ne-lr-sg, var(--_ctm-dn-pt-wt-pt-ne-lr-sg))
1231
- );
1232
- line-height: var(
1233
- --_ctm-mob-dn-pt-wt-pt-ne-le-ht,
1234
- var(--_ctm-tab-dn-pt-wt-pt-ne-le-ht, var(--_ctm-dn-pt-wt-pt-ne-le-ht))
1235
- );
1236
- font-style: var(
1237
- --_ctm-mob-dn-pt-wt-pt-ne-ft-se-ic,
1238
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ne-ft-se-ic))
1239
- );
1240
- text-align: var(
1241
- --_ctm-mob-dn-pt-wt-pt-ne-tt-an,
1242
- var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an))
1243
- );
1244
- }
1245
-
1246
- .item-specs {
1247
1223
  padding: var(
1248
- --_ctm-mob-dn-pt-wt-pt-ce-pg,
1249
- var(--_ctm-tab-dn-pt-wt-pt-ce-im-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
1250
- );
1251
- font-family: var(
1252
- --_ctm-mob-dn-pt-wt-pt-ce-ft-fy,
1253
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy))
1224
+ --_ctm-mob-dn-pt-wt-pt-ie-pg,
1225
+ var(--_ctm-tab-dn-pt-wt-pt-ie-pg, var(--_ctm-dn-pt-wt-pt-ie-pg))
1254
1226
  );
1255
- font-size: var(
1256
- --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1257
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1258
- );
1259
- color: var(
1260
- --_ctm-mob-dn-pt-wt-pt-ce-cr,
1261
- var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr))
1262
- );
1263
- font-weight: var(
1264
- --_ctm-mob-dn-pt-wt-pt-ce-ft-wt,
1265
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-dn-pt-wt-pt-ce-ft-wt))
1266
- );
1267
- text-decoration: var(
1268
- --_ctm-mob-dn-pt-wt-pt-ce-ue,
1269
- var(--_ctm-tab-dn-pt-wt-pt-ce-ue, var(--_ctm-dn-pt-wt-pt-ce-ue))
1270
- );
1271
- letter-spacing: var(
1272
- --_ctm-mob-dn-pt-wt-pt-ce-lr-sg,
1273
- var(--_ctm-tab-dn-pt-wt-pt-ce-lr-sg, var(--_ctm-dn-pt-wt-pt-ce-lr-sg))
1227
+ border-color: var(
1228
+ --_ctm-mob-dn-pt-wt-pt-ie-br-cr,
1229
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-cr, var(--_ctm-dn-pt-wt-pt-ie-br-cr))
1274
1230
  );
1275
- line-height: var(
1276
- --_ctm-mob-dn-pt-wt-pt-ce-le-ht,
1277
- var(--_ctm-tab-dn-pt-wt-pt-ce-le-ht, var(--_ctm-dn-pt-wt-pt-ce-le-ht))
1231
+ border-style: var(
1232
+ --_ctm-mob-dn-pt-wt-pt-ie-br-se,
1233
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-se, var(--_ctm-dn-pt-wt-pt-ie-br-se))
1278
1234
  );
1279
- font-style: var(
1280
- --_ctm-mob-dn-pt-wt-pt-ce-ft-se-ic,
1281
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ce-ft-se-ic))
1235
+ border-width: var(
1236
+ --_ctm-mob-dn-pt-wt-pt-ie-br-wh,
1237
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-wh, var(--_ctm-dn-pt-wt-pt-ie-br-wh))
1282
1238
  );
1283
- text-align: var(
1284
- --_ctm-mob-dn-pt-wt-pt-ce-tt-an,
1285
- var(--_ctm-tab-dn-pt-wt-pt-ce-tt-an, var(--_ctm-dn-pt-wt-pt-ce-tt-an))
1239
+
1240
+ border-radius: var(
1241
+ --_ctm-mob-dn-pt-wt-pt-ie-br-rs,
1242
+ var(--_ctm-tab-dn-pt-wt-pt-ie-br-rs, var(--_ctm-dn-pt-wt-pt-ie-br-rs))
1286
1243
  );
1244
+ display: flex;
1245
+ align-items: flex-start;
1287
1246
  }
1288
- .item-qty {
1289
- padding: var(
1290
- --_ctm-mob-dn-pt-wt-pt-qy-pg,
1291
- var(--_ctm-tab-dn-pt-wt-pt-qy-pg, var(--_ctm-dn-pt-wt-pt-qy-pg))
1292
- );
1293
- font-family: var(
1294
- --_ctm-mob-dn-pt-wt-pt-qy-ft-fy,
1295
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy))
1296
- );
1297
- font-size: var(
1298
- --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1299
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1300
- );
1301
- color: var(
1302
- --_ctm-mob-dn-pt-wt-pt-qy-cr,
1303
- var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr))
1304
- );
1305
- font-weight: var(
1306
- --_ctm-mob-dn-pt-wt-pt-qy-ft-wt,
1307
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-dn-pt-wt-pt-qy-ft-wt))
1308
- );
1309
- text-decoration: var(
1310
- --_ctm-mob-dn-pt-wt-pt-qy-ue,
1311
- var(--_ctm-tab-dn-pt-wt-pt-qy-ue, var(--_ctm-dn-pt-wt-pt-qy-ue))
1312
- );
1313
- letter-spacing: var(
1314
- --_ctm-mob-dn-pt-wt-pt-qy-lr-sg,
1315
- var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-dn-pt-wt-pt-qy-lr-sg))
1316
- );
1317
- line-height: var(
1318
- --_ctm-mob-dn-pt-wt-pt-qy-le-ht,
1319
- var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht, var(--_ctm-dn-pt-wt-pt-qy-le-ht))
1320
- );
1321
- font-style: var(
1322
- --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic,
1323
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic))
1324
- );
1325
- text-align: var(
1326
- --_ctm-mob-dn-pt-wt-pt-qy-tt-an,
1327
- var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an))
1328
- );
1329
- span {
1247
+
1248
+ .item-details {
1249
+ flex: 1;
1250
+
1251
+ .item-name {
1252
+ display: -webkit-box;
1253
+ -webkit-line-clamp: 1;
1254
+ -webkit-box-orient: vertical;
1255
+ overflow: hidden;
1256
+ text-overflow: ellipsis;
1257
+ margin: 0 0 4px;
1258
+ // font-size: 14px;
1259
+ // font-weight: 600;
1260
+ // color: var(--_gray-900);
1261
+ // line-height: 20px;
1262
+ padding: var(
1263
+ --_ctm-mob-dn-pt-wt-pt-ne-pg,
1264
+ var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1265
+ );
1330
1266
  font-family: var(
1331
- --_ctm-mob-dn-pt-wt-pt-qy-ft-fy-dc,
1332
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-fy-dc))
1267
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
1268
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
1333
1269
  );
1334
1270
  font-size: var(
1335
- --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc,
1336
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc))
1271
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-se,
1272
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se))
1337
1273
  );
1338
1274
  color: var(
1339
- --_ctm-mob-dn-pt-wt-pt-qy-cr-dc,
1340
- var(--_ctm-tab-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-dn-pt-wt-pt-qy-cr-dc))
1275
+ --_ctm-mob-dn-pt-wt-pt-ne-cr,
1276
+ var(--_ctm-tab-dn-pt-wt-pt-ne-cr, var(--_ctm-dn-pt-wt-pt-ne-cr))
1341
1277
  );
1342
1278
  font-weight: var(
1343
- --_ctm-mob-dn-pt-wt-pt-qy-ft-wt-dc,
1344
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-wt-dc))
1279
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-wt,
1280
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-dn-pt-wt-pt-ne-ft-wt))
1345
1281
  );
1346
1282
  text-decoration: var(
1347
- --_ctm-mob-dn-pt-wt-pt-qy-ue-dc,
1348
- var(--_ctm-tab-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-dn-pt-wt-pt-qy-ue-dc))
1283
+ --_ctm-mob-dn-pt-wt-pt-ne-ue,
1284
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ue, var(--_ctm-dn-pt-wt-pt-ne-ue))
1349
1285
  );
1350
1286
  letter-spacing: var(
1351
- --_ctm-mob-dn-pt-wt-pt-qy-lr-sg-dc,
1352
- var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-qy-lr-sg-dc))
1287
+ --_ctm-mob-dn-pt-wt-pt-ne-lr-sg,
1288
+ var(--_ctm-tab-dn-pt-wt-pt-ne-lr-sg, var(--_ctm-dn-pt-wt-pt-ne-lr-sg))
1353
1289
  );
1354
1290
  line-height: var(
1355
- --_ctm-mob-dn-pt-wt-pt-qy-le-ht-dc,
1356
- var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-dn-pt-wt-pt-qy-le-ht-dc))
1291
+ --_ctm-mob-dn-pt-wt-pt-ne-le-ht,
1292
+ var(--_ctm-tab-dn-pt-wt-pt-ne-le-ht, var(--_ctm-dn-pt-wt-pt-ne-le-ht))
1357
1293
  );
1358
1294
  font-style: var(
1359
- --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic-dc,
1360
- var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic-dc))
1295
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-se-ic,
1296
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ne-ft-se-ic))
1361
1297
  );
1362
1298
  text-align: var(
1363
- --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc,
1364
- var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc))
1299
+ --_ctm-mob-dn-pt-wt-pt-ne-tt-an,
1300
+ var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an))
1301
+ );
1302
+ }
1303
+
1304
+ .item-specs {
1305
+ padding: var(
1306
+ --_ctm-mob-dn-pt-wt-pt-ce-pg,
1307
+ var(--_ctm-tab-dn-pt-wt-pt-ce-im-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
1308
+ );
1309
+ font-family: var(
1310
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-fy,
1311
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy))
1312
+ );
1313
+ font-size: var(
1314
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1315
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1316
+ );
1317
+ color: var(
1318
+ --_ctm-mob-dn-pt-wt-pt-ce-cr,
1319
+ var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr))
1320
+ );
1321
+ font-weight: var(
1322
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-wt,
1323
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-dn-pt-wt-pt-ce-ft-wt))
1324
+ );
1325
+ text-decoration: var(
1326
+ --_ctm-mob-dn-pt-wt-pt-ce-ue,
1327
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ue, var(--_ctm-dn-pt-wt-pt-ce-ue))
1328
+ );
1329
+ letter-spacing: var(
1330
+ --_ctm-mob-dn-pt-wt-pt-ce-lr-sg,
1331
+ var(--_ctm-tab-dn-pt-wt-pt-ce-lr-sg, var(--_ctm-dn-pt-wt-pt-ce-lr-sg))
1332
+ );
1333
+ line-height: var(
1334
+ --_ctm-mob-dn-pt-wt-pt-ce-le-ht,
1335
+ var(--_ctm-tab-dn-pt-wt-pt-ce-le-ht, var(--_ctm-dn-pt-wt-pt-ce-le-ht))
1336
+ );
1337
+ font-style: var(
1338
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se-ic,
1339
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ce-ft-se-ic))
1340
+ );
1341
+ text-align: var(
1342
+ --_ctm-mob-dn-pt-wt-pt-ce-tt-an,
1343
+ var(--_ctm-tab-dn-pt-wt-pt-ce-tt-an, var(--_ctm-dn-pt-wt-pt-ce-tt-an))
1344
+ );
1345
+ }
1346
+ .item-qty {
1347
+ padding: var(
1348
+ --_ctm-mob-dn-pt-wt-pt-qy-pg,
1349
+ var(--_ctm-tab-dn-pt-wt-pt-qy-pg, var(--_ctm-dn-pt-wt-pt-qy-pg))
1350
+ );
1351
+ font-family: var(
1352
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-fy,
1353
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy, var(--_ctm-dn-pt-wt-pt-qy-ft-fy))
1354
+ );
1355
+ font-size: var(
1356
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
1357
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
1358
+ );
1359
+ color: var(
1360
+ --_ctm-mob-dn-pt-wt-pt-qy-cr,
1361
+ var(--_ctm-tab-dn-pt-wt-pt-qy-cr, var(--_ctm-dn-pt-wt-pt-qy-cr))
1362
+ );
1363
+ font-weight: var(
1364
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-wt,
1365
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-dn-pt-wt-pt-qy-ft-wt))
1366
+ );
1367
+ text-decoration: var(
1368
+ --_ctm-mob-dn-pt-wt-pt-qy-ue,
1369
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ue, var(--_ctm-dn-pt-wt-pt-qy-ue))
1370
+ );
1371
+ letter-spacing: var(
1372
+ --_ctm-mob-dn-pt-wt-pt-qy-lr-sg,
1373
+ var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg, var(--_ctm-dn-pt-wt-pt-qy-lr-sg))
1374
+ );
1375
+ line-height: var(
1376
+ --_ctm-mob-dn-pt-wt-pt-qy-le-ht,
1377
+ var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht, var(--_ctm-dn-pt-wt-pt-qy-le-ht))
1378
+ );
1379
+ font-style: var(
1380
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic,
1381
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic, var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic))
1382
+ );
1383
+ text-align: var(
1384
+ --_ctm-mob-dn-pt-wt-pt-qy-tt-an,
1385
+ var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an))
1386
+ );
1387
+ span {
1388
+ font-family: var(
1389
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-fy-dc,
1390
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-fy-dc))
1391
+ );
1392
+ font-size: var(
1393
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc,
1394
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc))
1395
+ );
1396
+ color: var(
1397
+ --_ctm-mob-dn-pt-wt-pt-qy-cr-dc,
1398
+ var(--_ctm-tab-dn-pt-wt-pt-qy-cr-dc, var(--_ctm-dn-pt-wt-pt-qy-cr-dc))
1399
+ );
1400
+ font-weight: var(
1401
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-wt-dc,
1402
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-wt-dc))
1403
+ );
1404
+ text-decoration: var(
1405
+ --_ctm-mob-dn-pt-wt-pt-qy-ue-dc,
1406
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-dn-pt-wt-pt-qy-ue-dc))
1407
+ );
1408
+ letter-spacing: var(
1409
+ --_ctm-mob-dn-pt-wt-pt-qy-lr-sg-dc,
1410
+ var(--_ctm-tab-dn-pt-wt-pt-qy-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-qy-lr-sg-dc))
1411
+ );
1412
+ line-height: var(
1413
+ --_ctm-mob-dn-pt-wt-pt-qy-le-ht-dc,
1414
+ var(--_ctm-tab-dn-pt-wt-pt-qy-le-ht-dc, var(--_ctm-dn-pt-wt-pt-qy-le-ht-dc))
1415
+ );
1416
+ font-style: var(
1417
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-ic-dc,
1418
+ var(
1419
+ --_ctm-tab-dn-pt-wt-pt-qy-ft-se-ic-dc,
1420
+ var(--_ctm-dn-pt-wt-pt-qy-ft-se-ic-dc)
1421
+ )
1422
+ );
1423
+ text-align: var(
1424
+ --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc,
1425
+ var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc))
1426
+ );
1427
+ }
1428
+ }
1429
+ .estimated-delivery {
1430
+ margin: 0;
1431
+ // font-size: 12px;
1432
+ // color: var(--_gray-600);
1433
+ // line-height: 18px;
1434
+ padding: var(
1435
+ --_ctm-mob-dn-pt-wt-pt-ed-de-pg,
1436
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg, var(--_ctm-dn-pt-wt-pt-ed-de-pg))
1437
+ );
1438
+ font-family: var(
1439
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy,
1440
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy))
1441
+ );
1442
+ font-size: var(
1443
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se,
1444
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se))
1445
+ );
1446
+ color: var(
1447
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
1448
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
1449
+ );
1450
+ font-weight: var(
1451
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt,
1452
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt))
1453
+ );
1454
+ text-decoration: var(
1455
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue,
1456
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue))
1457
+ );
1458
+ letter-spacing: var(
1459
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg,
1460
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg))
1461
+ );
1462
+ line-height: var(
1463
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht,
1464
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht))
1465
+ );
1466
+ font-style: var(
1467
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic,
1468
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic))
1469
+ );
1470
+ text-align: var(
1471
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
1472
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an))
1473
+ );
1474
+ }
1475
+
1476
+ .delivery-date {
1477
+ margin: 0;
1478
+ padding: var(
1479
+ --_ctm-mob-dn-pt-wt-pt-ed-de-pg-dc,
1480
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-pg-dc))
1481
+ );
1482
+ font-family: var(
1483
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
1484
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc))
1485
+ );
1486
+ font-size: var(
1487
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1488
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1489
+ );
1490
+ color: var(
1491
+ --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc,
1492
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc))
1493
+ );
1494
+ font-weight: var(
1495
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc,
1496
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc))
1497
+ );
1498
+ text-decoration: var(
1499
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc,
1500
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc))
1501
+ );
1502
+ letter-spacing: var(
1503
+ --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc,
1504
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc))
1505
+ );
1506
+ line-height: var(
1507
+ --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc,
1508
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc))
1509
+ );
1510
+ font-style: var(
1511
+ --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1512
+ var(
1513
+ --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1514
+ var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc)
1515
+ )
1516
+ );
1517
+ text-align: var(
1518
+ --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc,
1519
+ var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc))
1365
1520
  );
1366
1521
  }
1367
- }
1368
- .estimated-delivery {
1369
- margin: 0;
1370
- // font-size: 12px;
1371
- // color: var(--_gray-600);
1372
- // line-height: 18px;
1373
- padding: var(
1374
- --_ctm-mob-dn-pt-wt-pt-ed-de-pg,
1375
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg, var(--_ctm-dn-pt-wt-pt-ed-de-pg))
1376
- );
1377
- font-family: var(
1378
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy,
1379
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy))
1380
- );
1381
- font-size: var(
1382
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se,
1383
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se))
1384
- );
1385
- color: var(
1386
- --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
1387
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
1388
- );
1389
- font-weight: var(
1390
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt,
1391
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt))
1392
- );
1393
- text-decoration: var(
1394
- --_ctm-mob-dn-pt-wt-pt-ed-de-ue,
1395
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue))
1396
- );
1397
- letter-spacing: var(
1398
- --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg,
1399
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg))
1400
- );
1401
- line-height: var(
1402
- --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht,
1403
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht))
1404
- );
1405
- font-style: var(
1406
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic,
1407
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic))
1408
- );
1409
- text-align: var(
1410
- --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
1411
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an))
1412
- );
1413
1522
  }
1414
1523
 
1415
- .delivery-date {
1416
- margin: 0;
1417
- padding: var(
1418
- --_ctm-mob-dn-pt-wt-pt-ed-de-pg-dc,
1419
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-pg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-pg-dc))
1420
- );
1524
+ .item-price {
1525
+ // font-size: 0.85rem;
1526
+ // font-weight: 600;
1527
+ // color: #1e293b;
1421
1528
  font-family: var(
1422
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
1423
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc))
1529
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-fy,
1530
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-fy, var(--_ctm-dn-pt-wt-pt-pe-ft-fy))
1424
1531
  );
1425
1532
  font-size: var(
1426
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1427
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1533
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-se,
1534
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se, var(--_ctm-dn-pt-wt-pt-pe-ft-se))
1428
1535
  );
1429
1536
  color: var(
1430
- --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc,
1431
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc))
1537
+ --_ctm-mob-dn-pt-wt-pt-pe-cr,
1538
+ var(--_ctm-tab-dn-pt-wt-pt-pe-cr, var(--_ctm-dn-pt-wt-pt-pe-cr))
1432
1539
  );
1433
1540
  font-weight: var(
1434
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc,
1435
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc))
1541
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-wt,
1542
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-wt, var(--_ctm-dn-pt-wt-pt-pe-ft-wt))
1436
1543
  );
1437
1544
  text-decoration: var(
1438
- --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc,
1439
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc))
1545
+ --_ctm-mob-dn-pt-wt-pt-pe-ue,
1546
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue))
1440
1547
  );
1441
1548
  letter-spacing: var(
1442
- --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc,
1443
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc, var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc))
1549
+ --_ctm-mob-dn-pt-wt-pt-pe-lr-sg,
1550
+ var(--_ctm-tab-dn-pt-wt-pt-pe-lr-sg, var(--_ctm-dn-pt-wt-pt-pe-lr-sg))
1444
1551
  );
1445
1552
  line-height: var(
1446
- --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc,
1447
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc, var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc))
1553
+ --_ctm-mob-dn-pt-wt-pt-pe-le-ht,
1554
+ var(--_ctm-tab-dn-pt-wt-pt-pe-le-ht, var(--_ctm-dn-pt-wt-pt-pe-le-ht))
1448
1555
  );
1449
1556
  font-style: var(
1450
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1451
- var(
1452
- --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
1453
- var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc)
1454
- )
1557
+ --_ctm-mob-dn-pt-wt-pt-pe-ft-se-ic,
1558
+ var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se-ic, var(--_ctm-dn-pt-wt-pt-pe-ft-se-ic))
1455
1559
  );
1456
1560
  text-align: var(
1457
- --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc,
1458
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc))
1561
+ --_ctm-mob-dn-pt-wt-pt-pe-tt-an,
1562
+ var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an))
1459
1563
  );
1564
+ margin-left: 12px;
1460
1565
  }
1461
1566
  }
1462
1567
 
1463
- .item-price {
1464
- // font-size: 0.85rem;
1465
- // font-weight: 600;
1466
- // color: #1e293b;
1467
- font-family: var(
1468
- --_ctm-mob-dn-pt-wt-pt-pe-ft-fy,
1469
- var(--_ctm-tab-dn-pt-wt-pt-pe-ft-fy, var(--_ctm-dn-pt-wt-pt-pe-ft-fy))
1470
- );
1471
- font-size: var(
1472
- --_ctm-mob-dn-pt-wt-pt-pe-ft-se,
1473
- var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se, var(--_ctm-dn-pt-wt-pt-pe-ft-se))
1474
- );
1475
- color: var(
1476
- --_ctm-mob-dn-pt-wt-pt-pe-cr,
1477
- var(--_ctm-tab-dn-pt-wt-pt-pe-cr, var(--_ctm-dn-pt-wt-pt-pe-cr))
1478
- );
1479
- font-weight: var(
1480
- --_ctm-mob-dn-pt-wt-pt-pe-ft-wt,
1481
- var(--_ctm-tab-dn-pt-wt-pt-pe-ft-wt, var(--_ctm-dn-pt-wt-pt-pe-ft-wt))
1482
- );
1483
- text-decoration: var(
1484
- --_ctm-mob-dn-pt-wt-pt-pe-ue,
1485
- var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue))
1486
- );
1487
- letter-spacing: var(
1488
- --_ctm-mob-dn-pt-wt-pt-pe-lr-sg,
1489
- var(--_ctm-tab-dn-pt-wt-pt-pe-lr-sg, var(--_ctm-dn-pt-wt-pt-pe-lr-sg))
1490
- );
1491
- line-height: var(
1492
- --_ctm-mob-dn-pt-wt-pt-pe-le-ht,
1493
- var(--_ctm-tab-dn-pt-wt-pt-pe-le-ht, var(--_ctm-dn-pt-wt-pt-pe-le-ht))
1494
- );
1495
- font-style: var(
1496
- --_ctm-mob-dn-pt-wt-pt-pe-ft-se-ic,
1497
- var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se-ic, var(--_ctm-dn-pt-wt-pt-pe-ft-se-ic))
1498
- );
1499
- text-align: var(
1500
- --_ctm-mob-dn-pt-wt-pt-pe-tt-an,
1501
- var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an))
1502
- );
1503
- margin-left: 12px;
1504
- }
1505
- }
1506
-
1507
- .show-more-wrapper {
1508
- margin: 32px 16px 16px 0px;
1509
- button {
1510
- padding: 12px 16px;
1511
- color: var(--_primary-400);
1512
- font-weight: 600;
1513
- border-radius: 6px;
1514
- &:hover {
1515
- background-color: var(--_primary-25);
1568
+ .show-more-wrapper {
1569
+ margin: 32px 16px 16px 0px;
1570
+ button {
1571
+ padding: 12px 16px;
1572
+ color: var(--_primary-400);
1573
+ font-weight: 600;
1574
+ border-radius: 6px;
1575
+ &:hover {
1576
+ background-color: var(--_primary-25);
1577
+ }
1516
1578
  }
1517
1579
  }
1518
1580
  }
1519
- }
1520
1581
 
1521
- /* ───────── Order Attributes ───────── */
1522
- .order-attributes {
1523
- border-top: 1px solid #eaecf0;
1524
- padding-top: 24px;
1582
+ /* ───────── Order Attributes ───────── */
1583
+ .order-attributes {
1584
+ border-top: 1px solid #eaecf0;
1585
+ padding-top: 24px;
1525
1586
 
1526
- h4 {
1527
- font-size: 14px;
1528
- font-weight: 400;
1529
- color: var(--_gray-500);
1530
- line-height: 20px;
1531
- }
1587
+ h4 {
1588
+ font-size: 14px;
1589
+ font-weight: 400;
1590
+ color: var(--_gray-500);
1591
+ line-height: 20px;
1592
+ }
1532
1593
 
1533
- p {
1534
- font-size: 14px;
1535
- font-weight: 600;
1536
- line-height: 20px;
1537
- color: var(--_gray-900);
1594
+ p {
1595
+ font-size: 14px;
1596
+ font-weight: 600;
1597
+ line-height: 20px;
1598
+ color: var(--_gray-900);
1599
+ }
1538
1600
  }
1539
- }
1540
1601
 
1541
- /* ───────── Responsive ───────── */
1542
- @media (max-width: 768px) {
1543
- .order-details-wrapper {
1544
- grid-template-columns: 1fr;
1545
- }
1602
+ /* ───────── Responsive ───────── */
1603
+ @media (max-width: 768px) {
1604
+ .order-details-wrapper {
1605
+ grid-template-columns: 1fr;
1606
+ }
1546
1607
 
1547
- .items-grid {
1548
- grid-template-columns: 1fr;
1608
+ .items-grid {
1609
+ grid-template-columns: 1fr;
1610
+ }
1549
1611
  }
1550
1612
  }
1551
1613
  }