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

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 (158) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleCategories.scss +301 -301
  16. package/dist/bundleDetails.scss +6189 -6189
  17. package/dist/buy-for-tab-container.scss +141 -141
  18. package/dist/buy-for-tab.scss +649 -649
  19. package/dist/buy-for-tabs-container-item.scss +80 -80
  20. package/dist/buyForPopup.scss +339 -339
  21. package/dist/cart-details.scss +3986 -3986
  22. package/dist/cart-products-sidebar.scss +211 -211
  23. package/dist/cart-summary.scss +2826 -2826
  24. package/dist/cart-wrapper.scss +127 -127
  25. package/dist/cartAttributes.scss +1422 -1422
  26. package/dist/cartDropdownOverlay.scss +653 -653
  27. package/dist/cartGrouping.scss +89 -89
  28. package/dist/category-groups-element.scss +739 -739
  29. package/dist/category-groups-quota-details.scss +626 -626
  30. package/dist/category.scss +137 -137
  31. package/dist/categoryDetails.scss +61 -61
  32. package/dist/categoryWidget.scss +34 -34
  33. package/dist/checkbox-radio.scss +124 -124
  34. package/dist/code-temp.scss +59 -59
  35. package/dist/colorpicker_v2.scss +62 -62
  36. package/dist/common-element.scss +35 -35
  37. package/dist/confirm-modal.scss +370 -370
  38. package/dist/confirmationModal.scss +139 -139
  39. package/dist/contact-us.scss +105 -105
  40. package/dist/container.scss +168 -168
  41. package/dist/countdown.scss +899 -899
  42. package/dist/coupon.scss +1519 -1519
  43. package/dist/custom-fonts.scss +100 -100
  44. package/dist/customization-tree.scss +162 -162
  45. package/dist/default-dropdown.scss +259 -259
  46. package/dist/dropdownTemplate.scss +699 -699
  47. package/dist/editCartItem.scss +110 -110
  48. package/dist/embed-temp.scss +73 -73
  49. package/dist/embroider-preview-element.scss +94 -94
  50. package/dist/embroider-template-1-v2.scss +1105 -1105
  51. package/dist/embroider-template-1.scss +501 -501
  52. package/dist/embroidery.scss +247 -247
  53. package/dist/employee-bulk-order.scss +4060 -4060
  54. package/dist/emtpy-templates.scss +165 -165
  55. package/dist/faq.scss +696 -696
  56. package/dist/fb-dropdown.scss +135 -135
  57. package/dist/filter-results.scss +361 -361
  58. package/dist/filters.scss +3040 -3040
  59. package/dist/flex-text-editor.scss +271 -271
  60. package/dist/form-preview.scss +530 -530
  61. package/dist/gallery-slider-temp.scss +1776 -1776
  62. package/dist/global-styles.scss +198 -198
  63. package/dist/grid.scss +169 -169
  64. package/dist/icon-library.scss +78 -78
  65. package/dist/icon-list.scss +39 -0
  66. package/dist/image-for-product.scss +21 -21
  67. package/dist/image-temp.scss +203 -203
  68. package/dist/item-stock.scss +93 -93
  69. package/dist/kitDetails.scss +5739 -5739
  70. package/dist/kits.scss +305 -305
  71. package/dist/language-selector.scss +948 -948
  72. package/dist/last-x-orders.scss +285 -285
  73. package/dist/layouter-item.scss +141 -141
  74. package/dist/layouter-pro-item.scss +139 -139
  75. package/dist/layouter-pro.scss +134 -134
  76. package/dist/layouter.scss +491 -491
  77. package/dist/light-box-v2.scss +155 -155
  78. package/dist/lightbox.scss +78 -78
  79. package/dist/loader.scss +37 -37
  80. package/dist/login.scss +29 -11
  81. package/dist/map.scss +1359 -1359
  82. package/dist/marchandiserSets.scss +141 -141
  83. package/dist/mega-menu-container.scss +152 -152
  84. package/dist/menu-item.scss +19 -19
  85. package/dist/menu-v2.scss +999 -999
  86. package/dist/menu.scss +174 -174
  87. package/dist/multi-select-dropdown.scss +316 -316
  88. package/dist/my-templates.scss +477 -477
  89. package/dist/my-wishlist.scss +27 -27
  90. package/dist/option-bar.scss +886 -886
  91. package/dist/order-processing.scss +61 -61
  92. package/dist/order-status.scss +2187 -2187
  93. package/dist/overflow-module.scss +63 -63
  94. package/dist/past-orders.scss +1039 -1039
  95. package/dist/payment-methods.scss +307 -307
  96. package/dist/phone-input.scss +208 -208
  97. package/dist/pickup-locations.scss +1359 -1359
  98. package/dist/position-module.scss +95 -95
  99. package/dist/prefix-list.scss +86 -86
  100. package/dist/product-actions.scss +2872 -2872
  101. package/dist/product-basic-elements.scss +600 -600
  102. package/dist/product-customizations.scss +155 -155
  103. package/dist/product-highlights.scss +348 -348
  104. package/dist/product-image-allocation.scss +1477 -1477
  105. package/dist/product-inventory.scss +1621 -1621
  106. package/dist/product-labels.scss +265 -265
  107. package/dist/product-options.scss +1444 -1444
  108. package/dist/product-price.scss +4 -0
  109. package/dist/product-promotions.scss +3224 -3224
  110. package/dist/product-sizechart.scss +1921 -1921
  111. package/dist/product.scss +140 -140
  112. package/dist/profile.scss +824 -824
  113. package/dist/quantity-selector.scss +1074 -1074
  114. package/dist/quick-inventory-check.scss +285 -285
  115. package/dist/quick-links.scss +627 -627
  116. package/dist/quota-details.scss +526 -526
  117. package/dist/quotes.scss +847 -847
  118. package/dist/repeater-embla-controls.scss +211 -211
  119. package/dist/repeater-grid-toggle.scss +206 -206
  120. package/dist/repeater-item.scss +152 -152
  121. package/dist/repeater.scss +946 -946
  122. package/dist/request-for-quotes.scss +841 -841
  123. package/dist/responsive-behaviour.scss +29 -29
  124. package/dist/rfqs.scss +861 -861
  125. package/dist/scroll.scss +414 -414
  126. package/dist/search-results-heading.scss +309 -309
  127. package/dist/search.scss +689 -689
  128. package/dist/section.scss +276 -276
  129. package/dist/shareCartSideBar.scss +254 -254
  130. package/dist/shipping-estimator.scss +41 -41
  131. package/dist/shipping-payments.scss +2518 -2518
  132. package/dist/simple-list.scss +338 -338
  133. package/dist/skeleton.scss +64 -64
  134. package/dist/spotlight.scss +1706 -1706
  135. package/dist/stack.scss +171 -171
  136. package/dist/static-global.scss +292 -292
  137. package/dist/static-text.scss +52 -52
  138. package/dist/stockStatus.scss +70 -70
  139. package/dist/store-locations.scss +1592 -1592
  140. package/dist/sub-category.scss +74 -74
  141. package/dist/submit-quote.scss +275 -275
  142. package/dist/tab-container-item.scss +80 -80
  143. package/dist/tab-container.scss +141 -141
  144. package/dist/table.scss +9 -0
  145. package/dist/tabs.scss +440 -440
  146. package/dist/text-temp.scss +109 -109
  147. package/dist/theme-classes.scss +421 -421
  148. package/dist/toaster.scss +392 -392
  149. package/dist/toggle-button.scss +32 -32
  150. package/dist/transform-properties-module.scss +20 -20
  151. package/dist/types/builder/tools/element-edit/icon-list.d.ts +5 -0
  152. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  153. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  154. package/dist/types/builder/tools/element-edit/userElements.d.ts +99 -0
  155. package/dist/user-elements.scss +2896 -2911
  156. package/dist/widget.scss +153 -153
  157. package/dist/wishlist-overlay.scss +48 -48
  158. package/package.json +1 -1
package/dist/order-status.scss CHANGED
@@ -1,2187 +1,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(
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(
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
+ }