@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

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 (104) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +2 -2
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/enums/index.d.ts +5 -1
  91. package/dist/types/builder/index.d.ts +3 -1
  92. package/dist/types/builder/interfaces/global.d.ts +5 -0
  93. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  94. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  95. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  96. package/dist/uom-selector.scss +1569 -383
  97. package/dist/variant-picker.scss +1593 -481
  98. package/dist/video.scss +212 -53
  99. package/dist/volume-pricing.scss +775 -196
  100. package/dist/widget.scss +14 -0
  101. package/package.json +1 -1
  102. package/dist/editor-core.scss +0 -537
  103. package/dist/tab-panel.scss +0 -93
  104. package/dist/text-editor.scss +0 -331
package/dist/product-basic-elements.scss CHANGED
@@ -12,8 +12,17 @@
12
12
  // padding: var(--_lt-pg);
13
13
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
14
14
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
15
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
16
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
15
+ width: var(
16
+ --_sf-el-wh-st-mx,
17
+ calc(
18
+ 1% *
19
+ var(
20
+ --_ctm-mob-ele-nw-wh-vl,
21
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
22
+ )
23
+ )
24
+ );
25
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
17
26
  word-break: break-all;
18
27
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
19
28
 
@@ -43,9 +52,9 @@
43
52
  // }
44
53
  .text-element {
45
54
  cursor: pointer;
46
- word-break: break-all;
47
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
48
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
55
+ word-break: break-word;
56
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
57
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
58
  display: flex;
50
59
  flex-direction: column;
51
60
  --_sf-gp: 16px;
@@ -53,28 +62,44 @@
53
62
  row-gap: var(--_sf-gp);
54
63
  width: 100%;
55
64
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
56
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
57
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
58
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
59
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
65
+ border-color: var(
66
+ --_show-border,
67
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
68
+ );
69
+ border-style: var(
70
+ --_show-border,
71
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
72
+ );
73
+ border-width: var(
74
+ --_show-border,
75
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
76
+ );
77
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
60
78
  box-shadow: var(
61
79
  --_show-shadow,
62
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
63
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
80
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
81
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
82
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
83
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
64
84
  );
65
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
66
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
67
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
68
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
69
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
70
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
71
- letter-spacing: var(--_ctm-dn-lr-sg);
72
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
85
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
86
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
87
+ sans-serif;
88
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
89
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
90
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
91
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
92
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
93
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
73
94
  text-decoration: var(
74
95
  --_sf-hr-tt-dn,
75
- var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht, var(--_ctm-dn-ue)))
96
+ var(
97
+ --_ctm-mob-dn-dt-se-ue,
98
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
99
+ )
76
100
  );
77
- scale: var(--_ctm-dn-zm-ie);
101
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
102
+
78
103
  &[data-flip-x="true"] {
79
104
  transform: scaleX(-1);
80
105
  }
@@ -91,9 +116,19 @@
91
116
  // padding: var(--_lt-pg);
92
117
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
93
118
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
94
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
95
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
119
+ width: var(
120
+ --_sf-el-wh-st-mx,
121
+ calc(
122
+ 1% *
123
+ var(
124
+ --_ctm-mob-ele-nw-wh-vl,
125
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
126
+ )
127
+ )
128
+ );
129
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
96
130
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
131
+
97
132
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
98
133
  // height: ;
99
134
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -118,8 +153,8 @@
118
153
  // color: rgba(75, 69, 70, 1);
119
154
  // }
120
155
  .text-element {
121
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
122
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
156
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
157
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
123
158
  display: flex;
124
159
  flex-direction: column;
125
160
  --_sf-gp: 16px;
@@ -127,28 +162,43 @@
127
162
  row-gap: var(--_sf-gp);
128
163
  width: 100%;
129
164
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
130
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
131
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
132
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
133
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
165
+ border-color: var(
166
+ --_show-border,
167
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
168
+ );
169
+ border-style: var(
170
+ --_show-border,
171
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
172
+ );
173
+ border-width: var(
174
+ --_show-border,
175
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
176
+ );
177
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
134
178
  box-shadow: var(
135
179
  --_show-shadow,
136
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
137
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
180
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
181
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
182
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
183
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
138
184
  );
139
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
140
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
141
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
142
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
143
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
144
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
145
- letter-spacing: var(--_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
146
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
185
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
186
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
187
+ sans-serif;
188
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
189
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
190
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
191
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
192
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
193
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
147
194
  text-decoration: var(
148
195
  --_sf-hr-tt-dn,
149
- var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht, var(--_ctm-dn-ue)))
196
+ var(
197
+ --_ctm-mob-dn-dt-se-ue,
198
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
199
+ )
150
200
  );
151
- scale: var(--_ctm-dn-zm-ie);
201
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
152
202
  &[data-flip-x="true"] {
153
203
  transform: scaleX(-1);
154
204
  }
@@ -164,8 +214,17 @@
164
214
  // padding: var(--_lt-pg);
