@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.scss CHANGED
@@ -9,8 +9,7 @@
9
9
  // padding: var(--_lt-pg);
10
10
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
11
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
13
-
12
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
13
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
14
  // height: ;
16
15
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -18,6 +17,21 @@
18
17
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
18
  // );
20
19
 
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
+ );
21
35
  & > .wrapper {
22
36
  width: 100%;
23
37
  // height: 100%;
@@ -25,6 +39,25 @@
25
39
  &[data-show-shadow="false"] {
26
40
  --_show-shadow: none;
27
41
  }
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
+ }
28
61
  .text-element {
29
62
  color: #333;
30
63
  font-family: Lato;
@@ -34,59 +67,57 @@
34
67
  line-height: 18px;
35
68
  margin-bottom: 6px;
36
69
  }
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
- .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
70
 
86
- .horizontal {
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 {
87
80
  display: flex;
88
- flex-direction: row;
89
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
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
+ }
90
121
 
91
122
  .item {
92
123
  display: flex;
@@ -153,6 +184,83 @@
153
184
  var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
154
185
  )
155
186
  );
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
+ );
156
264
 
157
265
  .each {
158
266
  color: var(
@@ -233,15 +341,13 @@
233
341
  var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
234
342
  );
235
343
  }
236
-
237
344
  .off__price {
238
345
  font-size: 12px;
239
346
  display: flex;
240
347
  justify-content: space-around;
241
348
  gap: 10px;
242
349
  align-items: center;
243
-
244
- .offer__price {
350
+ .saving__amount {
245
351
  color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
246
352
  font-family: var(
247
353
  --_ctm-mob-dn-ss-ft-fy,
@@ -278,7 +384,7 @@
278
384
  );
279
385
  }
280
386
 
281
- .discount__price {
387
+ .actual__price {
282
388
  color: var(
283
389
  --_ctm-mob-dn-al-pe-cr,
284
390
  var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
@@ -318,7 +424,6 @@
318
424
  );
319
425
  }
320
426
  }
321
-
322
427
  .units {
323
428
  color: var(
324
429
  --_ctm-mob-dn-pe-pr-ut-cr,
@@ -359,119 +464,317 @@
359
464
  );
360
465
  }
361
466
  }
362
- }
363
467
 
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)));
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
+ }
368
507
 
369
- .item {
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;
370
624
  display: flex;
625
+ justify-content: space-around;
626
+ gap: 10px;
371
627
  align-items: center;
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))
385
- );
628
+ }
386
629
 
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
- )
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))
393
634
  );
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
- )
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))
400
643
  );
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
- )
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))
407
647
  );
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))
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))
411
651
  );
412
-
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
- )
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))
655
+ );
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))
431
659
  );
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))
663
+ );
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))
667
+ );
668
+ }
669
+ .horizontal {
670
+ display: flex;
671
+ flex-direction: row;
672
+ flex-wrap: wrap;
432
673
 
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))
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))
674
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
675
+ }
676
+
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;
691
+
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))
458
720
  );
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))
721
+ border-style: var(
722
+ --_show-border-im-se,
723
+ var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
462
724
  );
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))
725
+ border-width: var(
726
+ --_show-border-im-se,
727
+ var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
466
728
  );
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))
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))
470
736
  );
471
- }
472
-
473
- .off__price {
474
- .hilight__price {
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 {
475
778
  color: var(
476
779
  --_ctm-mob-dn-pt-pe-cr,
477
780
  var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
@@ -510,8 +813,89 @@
510
813
  var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
511
814
  );
512
815
  }
513
-
514
- .secondary__price {
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 {
515
899
  color: var(
516
900
  --_ctm-mob-dn-pe-pr-ut-cr,
517
901
  var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
@@ -551,537 +935,554 @@
551
935
  );
552
936
  }
553
937
  }
554
-
555
- .discount__price {
938
+ .active {
556
939
  display: flex;
557
- justify-content: space-around;
558
- gap: 10px;
559
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
+
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
+ );
1014
+
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
+ }
560
1054
  .price {
561
1055
  color: var(
562
- --_ctm-mob-dn-al-pe-cr,
563
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
1056
+ --_ctm-mob-dn-pt-pe-cr,
1057
+ var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
564
1058
  );
565
1059
  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))
1060
+ --_ctm-mob-dn-pt-pe-ft-fy,
1061
+ var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
568
1062
  ),
569
1063
  sans-serif;
570
1064
  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))
1065
+ --_ctm-mob-dn-pt-pe-ft-se,
1066
+ var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
573
1067
  );
574
1068
  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))
