@sc-360-v2/storefront-cms-library 0.2.73 → 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 (106) 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 +7 -0
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/elements/quick-links/index.d.ts +36 -0
  91. package/dist/types/builder/enums/index.d.ts +9 -1
  92. package/dist/types/builder/index.d.ts +4 -1
  93. package/dist/types/builder/interfaces/global.d.ts +5 -0
  94. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  95. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  96. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  97. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +360 -0
  98. package/dist/uom-selector.scss +1569 -383
  99. package/dist/variant-picker.scss +1593 -481
  100. package/dist/video.scss +212 -53
  101. package/dist/volume-pricing.scss +775 -196
  102. package/dist/widget.scss +14 -0
  103. package/package.json +1 -1
  104. package/dist/editor-core.scss +0 -537
  105. package/dist/tab-panel.scss +0 -93
  106. package/dist/text-editor.scss +0 -331
package/dist/volume-pricing.scss CHANGED
@@ -9,7 +9,8 @@
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
14
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
15
  // height: ;
15
16
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -25,16 +26,16 @@
25
26
  --_show-shadow: none;
26
27
  }
27
28
  .text-element {
28
- color: var(--Gray-900, #101828);
29
- font-family: "Hanken Grotesk";
30
- font-size: 20px;
29
+ color: #333;
30
+ font-family: Lato;
31
+ font-size: 12px;
31
32
  font-style: normal;
32
- font-weight: 600;
33
- line-height: 150%; /* 30px */
34
- letter-spacing: -0.4px;
33
+ font-weight: 400;
34
+ line-height: 18px;
35
+ margin-bottom: 6px;
35
36
  }
36
37
  .volume__container {
37
- padding: var(--_ctm-lt-pg);
38
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
38
39
  border: 1px solid rgba(75, 69, 70, 1);
39
40
  border-radius: 20px;
40
41
 
@@ -43,204 +44,594 @@
43
44
  gap: 10px;
44
45
  flex-direction: column;
45
46
  .static {
46
- color: var(--_ctm-dn-um-te-se-cr);
47
- font-family: var(--_ctm-dn-um-te-se-ft-fy), sans-serif;
48
- font-size: var(--_ctm-dn-um-te-se-ft-se);
49
- font-weight: var(--_ctm-dn-um-te-se-ft-wt);
50
- font-style: var(--_ctm-dn-um-te-se-ft-se-ic);
51
- text-align: var(--_ctm-dn-um-te-se-tt-an);
52
- letter-spacing: var(--_ctm-dn-um-te-se-lr-sg);
53
- line-height: var(--_ctm-dn-um-te-se-le-ht);
54
- text-decoration: var(--_ctm-dn-um-te-se-ue);
47
+ color: var(
48
+ --_ctm-mob-dn-um-te-se-cr,
49
+ var(--_ctm-tab-dn-um-te-se-cr, var(--_ctm-dn-um-te-se-cr))
50
+ );
51
+ font-family: var(
52
+ --_ctm-mob-dn-um-te-se-ft-fy,
53
+ var(--_ctm-tab-dn-um-te-se-ft-fy, var(--_ctm-dn-um-te-se-ft-fy))
54
+ ),
55
+ sans-serif;
56
+ font-size: var(
57
+ --_ctm-mob-dn-um-te-se-ft-se,
58
+ var(--_ctm-tab-dn-um-te-se-ft-se, var(--_ctm-dn-um-te-se-ft-se))
59
+ );
60
+ font-weight: var(
61
+ --_ctm-mob-dn-um-te-se-ft-wt,
62
+ var(--_ctm-tab-dn-um-te-se-ft-wt, var(--_ctm-dn-um-te-se-ft-wt))
63
+ );
64
+ font-style: var(
65
+ --_ctm-mob-dn-um-te-se-ft-se-ic,
66
+ var(--_ctm-tab-dn-um-te-se-ft-se-ic, var(--_ctm-dn-um-te-se-ft-se-ic))
67
+ );
68
+ text-align: var(
69
+ --_ctm-mob-dn-um-te-se-tt-an,
70
+ var(--_ctm-tab-dn-um-te-se-tt-an, var(--_ctm-dn-um-te-se-tt-an))
71
+ );
72
+ letter-spacing: var(
73
+ --_ctm-mob-dn-um-te-se-lr-sg,
74
+ var(--_ctm-tab-dn-um-te-se-lr-sg, var(--_ctm-dn-um-te-se-lr-sg))
75
+ );
76
+ line-height: var(
77
+ --_ctm-mob-dn-um-te-se-le-ht,
78
+ var(--_ctm-tab-dn-um-te-se-le-ht, var(--_ctm-dn-um-te-se-le-ht))
79
+ );
80
+ text-decoration: var(
81
+ --_ctm-mob-dn-um-te-se-ue,
82
+ var(--_ctm-tab-dn-um-te-se-ue, var(--_ctm-dn-um-te-se-ue))
83
+ );
55
84
  }
85
+
56
86
  .horizontal {
57
87
  display: flex;
58
88
  flex-direction: row;
59
- gap: var(--_ctm-lt-im-sg);
89
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
90
+
60
91
  .item {
61
92
  display: flex;
62
93
  align-items: center;
63
94
  justify-content: center;
64
95
  flex-direction: column;
65
96
  gap: 4px;
66
- padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
97
+ padding: var(
98
+ --_ctm-mob-dn-im-se-dt-se-vl-pg,
99
+ var(--_ctm-tab-dn-im-se-dt-se-vl-pg, var(--_ctm-dn-im-se-dt-se-vl-pg))
100
+ )
101
+ var(
102
+ --_ctm-mob-dn-im-se-dt-se-hl-pg,
103
+ var(--_ctm-tab-dn-im-se-dt-se-hl-pg, var(--_ctm-dn-im-se-dt-se-hl-pg))
104
+ );
67
105
  cursor: pointer;
68
- background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
106
+ background-color: var(
107
+ --_ctm-mob-dn-im-se-dt-se-bd-cr,
108
+ var(--_ctm-tab-dn-im-se-dt-se-bd-cr, var(--_ctm-dn-im-se-dt-se-bd-cr))
109
+ );
110
+
69
111
  border-color: var(
70
112
  --_show-border-im-se,
71
- var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
113
+ var(
114
+ --_ctm-mob-dn-im-se-dt-se-br-cr,
115
+ var(--_ctm-tab-dn-im-se-dt-se-br-cr, var(--_ctm-dn-im-se-dt-se-br-cr))
116
+ )
72
117
  );
73
118
  border-style: var(
74
119
  --_show-border-im-se,
75
- var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
120
+ var(
121
+ --_ctm-mob-dn-im-se-dt-se-br-se,
122
+ var(--_ctm-tab-dn-im-se-dt-se-br-se, var(--_ctm-dn-im-se-dt-se-br-se))
123
+ )
76
124
  );
77
125
  border-width: var(
78
126
  --_show-border-im-se,
79
- var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
127
+ var(
128
+ --_ctm-mob-dn-im-se-dt-se-br-wh,
129
+ var(--_ctm-tab-dn-im-se-dt-se-br-wh, var(--_ctm-dn-im-se-dt-se-br-wh))
130
+ )
131
+ );
132
+ border-radius: var(
133
+ --_ctm-mob-dn-im-se-dt-se-br-rs,
134
+ var(--_ctm-tab-dn-im-se-dt-se-br-rs, var(--_ctm-dn-im-se-dt-se-br-rs))
80
135
  );
81
- border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
136
+
82
137
  box-shadow: var(
83
138
  --_show-shadow-im-se,
84
- var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
85
- var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
86
- var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
87
- var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
139
+ var(
140
+ --_ctm-mob-dn-im-se-dt-se-sw-ae,
141
+ var(--_ctm-tab-dn-im-se-dt-se-sw-ae, var(--_ctm-dn-im-se-dt-se-sw-ae))
142
+ )
143
+ var(
144
+ --_ctm-mob-dn-im-se-dt-se-sw-br,
145
+ var(--_ctm-tab-dn-im-se-dt-se-sw-br, var(--_ctm-dn-im-se-dt-se-sw-br))
146
+ )
147
+ var(
148
+ --_ctm-mob-dn-im-se-dt-se-sw-sd,
149
+ var(--_ctm-tab-dn-im-se-dt-se-sw-sd, var(--_ctm-dn-im-se-dt-se-sw-sd))
150
+ )
151
+ var(
152
+ --_ctm-mob-dn-im-se-dt-se-sw-cr,
153
+ var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
154
+ )
88
155
  );
156
+
89
157
  .each {
90
- color: var(--_ctm-dn-um-se-cr);
91
- font-family: var(--_ctm-dn-um-se-ft-fy), sans-serif;
92
- font-size: var(--_ctm-dn-um-se-ft-se);
93
- font-weight: var(--_ctm-dn-um-se-ft-wt);
94
- font-style: var(--_ctm-dn-um-se-ft-se-ic);
95
- text-align: var(--_ctm-dn-um-se-tt-an);
96
- letter-spacing: var(--_ctm-dn-um-se-lr-sg);
97
- line-height: var(--_ctm-dn-um-se-le-ht);
98
- text-decoration: var(--_ctm-dn-um-se-ue);
158
+ color: var(
159
+ --_ctm-mob-dn-um-se-cr,
160
+ var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
161
+ );
162
+ font-family: var(
163
+ --_ctm-mob-dn-um-se-ft-fy,
164
+ var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
165
+ ),
166
+ sans-serif;
167
+ font-size: var(
168
+ --_ctm-mob-dn-um-se-ft-se,
169
+ var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
170
+ );
171
+ font-weight: var(
172
+ --_ctm-mob-dn-um-se-ft-wt,
173
+ var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
174
+ );
175
+ font-style: var(
176
+ --_ctm-mob-dn-um-se-ft-se-ic,
177
+ var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
178
+ );
179
+ text-align: var(
180
+ --_ctm-mob-dn-um-se-tt-an,
181
+ var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
182
+ );
183
+ letter-spacing: var(
184
+ --_ctm-mob-dn-um-se-lr-sg,
185
+ var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
186
+ );
187
+ line-height: var(
188
+ --_ctm-mob-dn-um-se-le-ht,
189
+ var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
190
+ );
191
+ text-decoration: var(
192
+ --_ctm-mob-dn-um-se-ue,
193
+ var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
194
+ );
99
195
  }
196
+
100
197
  .price {
101
- color: var(--_ctm-dn-pt-pe-cr);
102
- font-family: var(--_ctm-dn-pt-pe-ft-fy), sans-serif;
103
- font-size: var(--_ctm-dn-pt-pe-ft-se);
104
- font-weight: var(--_ctm-dn-pt-pe-ft-wt);
105
- font-style: var(--_ctm-dn-pt-pe-ft-se-ic);
106
- text-align: var(--_ctm-dn-pt-pe-tt-an);
107
- letter-spacing: var(--_ctm-dn-pt-pe-lr-sg);
108
- line-height: var(--_ctm-dn-pt-pe-le-ht);
109
- text-decoration: var(--_ctm-dn-pt-pe-ue);
198
+ color: var(
199
+ --_ctm-mob-dn-pt-pe-cr,
200
+ var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
201
+ );
202
+ font-family: var(
203
+ --_ctm-mob-dn-pt-pe-ft-fy,
204
+ var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
205
+ ),
206
+ sans-serif;
207
+ font-size: var(
208
+ --_ctm-mob-dn-pt-pe-ft-se,
209
+ var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
210
+ );
211
+ font-weight: var(
212
+ --_ctm-mob-dn-pt-pe-ft-wt,
213
+ var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
214
+ );
215
+ font-style: var(
216
+ --_ctm-mob-dn-pt-pe-ft-se-ic,
217
+ var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
218
+ );
219
+ text-align: var(
220
+ --_ctm-mob-dn-pt-pe-tt-an,
221
+ var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
222
+ );
223
+ letter-spacing: var(
224
+ --_ctm-mob-dn-pt-pe-lr-sg,
225
+ var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
226
+ );
227
+ line-height: var(
228
+ --_ctm-mob-dn-pt-pe-le-ht,
229
+ var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
230
+ );
231
+ text-decoration: var(
232
+ --_ctm-mob-dn-pt-pe-ue,
233
+ var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
234
+ );
110
235
  }
236
+
111
237
  .off__price {
112
238
  font-size: 12px;
113
239
  display: flex;
114
240
  justify-content: space-around;
115
241
  gap: 10px;
116
242
  align-items: center;
243
+
117
244
  .offer__price {
118
- color: var(--_ctm-dn-ss-cr);
119
- font-family: var(--_ctm-dn-ss-ft-fy), sans-serif;
120
- font-size: var(--_ctm-dn-ss-ft-se);
121
- font-weight: var(--_ctm-dn-ss-ft-wt);
122
- font-style: var(--_ctm-dn-ss-ft-se-ic);
123
- text-align: var(--_ctm-dn-ss-tt-an);
124
- letter-spacing: var(--_ctm-dn-ss-lr-sg);
125
- line-height: var(--_ctm-dn-ss-le-ht);
126
- text-decoration: var(--_ctm-dn-ss-ue);
245
+ color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
246
+ font-family: var(
247
+ --_ctm-mob-dn-ss-ft-fy,
248
+ var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
249
+ ),
250
+ sans-serif;
251
+ font-size: var(
252
+ --_ctm-mob-dn-ss-ft-se,
253
+ var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
254
+ );
255
+ font-weight: var(
256
+ --_ctm-mob-dn-ss-ft-wt,
257
+ var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
258
+ );
259
+ font-style: var(
260
+ --_ctm-mob-dn-ss-ft-se-ic,
261
+ var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
262
+ );
263
+ text-align: var(
264
+ --_ctm-mob-dn-ss-tt-an,
265
+ var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
266
+ );
267
+ letter-spacing: var(
268
+ --_ctm-mob-dn-ss-lr-sg,
269
+ var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
270
+ );
271
+ line-height: var(
272
+ --_ctm-mob-dn-ss-le-ht,
273
+ var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
274
+ );
275
+ text-decoration: var(
276
+ --_ctm-mob-dn-ss-ue,
277
+ var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
278
+ );
127
279
  }
280
+
128
281
  .discount__price {
129
- color: var(--_ctm-dn-al-pe-cr);
130
- font-family: var(--_ctm-dn-al-pe-ft-fy), sans-serif;
131
- font-size: var(--_ctm-dn-al-pe-ft-se);
132
- font-weight: var(--_ctm-dn-al-pe-ft-wt);
133
- font-style: var(--_ctm-dn-al-pe-ft-se-ic);
134
- text-align: var(--_ctm-dn-al-pe-tt-an);
135
- letter-spacing: var(--_ctm-dn-al-pe-lr-sg);
136
- line-height: var(--_ctm-dn-al-pe-le-ht);
137
- text-decoration: var(--_ctm-dn-al-pe-ue);
282
+ color: var(
283
+ --_ctm-mob-dn-al-pe-cr,
284
+ var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
285
+ );
286
+ font-family: var(
287
+ --_ctm-mob-dn-al-pe-ft-fy,
288
+ var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
289
+ ),
290
+ sans-serif;
291
+ font-size: var(
292
+ --_ctm-mob-dn-al-pe-ft-se,
293
+ var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
294
+ );
295
+ font-weight: var(
296
+ --_ctm-mob-dn-al-pe-ft-wt,
297
+ var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
298
+ );
299
+ font-style: var(
300
+ --_ctm-mob-dn-al-pe-ft-se-ic,
301
+ var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
302
+ );
303
+ text-align: var(
304
+ --_ctm-mob-dn-al-pe-tt-an,
305
+ var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
306
+ );
307
+ letter-spacing: var(
308
+ --_ctm-mob-dn-al-pe-lr-sg,
309
+ var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
310
+ );
311
+ line-height: var(
312
+ --_ctm-mob-dn-al-pe-le-ht,
313
+ var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
314
+ );
315
+ text-decoration: var(
316
+ --_ctm-mob-dn-al-pe-ue,
317
+ var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
318
+ );
138
319
  }
139
320
  }
321
+
140
322
  .units {
141
- color: var(--_ctm-dn-pe-pr-ut-cr);
142
- font-family: var(--_ctm-dn-pe-pr-ut-ft-fy), sans-serif;
143
- font-size: var(--_ctm-dn-pe-pr-ut-ft-se);
144
- font-weight: var(--_ctm-dn-pe-pr-ut-ft-wt);
145
- font-style: var(--_ctm-dn-pe-pr-ut-ft-se-ic);
146
- text-align: var(--_ctm-dn-pe-pr-ut-tt-an);
147
- letter-spacing: var(--_ctm-dn-pe-pr-ut-lr-sg);
148
- line-height: var(--_ctm-dn-pe-pr-ut-le-ht);
149
- text-decoration: var(--_ctm-dn-pe-pr-ut-ue);
323
+ color: var(
324
+ --_ctm-mob-dn-pe-pr-ut-cr,
325
+ var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
326
+ );
327
+ font-family: var(
328
+ --_ctm-mob-dn-pe-pr-ut-ft-fy,
329
+ var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
330
+ ),
331
+ sans-serif;
332
+ font-size: var(
333
+ --_ctm-mob-dn-pe-pr-ut-ft-se,
334
+ var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
335
+ );
336
+ font-weight: var(
337
+ --_ctm-mob-dn-pe-pr-ut-ft-wt,
338
+ var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
339
+ );
340
+ font-style: var(
341
+ --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
342
+ var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
343
+ );
344
+ text-align: var(
345
+ --_ctm-mob-dn-pe-pr-ut-tt-an,
346
+ var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
347
+ );
348
+ letter-spacing: var(
349
+ --_ctm-mob-dn-pe-pr-ut-lr-sg,
350
+ var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
351
+ );
352
+ line-height: var(
353
+ --_ctm-mob-dn-pe-pr-ut-le-ht,
354
+ var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
355
+ );
356
+ text-decoration: var(
357
+ --_ctm-mob-dn-pe-pr-ut-ue,
358
+ var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
359
+ );
150
360
  }
151
361
  }
152
362
  }
363
+
153
364
  .vertical {
154
365
  display: flex;
155
366
  flex-direction: column;
156
- gap: var(--_ctm-lt-im-sg);
367
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
368
+
157
369
  .item {
158
370
  display: flex;
159
371
  align-items: center;
160
372
  justify-content: space-between;
161
- padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
373
+ padding: var(
374
+ --_ctm-mob-dn-im-se-dt-se-vl-pg,
375
+ var(--_ctm-tab-dn-im-se-dt-se-vl-pg, var(--_ctm-dn-im-se-dt-se-vl-pg))
376
+ )
377
+ var(
378
+ --_ctm-mob-dn-im-se-dt-se-hl-pg,
379
+ var(--_ctm-tab-dn-im-se-dt-se-hl-pg, var(--_ctm-dn-im-se-dt-se-hl-pg))
380
+ );
162
381
  cursor: pointer;
163
- background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
382
+ background-color: var(
383
+ --_ctm-mob-dn-im-se-dt-se-bd-cr,
384
+ var(--_ctm-tab-dn-im-se-dt-se-bd-cr, var(--_ctm-dn-im-se-dt-se-bd-cr))
385
+ );
386
+
164
387
  border-color: var(
165
388
  --_show-border-im-se,
166
- var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
389
+ var(
390
+ --_ctm-mob-dn-im-se-dt-se-br-cr,
391
+ var(--_ctm-tab-dn-im-se-dt-se-br-cr, var(--_ctm-dn-im-se-dt-se-br-cr))
392
+ )
167
393
  );
168
394
  border-style: var(
169
395
  --_show-border-im-se,
170
- var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
396
+ var(
397
+ --_ctm-mob-dn-im-se-dt-se-br-se,
398
+ var(--_ctm-tab-dn-im-se-dt-se-br-se, var(--_ctm-dn-im-se-dt-se-br-se))
399
+ )
171
400
  );
172
401
  border-width: var(
173
402
  --_show-border-im-se,
174
- var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
403
+ var(
404
+ --_ctm-mob-dn-im-se-dt-se-br-wh,
405
+ var(--_ctm-tab-dn-im-se-dt-se-br-wh, var(--_ctm-dn-im-se-dt-se-br-wh))
406
+ )
407
+ );
408
+ border-radius: var(
409
+ --_ctm-mob-dn-im-se-dt-se-br-rs,
410
+ var(--_ctm-tab-dn-im-se-dt-se-br-rs, var(--_ctm-dn-im-se-dt-se-br-rs))
175
411
  );
176
- border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
412
+
177
413
  box-shadow: var(
178
414
  --_show-shadow-im-se,
179
- var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
180
- var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
181
- var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
182
- var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
415
+ var(
416
+ --_ctm-mob-dn-im-se-dt-se-sw-ae,
417
+ var(--_ctm-tab-dn-im-se-dt-se-sw-ae, var(--_ctm-dn-im-se-dt-se-sw-ae))
418
+ )
419
+ var(
420
+ --_ctm-mob-dn-im-se-dt-se-sw-br,
421
+ var(--_ctm-tab-dn-im-se-dt-se-sw-br, var(--_ctm-dn-im-se-dt-se-sw-br))
422
+ )
423
+ var(
424
+ --_ctm-mob-dn-im-se-dt-se-sw-sd,
425
+ var(--_ctm-tab-dn-im-se-dt-se-sw-sd, var(--_ctm-dn-im-se-dt-se-sw-sd))
426
+ )
427
+ var(
428
+ --_ctm-mob-dn-im-se-dt-se-sw-cr,
429
+ var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
430
+ )
183
431
  );
432
+
184
433
  .text {
185
- color: var(--_ctm-dn-um-se-cr);
186
- font-family: var(--_ctm-dn-um-se-ft-fy), sans-serif;
187
- font-size: var(--_ctm-dn-um-se-ft-se);
188
- font-weight: var(--_ctm-dn-um-se-ft-wt);
189
- font-style: var(--_ctm-dn-um-se-ft-se-ic);
190
- text-align: var(--_ctm-dn-um-se-tt-an);
191
- letter-spacing: var(--_ctm-dn-um-se-lr-sg);
192
- line-height: var(--_ctm-dn-um-se-le-ht);
193
- text-decoration: var(--_ctm-dn-um-se-ue);
434
+ color: var(
435
+ --_ctm-mob-dn-um-se-cr,
436
+ var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
437
+ );
438
+ font-family: var(
439
+ --_ctm-mob-dn-um-se-ft-fy,
440
+ var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
441
+ ),
442
+ sans-serif;
443
+ font-size: var(
444
+ --_ctm-mob-dn-um-se-ft-se,
445
+ var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
446
+ );
447
+ font-weight: var(
448
+ --_ctm-mob-dn-um-se-ft-wt,
449
+ var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
450
+ );
451
+ font-style: var(
452
+ --_ctm-mob-dn-um-se-ft-se-ic,
453
+ var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
454
+ );
455
+ text-align: var(
456
+ --_ctm-mob-dn-um-se-tt-an,
457
+ var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
458
+ );
459
+ letter-spacing: var(
460
+ --_ctm-mob-dn-um-se-lr-sg,
461
+ var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
462
+ );
463
+ line-height: var(
464
+ --_ctm-mob-dn-um-se-le-ht,
465
+ var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
466
+ );
467
+ text-decoration: var(
468
+ --_ctm-mob-dn-um-se-ue,
469
+ var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
470
+ );
194
471
  }
472
+
195
473
  .off__price {
196
474
  .hilight__price {
197
- color: var(--_ctm-dn-pt-pe-cr);
198
- font-family: var(--_ctm-dn-pt-pe-ft-fy), sans-serif;
199
- font-size: var(--_ctm-dn-pt-pe-ft-se);
200
- font-weight: var(--_ctm-dn-pt-pe-ft-wt);
201
- font-style: var(--_ctm-dn-pt-pe-ft-se-ic);
202
- text-align: var(--_ctm-dn-pt-pe-tt-an);
203
- letter-spacing: var(--_ctm-dn-pt-pe-lr-sg);
204
- line-height: var(--_ctm-dn-pt-pe-le-ht);
205
- text-decoration: var(--_ctm-dn-pt-pe-ue);
475
+ color: var(
476
+ --_ctm-mob-dn-pt-pe-cr,
477
+ var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
478
+ );
479
+ font-family: var(
480
+ --_ctm-mob-dn-pt-pe-ft-fy,
481
+ var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
482
+ ),
483
+ sans-serif;
484
+ font-size: var(
485
+ --_ctm-mob-dn-pt-pe-ft-se,
486
+ var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
487
+ );
488
+ font-weight: var(
489
+ --_ctm-mob-dn-pt-pe-ft-wt,
490
+ var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
491
+ );
492
+ font-style: var(
493
+ --_ctm-mob-dn-pt-pe-ft-se-ic,
494
+ var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
495
+ );
496
+ text-align: var(
497
+ --_ctm-mob-dn-pt-pe-tt-an,
498
+ var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
499
+ );
500
+ letter-spacing: var(
501
+ --_ctm-mob-dn-pt-pe-lr-sg,
502
+ var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
503
+ );
504
+ line-height: var(
505
+ --_ctm-mob-dn-pt-pe-le-ht,
506
+ var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
507
+ );
508
+ text-decoration: var(
509
+ --_ctm-mob-dn-pt-pe-ue,
510
+ var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
511
+ );
206
512
  }
513
+
207
514
  .secondary__price {
208
- color: var(--_ctm-dn-pe-pr-ut-cr);
209
- font-family: var(--_ctm-dn-pe-pr-ut-ft-fy), sans-serif;
210
- font-size: var(--_ctm-dn-pe-pr-ut-ft-se);
211
- font-weight: var(--_ctm-dn-pe-pr-ut-ft-wt);
212
- font-style: var(--_ctm-dn-pe-pr-ut-ft-se-ic);
213
- text-align: var(--_ctm-dn-pe-pr-ut-tt-an);
214
- letter-spacing: var(--_ctm-dn-pe-pr-ut-lr-sg);
215
- line-height: var(--_ctm-dn-pe-pr-ut-le-ht);
216
- text-decoration: var(--_ctm-dn-pe-pr-ut-ue);
515
+ color: var(
516
+ --_ctm-mob-dn-pe-pr-ut-cr,
517
+ var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
518
+ );
519
+ font-family: var(
520
+ --_ctm-mob-dn-pe-pr-ut-ft-fy,
521
+ var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
522
+ ),
523
+ sans-serif;
524
+ font-size: var(
525
+ --_ctm-mob-dn-pe-pr-ut-ft-se,
526
+ var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
527
+ );
528
+ font-weight: var(
529
+ --_ctm-mob-dn-pe-pr-ut-ft-wt,
530
+ var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
531
+ );
532
+ font-style: var(
533
+ --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
534
+ var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
535
+ );
536
+ text-align: var(
537
+ --_ctm-mob-dn-pe-pr-ut-tt-an,
538
+ var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
539
+ );
540
+ letter-spacing: var(
541
+ --_ctm-mob-dn-pe-pr-ut-lr-sg,
542
+ var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
543
+ );
544
+ line-height: var(
545
+ --_ctm-mob-dn-pe-pr-ut-le-ht,
546
+ var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
547
+ );
548
+ text-decoration: var(
549
+ --_ctm-mob-dn-pe-pr-ut-ue,
550
+ var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
551
+ );
217
552
  }
218
553
  }
554
+
219
555
  .discount__price {
220
556
  display: flex;
221
557
  justify-content: space-around;
222
558
  gap: 10px;
559
+
223
560
  .price {
224
- color: var(--_ctm-dn-al-pe-cr);
225
- font-family: var(--_ctm-dn-al-pe-ft-fy), sans-serif;
226
- font-size: var(--_ctm-dn-al-pe-ft-se);
227
- font-weight: var(--_ctm-dn-al-pe-ft-wt);
228
- font-style: var(--_ctm-dn-al-pe-ft-se-ic);
229
- text-align: var(--_ctm-dn-al-pe-tt-an);
230
- letter-spacing: var(--_ctm-dn-al-pe-lr-sg);
231
- line-height: var(--_ctm-dn-al-pe-le-ht);
232
- text-decoration: var(--_ctm-dn-al-pe-ue);
561
+ color: var(
562
+ --_ctm-mob-dn-al-pe-cr,
563
+ var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
564
+ );
565
+ font-family: var(
566
+ --_ctm-mob-dn-al-pe-ft-fy,
567
+ var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
568
+ ),
569
+ sans-serif;
570
+ font-size: var(
571
+ --_ctm-mob-dn-al-pe-ft-se,
572
+ var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
573
+ );
574
+ font-weight: var(
575
+ --_ctm-mob-dn-al-pe-ft-wt,
576
+ var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
577
+ );
578
+ font-style: var(
579
+ --_ctm-mob-dn-al-pe-ft-se-ic,
580
+ var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
581
+ );
582
+ text-align: var(
583
+ --_ctm-mob-dn-al-pe-tt-an,
584
+ var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
585
+ );
586
+ letter-spacing: var(
587
+ --_ctm-mob-dn-al-pe-lr-sg,
588
+ var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
589
+ );
590
+ line-height: var(
591
+ --_ctm-mob-dn-al-pe-le-ht,
592
+ var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
593
+ );
594
+ text-decoration: var(
595
+ --_ctm-mob-dn-al-pe-ue,
596
+ var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
597
+ );
233
598
  }
599
+
234
600
  .save__price {
235
- color: var(--_ctm-dn-ss-cr);
236
- font-family: var(--_ctm-dn-ss-ft-fy), sans-serif;
237
- font-size: var(--_ctm-dn-ss-ft-se);
238
- font-weight: var(--_ctm-dn-ss-ft-wt);
239
- font-style: var(--_ctm-dn-ss-ft-se-ic);
240
- text-align: var(--_ctm-dn-ss-tt-an);
241
- letter-spacing: var(--_ctm-dn-ss-lr-sg);
242
- line-height: var(--_ctm-dn-ss-le-ht);
243
- text-decoration: var(--_ctm-dn-ss-ue);
601
+ color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
602
+ font-family: var(
603
+ --_ctm-mob-dn-ss-ft-fy,
604
+ var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
605
+ ),
606
+ sans-serif;
607
+ font-size: var(
608
+ --_ctm-mob-dn-ss-ft-se,
609
+ var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
610
+ );
611
+ font-weight: var(
612
+ --_ctm-mob-dn-ss-ft-wt,
613
+ var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
614
+ );
615
+ font-style: var(
616
+ --_ctm-mob-dn-ss-ft-se-ic,
617
+ var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
618
+ );
619
+ text-align: var(
620
+ --_ctm-mob-dn-ss-tt-an,
621
+ var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
622
+ );
623
+ letter-spacing: var(
624
+ --_ctm-mob-dn-ss-lr-sg,
625
+ var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
626
+ );
627
+ line-height: var(
628
+ --_ctm-mob-dn-ss-le-ht,
629
+ var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
630
+ );
631
+ text-decoration: var(
632
+ --_ctm-mob-dn-ss-ue,
633
+ var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
634
+ );
244
635
  }
245
636
  }
246
637
  }
@@ -249,32 +640,59 @@
249
640
  .table-content {
250
641
  width: 100%;
251
642
  border-collapse: collapse;
252
- background-color: var(--_ctm-dn-te-bd-cr);
253
- border-color: var(--_show-border-im-se, var(--_ctm-dn-te-br-cr, var(--_tst-dn-br-cr)));
254
- border-style: var(--_show-border-im-se, var(--_ctm-dn-te-br-se, var(--_tst-dn-br-se)));
255
- border-width: var(--_show-border-im-se, var(--_ctm-dn-te-br-wh, var(--_tst-dn-br-wh)));
256
- border-radius: var(--_ctm-dn-te-br-rs, var(--_tst-dn-br-rs));
643
+ background-color: var(
644
+ --_ctm-mob-dn-te-bd-cr,
645
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
646
+ );
647
+ border-color: var(
648
+ --_show-border-im-se,
649
+ var(--_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr)))
650
+ );
651
+ border-style: var(
652
+ --_show-border-im-se,
653
+ var(--_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se)))
654
+ );
655
+ border-width: var(
656
+ --_show-border-im-se,
657
+ var(--_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh)))
658
+ );
659
+ border-radius: var(
660
+ --_ctm-mob-dn-te-br-rs,
661
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
662
+ );
257
663
  box-shadow: var(
258
664
  --_show-shadow-im-se,
259
- var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae))
260
- var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br))
261
- var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd))
262
- var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr))
665
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
666
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
667
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
668
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
263
669
  );
