@sc-360-v2/storefront-cms-library 0.3.58 → 0.3.60

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