1069
+ --_ctm-mob-dn-pt-pe-ft-wt,
1070
+ var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
577
1071
  );
578
1072
  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))
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))
581
1075
  );
582
1076
  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))
1077
+ --_ctm-mob-dn-pt-pe-tt-an,
1078
+ var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
585
1079
  );
586
1080
  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))
1081
+ --_ctm-mob-dn-pt-pe-lr-sg,
1082
+ var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
589
1083
  );
590
1084
  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))
1085
+ --_ctm-mob-dn-pt-pe-le-ht,
1086
+ var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
593
1087
  );
594
1088
  text-decoration: var(
595
- --_ctm-mob-dn-al-pe-ue,
596
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
1089
+ --_ctm-mob-dn-pt-pe-ue,
1090
+ var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
597
1091
  );
598
1092
  }
599
-
600
- .save__price {
601
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
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
+ );
602
1180
  font-family: var(
603
- --_ctm-mob-dn-ss-ft-fy,
604
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
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))
605
1183
  ),
606
1184
  sans-serif;
607
1185
  font-size: var(
608
- --_ctm-mob-dn-ss-ft-se,
609
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
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))
610
1188
  );
611
1189
  font-weight: var(
612
- --_ctm-mob-dn-ss-ft-wt,
613
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
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))
614
1192
  );
615
1193
  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))
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))
618
1196
  );
619
1197
  text-align: var(
620
- --_ctm-mob-dn-ss-tt-an,
621
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
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))
622
1200
  );
623
1201
  letter-spacing: var(
624
- --_ctm-mob-dn-ss-lr-sg,
625
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
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))
626
1204
  );
627
1205
  line-height: var(
628
- --_ctm-mob-dn-ss-le-ht,
629
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
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))
630
1208
  );
631
1209
  text-decoration: var(
632
- --_ctm-mob-dn-ss-ue,
633
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
1210
+ --_ctm-mob-dn-pe-pr-ut-ue,
1211
+ var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
634
1212
  );
635
1213
  }
636
1214
  }
637
1215
  }
638
1216
  }
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
- );
1217
+ .table-content {
1218
+ border-collapse: collapse;
936
1219
  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))
1220
+ --_ctm-mob-dn-te-bd-cr,
1221
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
939
1222
  );
940
1223
  border-color: var(
941
1224
  --_show-border-im-se,
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
- )
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)
946
1227
  );
947
1228
  border-style: var(
948
1229
  --_show-border-im-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
- )
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)
953
1232
  );
954
1233
  border-width: var(
955
1234
  --_show-border-im-se,
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
- )
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)
960
1237
  );
961
1238
  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))
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)
964
1242
  );
965
1243
  box-shadow: var(
966
1244
  --_show-shadow-im-se,
967
1245
  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))
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)))
970
1248
  )
971
1249
  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))
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)))
974
1252
  )
975
1253
  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))
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)))
978
1256
  )
979
1257
  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))
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)))
982
1260
  )
983
1261
  );
984
- }
985
- }
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
+ }
986
1277
 
987
- // horizontal tabs
988
- .tabs__main {
989
- &.tabs__vertical {
990
- .tabs {
991
- .tabs__container {
992
- flex-direction: column;
993
- width: 120px;
1278
+ tbody tr td:last-child,
1279
+ thead tr th:last-child {
1280
+ border-right: none;
994
1281
  }
995
1282
  }
996
- }
997
- &.tabs__hr {
998
- .tabs {
999
- flex-direction: column;
1000
- .tabs__container {
1283
+ &[data-alternative-row-colors="true"] {
1284
+ tbody tr:nth-child(odd) {
1285
+ background-color: var(--_gray-300);
1001
1286
  width: 100%;
1002
1287
  }
1003
1288
  }
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
- }
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);
1021
1305
  }
1022
1306
  }
1023
- // .tab__content {
1024
- // }
1025
1307
  }
1026
- }
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;
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);
1327
+ }
1328
+ }
1041
1329
  }
1042
1330
  }
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;
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;
1065
1342
  cursor: pointer;
1343
+ // border-radius: 10px;
1344
+ }
1345
+ span {
1346
+ 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 {
1066
1386
  span {
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;
1387
+ background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
1388
+ padding: 2px;
1075
1389
  }
1076
1390
  }
1077
- .tab__content {
1078
- padding-block: 20px;
1079
- &.d-none {
1080
- display: none;
1081
- }
1082
- &.d-block {
1083
- display: block;
1084
- }
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
+ );
1085
1486
  }
1086
1487
  }
1087
1488
  }