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

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 +226 -291
  2. package/dist/builder.js +1 -1
  3. package/dist/bundleDetails.scss +678 -808
  4. package/dist/cartDropdownOverlay.scss +13 -0
  5. package/dist/faq.scss +24 -20
  6. package/dist/item-stock.scss +76 -38
  7. package/dist/map.scss +35 -35
  8. package/dist/modal.scss +0 -320
  9. package/dist/payment-methods.scss +1 -71
  10. package/dist/pickup-locations.scss +19 -22
  11. package/dist/product-basic-elements.scss +132 -285
  12. package/dist/product-options.scss +76 -118
  13. package/dist/quick-links.scss +143 -186
  14. package/dist/quotes.scss +0 -1
  15. package/dist/repeater-item.scss +0 -1
  16. package/dist/section.scss +78 -29
  17. package/dist/stack.scss +61 -16
  18. package/dist/store-locations.scss +20 -21
  19. package/dist/text-temp-v2.scss +0 -2
  20. package/dist/types/builder/enums/index.d.ts +0 -1
  21. package/dist/types/builder/index.d.ts +1 -2
  22. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +10 -627
  23. package/dist/types/builder/tools/element-edit/itemStock.d.ts +0 -11
  24. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +1 -94
  25. package/dist/uom-selector.scss +1428 -941
  26. package/dist/variant-picker.scss +138 -613
  27. package/dist/volume-pricing.scss +606 -1007
  28. package/dist/widget.scss +0 -2
  29. package/package.json +1 -1
  30. package/dist/menu-item.scss +0 -19
  31. package/dist/order-status.scss +0 -483
  32. package/dist/table-common.scss +0 -510
  33. package/dist/types/builder/elements/bundle-details/index.d.ts +0 -30
  34. package/dist/volume-pricing copy.scss +0 -1092
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-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-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);
@@ -17,21 +18,6 @@
17
18
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
19
  // );
19
20
 