165
215
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
166
216
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
167
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
168
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
217
+ width: var(
218
+ --_sf-el-wh-st-mx,
219
+ calc(
220
+ 1% *
221
+ var(
222
+ --_ctm-mob-ele-nw-wh-vl,
223
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
224
+ )
225
+ )
226
+ );
227
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
169
228
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
170
229
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
171
230
  // height: ;
@@ -191,8 +250,8 @@
191
250
  // color: rgba(75, 69, 70, 1);
192
251
  // }
193
252
  .text-element {
194
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
195
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
253
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
254
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
196
255
  display: flex;
197
256
  flex-direction: column;
198
257
  --_sf-gp: 16px;
@@ -200,28 +259,43 @@
200
259
  row-gap: var(--_sf-gp);
201
260
  width: 100%;
202
261
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
203
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
204
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
205
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
206
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
262
+ border-color: var(
263
+ --_show-border,
264
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
265
+ );
266
+ border-style: var(
267
+ --_show-border,
268
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
269
+ );
270
+ border-width: var(
271
+ --_show-border,
272
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
273
+ );
274
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
207
275
  box-shadow: var(
208
276
  --_show-shadow,
209
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
210
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
277
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
278
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
279
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
280
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
211
281
  );
212
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
213
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
214
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
215
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
216
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
217
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
218
- letter-spacing: var(--_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
219
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
282
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
283
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
284
+ sans-serif;
285
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
286
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
287
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
288
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
289
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
290
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
220
291
  text-decoration: var(
221
292
  --_sf-hr-tt-dn,
222
- var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht, var(--_ctm-dn-ue)))
293
+ var(
294
+ --_ctm-mob-dn-dt-se-ue,
295
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
296
+ )
223
297
  );
224
- scale: var(--_ctm-dn-zm-ie);
298
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
225
299
  &[data-flip-x="true"] {
226
300
  transform: scaleX(-1);
227
301
  }
@@ -238,9 +312,17 @@
238
312
  // padding: var(--_lt-pg);
239
313
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
240
314
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
241
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
242
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
243
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
315
+ width: var(
316
+ --_sf-el-wh-st-mx,
317
+ calc(
318
+ 1% *
319
+ var(
320
+ --_ctm-mob-ele-nw-wh-vl,
321
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
322
+ )
323
+ )
324
+ );
325
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
244
326
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
245
327
  // height: ;
246
328
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -265,8 +347,8 @@
265
347
  // color: rgba(75, 69, 70, 1);
266
348
  // }
267
349
  .text-element {
268
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
269
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
350
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
351
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
270
352
  display: flex;
271
353
  flex-direction: column;
272
354
  --_sf-gp: 16px;
@@ -274,28 +356,43 @@
274
356
  row-gap: var(--_sf-gp);
275
357
  width: 100%;
276
358
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
277
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
278
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
279
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
280
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
359
+ border-color: var(
360
+ --_show-border,
361
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
362
+ );
363
+ border-style: var(
364
+ --_show-border,
365
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
366
+ );
367
+ border-width: var(
368
+ --_show-border,
369
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
370
+ );
371
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
281
372
  box-shadow: var(
282
373
  --_show-shadow,
283
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
284
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
374
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
375
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
376
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
377
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
285
378
  );
286
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
287
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
288
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
289
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
290
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
291
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
292
- letter-spacing: var(--_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
293
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
379
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
380
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
381
+ sans-serif;
382
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
383
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
384
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
385
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
386
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
387
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
294
388
  text-decoration: var(
295
389
  --_sf-hr-tt-dn,
296
- var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht, var(--_ctm-dn-ue)))
390
+ var(
391
+ --_ctm-mob-dn-dt-se-ue,
392
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
393
+ )
297
394
  );
298
- scale: var(--_ctm-dn-zm-ie);
395
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
299
396
  &[data-flip-x="true"] {
300
397
  transform: scaleX(-1);
301
398
  }
@@ -311,8 +408,17 @@
311
408
  // padding: var(--_lt-pg);
312
409
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
313
410
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
314
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
315
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
411
+ width: var(
412
+ --_sf-el-wh-st-mx,
413
+ calc(
414
+ 1% *
415
+ var(
416
+ --_ctm-mob-ele-nw-wh-vl,
417
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
418
+ )
419
+ )
420
+ );
421
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
316
422
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
317
423
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
318
424
  // height: ;
@@ -338,8 +444,8 @@
338
444
  // color: rgba(75, 69, 70, 1);
339
445
  // }
