@sc-360-v2/storefront-cms-library 0.4.51 → 0.4.52

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