20
- width: var(
21
- --_sf-el-wh-st-mx,
22
- calc(
23
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
24
- )
25
- );
26
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
27
-
28
- --_aspect-ratio: calc(
29
- 1 *
30
- (
31
- var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
32
- var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
33
- )
34
- );
35
21
  & > .wrapper {
36
22
  width: 100%;
37
23
  // height: 100%;
@@ -39,25 +25,6 @@
39
25
  &[data-show-shadow="false"] {
40
26
  --_show-shadow: none;
41
27
  }
42
- &[data-overflow-items="Wrap"] {
43
- .horizontal {
44
- flex-wrap: wrap;
45
- }
46
- }
47
- &[data-overflow-items="Scroll"] {
48
- .horizontal {
49
- width: 100%;
50
- overflow-x: auto;
51
- .item {
52
- width: 100%;
53
- flex-shrink: 0;
54
- }
55
- }
56
- .vertical {
57
- overflow-y: auto;
58
- max-height: 30%;
59
- }
60
- }
61
28
  .text-element {
62
29
  color: #333;
63
30
  font-family: Lato;
@@ -67,57 +34,59 @@
67
34
  line-height: 18px;
68
35
  margin-bottom: 6px;
69
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;
70
41
 
71
- .uom__selector {
72
- padding: 10px;
73
- width: 100%;
74
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
75
- .uom__container {
76
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
77
- // border: 1px solid rgba(75, 69, 70, 1);
78
- // border-radius: 20px;
79
- .stack {
42
+ .stack {
43
+ display: flex;
44
+ gap: 10px;
45
+ flex-direction: column;
46
+ .static {
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
+ );
84
+ }
85
+
86
+ .horizontal {
80
87
  display: flex;
81
- flex-direction: column;
82
- .static {
83
- color: var(
84
- --_ctm-mob-dn-um-te-se-cr,
85
- var(--_ctm-tab-dn-um-te-se-cr, var(--_ctm-dn-um-te-se-cr))
86
- );
87
- font-family: var(
88
- --_ctm-mob-dn-um-te-se-ft-fy,
89
- var(--_ctm-tab-dn-um-te-se-ft-fy, var(--_ctm-dn-um-te-se-ft-fy))
90
- ),
91
- sans-serif;
92
- font-size: var(
93
- --_ctm-mob-dn-um-te-se-ft-se,
94
- var(--_ctm-tab-dn-um-te-se-ft-se, var(--_ctm-dn-um-te-se-ft-se))
95
- );
96
- font-weight: var(
97
- --_ctm-mob-dn-um-te-se-ft-wt,
98
- var(--_ctm-tab-dn-um-te-se-ft-wt, var(--_ctm-dn-um-te-se-ft-wt))
99
- );
100
- font-style: var(
101
- --_ctm-mob-dn-um-te-se-ft-se-ic,
102
- var(--_ctm-tab-dn-um-te-se-ft-se-ic, var(--_ctm-dn-um-te-se-ft-se-ic))
103
- );
104
- text-align: var(
105
- --_ctm-mob-dn-um-te-se-tt-an,
106
- var(--_ctm-tab-dn-um-te-se-tt-an, var(--_ctm-dn-um-te-se-tt-an))
107
- );
108
- letter-spacing: var(
109
- --_ctm-mob-dn-um-te-se-lr-sg,
110
- var(--_ctm-tab-dn-um-te-se-lr-sg, var(--_ctm-dn-um-te-se-lr-sg))
111
- );
112
- line-height: var(
113
- --_ctm-mob-dn-um-te-se-le-ht,
114
- var(--_ctm-tab-dn-um-te-se-le-ht, var(--_ctm-dn-um-te-se-le-ht))
115
- );
116
- text-decoration: var(
117
- --_ctm-mob-dn-um-te-se-ue,
118
- var(--_ctm-tab-dn-um-te-se-ue, var(--_ctm-dn-um-te-se-ue))
119
- );
120
- }
88
+ flex-direction: row;
89
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
121
90
 
122
91
  .item {
123
92
  display: flex;
@@ -184,83 +153,6 @@
184
153
  var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
185
154
  )
186
155
  );
187
- }
188
- .active {
189
- display: flex;
190
-
191
- align-items: var(
192
- --_ctm-mob-dn-im-se-sd-se-ct-at,
193
- var(--_ctm-tab-dn-im-se-sd-se-ct-at, var(--_ctm-dn-im-se-sd-se-ct-at))
194
- );
195
-
196
- justify-content: center;
197
- flex-direction: column;
198
- gap: 4px;
199
-
200
- padding: var(
201
- --_ctm-mob-dn-im-se-sd-se-vl-pg,
202
- var(--_ctm-tab-dn-im-se-sd-se-vl-pg, var(--_ctm-dn-im-se-sd-se-vl-pg))
203
- )
204
- var(
205
- --_ctm-mob-dn-im-se-sd-se-hl-pg,
206
- var(--_ctm-tab-dn-im-se-sd-se-hl-pg, var(--_ctm-dn-im-se-sd-se-hl-pg))
207
- );
208
-
209
- cursor: pointer;
210
-
211
- background-color: var(
212
- --_ctm-mob-dn-im-se-sd-se-bd-cr,
213
- var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
214
- );
215
-
216
- border-color: var(
217
- --_show-border-im-se,
218
- var(
219
- --_ctm-mob-dn-im-se-sd-se-br-cr,
220
- var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
221
- )
222
- );
223
-
224
- border-style: var(
225
- --_show-border-im-se,
226
- var(
227
- --_ctm-mob-dn-im-se-sd-se-br-se,
228
- var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
229
- )
230
- );
231
-
232
- border-width: var(
233
- --_show-border-im-se,
234
- var(
235
- --_ctm-mob-dn-im-se-sd-se-br-wh,
236
- var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
237
- )
238
- );
239
-
240
- border-radius: var(
241
- --_ctm-mob-dn-im-se-sd-se-br-rs,
242
- var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
243
- );
244
-
245
- box-shadow: var(
246
- --_show-shadow-im-se,
247
- var(
248
- --_ctm-mob-dn-im-se-sd-se-sw-ae,
249
- var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
250
- )
251
- var(
252
- --_ctm-mob-dn-im-se-sd-se-sw-br,
253
- var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
254
- )
255
- var(
256
- --_ctm-mob-dn-im-se-sd-se-sw-sd,
257
- var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
258
- )
259
- var(
260
- --_ctm-mob-dn-im-se-sd-se-sw-cr,
261
- var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
262
- )
263
- );
264
156
 
265
157
  .each {
266
158
  color: var(
@@ -341,13 +233,15 @@
341
233
  var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
342
234
  );
343
235
  }
236
+
344
237
  .off__price {
345
238
  font-size: 12px;
346
239
  display: flex;
347
240
  justify-content: space-around;
348
241
  gap: 10px;
349
242
  align-items: center;
350
- .saving__amount {
243
+
244
+ .offer__price {
351
245
  color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
352
246
  font-family: var(
353
247
  --_ctm-mob-dn-ss-ft-fy,
@@ -384,7 +278,7 @@
384
278
  );
385
279
  }
386
280
 
387
- .actual__price {
281
+ .discount__price {
388
282
  color: var(
389
283
  --_ctm-mob-dn-al-pe-cr,
390
284
  var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
@@ -424,6 +318,7 @@
424
318
  );
425
319
  }
426
320
  }
321
+
427
322
  .units {
428
323
  color: var(
429
324
  --_ctm-mob-dn-pe-pr-ut-cr,
@@ -464,317 +359,119 @@
464
359
  );
465
360
  }
466
361
  }
362
+ }
467
363
 
468
- .each {
469
- color: var(
470
- --_ctm-mob-dn-um-se-cr,
471
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
472
- );
473
- font-family: var(
474
- --_ctm-mob-dn-um-se-ft-fy,
475
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
476
- ),
477
- sans-serif;
478
- font-size: var(
479
- --_ctm-mob-dn-um-se-ft-se,
480
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
481
- );
482
- font-weight: var(
483
- --_ctm-mob-dn-um-se-ft-wt,
484
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
485
- );
486
- font-style: var(
487
- --_ctm-mob-dn-um-se-ft-se-ic,
488
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
489
- );
490
- text-align: var(
491
- --_ctm-mob-dn-um-se-tt-an,
492
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
493
- );
494
- letter-spacing: var(
495
- --_ctm-mob-dn-um-se-lr-sg,
496
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
497
- );
498
- line-height: var(
499
- --_ctm-mob-dn-um-se-le-ht,
500
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
501
- );
502
- text-decoration: var(
503
- --_ctm-mob-dn-um-se-ue,
504
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
505
- );
506
- }
364
+ .vertical {
365
+ display: flex;
366
+ flex-direction: column;
367
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
507
368
 
508
- .price {
509
- color: var(
510
- --_ctm-mob-dn-pt-pe-cr,
511
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
512
- );
513
- font-family: var(
514
- --_ctm-mob-dn-pt-pe-ft-fy,
515
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
516
- ),
517
- sans-serif;
518
- font-size: var(
519
- --_ctm-mob-dn-pt-pe-ft-se,
520
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
521
- );
522
- font-weight: var(
523
- --_ctm-mob-dn-pt-pe-ft-wt,
524
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
525
- );
526
- font-style: var(
527
- --_ctm-mob-dn-pt-pe-ft-se-ic,
528
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
529
- );
530
- text-align: var(
531
- --_ctm-mob-dn-pt-pe-tt-an,
532
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
533
- );
534
- letter-spacing: var(
535
- --_ctm-mob-dn-pt-pe-lr-sg,
536
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
537
- );
538
- line-height: var(
539
- --_ctm-mob-dn-pt-pe-le-ht,
540
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
541
- );
542
- text-decoration: var(
543
- --_ctm-mob-dn-pt-pe-ue,
544
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
545
- );
546
- }
547
- .actual__price {
548
- color: var(
549
- --_ctm-mob-dn-al-pe-cr,
550
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
551
- );
552
- font-family: var(
553
- --_ctm-mob-dn-al-pe-ft-fy,
554
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
555
- ),
556
- sans-serif;
557
- font-size: var(
558
- --_ctm-mob-dn-al-pe-ft-se,
559
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
560
- );
561
- font-weight: var(
562
- --_ctm-mob-dn-al-pe-ft-wt,
563
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
564
- );
565
- font-style: var(
566
- --_ctm-mob-dn-al-pe-ft-se-ic,
567
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
568
- );
569
- text-align: var(
570
- --_ctm-mob-dn-al-pe-tt-an,
571
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
572
- );
573
- letter-spacing: var(
574
- --_ctm-mob-dn-al-pe-lr-sg,
575
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
576
- );
577
- line-height: var(
578
- --_ctm-mob-dn-al-pe-le-ht,
579
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
580
- );
581
- text-decoration: var(
582
- --_ctm-mob-dn-al-pe-ue,
583
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
584
- );
585
- }
586
- .saving__amount {
587
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
588
- font-family: var(
589
- --_ctm-mob-dn-ss-ft-fy,
590
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
591
- ),
592
- sans-serif;
593
- font-size: var(
594
- --_ctm-mob-dn-ss-ft-se,
595
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
596
- );
597
- font-weight: var(
598
- --_ctm-mob-dn-ss-ft-wt,
599
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
600
- );
601
- font-style: var(
602
- --_ctm-mob-dn-ss-ft-se-ic,
603
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
604
- );
605
- text-align: var(
606
- --_ctm-mob-dn-ss-tt-an,
607
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
608
- );
609
- letter-spacing: var(
610
- --_ctm-mob-dn-ss-lr-sg,
611
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
612
- );
613
- line-height: var(
614
- --_ctm-mob-dn-ss-le-ht,
615
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
616
- );
617
- text-decoration: var(
618
- --_ctm-mob-dn-ss-ue,
619
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
620
- );
621
- }
622
- .off__price {
623
- font-size: 12px;
369
+ .item {
624
370
  display: flex;
625
- justify-content: space-around;
626
- gap: 10px;
627
371
  align-items: center;
628
- }
629
-
630
- .units {
631
- color: var(
632
- --_ctm-mob-dn-pe-pr-ut-cr,
633
- var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
634
- );
635
- font-family: var(
636
- --_ctm-mob-dn-pe-pr-ut-ft-fy,
637
- var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
638
- ),
639
- sans-serif;
640
- font-size: var(
641
- --_ctm-mob-dn-pe-pr-ut-ft-se,
642
- var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
643
- );
644
- font-weight: var(
645
- --_ctm-mob-dn-pe-pr-ut-ft-wt,
646
- var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
647
- );
648
- font-style: var(
649
- --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
650
- var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
372
+ justify-content: space-between;
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
+ );
381
+ cursor: pointer;
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))
651
385
  );
652
- text-align: var(
653
- --_ctm-mob-dn-pe-pr-ut-tt-an,
654
- var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
386
+
387
+ border-color: var(
388
+ --_show-border-im-se,
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
+ )
655
393
  );
656
- letter-spacing: var(
657
- --_ctm-mob-dn-pe-pr-ut-lr-sg,
658
- var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
394
+ border-style: var(
395
+ --_show-border-im-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
+ )
659
400
  );
660
- line-height: var(
661
- --_ctm-mob-dn-pe-pr-ut-le-ht,
662
- var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
401
+ border-width: var(
402
+ --_show-border-im-se,
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
+ )
663
407
  );
664
- text-decoration: var(
665
- --_ctm-mob-dn-pe-pr-ut-ue,
666
- var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
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))
667
411
  );
668
- }
669
- .horizontal {
670
- display: flex;
671
- flex-direction: row;
672
- flex-wrap: wrap;
673
-
674
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
675
- }
676
412
 
677
- .vertical {
678
- display: flex;
679
- flex-direction: column;
680
- gap: var(--_ctm-lt-im-sg);
681
- .item {
682
- flex-direction: row;
683
- justify-content: space-between;
684
- align-items: center;
685
- .right__side__content {
686
- display: flex;
687
- gap: 20px;
688
- div {
689
- display: flex;
690
- gap: 1px;
413
+ box-shadow: var(
414
+ --_show-shadow-im-se,
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
+ )
431
+ );
691
432
 
692
- flex-direction: column;
693
- justify-content: right;
694
- align-items: center;
695
- }
696
- }
697
- }
698
- }
699
- .grid {
700
- display: grid;
701
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
702
- gap: var(--_ctm-lt-im-sg);
703
- padding: var(--_ctm-lt-im-pg);
704
- &[data-overflow-items="Scroll"] {
705
- height: 200px;
706
- overflow-y: auto;
707
- }
708
- .item {
709
- display: flex;
710
- align-items: center;
711
- justify-content: center;
712
- flex-direction: column;
713
- gap: 4px;
714
- padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
715
- cursor: pointer;
716
- background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
717
- border-color: var(
718
- --_show-border-im-se,
719
- var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
433
+ .text {
434
+ color: var(
435
+ --_ctm-mob-dn-um-se-cr,
436
+ var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
720
437
  );
721
- border-style: var(
722
- --_show-border-im-se,
723
- var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
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))
724
446
  );
725
- border-width: var(
726
- --_show-border-im-se,
727
- var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
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))
728
450
  );
729
- border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
730
- box-shadow: var(
731
- --_show-shadow-im-se,
732
- var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
733
- var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
734
- var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
735
- var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
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))
736
454
  );