264
670
  &[data-header-divider="true"] {
265
671
  thead tr th {
266
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
672
+ border-bottom: 1px solid
673
+ var(
674
+ --_ctm-mob-dn-rw-ds-hr-dr,
675
+ var(--_ctm-tab-dn-rw-ds-hr-dr, var(--_ctm-dn-rw-ds-hr-dr))
676
+ );
267
677
  }
268
678
  }
269
679
  &[data-row-divider="true"] {
270
680
  tbody tr td {
271
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
681
+ border-bottom: 1px solid
682
+ var(
683
+ --_ctm-mob-dn-rw-ds-rw-dr,
684
+ var(--_ctm-tab-dn-rw-ds-rw-dr, var(--_ctm-dn-rw-ds-rw-dr))
685
+ );
272
686
  }
273
687
  }
274
688
  &[data-column-divider="true"] {
275
689
  tbody tr td,
276
690
  thead tr th {
277
- border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
691
+ border-right: 1px solid
692
+ var(
693
+ --_ctm-mob-dn-rw-ds-cn-dr,
694
+ var(--_ctm-tab-dn-rw-ds-cn-dr, var(--_ctm-dn-rw-ds-cn-dr))
695
+ );
278
696
  }
279
697
 
280
698
  tbody tr td:last-child,
@@ -284,53 +702,125 @@
284
702
  }
