@sc-360-v2/storefront-cms-library 0.2.98 → 0.2.100

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