737
- cursor: pointer;
738
- .each {
739
- color: var(
740
- --_ctm-mob-dn-um-se-cr,
741
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
742
- );
743
- font-family: var(
744
- --_ctm-mob-dn-um-se-ft-fy,
745
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
746
- ),
747
- sans-serif;
748
- font-size: var(
749
- --_ctm-mob-dn-um-se-ft-se,
750
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
751
- );
752
- font-weight: var(
753
- --_ctm-mob-dn-um-se-ft-wt,
754
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
755
- );
756
- font-style: var(
757
- --_ctm-mob-dn-um-se-ft-se-ic,
758
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
759
- );
760
- text-align: var(
761
- --_ctm-mob-dn-um-se-tt-an,
762
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
763
- );
764
- letter-spacing: var(
765
- --_ctm-mob-dn-um-se-lr-sg,
766
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
767
- );
768
- line-height: var(
769
- --_ctm-mob-dn-um-se-le-ht,
770
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
771
- );
772
- text-decoration: var(
773
- --_ctm-mob-dn-um-se-ue,
774
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
775
- );
776
- }
777
- .price {
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
+ );
471
+ }
472
+
473
+ .off__price {
474
+ .hilight__price {
778
475
  color: var(
779
476
  --_ctm-mob-dn-pt-pe-cr,
780
477
  var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
@@ -813,89 +510,8 @@
813
510
  var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
814
511
  );
815
512
  }
816
- .off__price {
817
- font-size: 12px;
818
- display: flex;
819
- justify-content: space-around;
820
- gap: 10px;
821
- align-items: center;
822
- .saving__amount {
823
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
824
- font-family: var(
825
- --_ctm-mob-dn-ss-ft-fy,
826
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
827
- ),
828
- sans-serif;
829
- font-size: var(
830
- --_ctm-mob-dn-ss-ft-se,
831
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
832
- );
833
- font-weight: var(
834
- --_ctm-mob-dn-ss-ft-wt,
835
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
836
- );
837
- font-style: var(
838
- --_ctm-mob-dn-ss-ft-se-ic,
839
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
840
- );
841
- text-align: var(
842
- --_ctm-mob-dn-ss-tt-an,
843
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
844
- );
845
- letter-spacing: var(
846
- --_ctm-mob-dn-ss-lr-sg,
847
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
848
- );
849
- line-height: var(
850
- --_ctm-mob-dn-ss-le-ht,
851
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
852
- );
853
- text-decoration: var(
854
- --_ctm-mob-dn-ss-ue,
855
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
856
- );
857
- }
858
- .actual__price {
859
- color: var(
860
- --_ctm-mob-dn-al-pe-cr,
861
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
862
- );
863
- font-family: var(
864
- --_ctm-mob-dn-al-pe-ft-fy,
865
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
866
- ),
867
- sans-serif;
868
- font-size: var(
869
- --_ctm-mob-dn-al-pe-ft-se,
870
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
871
- );
872
- font-weight: var(
873
- --_ctm-mob-dn-al-pe-ft-wt,
874
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
875
- );
876
- font-style: var(
877
- --_ctm-mob-dn-al-pe-ft-se-ic,
878
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
879
- );
880
- text-align: var(
881
- --_ctm-mob-dn-al-pe-tt-an,
882
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
883
- );
884
- letter-spacing: var(
885
- --_ctm-mob-dn-al-pe-lr-sg,
886
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
887
- );
888
- line-height: var(
889
- --_ctm-mob-dn-al-pe-le-ht,
890
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
891
- );
892
- text-decoration: var(
893
- --_ctm-mob-dn-al-pe-ue,
894
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
895
- );
896
- }
897
- }
898
- .units {
513
+
514
+ .secondary__price {
899
515
  color: var(
900
516
  --_ctm-mob-dn-pe-pr-ut-cr,
901
517
  var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
@@ -935,554 +551,537 @@
935
551
  );
936
552
  }
937
553
  }
938
- .active {
939
- display: flex;
940
-
941
- align-items: var(
942
- --_ctm-mob-dn-im-se-sd-se-ct-at,
943
- var(--_ctm-tab-dn-im-se-sd-se-ct-at, var(--_ctm-dn-im-se-sd-se-ct-at))
944
- );
945
-
946
- justify-content: center;
947
- flex-direction: column;
948
- gap: 4px;
949
-
950
- padding: var(
951
- --_ctm-mob-dn-im-se-sd-se-vl-pg,
952
- var(--_ctm-tab-dn-im-se-sd-se-vl-pg, var(--_ctm-dn-im-se-sd-se-vl-pg))
953
- )
954
- var(
955
- --_ctm-mob-dn-im-se-sd-se-hl-pg,
956
- var(--_ctm-tab-dn-im-se-sd-se-hl-pg, var(--_ctm-dn-im-se-sd-se-hl-pg))
957
- );
958
-
959
- cursor: pointer;
960
-
961
- background-color: var(
962
- --_ctm-mob-dn-im-se-sd-se-bd-cr,
963
- var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
964
- );
965
-
966
- border-color: var(
967
- --_show-border-im-se,
968
- var(
969
- --_ctm-mob-dn-im-se-sd-se-br-cr,
970
- var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
971
- )
972
- );
973
-
974
- border-style: var(
975
- --_show-border-im-se,
976
- var(
977
- --_ctm-mob-dn-im-se-sd-se-br-se,
978
- var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
979
- )
980
- );
981
-
982
- border-width: var(
983
- --_show-border-im-se,
984
- var(
985
- --_ctm-mob-dn-im-se-sd-se-br-wh,
986
- var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
987
- )
988
- );
989
554
 
990
- border-radius: var(
991
- --_ctm-mob-dn-im-se-sd-se-br-rs,
992
- var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
993
- );
994
-
995
- box-shadow: var(
996
- --_show-shadow-im-se,
997
- var(
998
- --_ctm-mob-dn-im-se-sd-se-sw-ae,
999
- var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
1000
- )
1001
- var(
1002
- --_ctm-mob-dn-im-se-sd-se-sw-br,
1003
- var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
1004
- )
1005
- var(
1006
- --_ctm-mob-dn-im-se-sd-se-sw-sd,
1007
- var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
1008
- )
1009
- var(
1010
- --_ctm-mob-dn-im-se-sd-se-sw-cr,
1011
- var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
1012
- )
1013
- );
555
+ .discount__price {
556
+ display: flex;
557
+ justify-content: space-around;
558
+ gap: 10px;
1014
559
 
1015
- .each {
1016
- color: var(
1017
- --_ctm-mob-dn-um-se-cr,
1018
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
1019
- );
1020
- font-family: var(
1021
- --_ctm-mob-dn-um-se-ft-fy,
1022
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
1023
- ),
1024
- sans-serif;
1025
- font-size: var(
1026
- --_ctm-mob-dn-um-se-ft-se,
1027
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
1028
- );
1029
- font-weight: var(
1030
- --_ctm-mob-dn-um-se-ft-wt,
1031
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
1032
- );
1033
- font-style: var(
1034
- --_ctm-mob-dn-um-se-ft-se-ic,
1035
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
1036
- );
1037
- text-align: var(
1038
- --_ctm-mob-dn-um-se-tt-an,
1039
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
1040
- );
1041
- letter-spacing: var(
1042
- --_ctm-mob-dn-um-se-lr-sg,
1043
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
1044
- );
1045
- line-height: var(
1046
- --_ctm-mob-dn-um-se-le-ht,
1047
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
1048
- );
1049
- text-decoration: var(
1050
- --_ctm-mob-dn-um-se-ue,
1051
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
1052
- );
1053
- }
1054
560
  .price {
1055
561
  color: var(
1056
- --_ctm-mob-dn-pt-pe-cr,
1057
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
562
+ --_ctm-mob-dn-al-pe-cr,
563
+ var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
1058
564
  );
1059
565
  font-family: var(
1060
- --_ctm-mob-dn-pt-pe-ft-fy,
1061
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
566
+ --_ctm-mob-dn-al-pe-ft-fy,
567
+ var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
1062
568
  ),
1063
569
  sans-serif;
1064
570
  font-size: var(
1065
- --_ctm-mob-dn-pt-pe-ft-se,
1066
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
571
+ --_ctm-mob-dn-al-pe-ft-se,
572
+ var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
1067
573
  );
1068
574
  font-weight: var(
1069
- --_ctm-mob-dn-pt-pe-ft-wt,
1070
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
575
+ --_ctm-mob-dn-al-pe-ft-wt,
576
+ var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
1071
577
  );
1072
578
  font-style: var(
1073
- --_ctm-mob-dn-pt-pe-ft-se-ic,
1074
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
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))
1075
581
  );
1076
582
  text-align: var(
1077
- --_ctm-mob-dn-pt-pe-tt-an,
1078
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
583
+ --_ctm-mob-dn-al-pe-tt-an,
584
+ var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
1079
585
  );
1080
586
  letter-spacing: var(
1081
- --_ctm-mob-dn-pt-pe-lr-sg,
1082
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
587
+ --_ctm-mob-dn-al-pe-lr-sg,
588
+ var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
1083
589
  );
1084
590
  line-height: var(
1085
- --_ctm-mob-dn-pt-pe-le-ht,
1086
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
591
+ --_ctm-mob-dn-al-pe-le-ht,
592
+ var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
1087
593
  );
1088
594
  text-decoration: var(
1089
- --_ctm-mob-dn-pt-pe-ue,
1090
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
595
+ --_ctm-mob-dn-al-pe-ue,
596
+ var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
1091
597
  );
1092
598
  }
1093
- .off__price {
1094
- font-size: 12px;
1095
- display: flex;
1096
- justify-content: space-around;
1097
- gap: 10px;
1098
- align-items: center;
1099
- .saving__amount {
1100
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
1101
- font-family: var(
1102
- --_ctm-mob-dn-ss-ft-fy,
1103
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
1104
- ),
1105
- sans-serif;
1106
- font-size: var(
1107
- --_ctm-mob-dn-ss-ft-se,
1108
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
1109
- );
1110
- font-weight: var(
1111
- --_ctm-mob-dn-ss-ft-wt,
1112
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
1113
- );
1114
- font-style: var(
1115
- --_ctm-mob-dn-ss-ft-se-ic,
1116
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
1117
- );
1118
- text-align: var(
1119
- --_ctm-mob-dn-ss-tt-an,
1120
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
1121
- );
1122
- letter-spacing: var(
1123
- --_ctm-mob-dn-ss-lr-sg,
1124
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
1125
- );
1126
- line-height: var(
1127
- --_ctm-mob-dn-ss-le-ht,
1128
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
1129
- );
1130
- text-decoration: var(
1131
- --_ctm-mob-dn-ss-ue,
1132
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
1133
- );
1134
- }
1135
- .actual__price {
1136
- color: var(
1137
- --_ctm-mob-dn-al-pe-cr,
1138
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
1139
- );
1140
- font-family: var(
1141
- --_ctm-mob-dn-al-pe-ft-fy,
1142
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
1143
- ),
1144
- sans-serif;
1145
- font-size: var(
1146
- --_ctm-mob-dn-al-pe-ft-se,
1147
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
1148
- );
1149
- font-weight: var(
1150
- --_ctm-mob-dn-al-pe-ft-wt,
1151
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
1152
- );
1153
- font-style: var(
1154
- --_ctm-mob-dn-al-pe-ft-se-ic,
1155
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
1156
- );
1157
- text-align: var(
1158
- --_ctm-mob-dn-al-pe-tt-an,
1159
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
1160
- );
1161
- letter-spacing: var(
1162
- --_ctm-mob-dn-al-pe-lr-sg,
1163
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
1164
- );
1165
- line-height: var(
1166
- --_ctm-mob-dn-al-pe-le-ht,
1167
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
1168
- );
1169
- text-decoration: var(
1170
- --_ctm-mob-dn-al-pe-ue,
1171
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
1172
- );
1173
- }
1174
- }
1175
- .units {
1176
- color: var(
1177
- --_ctm-mob-dn-pe-pr-ut-cr,
1178
- var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
1179
- );
599
+
600
+ .save__price {
601
+ color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
1180
602
  font-family: var(
1181
- --_ctm-mob-dn-pe-pr-ut-ft-fy,
1182
- var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
603
+ --_ctm-mob-dn-ss-ft-fy,
604
+ var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
1183
605
  ),
1184
606
  sans-serif;
1185
607
  font-size: var(
1186
- --_ctm-mob-dn-pe-pr-ut-ft-se,
1187
- var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
608
+ --_ctm-mob-dn-ss-ft-se,
609
+ var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
1188
610
  );
1189
611
  font-weight: var(
1190
- --_ctm-mob-dn-pe-pr-ut-ft-wt,
1191
- var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
612
+ --_ctm-mob-dn-ss-ft-wt,
613
+ var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
1192
614
  );
1193
615
  font-style: var(
1194
- --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
1195
- var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
616
+ --_ctm-mob-dn-ss-ft-se-ic,
617
+ var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
1196
618
  );
1197
619
  text-align: var(
1198
- --_ctm-mob-dn-pe-pr-ut-tt-an,
1199
- var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
620
+ --_ctm-mob-dn-ss-tt-an,
621
+ var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
1200
622
  );
1201
623
  letter-spacing: var(
1202
- --_ctm-mob-dn-pe-pr-ut-lr-sg,
1203
- var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
624
+ --_ctm-mob-dn-ss-lr-sg,
625
+ var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
1204
626
  );
1205
627
  line-height: var(
1206
- --_ctm-mob-dn-pe-pr-ut-le-ht,
1207
- var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
628
+ --_ctm-mob-dn-ss-le-ht,
629
+ var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
1208
630
  );
1209
631
  text-decoration: var(
1210
- --_ctm-mob-dn-pe-pr-ut-ue,
1211
- var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
632
+ --_ctm-mob-dn-ss-ue,
633
+ var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
1212
634
  );
1213
635
  }
1214
636
  }
1215
637
  }
