@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.59

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 (149) 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/allocationDetails.scss +3 -0
  5. package/dist/allocations.scss +1603 -1603
  6. package/dist/amount-estimator.scss +1083 -1083
  7. package/dist/animation-control.scss +23 -23
  8. package/dist/badge.scss +388 -388
  9. package/dist/brand-basic-elements.scss +292 -292
  10. package/dist/brand.scss +93 -93
  11. package/dist/breadcrumbs.scss +802 -802
  12. package/dist/bulk-order-pad.scss +677 -677
  13. package/dist/bulk-variant-picker copy.scss +1121 -1121
  14. package/dist/bulk-variant-picker.scss +3294 -3294
  15. package/dist/bundle copy.scss +2805 -2805
  16. package/dist/bundle.scss +2383 -2383
  17. package/dist/bundleDetails copy.scss +1431 -1431
  18. package/dist/button copy.scss +271 -271
  19. package/dist/button.scss +292 -292
  20. package/dist/buy-for-tab-container.scss +90 -90
  21. package/dist/buy-for-tabs-container-item.scss +80 -80
  22. package/dist/buyForHeaders.scss +6718 -6718
  23. package/dist/cart-products-sidebar.scss +211 -211
  24. package/dist/cart-summary.scss +2728 -2728
  25. package/dist/cart-wrapper.scss +127 -127
  26. package/dist/cartGrouping.scss +89 -89
  27. package/dist/category-groups-element.scss +138 -138
  28. package/dist/category.scss +73 -73
  29. package/dist/categoryDetails.scss +61 -61
  30. package/dist/categoryWidget.scss +34 -34
  31. package/dist/checkbox-radio.scss +124 -124
  32. package/dist/code-temp.scss +58 -58
  33. package/dist/colorpicker_v2.scss +52 -52
  34. package/dist/common-element.scss +35 -35
  35. package/dist/confirm-modal.scss +351 -351
  36. package/dist/confirmationModal.scss +139 -139
  37. package/dist/container.scss +114 -114
  38. package/dist/countdown.scss +751 -751
  39. package/dist/coupon.scss +1254 -1254
  40. package/dist/custom-fonts.scss +100 -100
  41. package/dist/customization-tree.scss +160 -160
  42. package/dist/default-dropdown.scss +240 -240
  43. package/dist/editCartItem.scss +111 -111
  44. package/dist/embed-temp.scss +72 -72
  45. package/dist/embroider-preview-element.scss +94 -94
  46. package/dist/embroider-template-1-v2.scss +937 -937
  47. package/dist/embroider-template-1.scss +482 -482
  48. package/dist/embroidery.scss +213 -213
  49. package/dist/employee-bulk-order.scss +4057 -4057
  50. package/dist/emtpy-templates.scss +165 -165
  51. package/dist/faq.scss +564 -564
  52. package/dist/fb-dropdown.scss +125 -125
  53. package/dist/filter-results.scss +323 -323
  54. package/dist/flex-text-editor.scss +271 -271
  55. package/dist/form-preview.scss +290 -290
  56. package/dist/form-zindex-module.scss +24 -24
  57. package/dist/gallery-slider-temp.scss +1234 -1234
  58. package/dist/global-styles.scss +86 -86
  59. package/dist/grid.scss +119 -119
  60. package/dist/hotspot.scss +397 -397
  61. package/dist/icon-library.scss +74 -74
  62. package/dist/image-for-product.scss +21 -21
  63. package/dist/image-temp.scss +168 -168
  64. package/dist/item-stock.scss +87 -87
  65. package/dist/layouter-item.scss +89 -89
  66. package/dist/layouter-pro-item.scss +80 -80
  67. package/dist/layouter-pro.scss +88 -88
  68. package/dist/light-box-v2.scss +105 -105
  69. package/dist/lightbox.scss +78 -78
  70. package/dist/line.scss +166 -166
  71. package/dist/loader.scss +37 -37
  72. package/dist/map.scss +962 -962
  73. package/dist/marchandiserSets.scss +60 -60
  74. package/dist/mega-menu-container.scss +99 -99
  75. package/dist/mega-menu.scss +838 -838
  76. package/dist/menu-item.scss +19 -19
  77. package/dist/menu.scss +162 -162
  78. package/dist/modal.scss +2267 -2267
  79. package/dist/multi-select-dropdown.scss +282 -282
  80. package/dist/my-wishlist.scss +17 -17
  81. package/dist/option-bar.scss +845 -845
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/overflow-module.scss +63 -63
  84. package/dist/past-orders.scss +975 -975
  85. package/dist/payment-methods.scss +289 -289
  86. package/dist/pickup-locations.scss +1167 -1167
  87. package/dist/position-module.scss +95 -95
  88. package/dist/prefix-list.scss +86 -86
  89. package/dist/product-actions copy.scss +2765 -2765
  90. package/dist/product-actions.scss +2286 -2286
  91. package/dist/product-basic-elements.scss +770 -770
  92. package/dist/product-customizations.scss +149 -149
  93. package/dist/product-highlights copy.scss +217 -217
  94. package/dist/product-highlights.scss +311 -311
  95. package/dist/product-image copy.scss +787 -787
  96. package/dist/product-image-allocation.scss +3 -0
  97. package/dist/product-inventory.scss +1378 -1378
  98. package/dist/product-options.scss +1144 -1144
  99. package/dist/product-price.scss +2598 -2598
  100. package/dist/product-promotions.scss +2759 -2759
  101. package/dist/product.scss +97 -97
  102. package/dist/productDetails.scss +70 -70
  103. package/dist/quick-links.scss +552 -552
  104. package/dist/quick-order-pad.scss +237 -237
  105. package/dist/quota-details.scss +263 -263
  106. package/dist/quotes.scss +737 -737
  107. package/dist/repeater copy.scss +635 -635
  108. package/dist/repeater-grid-toggle.scss +58 -58
  109. package/dist/repeater-item.scss +90 -90
  110. package/dist/request-for-quotes.scss +746 -746
  111. package/dist/responsive-behaviour.scss +29 -29
  112. package/dist/rfqs.scss +736 -736
  113. package/dist/scroll.scss +222 -222
  114. package/dist/search-results-heading.scss +279 -279
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2467 -2467
  118. package/dist/simple-list.scss +259 -259
  119. package/dist/skeleton.scss +74 -74
  120. package/dist/social.scss +276 -276
  121. package/dist/sort.scss +89 -89
  122. package/dist/spotlight.scss +1663 -1663
  123. package/dist/stack.scss +129 -129
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +64 -64
  126. package/dist/store-locations.scss +1398 -1398
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +89 -89
  131. package/dist/tab-v2.scss +583 -583
  132. package/dist/table-common.scss +506 -506
  133. package/dist/table.scss +685 -685
  134. package/dist/tabs.scss +395 -395
  135. package/dist/text-temp-v2.scss +139 -139
  136. package/dist/text-temp.scss +109 -109
  137. package/dist/toaster.scss +350 -350
  138. package/dist/toggle-button.scss +32 -32
  139. package/dist/transform-properties-module.scss +20 -20
  140. package/dist/uom-selector.scss +1169 -1169
  141. package/dist/user-elements copy.scss +1437 -1437
  142. package/dist/variant-picker.scss +2384 -2384
  143. package/dist/video.scss +476 -476
  144. package/dist/volume-pricing copy 2.scss +1468 -1468
  145. package/dist/volume-pricing copy.scss +1077 -1077
  146. package/dist/volume-pricing.scss +1175 -1175
  147. package/dist/widget.scss +148 -148
  148. package/dist/wishlist-overlay.scss +48 -48
  149. package/package.json +1 -1
