@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

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