285
703
  &[data-alternative-row-colors="true"] {
286
704
  tbody tr:nth-child(odd) {
287
- background-color: var(--_gray-300);
705
+ background-color: var(--_gray-300, var(--_ctm-tab-gray-300, var(--_ctm-mob-gray-300)));
288
706
  width: 100%;
289
707
  }
290
708
  }
291
709
  thead {
292
- height: var(--_ctm-lt-hr-ht);
710
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-dn-lt-hr-ht)));
293
711
  tr {
294
712
  th {
295
- padding: var(--_ctm-lt-hr-cl-pg);
296
- text-align: var(--_ctm-lt-ct-at);
713
+ padding: var(
714
+ --_ctm-mob-lt-hr-cl-pg,
715
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-dn-lt-hr-cl-pg))
716
+ );
717
+ text-align: var(
718
+ --_ctm-mob-lt-ct-at,
719
+ var(--_ctm-tab-lt-ct-at, var(--_ctm-dn-lt-ct-at))
720
+ );
297
721
  border: 0;
298
- background-color: var(--_ctm-dn-te-hr-bd-cr);
299
- color: var(--_ctm-dn-hr-tt-cr);
300
- font-family: var(--_ctm-dn-hr-tt-ft-fy), sans-serif;
301
- font-size: var(--_ctm-dn-hr-tt-ft-se);
302
- font-weight: var(--_ctm-dn-hr-tt-ft-wt);
303
- font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
304
- text-align: var(--_ctm-dn-hr-tt-tt-an);
305
- letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
306
- line-height: var(--_ctm-dn-hr-tt-le-ht);
307
- text-decoration: var(--_ctm-dn-hr-tt-ue);
722
+ background-color: var(
723
+ --_ctm-mob-dn-te-hr-bd-cr,
724
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
725
+ );
726
+ color: var(
727
+ --_ctm-mob-dn-hr-tt-cr,
728
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
729
+ );
730
+ font-family: var(
731
+ --_ctm-mob-dn-hr-tt-ft-fy,
732
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy)),
733
+ sans-serif
734
+ );
735
+ font-size: var(
736
+ --_ctm-mob-dn-hr-tt-ft-se,
737
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
738
+ );
739
+ font-weight: var(
740
+ --_ctm-mob-dn-hr-tt-ft-wt,
741
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
742
+ );
743
+ font-style: var(
744
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
745
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
746
+ );
747
+ text-align: var(
748
+ --_ctm-mob-dn-hr-tt-tt-an,
749
+ var(--_ctm-tab-dn-hr-tt-an, var(--_ctm-dn-hr-tt-an))
750
+ );
751
+ letter-spacing: var(
752
+ --_ctm-mob-dn-hr-tt-lr-sg,
753
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
754
+ );
755
+ line-height: var(
756
+ --_ctm-mob-dn-hr-tt-le-ht,
757
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
758
+ );
759
+ text-decoration: var(
760
+ --_ctm-mob-dn-hr-tt-ue,
761
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
762
+ );
308
763
  }