1216
638
  }
1217
- .table-content {
1218
- border-collapse: collapse;
639
+ }
640
+ .table-content {
641
+ width: 100%;
642
+ border-collapse: collapse;
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
+ );
663
+ box-shadow: var(
664
+ --_show-shadow-im-se,
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)))
669
+ );
670
+ &[data-header-divider="true"] {
671
+ thead tr th {
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
+ );
677
+ }
678
+ }
679
+ &[data-row-divider="true"] {
680
+ tbody tr td {
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
+ );
686
+ }
687
+ }
688
+ &[data-column-divider="true"] {
689
+ tbody tr td,
690
+ thead tr th {
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
+ );
696
+ }
697
+
698
+ tbody tr td:last-child,
699
+ thead tr th:last-child {
700
+ border-right: none;
701
+ }
702
+ }
703
+ &[data-alternative-row-colors="true"] {
704
+ tbody tr:nth-child(odd) {
705
+ background-color: var(--_gray-300, var(--_ctm-tab-gray-300, var(--_ctm-mob-gray-300)));
706
+ width: 100%;
707
+ }
708
+ }
709
+ thead {
710
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-dn-lt-hr-ht)));
711
+ tr {
712
+ th {
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
+ );
721
+ border: 0;
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
+ );
763
+ }
764
+ }
765
+ }
766
+ tbody {
767
+ tr {
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)));
778
+ th,
779
+ td {
780
+ border: 0;
781
+ padding: inherit;
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
+ );
819
+ }
820
+ }
821
+ }
822
+ }
823
+
824
+ .pagination_container {
825
+ display: flex;
826
+ justify-content: center;
827
+ align-items: center;
828
+ gap: 10px;
829
+ button {
830
+ font-size: 16px;
831
+ // padding: 10px 20px;
832
+ // background-color: #000;
833
+ color: #fff;
834
+ border: none;
835
+ cursor: pointer;
836
+ // border-radius: 10px;
837
+ }
838
+ span {
839
+ cursor: pointer;
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
+ );
877
+ }
878
+
879
+ .active {
880
+ span {
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
+ );
885
+ padding: 2px;
886
+ }
887
+ }
888
+ }
889
+ .loadmore_conatiner {
890
+ display: flex;
891
+ justify-content: center;
892
+ align-items: center;
893
+ gap: 10px;
894
+ margin-top: 10px;
895
+
896
+ button {
897
+ padding: 10px;
898
+ cursor: pointer;
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
+ );
1219
936
  background-color: var(
1220
- --_ctm-mob-dn-te-bd-cr,
1221
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
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))
1222
939
  );