340
446
  .text-element {
341
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
342
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
447
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
448
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
343
449
  display: flex;
344
450
  flex-direction: column;
345
451
  --_sf-gp: 16px;
@@ -347,25 +453,43 @@
347
453
  row-gap: var(--_sf-gp);
348
454
  width: 100%;
349
455
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
350
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
351
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
352
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
353
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
456
+ border-color: var(
457
+ --_show-border,
458
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
459
+ );
460
+ border-style: var(
461
+ --_show-border,
462
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
463
+ );
464
+ border-width: var(
465
+ --_show-border,
466
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
467
+ );
468
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
354
469
  box-shadow: var(
355
470
  --_show-shadow,
356
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
357
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
471
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
472
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
473
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
474
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
475
+ );
476
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
477
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
478
+ sans-serif;
479
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
480
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
481
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
482
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
483
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
484
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
485
+ text-decoration: var(
486
+ --_sf-hr-tt-dn,
487
+ var(
488
+ --_ctm-mob-dn-dt-se-ue,
489
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
490
+ )
358
491
  );
359
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
360
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
361
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
362
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
363
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
364
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
365
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
366
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
367
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
368
- scale: var(--_ctm-dn-zm-ie);
492
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
369
493
  &[data-flip-x="true"] {
370
494
  transform: scaleX(-1);
371
495
  }
@@ -381,8 +505,17 @@
381
505
  // padding: var(--_lt-pg);
382
506
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
383
507
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
384
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
385
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
508
+ width: var(
509
+ --_sf-el-wh-st-mx,
510
+ calc(
511
+ 1% *
512
+ var(
513
+ --_ctm-mob-ele-nw-wh-vl,
514
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
515
+ )
516
+ )
517
+ );
518
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
386
519
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
387
520
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
388
521
  // height: ;
@@ -408,8 +541,8 @@
408
541
  // color: rgba(75, 69, 70, 1);
409
542
  // }
410
543
  .text-element {
411
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
412
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
544
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
545
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
413
546
  display: flex;
414
547
  flex-direction: column;
415
548
  --_sf-gp: 16px;
@@ -417,25 +550,43 @@
417
550
  row-gap: var(--_sf-gp);
418
551
  width: 100%;
419
552
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
420
- border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
421
- border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
422
- border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
423
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
553
+ border-color: var(
554
+ --_show-border,
555
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
556
+ );
557
+ border-style: var(
558
+ --_show-border,
559
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
560
+ );
561
+ border-width: var(
562
+ --_show-border,
563
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
564
+ );
565
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
424
566
  box-shadow: var(
425
567
  --_show-shadow,
426
- var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
427
- var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
568
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
569
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
570
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
571
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
572
+ );
573
+ color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
574
+ font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
575
+ sans-serif;
576
+ font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
577
+ font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
578
+ font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
579
+ text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
580
+ letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
581
+ line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
582
+ text-decoration: var(
583
+ --_sf-hr-tt-dn,
584
+ var(
585
+ --_ctm-mob-dn-dt-se-ue,
586
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
587
+ )
428
588
  );
429
- color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
430
- font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
431
- font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
432
- font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
433
- font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
434
- text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
435
- letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
436
- line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
437
- text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
438
- scale: var(--_ctm-dn-zm-ie);
589
+ scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
439
590
  &[data-flip-x="true"] {
440
591
  transform: scaleX(-1);
441
592
  }
package/dist/product-highlights.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  // padding: var(--_lt-pg);
10
10
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
11
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
12
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
13
13
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
14
  // height: ;
15
15
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -39,16 +39,16 @@
39
39
  }
40
40
  }
41
41
  .text-element {
42
- color: var(--Gray-900, #101828);
43
- font-family: "Hanken Grotesk";
44
- font-size: 20px;
42
+ color: #333;
43
+ font-family: Lato;
44
+ font-size: 12px;
45
45
  font-style: normal;
46
- font-weight: 600;
47
- line-height: 150%; /* 30px */
48
- letter-spacing: -0.4px;
46
+ font-weight: 400;
47
+ line-height: 18px;
48
+ margin-bottom: 6px;
49
49
  }
50
50
  .highlights__container {
51
- padding: var(--_ctm-lt-pg);
51
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
52
52
  .stacK {
53
53
  display: flex;
54
54
  flex-direction: column;
@@ -58,9 +58,11 @@
58
58
  }
59
59
  .horizontal {
60
60
  display: flex;
61
- gap: var(--_ctm-lt-im-sg, 10px);
61
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
62
+
62
63
  .item {
63
- padding: var(--_ctm-lt-im-pg);
64
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
65
+
64
66
  // border: 1px solid #000;
65
67
  max-width: 65px;
66
68
  img {
@@ -105,9 +107,10 @@
105
107
  .vertical {
106
108
  display: flex;
107
109
  flex-direction: column;
108
- gap: var(--_ctm-lt-im-sg);
110
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
109
111
  .item {
110
- padding: var(--_ctm-lt-im-pg);
112
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
113
+
111
114
  // border: 1px solid #000;
112
115
  max-width: 65px;
113
116
  img {
@@ -139,7 +142,11 @@
139
142
  .grid {
140
143
  display: grid;
141
144
  grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
142
- gap: var(--_ctm-lt-im-sg);
145
+ grid-template-columns: repeat(
146
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
147
+ minmax(auto, 1fr)
148
+ );
149
+
143
150
  &[data-overflow-items="Scroll"] {
144
151
  height: 200px;
145
152
  overflow-y: auto;
@@ -151,7 +158,8 @@
151
158
  display: flex;
152
159
  justify-content: center;
153
160
  align-items: center;
154
- padding: var(--_ctm-lt-im-pg);
161
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
162
+
155
163
  border-right: 1px solid #666;
156
164
  &:nth-child(6n) {
157
165
  border-right: none; /* Remove the border for the last column */