309
764
  }
310
765
  }
311
766
  tbody {
312
767
  tr {
313
- padding: var(--_ctm-lt-rw-cl-pg);
314
- height: var(--_ctm-lt-rw-ht);
315
- background-color: var(--_ctm-dn-te-rw-bd-cr);
316
- text-align: var(--_ctm-lt-ct-at);
768
+ padding: var(
769
+ --_ctm-mob-lt-rw-cl-pg,
770
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-dn-lt-rw-cl-pg))
771
+ );
772
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-dn-lt-rw-ht)));
773
+ background-color: var(
774
+ --_ctm-mob-dn-te-rw-bd-cr,
775
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
776
+ );
777
+ text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-dn-lt-ct-at)));
317
778
  th,
318
779
  td {
319
780
  border: 0;
320
781
  padding: inherit;
321
- color: var(--_ctm-dn-te-rw-cr);
322
- font-family: var(--_ctm-dn-te-rw-ft-fy), sans-serif;
323
- font-size: var(--_ctm-dn-te-rw-ft-se);
324
- font-weight: var(--_ctm-dn-te-rw-ft-wt);
325
- font-style: var(--_ctm-dn-te-rw-ft-se-ic);
326
- text-align: var(--_ctm-dn-te-rw-tt-an);
327
- letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
328
- line-height: var(--_ctm-dn-te-rw-le-ht);
329
- text-decoration: var(--_ctm-dn-te-rw-ue);
782
+ color: var(
783
+ --_ctm-mob-dn-te-rw-cr,
784
+ var(--_ctm-tab-dn-te-rw-cr, var(--_ctm-dn-te-rw-cr))
785
+ );
786
+ font-family: var(
787
+ --_ctm-mob-dn-te-rw-ft-fy,
788
+ var(--_ctm-tab-dn-te-rw-ft-fy, var(--_ctm-dn-te-rw-ft-fy))
789
+ ),
790
+ sans-serif;
791
+ font-size: var(
792
+ --_ctm-mob-dn-te-rw-ft-se,
793
+ var(--_ctm-tab-dn-te-rw-ft-se, var(--_ctm-dn-te-rw-ft-se))
794
+ );
795
+ font-weight: var(
796
+ --_ctm-mob-dn-te-rw-ft-wt,
797
+ var(--_ctm-tab-dn-te-rw-ft-wt, var(--_ctm-dn-te-rw-ft-wt))
798
+ );
799
+ font-style: var(
800
+ --_ctm-mob-dn-te-rw-ft-se-ic,
801
+ var(--_ctm-tab-dn-te-rw-ft-se-ic, var(--_ctm-dn-te-rw-ft-se-ic))
802
+ );
803
+ text-align: var(
804
+ --_ctm-mob-dn-te-rw-tt-an,
805
+ var(--_ctm-tab-dn-te-rw-tt-an, var(--_ctm-dn-te-rw-tt-an))
806
+ );
807
+ letter-spacing: var(
808
+ --_ctm-mob-dn-te-rw-lr-sg,
809
+ var(--_ctm-tab-dn-te-rw-lr-sg, var(--_ctm-dn-te-rw-lr-sg))
810
+ );
811
+ line-height: var(
812
+ --_ctm-mob-dn-te-rw-le-ht,
813
+ var(--_ctm-tab-dn-te-rw-le-ht, var(--_ctm-dn-te-rw-le-ht))
814
+ );
815
+ text-decoration: var(
816
+ --_ctm-mob-dn-te-rw-ue,
817
+ var(--_ctm-tab-dn-te-rw-ue, var(--_ctm-dn-te-rw-ue))
818
+ );
330
819
  }