1223
940
  border-color: var(
1224
941
  --_show-border-im-se,
1225
- var(--_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))),
1226
- 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
+ )
1227
946
  );
1228
947
  border-style: var(
1229
948
  --_show-border-im-se,
1230
- var(--_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))),
1231
- 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
+ )
1232
953
  );
1233
954
  border-width: var(
1234
955
  --_show-border-im-se,
1235
- var(--_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))),
1236
- 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
+ )
1237
960
  );
1238
961
  border-radius: var(
1239
- --_ctm-mob-dn-te-br-rs,
1240
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)),
1241
- var(--_tst-dn-br-rs)
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))
1242
964
  );
1243
965
  box-shadow: var(
1244
966
  --_show-shadow-im-se,
1245
967
  var(
1246
- --_ctm-mob-dn-te-sw-ae,
1247
- var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae)))
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))
1248
970
  )
1249
971
  var(
1250
- --_ctm-mob-dn-te-sw-br,
1251
- var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br)))
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))
1252
974
  )
1253
975
  var(
1254
- --_ctm-mob-dn-te-sw-sd,
1255
- var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd)))
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))
1256
978
  )
1257
979
  var(
1258
- --_ctm-mob-dn-te-sw-cr,
1259
- var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr)))
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))
1260
982
  )