package/dist/product-basic-elements.scss CHANGED
@@ -1,770 +1,770 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- @use "./functions.scss" as *;
5
- $overflowSelector: ".flex__overflow";
6
-
7
- [data-div-type="element"] {
8
- word-break: break-all;
9
- &[data-element-type="productName"],
10
- &[data-element-type="brandName"],
11
- &[data-element-type="categoryName"] {
12
- // width: var(--_lt-wh);
13
- // height: var(--_lt-ht);
14
- // margin: var(--_lt-mn);
15
- // padding: var(--_lt-pg);
16
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
17
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
18
- width: var(
19
- --_sf-el-wh-st-mx,
20
- calc(
21
- 1% *
22
- var(
23
- --_ctm-mob-ele-nw-wh-vl,
24
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
25
- )
26
- )
27
- );
28
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
29
- word-break: break-all;
30
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
31
-
32
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
33
- // height: ;
34
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
35
- // --_aspect-ratio: calc(
36
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
37
- // );
38
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
39
-
40
- & > .wrapper {
41
- width: 100%;
42
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
43
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
44
- border-color: var(
45
- --_show-border,
46
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
47
- );
48
- border-style: var(
49
- --_show-border,
50
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
51
- );
52
- border-width: var(
53
- --_show-border,
54
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
55
- );
56
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
57
- box-shadow: var(
58
- --_show-shadow,
59
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
60
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
61
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
62
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
63
- );
64
- // height: 100%;
65
- }
66
- &[data-show-shadow="false"] {
67
- --_show-shadow: none;
68
- }
69
- &[data-show-border="false"] {
70
- --_show-border: none;
71
- }
72
- // .text-element {
73
- // background: #6d96e4;
74
- // // padding: 10px;
75
- // font-weight: 600;
76
- // color: rgba(75, 69, 70, 1);
77
- // }
78
- .text-element {
79
- cursor: pointer;
80
- word-break: break-word;
81
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
82
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
83
- // display: flex;
84
- // flex-direction: column;
85
- // display: var(--_d-inline-flex);
86
- // display: var();
87
- --_sf-gp: 16px;
88
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
89
- row-gap: var(--_sf-gp);
90
- width: 100%;
91
-
92
- &#{$overflowSelector} {
93
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
94
- }
95
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
96
- // border-color: var(
97
- // --_show-border,
98
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
99
- // );
100
- // border-style: var(
101
- // --_show-border,
102
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
103
- // );
104
- // border-width: var(
105
- // --_show-border,
106
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
107
- // );
108
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
109
- // box-shadow: var(
110
- // --_show-shadow,
111
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
112
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
113
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
114
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
115
- // );
116
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
117
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
118
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
119
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
120
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
121
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
122
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
123
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
124
- text-decoration: var(
125
- --_sf-hr-tt-dn,
126
- var(
127
- --_ctm-mob-dn-dt-se-ue,
128
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
129
- )
130
- );
131
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
132
-
133
- &[data-flip-x="true"] {
134
- transform: scaleX(-1);
135
- }
136
- &[data-flip-y="true"] {
137
- transform: scaleY(-1);
138
- }
139
- }
140
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
141
- }
142
- &[data-element-type="productDescription"],
143
- &[data-element-type="categoryDescription"] {
144
- // width: var(--_lt-wh);
145
- // height: var(--_lt-ht);
146
- // margin: var(--_lt-mn);
147
- // padding: var(--_lt-pg);
148
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
149
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
150
- width: var(
151
- --_sf-el-wh-st-mx,
152
- calc(
153
- 1% *
154
- var(
155
- --_ctm-mob-ele-nw-wh-vl,
156
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
157
- )
158
- )
159
- );
160
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
161
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
162
-
163
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
164
- // height: ;
165
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
166
- // --_aspect-ratio: calc(
167
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
168
- // );
169
-
170
- & > .wrapper {
171
- width: 100%;
172
-
173
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
174
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
175
-
176
- border-color: var(
177
- --_show-border,
178
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
179
- );
180
- border-style: var(
181
- --_show-border,
182
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
183
- );
184
- border-width: var(
185
- --_show-border,
186
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
187
- );
188
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
189
- box-shadow: var(
190
- --_show-shadow,
191
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
192
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
193
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
194
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
195
- );
196
- // height: 100%;
197
- }
198
- &[data-show-shadow="false"] {
199
- --_show-shadow: none;
200
- }
201
- &[data-show-border="false"] {
202
- --_show-border: none;
203
- }
204
- // .text-element {
205
- // background: #6d96e4;
206
- // // padding: 10px;
207
- // font-weight: 600;
208
- // color: rgba(75, 69, 70, 1);
209
- // }
210
- .text-element {
211
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
212
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
213
- // display: flex;
214
- // flex-direction: column;
215
- --_sf-gp: 16px;
216
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
217
- row-gap: var(--_sf-gp);
218
- width: 100%;
219
-
220
- &#{$overflowSelector} {
221
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
222
- }
223
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
224
- // border-color: var(
225
- // --_show-border,
226
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
227
- // );
228
- // border-style: var(
229
- // --_show-border,
230
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
231
- // );
232
- // border-width: var(
233
- // --_show-border,
234
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
235
- // );
236
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
237
- // box-shadow: var(
238
- // --_show-shadow,
239
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
240
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
241
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
242
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
243
- // );
244
- // color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
245
- // font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
246
-
247
- // font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
248
- // font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
249
- // font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
250
- // text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
251
- // letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
252
- // line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
253
- // text-decoration: var(
254
- // --_sf-hr-tt-dn,
255
- // var(
256
- // --_ctm-mob-dn-dt-se-ue,
257
- // var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
258
- // )
259
- // );
260
- // text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
261
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
262
- &[data-flip-x="true"] {
263
- transform: scaleX(-1);
264
- }
265
- &[data-flip-y="true"] {
266
- transform: scaleY(-1);
267
- }
268
- &,
269
- * {
270
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
271
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
272
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
273
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
274
- font-style: var(
275
- --_ctm-mob-dn-ft-se-ic,
276
- var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
277
- );
278
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
279
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
280
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
281
- text-decoration: var(
282
- --_sf-hr-tt-dn,
283
- var(
284
- --_ctm-mob-dn-dt-se-ue,
285
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
286
- )
287
- );
288
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
289
- }
290
- }
291
- }
292
- &[data-element-type="productBrand"] {
293
- // width: var(--_lt-wh);
294
- // height: var(--_lt-ht);
295
- // margin: var(--_lt-mn);
296
- // padding: var(--_lt-pg);
297
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
298
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
299
- width: var(
300
- --_sf-el-wh-st-mx,
301
- calc(
302
- 1% *
303
- var(
304
- --_ctm-mob-ele-nw-wh-vl,
305
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
306
- )
307
- )
308
- );
309
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
310
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
311
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
312
- // height: ;
313
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
314
- // --_aspect-ratio: calc(
315
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
316
- // );
317
-
318
- & > .wrapper {
319
- width: 100%;
320
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
321
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
322
- border-color: var(
323
- --_show-border,
324
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
325
- );
326
- border-style: var(
327
- --_show-border,
328
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
329
- );
330
- border-width: var(
331
- --_show-border,
332
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
333
- );
334
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
335
- box-shadow: var(
336
- --_show-shadow,
337
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
338
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
339
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
340
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
341
- );
342
- // height: 100%;
343
- }
344
- &[data-show-shadow="false"] {
345
- --_show-shadow: none;
346
- }
347
- &[data-show-border="false"] {
348
- --_show-border: none;
349
- }
350
- // .text-element {
351
- // background: #6d96e4;
352
- // // padding: 10px;
353
- // font-weight: 600;
354
- // color: rgba(75, 69, 70, 1);
355
- // }
356
- .text-element {
357
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
358
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
359
- display: flex;
360
- flex-direction: column;
361
- --_sf-gp: 16px;
362
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
363
- row-gap: var(--_sf-gp);
364
- width: 100%;
365
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
366
- // border-color: var(
367
- // --_show-border,
368
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
369
- // );
370
- // border-style: var(
371
- // --_show-border,
372
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
373
- // );
374
- // border-width: var(
375
- // --_show-border,
376
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
377
- // );
378
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
379
- // box-shadow: var(
380
- // --_show-shadow,
381
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
382
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
383
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
384
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
385
- // );
386
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
387
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
388
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
389
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
390
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
391
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
392
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
393
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
394
- text-decoration: var(
395
- --_sf-hr-tt-dn,
396
- var(
397
- --_ctm-mob-dn-dt-se-ue,
398
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
399
- )
400
- );
401
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
402
- &[data-flip-x="true"] {
403
- transform: scaleX(-1);
404
- }
405
- &[data-flip-y="true"] {
406
- transform: scaleY(-1);
407
- }
408
- }
409
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
410
- }
411
- &[data-element-type="productCode"],
412
- &[data-element-type="categoryCode"] {
413
- // width: var(--_lt-wh);
414
- // height: var(--_lt-ht);
415
- // margin: var(--_lt-mn);
416
- // padding: var(--_lt-pg);
417
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
418
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
419
- width: var(
420
- --_sf-el-wh-st-mx,
421
- calc(
422
- 1% *
423
- var(
424
- --_ctm-mob-ele-nw-wh-vl,
425
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
426
- )
427
- )
428
- );
429
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
430
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
431
- // height: ;
432
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
433
- // --_aspect-ratio: calc(
434
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
435
- // );
436
-
437
- & > .wrapper {
438
- width: 100%;
439
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
440
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
441
- border-color: var(
442
- --_show-border,
443
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
444
- );
445
- border-style: var(
446
- --_show-border,
447
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
448
- );
449
- border-width: var(
450
- --_show-border,
451
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
452
- );
453
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
454
- box-shadow: var(
455
- --_show-shadow,
456
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
457
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
458
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
459
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
460
- );
461
- // height: 100%;
462
- }
463
- &[data-show-shadow="false"] {
464
- --_show-shadow: none;
465
- }
466
- &[data-show-border="false"] {
467
- --_show-border: none;
468
- }
469
- // .text-element {
470
- // background: #6d96e4;
471
- // // padding: 10px;
472
- // font-weight: 600;
473
- // color: rgba(75, 69, 70, 1);
474
- // }
475
- .text-element {
476
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
477
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
478
- display: flex;
479
- flex-direction: column;
480
- --_sf-gp: 16px;
481
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
482
- row-gap: var(--_sf-gp);
483
- width: 100%;
484
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
485
- // border-color: var(
486
- // --_show-border,
487
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
488
- // );
489
- // border-style: var(
490
- // --_show-border,
491
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
492
- // );
493
- // border-width: var(
494
- // --_show-border,
495
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
496
- // );
497
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
498
- // box-shadow: var(
499
- // --_show-shadow,
500
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
501
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
502
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
503
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
504
- // );
505
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
506
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
507
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
508
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
509
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
510
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
511
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
512
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
513
- text-decoration: var(
514
- --_sf-hr-tt-dn,
515
- var(
516
- --_ctm-mob-dn-dt-se-ue,
517
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
518
- )
519
- );
520
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
521
- &[data-flip-x="true"] {
522
- transform: scaleX(-1);
523
- }
524
- &[data-flip-y="true"] {
525
- transform: scaleY(-1);
526
- }
527
- }
528
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
529
- }
530
- &[data-element-type="productReview"] {
531
- // width: var(--_lt-wh);
532
- // height: var(--_lt-ht);
533
- // margin: var(--_lt-mn);
534
- // padding: var(--_lt-pg);
535
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
536
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
537
- width: var(
538
- --_sf-el-wh-st-mx,
539
- calc(
540
- 1% *
541
- var(
542
- --_ctm-mob-ele-nw-wh-vl,
543
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
544
- )
545
- )
546
- );
547
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
548
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
549
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
550
- // height: ;
551
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
552
- // --_aspect-ratio: calc(
553
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
554
- // );
555
-
556
- & > .wrapper {
557
- width: 100%;
558
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
559
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
560
- border-color: var(
561
- --_show-border,
562
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
563
- );
564
- border-style: var(
565
- --_show-border,
566
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
567
- );
568
- border-width: var(
569
- --_show-border,
570
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
571
- );
572
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
573
- box-shadow: var(
574
- --_show-shadow,
575
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
576
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
577
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
578
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
579
- );
580
- // height: 100%;
581
- }
582
- &[data-show-shadow="false"] {
583
- --_show-shadow: none;
584
- }
585
- &[data-show-border="false"] {
586
- --_show-border: none;
587
- }
588
- // .text-element {
589
- // background: #6d96e4;
590
- // // padding: 10px;
591
- // font-weight: 600;
592
- // color: rgba(75, 69, 70, 1);
593
- // }
594
- .text-element {
595
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
596
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
597
- display: flex;
598
- flex-direction: column;
599
- --_sf-gp: 16px;
600
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
601
- row-gap: var(--_sf-gp);
602
- width: 100%;
603
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
604
- // border-color: var(
605
- // --_show-border,
606
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
607
- // );
608
- // border-style: var(
609
- // --_show-border,
610
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
611
- // );
612
- // border-width: var(
613
- // --_show-border,
614
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
615
- // );
616
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
617
- // box-shadow: var(
618
- // --_show-shadow,
619
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
620
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
621
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
622
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
623
- // );
624
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
625
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
626
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
627
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
628
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
629
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
630
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
631
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
632
- text-decoration: var(
633
- --_sf-hr-tt-dn,
634
- var(
635
- --_ctm-mob-dn-dt-se-ue,
636
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
637
- )
638
- );
639
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
640
- &[data-flip-x="true"] {
641
- transform: scaleX(-1);
642
- }
643
- &[data-flip-y="true"] {
644
- transform: scaleY(-1);
645
- }
646
- }
647
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
648
- }
649
- &[data-element-type="productRating"] {
650
- // width: var(--_lt-wh);
651
- // height: var(--_lt-ht);
652
- // margin: var(--_lt-mn);
653
- // padding: var(--_lt-pg);
654
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
655
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
656
- width: var(
657
- --_sf-el-wh-st-mx,
658
- calc(
659
- 1% *
660
- var(
661
- --_ctm-mob-ele-nw-wh-vl,
662
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
663
- )
664
- )
665
- );
666
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
667
- min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
668
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
669
- // height: ;
670
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
671
- // --_aspect-ratio: calc(
672
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
673
- // );
674
-
675
- & > .wrapper {
676
- width: 100%;
677
- // height: 100%;
678
-
679
- border-color: var(
680
- --_show-border,
681
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
682
- );
683
- border-style: var(
684
- --_show-border,
685
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
686
- );
687
- border-width: var(
688
- --_show-border,
689
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
690
- );
691
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
692
- box-shadow: var(
693
- --_show-shadow,
694
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
695
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
696
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
697
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
698
- );
699
-
700
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
701
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
702
- }
703
- &[data-show-shadow="false"] {
704
- --_show-shadow: none;
705
- }
706
- &[data-show-border="false"] {
707
- --_show-border: none;
708
- }
709
- // .text-element {
710
- // background: #6d96e4;
711
- // // padding: 10px;
712
- // font-weight: 600;
713
- // color: rgba(75, 69, 70, 1);
714
- // }
715
- .text-element {
716
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
717
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
718
- display: flex;
719
- flex-direction: column;
720
- --_sf-gp: 16px;
721
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
722
- row-gap: var(--_sf-gp);
723
- width: 100%;
724
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
725
- // border-color: var(
726
- // --_show-border,
727
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
728
- // );
729
- // border-style: var(
730
- // --_show-border,
731
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
732
- // );
733
- // border-width: var(
734
- // --_show-border,
735
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
736
- // );
737
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
738
- // box-shadow: var(
739
- // --_show-shadow,
740
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
741
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
742
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
743
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
744
- // );
745
- color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
746
- font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
747
- font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
748
- font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
749
- font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
750
- text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
751
- letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
752
- line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
753
- text-decoration: var(
754
- --_sf-hr-tt-dn,
755
- var(
756
- --_ctm-mob-dn-dt-se-ue,
757
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
758
- )
759
- );
760
- scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
761
- &[data-flip-x="true"] {
762
- transform: scaleX(-1);
763
- }
764
- &[data-flip-y="true"] {
765
- transform: scaleY(-1);
766
- }
767
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
768
- }
769
- }
770
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ @use "./functions.scss" as *;
5
+ $overflowSelector: ".flex__overflow";
6
+
7
+ [data-div-type="element"] {
8
+ word-break: break-all;
9
+ &[data-element-type="productName"],
10
+ &[data-element-type="brandName"],
11
+ &[data-element-type="categoryName"] {
12
+ // width: var(--_lt-wh);
13
+ // height: var(--_lt-ht);
14
+ // margin: var(--_lt-mn);
15
+ // padding: var(--_lt-pg);
16
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
17
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
18
+ width: var(
19
+ --_sf-el-wh-st-mx,
20
+ calc(
21
+ 1% *
22
+ var(
23
+ --_ctm-mob-ele-nw-wh-vl,
24
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
25
+ )
26
+ )
27
+ );
28
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
29
+ word-break: break-all;
30
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
31
+
32
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
33
+ // height: ;
34
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
35
+ // --_aspect-ratio: calc(
36
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
37
+ // );
38
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
39
+
40
+ & > .wrapper {
41
+ width: 100%;
42
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
43
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
44
+ border-color: var(
45
+ --_show-border,
46
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
47
+ );
48
+ border-style: var(
49
+ --_show-border,
50
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
51
+ );
52
+ border-width: var(
53
+ --_show-border,
54
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
55
+ );
56
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
57
+ box-shadow: var(
58
+ --_show-shadow,
59
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
60
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
61
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
62
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
63
+ );
64
+ // height: 100%;
65
+ }
66
+ &[data-show-shadow="false"] {
67
+ --_show-shadow: none;
68
+ }
69
+ &[data-show-border="false"] {
70
+ --_show-border: none;
71
+ }
72
+ // .text-element {
73
+ // background: #6d96e4;
74
+ // // padding: 10px;
75
+ // font-weight: 600;
76
+ // color: rgba(75, 69, 70, 1);
77
+ // }
78
+ .text-element {
79
+ cursor: pointer;
80
+ word-break: break-word;
81
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
82
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
83
+ // display: flex;
84
+ // flex-direction: column;
85
+ // display: var(--_d-inline-flex);
86
+ // display: var();
87
+ --_sf-gp: 16px;
88
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
89
+ row-gap: var(--_sf-gp);
90
+ width: 100%;
91
+
92
+ &#{$overflowSelector} {
93
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
94
+ }
95
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
96
+ // border-color: var(
97
+ // --_show-border,
98
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
99
+ // );
100
+ // border-style: var(
101
+ // --_show-border,
102
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
103
+ // );
104
+ // border-width: var(
105
+ // --_show-border,
106
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
107
+ // );
108
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
109
+ // box-shadow: var(
110
+ // --_show-shadow,
111
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
112
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
113
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
114
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
115
+ // );
116
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
117
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
118
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
119
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
120
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
121
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
122
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
123
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
124
+ text-decoration: var(
125
+ --_sf-hr-tt-dn,
126
+ var(
127
+ --_ctm-mob-dn-dt-se-ue,
128
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
129
+ )
130
+ );
131
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
132
+
133
+ &[data-flip-x="true"] {
134
+ transform: scaleX(-1);
135
+ }
136
+ &[data-flip-y="true"] {
137
+ transform: scaleY(-1);
138
+ }
139
+ }
140
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
141
+ }
142
+ &[data-element-type="productDescription"],
143
+ &[data-element-type="categoryDescription"] {
144
+ // width: var(--_lt-wh);
145
+ // height: var(--_lt-ht);
146
+ // margin: var(--_lt-mn);
147
+ // padding: var(--_lt-pg);
148
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
149
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
150
+ width: var(
151
+ --_sf-el-wh-st-mx,
152
+ calc(
153
+ 1% *
154
+ var(
155
+ --_ctm-mob-ele-nw-wh-vl,
156
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
157
+ )
158
+ )
159
+ );
160
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
161
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
162
+
163
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
164
+ // height: ;
165
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
166
+ // --_aspect-ratio: calc(
167
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
168
+ // );
169
+
170
+ & > .wrapper {
171
+ width: 100%;
172
+
173
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
174
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
175
+
176
+ border-color: var(
177
+ --_show-border,
178
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
179
+ );
180
+ border-style: var(
181
+ --_show-border,
182
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
183
+ );
184
+ border-width: var(
185
+ --_show-border,
186
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
187
+ );
188
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
189
+ box-shadow: var(
190
+ --_show-shadow,
191
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
192
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
193
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
194
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
195
+ );
196
+ // height: 100%;
197
+ }
198
+ &[data-show-shadow="false"] {
199
+ --_show-shadow: none;
200
+ }
201
+ &[data-show-border="false"] {
202
+ --_show-border: none;
203
+ }
204
+ // .text-element {
205
+ // background: #6d96e4;
206
+ // // padding: 10px;
207
+ // font-weight: 600;
208
+ // color: rgba(75, 69, 70, 1);
209
+ // }
210
+ .text-element {
211
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
212
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
213
+ // display: flex;
214
+ // flex-direction: column;
215
+ --_sf-gp: 16px;
216
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
217
+ row-gap: var(--_sf-gp);
218
+ width: 100%;
219
+
220
+ &#{$overflowSelector} {
221
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
222
+ }
223
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
224
+ // border-color: var(
225
+ // --_show-border,
226
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
227
+ // );
228
+ // border-style: var(
229
+ // --_show-border,
230
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
231
+ // );
232
+ // border-width: var(
233
+ // --_show-border,
234
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
235
+ // );
236
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
237
+ // box-shadow: var(
238
+ // --_show-shadow,
239
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
240
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
241
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
242
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
243
+ // );
244
+ // color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
245
+ // font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
246
+
247
+ // font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
248
+ // font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
249
+ // font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
250
+ // text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
251
+ // letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
252
+ // line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
253
+ // text-decoration: var(
254
+ // --_sf-hr-tt-dn,
255
+ // var(
256
+ // --_ctm-mob-dn-dt-se-ue,
257
+ // var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
258
+ // )
259
+ // );
260
+ // text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
261
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
262
+ &[data-flip-x="true"] {
263
+ transform: scaleX(-1);
264
+ }
265
+ &[data-flip-y="true"] {
266
+ transform: scaleY(-1);
267
+ }
268
+ &,
269
+ * {
270
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
271
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
272
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
273
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
274
+ font-style: var(
275
+ --_ctm-mob-dn-ft-se-ic,
276
+ var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
277
+ );
278
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
279
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
280
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
281
+ text-decoration: var(
282
+ --_sf-hr-tt-dn,
283
+ var(
284
+ --_ctm-mob-dn-dt-se-ue,
285
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
286
+ )
287
+ );
288
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
289
+ }
290
+ }
291
+ }
292
+ &[data-element-type="productBrand"] {
293
+ // width: var(--_lt-wh);
294
+ // height: var(--_lt-ht);
295
+ // margin: var(--_lt-mn);
296
+ // padding: var(--_lt-pg);
297
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
298
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
299
+ width: var(
300
+ --_sf-el-wh-st-mx,
301
+ calc(
302
+ 1% *
303
+ var(
304
+ --_ctm-mob-ele-nw-wh-vl,
305
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
306
+ )
307
+ )
308
+ );
309
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
310
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
311
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
312
+ // height: ;
313
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
314
+ // --_aspect-ratio: calc(
315
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
316
+ // );
317
+
318
+ & > .wrapper {
319
+ width: 100%;
320
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
321
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
322
+ border-color: var(
323
+ --_show-border,
324
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
325
+ );
326
+ border-style: var(
327
+ --_show-border,
328
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
329
+ );
330
+ border-width: var(
331
+ --_show-border,
332
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
333
+ );
334
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
335
+ box-shadow: var(
336
+ --_show-shadow,
337
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
338
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
339
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
340
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
341
+ );
342
+ // height: 100%;
343
+ }
344
+ &[data-show-shadow="false"] {
345
+ --_show-shadow: none;
346
+ }
347
+ &[data-show-border="false"] {
348
+ --_show-border: none;
349
+ }
350
+ // .text-element {
351
+ // background: #6d96e4;
352
+ // // padding: 10px;
353
+ // font-weight: 600;
354
+ // color: rgba(75, 69, 70, 1);
355
+ // }
356
+ .text-element {
357
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
358
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
359
+ display: flex;
360
+ flex-direction: column;
361
+ --_sf-gp: 16px;
362
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
363
+ row-gap: var(--_sf-gp);
364
+ width: 100%;
365
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
366
+ // border-color: var(
367
+ // --_show-border,
368
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
369
+ // );
370
+ // border-style: var(
371
+ // --_show-border,
372
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
373
+ // );
374
+ // border-width: var(
375
+ // --_show-border,
376
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
377
+ // );
378
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
379
+ // box-shadow: var(
380
+ // --_show-shadow,
381
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
382
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
383
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
384
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
385
+ // );
386
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
387
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
388
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
389
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
390
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
391
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
392
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
393
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
394
+ text-decoration: var(
395
+ --_sf-hr-tt-dn,
396
+ var(
397
+ --_ctm-mob-dn-dt-se-ue,
398
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
399
+ )
400
+ );
401
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
402
+ &[data-flip-x="true"] {
403
+ transform: scaleX(-1);
404
+ }
405
+ &[data-flip-y="true"] {
406
+ transform: scaleY(-1);
407
+ }
408
+ }
409
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
410
+ }
411
+ &[data-element-type="productCode"],
412
+ &[data-element-type="categoryCode"] {
413
+ // width: var(--_lt-wh);
414
+ // height: var(--_lt-ht);
415
+ // margin: var(--_lt-mn);
416
+ // padding: var(--_lt-pg);
417
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
418
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
419
+ width: var(
420
+ --_sf-el-wh-st-mx,
421
+ calc(
422
+ 1% *
423
+ var(
424
+ --_ctm-mob-ele-nw-wh-vl,
425
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
426
+ )
427
+ )
428
+ );
429
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
430
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
431
+ // height: ;
432
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
433
+ // --_aspect-ratio: calc(
434
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
435
+ // );
436
+
437
+ & > .wrapper {
438
+ width: 100%;
439
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
440
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
441
+ border-color: var(
442
+ --_show-border,
443
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
444
+ );
445
+ border-style: var(
446
+ --_show-border,
447
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
448
+ );
449
+ border-width: var(
450
+ --_show-border,
451
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
452
+ );
453
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
454
+ box-shadow: var(
455
+ --_show-shadow,
456
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
457
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
458
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
459
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
460
+ );
461
+ // height: 100%;
462
+ }
463
+ &[data-show-shadow="false"] {
464
+ --_show-shadow: none;
465
+ }
466
+ &[data-show-border="false"] {
467
+ --_show-border: none;
468
+ }
469
+ // .text-element {
470
+ // background: #6d96e4;
471
+ // // padding: 10px;
472
+ // font-weight: 600;
473
+ // color: rgba(75, 69, 70, 1);
474
+ // }
475
+ .text-element {
476
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
477
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
478
+ display: flex;
479
+ flex-direction: column;
480
+ --_sf-gp: 16px;
481
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
482
+ row-gap: var(--_sf-gp);
483
+ width: 100%;
484
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
485
+ // border-color: var(
486
+ // --_show-border,
487
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
488
+ // );
489
+ // border-style: var(
490
+ // --_show-border,
491
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
492
+ // );
493
+ // border-width: var(
494
+ // --_show-border,
495
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
496
+ // );
497
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
498
+ // box-shadow: var(
499
+ // --_show-shadow,
500
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
501
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
502
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
503
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
504
+ // );
505
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
506
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
507
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
508
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
509
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
510
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
511
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
512
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
513
+ text-decoration: var(
514
+ --_sf-hr-tt-dn,
515
+ var(
516
+ --_ctm-mob-dn-dt-se-ue,
517
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
518
+ )
519
+ );
520
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
521
+ &[data-flip-x="true"] {
522
+ transform: scaleX(-1);
523
+ }
524
+ &[data-flip-y="true"] {
525
+ transform: scaleY(-1);
526
+ }
527
+ }
528
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
529
+ }
530
+ &[data-element-type="productReview"] {
531
+ // width: var(--_lt-wh);
532
+ // height: var(--_lt-ht);
533
+ // margin: var(--_lt-mn);
534
+ // padding: var(--_lt-pg);
535
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
536
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
537
+ width: var(
538
+ --_sf-el-wh-st-mx,
539
+ calc(
540
+ 1% *
541
+ var(
542
+ --_ctm-mob-ele-nw-wh-vl,
543
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
544
+ )
545
+ )
546
+ );
547
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
548
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
549
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
550
+ // height: ;
551
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
552
+ // --_aspect-ratio: calc(
553
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
554
+ // );
555
+
556
+ & > .wrapper {
557
+ width: 100%;
558
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
559
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
560
+ border-color: var(
561
+ --_show-border,
562
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
563
+ );
564
+ border-style: var(
565
+ --_show-border,
566
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
567
+ );
568
+ border-width: var(
569
+ --_show-border,
570
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
571
+ );
572
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
573
+ box-shadow: var(
574
+ --_show-shadow,
575
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
576
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
577
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
578
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
579
+ );
580
+ // height: 100%;
581
+ }
582
+ &[data-show-shadow="false"] {
583
+ --_show-shadow: none;
584
+ }
585
+ &[data-show-border="false"] {
586
+ --_show-border: none;
587
+ }
588
+ // .text-element {
589
+ // background: #6d96e4;
590
+ // // padding: 10px;
591
+ // font-weight: 600;
592
+ // color: rgba(75, 69, 70, 1);
593
+ // }
594
+ .text-element {
595
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
596
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
597
+ display: flex;
598
+ flex-direction: column;
599
+ --_sf-gp: 16px;
600
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
601
+ row-gap: var(--_sf-gp);
602
+ width: 100%;
603
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
604
+ // border-color: var(
605
+ // --_show-border,
606
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
607
+ // );
608
+ // border-style: var(
609
+ // --_show-border,
610
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
611
+ // );
612
+ // border-width: var(
613
+ // --_show-border,
614
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
615
+ // );
616
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
617
+ // box-shadow: var(
618
+ // --_show-shadow,
619
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
620
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
621
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
622
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
623
+ // );
624
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
625
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
626
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
627
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
628
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
629
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
630
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
631
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
632
+ text-decoration: var(
633
+ --_sf-hr-tt-dn,
634
+ var(
635
+ --_ctm-mob-dn-dt-se-ue,
636
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
637
+ )
638
+ );
639
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
640
+ &[data-flip-x="true"] {
641
+ transform: scaleX(-1);
642
+ }
643
+ &[data-flip-y="true"] {
644
+ transform: scaleY(-1);
645
+ }
646
+ }
647
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
648
+ }
649
+ &[data-element-type="productRating"] {
650
+ // width: var(--_lt-wh);
651
+ // height: var(--_lt-ht);
652
+ // margin: var(--_lt-mn);
653
+ // padding: var(--_lt-pg);
654
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
655
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
656
+ width: var(
657
+ --_sf-el-wh-st-mx,
658
+ calc(
659
+ 1% *
660
+ var(
661
+ --_ctm-mob-ele-nw-wh-vl,
662
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
663
+ )
664
+ )
665
+ );
666
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
667
+ min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
668
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
669
+ // height: ;
670
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
671
+ // --_aspect-ratio: calc(
672
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
673
+ // );
674
+
675
+ & > .wrapper {
676
+ width: 100%;
677
+ // height: 100%;
678
+
679
+ border-color: var(
680
+ --_show-border,
681
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
682
+ );
683
+ border-style: var(
684
+ --_show-border,
685
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
686
+ );
687
+ border-width: var(
688
+ --_show-border,
689
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
690
+ );
691
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
692
+ box-shadow: var(
693
+ --_show-shadow,
694
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
695
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
696
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
697
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
698
+ );
699
+
700
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
701
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
702
+ }
703
+ &[data-show-shadow="false"] {
704
+ --_show-shadow: none;
705
+ }
706
+ &[data-show-border="false"] {
707
+ --_show-border: none;
708
+ }
709
+ // .text-element {
710
+ // background: #6d96e4;
711
+ // // padding: 10px;
712
+ // font-weight: 600;
713
+ // color: rgba(75, 69, 70, 1);
714
+ // }
715
+ .text-element {
716
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
717
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
718
+ display: flex;
719
+ flex-direction: column;
720
+ --_sf-gp: 16px;
721
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
722
+ row-gap: var(--_sf-gp);
723
+ width: 100%;
724
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
725
+ // border-color: var(
726
+ // --_show-border,
727
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
728
+ // );
729
+ // border-style: var(
730
+ // --_show-border,
731
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
732
+ // );
733
+ // border-width: var(
734
+ // --_show-border,
735
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
736
+ // );
737
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
738
+ // box-shadow: var(
739
+ // --_show-shadow,
740
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
741
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
742
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
743
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
744
+ // );
745
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
746
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
747
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
748
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
749
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
750
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
751
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
752
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
753
+ text-decoration: var(
754
+ --_sf-hr-tt-dn,
755
+ var(
756
+ --_ctm-mob-dn-dt-se-ue,
757
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
758
+ )
759
+ );
760
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
761
+ &[data-flip-x="true"] {
762
+ transform: scaleX(-1);
763
+ }
764
+ &[data-flip-y="true"] {
765
+ transform: scaleY(-1);
766
+ }
767
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
768
+ }
769
+ }
770
+ }