331
820
  }
332
821
  }
333
822
  }
823
+
334
824
  .pagination_container {
335
825
  display: flex;
336
826
  justify-content: center;
@@ -347,19 +837,51 @@
347
837
  }
348
838
  span {
349
839
  cursor: pointer;
350
- color: var(--_ctm-dn-pn-dt-se-cr);
351
- font-family: var(--_ctm-dn-pn-dt-se-ft-fy), sans-serif;
352
- font-size: var(--_ctm-dn-pn-dt-se-ft-se);
353
- font-weight: var(--_ctm-dn-pn-dt-se-ft-wt);
354
- font-style: var(--_ctm-dn-pn-dt-se-ft-se-ic);
355
- text-align: var(--_ctm-dn-pn-dt-se-tt-an);
356
- letter-spacing: var(--_ctm-dn-pn-dt-se-lr-sg);
357
- line-height: var(--_ctm-dn-pn-dt-se-le-ht);
358
- text-decoration: var(--_ctm-dn-pn-dt-se-ue);
840
+ color: var(
841
+ --_ctm-mob-dn-pn-dt-se-cr,
842
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
843
+ );
844
+ font-family: var(
845
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
846
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
847
+ ),
848
+ sans-serif;
849
+ font-size: var(
850
+ --_ctm-mob-dn-pn-dt-se-ft-se,
851
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
852
+ );
853
+ font-weight: var(
854
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
855
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
856
+ );
857
+ font-style: var(
858
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
859
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
860
+ );
861
+ text-align: var(
862
+ --_ctm-mob-dn-pn-dt-se-tt-an,
863
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
864
+ );
865
+ letter-spacing: var(
866
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
867
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
868
+ );
869
+ line-height: var(
870
+ --_ctm-mob-dn-pn-dt-se-le-ht,
871
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
872
+ );
873
+ text-decoration: var(
874
+ --_ctm-mob-dn-pn-dt-se-ue,
875
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
876
+ );
359
877
  }