1261
983
  );
1262
- &[data-header-divider="true"] {
1263
- thead tr th {
1264
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
1265
- }
1266
- }
1267
- &[data-row-divider="true"] {
1268
- tbody tr td {
1269
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
1270
- }
1271
- }
1272
- &[data-column-divider="true"] {
1273
- tbody tr td,
1274
- thead tr th {
1275
- border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
1276
- }
984
+ }
985
+ }
1277
986
 
1278
- tbody tr td:last-child,
1279
- thead tr th:last-child {
1280
- border-right: none;
987
+ // horizontal tabs
988
+ .tabs__main {
989
+ &.tabs__vertical {
990
+ .tabs {
991
+ .tabs__container {
992
+ flex-direction: column;
993
+ width: 120px;
1281
994
  }
1282
995
  }
1283
- &[data-alternative-row-colors="true"] {
1284
- tbody tr:nth-child(odd) {
1285
- background-color: var(--_gray-300);
996
+ }
997
+ &.tabs__hr {
998
+ .tabs {
999
+ flex-direction: column;
1000
+ .tabs__container {
1286
1001
  width: 100%;
1287
1002
  }
1288
1003
  }
1289
- thead {
1290
- height: var(--_ctm-lt-hr-ht);
1291
- tr {
1292
- th {
1293
- padding: var(--_ctm-lt-hr-cl-pg);
1294
- text-align: var(--_ctm-lt-ct-at, var(--_ctm-dn-hr-tt-tt-an));
1295
- border: 0;
1296
- background-color: var(--_ctm-dn-te-hr-bd-cr);
1297
- color: var(--_ctm-dn-hr-tt-cr);
1298
- font-family: var(--_ctm-dn-hr-tt-ft-fy), sans-serif;
1299
- font-size: var(--_ctm-dn-hr-tt-ft-se);
1300
- font-weight: var(--_ctm-dn-hr-tt-ft-wt);
1301
- font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
1302
- letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
1303
- line-height: var(--_ctm-dn-hr-tt-le-ht);
1304
- text-decoration: var(--_ctm-dn-hr-tt-ue);
1305
- }
1306
- }
1307
- }
1308
- tbody {
1309
- tr {
1310
- padding: var(--_ctm-lt-rw-cl-pg);
1311
- height: var(--_ctm-lt-rw-ht);
1312
- background-color: var(--_ctm-dn-te-rw-bd-cr);
1313
- text-align: var(--_ctm-lt-ct-at);
1314
- th,
1315
- td {
1316
- border: 0;
1317
- padding: inherit;
1318
- color: var(--_ctm-dn-te-rw-cr);
1319
- font-family: var(--_ctm-dn-te-rw-ft-fy), sans-serif;
1320
- font-size: var(--_ctm-dn-te-rw-ft-se);
1321
- font-weight: var(--_ctm-dn-te-rw-ft-wt);
1322
- font-style: var(--_ctm-dn-te-rw-ft-se-ic);
1323
- text-align: var(--_ctm-dn-te-rw-tt-an);
1324
- letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
1325
- line-height: var(--_ctm-dn-te-rw-le-ht);
1326
- text-decoration: var(--_ctm-dn-te-rw-ue);
1004
+ }
1005
+ .tabs {
1006
+ display: flex;
1007
+ gap: 12px;
1008
+
1009
+ .tabs__container {
1010
+ display: flex;
1011
+
1012
+ background-color: var(--_gray-100);
1013
+ .tab {
1014
+ text-align: left;
1015
+ padding-left: 10px;
1016
+ span {
1017
+ padding: 8px;
1018
+ &.active {
1019
+ border-bottom: 2px solid var(--_primary-400);
1020
+ }
1327
1021
  }
1328
1022
  }
1023
+ // .tab__content {
1024
+ // }
1329
1025
  }
1330
1026
  }
1331
- .pagination_container {
1332
- display: flex;
1333
- justify-content: center;
1334
- align-items: center;
1335
- gap: 10px;
1336
- button {
1337
- font-size: 16px;
1338
- // padding: 10px 20px;
1339
- // background-color: #000;
1340
- color: #fff;
1341
- border: none;
1342
- cursor: pointer;
1343
- // border-radius: 10px;
1027
+ }
1028
+ // tabs
1029
+ .tabs__container {
1030
+ display: flex;
1031
+ position: relative;
1032
+ .tab {
1033
+ flex: 1;
1034
+ padding-block: 20px;
1035
+ font-weight: 600;
1036
+ text-align: center;
1037
+ cursor: pointer;
1038
+ position: relative;
1039
+ &.tab__active {
1040
+ font-weight: bold;
1344
1041
  }
1345
- span {
1042
+ }
1043
+ .tab__active-indicator {
1044
+ position: absolute;
1045
+ bottom: 0;
1046
+ left: 0;
1047
+ height: 2px;
1048
+ background-color: #000;
1049
+ transition:
1050
+ left 0.3s ease,
1051
+ width 0.3s ease;
1052
+ }
1053
+ }
1054
+
1055
+ // accordion tabs
1056
+ .tab__accordion {
1057
+ display: flex;
1058
+ flex-direction: column;
1059
+ .tab__container {
1060
+ .tab {
1061
+ display: flex;
1062
+ padding-inline: 2px;
1063
+ border-bottom: 1px solid var(--_gray-200);
1064
+ position: relative;
1346
1065
  cursor: pointer;
1347
- color: var(
1348
- --_ctm-mob-dn-pn-dt-se-cr,
1349
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
1350
- );
1351
- font-family: var(
1352
- --_ctm-mob-dn-pn-dt-se-ft-fy,
1353
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
1354
- ),
1355
- sans-serif;
1356
- font-size: var(
1357
- --_ctm-mob-dn-pn-dt-se-ft-se,
1358
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1359
- );
1360
- font-weight: var(
1361
- --_ctm-mob-dn-pn-dt-se-ft-wt,
1362
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1363
- );
1364
- font-style: var(
1365
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1366
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1367
- );
1368
- text-align: var(
1369
- --_ctm-mob-dn-pn-dt-se-tt-an,
1370
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1371
- );
1372
- letter-spacing: var(
1373
- --_ctm-mob-dn-pn-dt-se-lr-sg,
1374
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1375
- );
1376
- line-height: var(
1377
- --_ctm-mob-dn-pn-dt-se-le-ht,
1378
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1379
- );
1380
- text-decoration: var(
1381
- --_ctm-mob-dn-pn-dt-se-ue,
1382
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1383
- );
1384
- }
1385
- .active {
1386
1066
  span {
1387
- background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
1388
- padding: 2px;
1067
+ padding-block: 12px;
1068
+ display: inline-block;
1069
+ }
1070
+ .active {
1071
+ border-bottom: 2px solid var(--_primary-400);
1072
+ }
1073
+ &.inactive {
1074
+ height: 0px;
1389
1075
  }
1390
1076
  }
1391
- }
1392
- .loadmore_conatiner {
1393
- display: flex;
1394
- justify-content: center;
1395
- align-items: center;
1396
- gap: 10px;
1397
- margin-top: 10px;
1398
- button {
1399
- padding: 10px;
1400
- cursor: pointer;
1401
- color: var(
1402
- --_ctm-mob-dn-sw-me-is-bn-cr,
1403
- var(--_ctm-tab-dn-sw-me-is-bn-cr, var(--_ctm-dn-sw-me-is-bn-cr))
1404
- );
1405
- font-family: var(
1406
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1407
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1408
- ),
1409
- sans-serif;
1410
- font-size: var(
1411
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
1412
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1413
- );
1414
- font-weight: var(
1415
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1416
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1417
- );
1418
- font-style: var(
1419
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1420
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1421
- );
1422
- text-align: var(
1423
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
1424
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1425
- );
1426
- letter-spacing: var(
1427
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1428
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1429
- );
1430
- line-height: var(
1431
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
1432
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1433
- );
1434
- text-decoration: var(
1435
- --_ctm-mob-dn-sw-me-is-bn-ue,
1436
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1437
- );
1438
- background-color: var(
1439
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1440
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1441
- );
1442
- border-color: var(
1443
- --_show-border-im-se,
1444
- var(
1445
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
1446
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1447
- )
1448
- );
1449
- border-style: var(
1450
- --_show-border-im-se,
1451
- var(
1452
- --_ctm-mob-dn-sw-me-is-bn-br-se,
1453
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1454
- )
1455
- );
1456
- border-width: var(
1457
- --_show-border-im-se,
1458
- var(
1459
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
1460
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1461
- )
1462
- );
1463
- border-radius: var(
1464
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
1465
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1466
- );
1467
- box-shadow: var(
1468
- --_show-shadow-im-se,
1469
- var(
1470
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1471
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1472
- )
1473
- var(
1474
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
1475
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1476
- )
1477
- var(
1478
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1479
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1480
- )
1481
- var(
1482
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1483
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1484
- )
1485
- );
1077
+ .tab__content {
1078
+ padding-block: 20px;
1079
+ &.d-none {
1080
+ display: none;
1081
+ }
1082
+ &.d-block {
1083
+ display: block;
1084
+ }
1486
1085
  }
1487
1086
  }
1488
1087
  }