@sc-360-v2/storefront-cms-library 0.5.71 → 0.5.73

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