878
+
360
879
  .active {
361
880
  span {
362
- background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
881
+ background-color: var(
882
+ --_ctm-mob-dn-pn-dt-se-bd-cr,
883
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
884
+ );
363
885
  padding: 2px;
364
886
  }
365
887
  }
@@ -370,41 +892,98 @@
370
892
  align-items: center;
371
893
  gap: 10px;
372
894
  margin-top: 10px;
895
+
373
896
  button {
374
897
  padding: 10px;
375
898
  cursor: pointer;
376
- color: var(--_ctm-dn-sw-me-is-bn-cr);
377
- font-family: var(--_ctm-dn-sw-me-is-bn-ft-fy), sans-serif;
378
- font-size: var(--_ctm-dn-sw-me-is-bn-ft-se);
379
- font-weight: var(--_ctm-dn-sw-me-is-bn-ft-wt);
380
- font-style: var(--_ctm-dn-sw-me-is-bn-ft-se-ic);
381
- text-align: var(--_ctm-dn-sw-me-is-bn-tt-an);
382
- letter-spacing: var(--_ctm-dn-sw-me-is-bn-lr-sg);
383
- line-height: var(--_ctm-dn-sw-me-is-bn-le-ht);
384
- text-decoration: var(--_ctm-dn-sw-me-is-bn-ue);
385
- background-color: var(--_ctm-dn-sw-me-is-bn-bd-cr);
899
+ color: var(
900
+ --_ctm-mob-dn-sw-me-is-bn-cr,
901
+ var(--_ctm-tab-dn-sw-me-is-bn-cr, var(--_ctm-dn-sw-me-is-bn-cr))
902
+ );
903
+ font-family: var(
904
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
905
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
906
+ ),
907
+ sans-serif;
908
+ font-size: var(
909
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
910
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
911
+ );
912
+ font-weight: var(
913
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
914
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
915
+ );
916
+ font-style: var(
917
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
918
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
919
+ );
920
+ text-align: var(
921
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
922
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
923
+ );
924
+ letter-spacing: var(
925
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
926
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
927
+ );
928
+ line-height: var(
929
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
930
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
931
+ );
932
+ text-decoration: var(
933
+ --_ctm-mob-dn-sw-me-is-bn-ue,
934
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
935
+ );
936
+ background-color: var(
937
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
938
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
939
+ );
386
940
  border-color: var(
387
941
  --_show-border-im-se,
388
- var(--_ctm-dn-sw-me-is-bn-br-cr, var(--_tst-dn-br-cr))
942
+ var(
943
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
944
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
945
+ )
389
946
  );
390
947
  border-style: var(
391
948
  --_show-border-im-se,
392
- var(--_ctm-dn-sw-me-is-bn-br-se, var(--_tst-dn-br-se))
949
+ var(
950
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
951
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
952
+ )
393
953
  );
394
954
  border-width: var(
395
955
  --_show-border-im-se,
396
- var(--_ctm-dn-sw-me-is-bn-br-wh, var(--_tst-dn-br-wh))
956
+ var(
957
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
958
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
959
+ )
960
+ );
961
+ border-radius: var(
962
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
963
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
397
964
  );
398
- border-radius: var(--_ctm-dn-sw-me-is-bn-br-rs, var(--_tst-dn-br-rs));
399
965
  box-shadow: var(
400
966
  --_show-shadow-im-se,
401
- var(--_ctm-dn-sw-me-is-bn-sw-ae, var(--_tst-dn-sw-ae))
402
- var(--_ctm-dn-sw-me-is-bn-sw-br, var(--_tst-dn-sw-br))
403
- var(--_ctm-dn-sw-me-is-bn-sw-sd, var(--_tst-dn-sw-sd))
404
- var(--_ctm-dn-sw-me-is-bn-sw-cr, var(--_tst-dn-sw-cr))
967
+ var(
968
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
969
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
970
+ )
971
+ var(
972
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
973
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
974
+ )
975
+ var(
976
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
977
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
978
+ )
979
+ var(
980
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
981
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
982
+ )
405
983
  );
406
984
  }
407
985
  }
986
+
408
987
  // horizontal tabs
409
988
  .tabs__main {
410
989
  &.tabs__vertical {