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

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