@sc-360-v2/storefront-cms-library 0.5.55 → 0.5.58

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 (24) hide show
  1. package/dist/add-order.scss +3 -4
  2. package/dist/builder.js +1 -1
  3. package/dist/bundle.scss +2584 -2567
  4. package/dist/button copy.scss +2 -2
  5. package/dist/button.scss +2 -1
  6. package/dist/hotspot.scss +13 -4
  7. package/dist/language-selector.scss +1 -1
  8. package/dist/mega-menu.scss +2 -8
  9. package/dist/menu-v2.scss +1 -5
  10. package/dist/order-status.scss +16 -5
  11. package/dist/profile.scss +113 -42
  12. package/dist/scroll.scss +24 -0
  13. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +15 -15
  14. package/dist/types/builder/tools/element-edit/bundle.d.ts +20 -10
  15. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +15 -15
  16. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +225 -0
  17. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +35 -35
  18. package/dist/types/builder/tools/element-edit/coupon.d.ts +10 -10
  19. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +233 -31
  20. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +33 -0
  21. package/dist/types/builder/tools/element-edit/profile.d.ts +7 -0
  22. package/dist/types/builder/tools/element-edit/scroll.d.ts +18 -0
  23. package/dist/types/builder/tools/element-edit/video.d.ts +15 -0
  24. package/package.json +131 -131
package/dist/bundle.scss CHANGED
@@ -1,2567 +1,2584 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $overflowSelector: ".flex__overflow";
5
- // --_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se
6
-
7
- $resizerId: "[data-cms-tool='cms-element-resizer']";
8
- $resizeActive: '[data-cms-element-resizer="true"]';
9
-
10
- @mixin NAVIGATION_STYLES($type: 1) {
11
- $TYPE: "cy";
12
- @if ($type == 2) {
13
- $TYPE: "pt";
14
- }
15
- $size: var(
16
- --_sf-icn-size,
17
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-se, 16px)}
18
- );
19
- $clr: var(
20
- --_sf-icn-clr,
21
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-c1, #000)}
22
- );
23
- $perc: 1.75;
24
- display: var(--_d-flex);
25
- align-items: center;
26
- justify-content: center;
27
- width: calc(#{$size} * #{$perc});
28
- height: calc(#{$size} * #{$perc});
29
- background: var(
30
- --_sf-icn-bg,
31
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)}
32
- );
33
- border-radius: var(
34
- --_sf-icn-brs,
35
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)}
36
- );
37
- // Border is only drawn when the "Show Border" toggle is on. The renderer emits
38
- // data-show-border="false" when the toggle is off; an absent/"true" value keeps
39
- // the border (so existing arrows that don't set the attribute are unaffected).
40
- &:not([data-show-border="false"]) {
41
- border-color: var(
42
- --_sf-icn-br,
43
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)}
44
- );
45
- border-width: var(
46
- --_sf-icn-bw,
47
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)}
48
- );
49
- border-style: var(
50
- --_sf-icn-bs,
51
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)}
52
- );
53
- }
54
- // Hide the arrow glyph when the "Show Icon" toggle is off.
55
- &[data-show-icon="false"] > span {
56
- display: none;
57
- }
58
- &:disabled {
59
- opacity: 0.65;
60
- cursor: no-drop;
61
- }
62
-
63
- &:hover {
64
- --_sf-icn-size: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-se)};
65
- --_sf-icn-clr: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-c1)};
66
- --_sf-icn-bg: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-bd-cr)};
67
- --_sf-icn-br: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-cr)};
68
- --_sf-icn-bw: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-wh)};
69
- --_sf-icn-bs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-se)};
70
- --_sf-icn-brs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-rs)};
71
- }
72
- & > span {
73
- display: var(--_d-flex);
74
-
75
- svg {
76
- width: #{$size};
77
- height: #{$size};
78
-
79
- path {
80
- stroke: #{$clr};
81
- }
82
- }
83
- }
84
- }
85
- [data-div-type="element"] {
86
- &[data-element-type="bundle"] {
87
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
88
-
89
- // width: var(--_sf-con-nw-wh);--_ctm-ele-nw-wh-vl
90
- // width: var(
91
- // --_sf-mob-el-wh-st-mx,
92
- // var(
93
- // --_sf-tab-el-wh-st-mx,
94
- // var(
95
- // --_sf-el-wh-st-mx,
96
- // calc(
97
- // 1% *
98
- // var(
99
- // --_ctm-mob-bun-ele-nw-wh-vl,
100
- // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
101
- // )
102
- // )
103
- // )
104
- // )
105
- // );
106
- width: var(
107
- --_sf-el-wh-st-mx,
108
- calc(
109
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
110
- )
111
- );
112
- // min-height: var();
113
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
114
-
115
- // &[data-view-state="full"] {
116
- // height: auto;
117
- // }
118
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
119
-
120
- // --_aspect-ratio: calc(
121
- // 1 *
122
- // (
123
- // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
124
- // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
125
- // )
126
- // );
127
- // &[data-view-state="full"] {
128
- // & > .wrapper {
129
- // & > div {
130
- // height: 100%;
131
- // }
132
- // }
133
- // }
134
-
135
- // height: auto;
136
-
137
- // margin: var(
138
- // --_ctm-mob-bun-lt-mn,
139
- // var(
140
- // --_ctm-tab-bun-lt-mn,
141
- // var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
142
- // )
143
- // );
144
-
145
- // &:not(:has(#{$resizerId}#{$resizeActive})) {
146
- // min-height: 100px !important;
147
- // }
148
-
149
- & > .wrapper {
150
- width: 100%;
151
- // height: 100%;
152
- }
153
- .embla {
154
- width: 100%;
155
- // height: 100%;
156
- position: relative;
157
- display: flex;
158
- flex-direction: column;
159
- overflow: var(--_ctm-lt-ow-ss);
160
-
161
- .embla__viewport {
162
- width: 100%;
163
- height: 100%;
164
- position: relative;
165
- display: flex;
166
- flex-direction: column;
167
-
168
- // overflow: hidden;
169
-
170
- .embla__container {
171
- width: 100%;
172
- height: 100%;
173
- display: grid;
174
- grid-template-rows: 100%;
175
-
176
- grid-template-columns: repeat(
177
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
178
- calc(
179
- (
180
- 100% -
181
- (
182
- var(
183
- --_ctm-mob-lt-is-pr-se,
184
- var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
185
- ) -
186
- 1
187
- ) *
188
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
189
- ) /
190
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
191
- )
192
- );
193
-
194
- grid-auto-flow: column;
195
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
196
-
197
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
198
- height: calc(
199
- 100% - calc(
200
- var(
201
- --_ctm-mob-dn-pn-as-aw-se,
202
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
203
- ) +
204
- 10px
205
- )
206
- );
207
- }
208
-
209
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
210
- height: calc(
211
- 100% - calc(
212
- var(
213
- --_ctm-mob-dn-pn-le-le-ht,
214
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
215
- ) +
216
- 20px
217
- )
218
- );
219
- }
220
-
221
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
222
- height: calc(
223
- 100% - calc(
224
- var(
225
- --_ctm-mob-dn-pn-ds-dt-se,
226
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
227
- ) +
228
- 20px
229
- )
230
- );
231
- }
232
-
233
- .embla__slide {
234
- width: 100%;
235
- height: 100%;
236
- }
237
- }
238
- }
239
- &:not([data-display-style="Column"]) {
240
- .embla__container {
241
- grid-auto-columns: calc(
242
- (
243
- 100% -
244
- (
245
- var(
246
- --_ctm-mob-lt-is-pr-se,
247
- var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
248
- ) -
249
- 1
250
- ) *
251
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
252
- ) /
253
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
254
- );
255
- }
256
- }
257
-
258
- &[data-display-style="Column"] {
259
- // overflow: unset;
260
-
261
- .embla__viewport {
262
- .embla__container {
263
- display: flex;
264
- .embla__slide {
265
- width: unset;
266
- height: 100%;
267
- aspect-ratio: 1.3 / 2;
268
- }
269
- }
270
- }
271
- }
272
-
273
- .arrow-navigation {
274
- display: flex;
275
- position: absolute;
276
- top: 50%;
277
- left: 50%;
278
- width: 100%;
279
- justify-content: space-between;
280
- transform: translate(-50%, -50%);
281
- // padding-left: 20px;
282
- &[data-control-type="Side"] {
283
- .left-button,
284
- .right-button {
285
- background-color: transparent;
286
- }
287
- }
288
- &[data-background-shape="Round"] {
289
- .left-button,
290
- .right-button {
291
- background-color: #f2f5f5;
292
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
293
- }
294
- }
295
- &[data-control-type="Bottom-Overflow"] {
296
- transform: translateX(-50%);
297
- width: 100%;
298
- justify-content: center;
299
- gap: 12px;
300
- top: unset;
301
- bottom: 6px;
302
- }
303
- &[data-control-type="Bottom"] {
304
- transform: unset;
305
- position: static;
306
- width: 100%;
307
- justify-content: center;
308
- gap: 12px;
309
- margin-top: 10px;
310
- }
311
- .left-button {
312
- padding: 10px;
313
- border-radius: 50%;
314
- border: none;
315
- width: var(
316
- --_ctm-mob-dn-pn-as-aw-se,
317
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
318
- );
319
- height: var(
320
- --_ctm-mob-dn-pn-as-aw-se,
321
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
322
- );
323
-
324
- display: flex;
325
- align-items: center;
326
- justify-content: center;
327
- cursor: pointer;
328
- outline: none;
329
- margin-left: 12px;
330
- &:disabled {
331
- & svg {
332
- path {
333
- stroke: rgb(192, 192, 192);
334
- }
335
- }
336
- }
337
- }
338
- .right-button {
339
- border-radius: 50%;
340
- border: none;
341
- width: var(
342
- --_ctm-mob-dn-pn-as-aw-se,
343
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
344
- );
345
- height: var(
346
- --_ctm-mob-dn-pn-as-aw-se,
347
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
348
- );
349
-
350
- display: flex;
351
- align-items: center;
352
- justify-content: center;
353
- cursor: pointer;
354
- outline: none;
355
- margin-right: 12px;
356
- padding: 10px;
357
-
358
- &:disabled {
359
- & svg {
360
- path {
361
- stroke: rgb(192, 192, 192);
362
- }
363
- }
364
- }
365
- }
366
- .icon {
367
- display: flex;
368
-
369
- svg {
370
- width: calc(
371
- var(
372
- --_ctm-mob-dn-pn-as-aw-se,
373
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
374
- ) *
375
- 0.5
376
- );
377
- height: calc(
378
- var(
379
- --_ctm-mob-dn-pn-as-aw-se,
380
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
381
- ) *
382
- 0.5
383
- );
384
-
385
- path {
386
- stroke: var(
387
- --_ctm-mob-dn-pn-as-aw-cr,
388
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
389
- );
390
- }
391
- }
392
- }
393
-
394
- .left-button,
395
- .right-button {
396
- @include NAVIGATION_STYLES(2);
397
- }
398
- }
399
-
400
- &[data-control-type="Side"] {
401
- .embla__viewport {
402
- width: calc(100% - 120px);
403
- margin-inline: auto;
404
- }
405
- .left-button {
406
- position: absolute;
407
- left: 0;
408
- top: 50%;
409
- transform: translateY(-50%);
410
- z-index: 2;
411
-
412
- @include NAVIGATION_STYLES(1);
413
- }
414
- .right-button {
415
- position: absolute;
416
- z-index: 2;
417
- right: 0;
418
- top: 50%;
419
- transform: translateY(-50%);
420
-
421
- @include NAVIGATION_STYLES(1);
422
- }
423
-
424
- // :is(.left-button, .right-button) {
425
- // @include NAVIGATION_STYLES(1);
426
- // }
427
- }
428
-
429
- &[data-thumbnail-placement="top"] {
430
- flex-direction: column-reverse;
431
- }
432
- &[data-thumbnail-placement="bottom"] {
433
- flex-direction: column;
434
- }
435
- &[data-thumbnail-placement="left"] {
436
- flex-direction: row-reverse;
437
-
438
- .embla__thumbs {
439
- width: prepareMediaVariable(--_ctm-lt-tl-se);
440
- height: 100%;
441
-
442
- & .embla__thumbs__container {
443
- flex-direction: column;
444
- height: 100%;
445
- }
446
- }
447
- }
448
- &[data-thumbnail-placement="right"] {
449
- flex-direction: row;
450
- .embla__thumbs {
451
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
452
-
453
- height: 100%;
454
-
455
- & .embla__thumbs__container {
456
- flex-direction: column;
457
- height: 100%;
458
- }
459
- }
460
- }
461
- }
462
- .bundle__element__container {
463
- // height: 100%;
464
- background-color: var(
465
- --_ctm-mob-dn-wt-se-bd-cr,
466
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
467
- );
468
-
469
- border-color: var(
470
- --_ctm-mob-dn-wt-se-br-cr,
471
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
472
- );
473
-
474
- border-style: var(
475
- --_ctm-mob-dn-wt-se-br-se,
476
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
477
- );
478
-
479
- border-width: var(
480
- --_ctm-mob-dn-wt-se-br-wh,
481
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
482
- );
483
-
484
- border-radius: var(
485
- --_ctm-mob-dn-wt-se-br-rs,
486
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
487
- );
488
-
489
- box-shadow: var(
490
- --_show-shadow,
491
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
492
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
493
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
494
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
495
- );
496
-
497
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
498
- display: flex;
499
- flex-direction: column;
500
- // height: 100%;
501
-
502
- .bundle__tabs {
503
- width: 100%;
504
- background-color: var(
505
- --_ctm-mob-dn-be-ts-wt-se-bd-cr,
506
- var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr))
507
- );
508
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
509
- display: flex;
510
- flex-direction: column;
511
- --_sf-gp: var(
512
- --_ctm-mob-lt-im-sg,
513
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
514
- );
515
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
516
- row-gap: var(--_sf-gp);
517
- width: 100%;
518
- // height: 100%;
519
- // Border only drawn when the widget's "Show Border" toggle is on. The
520
- // renderer emits data-show-border="true"/"" on the .bundle__tabs container.
521
- &[data-show-border="true"] {
522
- border-color: var(
523
- --_ctm-mob-dn-be-ts-wt-se-br-cr,
524
- var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr))
525
- );
526
- border-style: var(
527
- --_ctm-mob-dn-be-ts-wt-se-br-se,
528
- var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se))
529
- );
530
- border-width: var(
531
- --_ctm-mob-dn-be-ts-wt-se-br-wh,
532
- var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh))
533
- );
534
- }
535
- border-radius: var(
536
- --_ctm-mob-dn-be-ts-wt-se-br-rs,
537
- var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs))
538
- );
539
- box-shadow: var(
540
- --_show-shadow,
541
- var(
542
- --_ctm-mob-dn-be-ts-wt-se-sw-ae,
543
- var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae))
544
- )
545
- var(
546
- --_ctm-mob-dn-be-ts-wt-se-sw-br,
547
- var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br))
548
- )
549
- var(
550
- --_ctm-mob-dn-be-ts-wt-se-sw-sd,
551
- var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd))
552
- )
553
- var(
554
- --_ctm-mob-dn-be-ts-wt-se-sw-cr,
555
- var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr))
556
- )
557
- );
558
- .profile__button {
559
- &[data-show-shadow="false"] {
560
- --_show-shadow: none;
561
- }
562
- &[data-icon-position="left"] {
563
- --_sf-fd-bn: row;
564
- }
565
- &[data-icon-position="right"] {
566
- --_sf-fd-bn: row-reverse;
567
- }
568
- &[data-icon-position="center"] {
569
- --_sf-fd-bn: row;
570
- }
571
-
572
- &:hover {
573
- --_sf-hr-bd-cr: var(
574
- --_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
575
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr))
576
- );
577
- --_sf-hr-br-cr: var(
578
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr,
579
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr))
580
- );
581
- --_sf-hr-br-se: var(
582
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-se,
583
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se))
584
- );
585
- --_sf-hr-br-wh: var(
586
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh,
587
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh))
588
- );
589
- --_sf-hr-br-rs: var(
590
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs,
591
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs))
592
- );
593
- --_sf-hr-at: var(
594
- --_ctm-mob-dn-be-ts-be-tb-hr-se-at,
595
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at))
596
- );
597
- --_sf-hr-in-ad-tt-sg: var(
598
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
599
- var(
600
- --_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
601
- var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg)
602
- )
603
- );
604
-
605
- // for shadow
606
- --_sf-hr-sw-ae: var(
607
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae,
608
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae))
609
- );
610
- --_sf-hr-sw-br: var(
611
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br,
612
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br))
613
- );
614
- --_sf-hr-sw-hr: var(
615
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr,
616
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr))
617
- );
618
- --_sf-hr-sw-cr: var(
619
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr,
620
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr))
621
- );
622
-
623
- // for font
624
-
625
- --_sf-hr-cr: var(
626
- --_ctm-mob-dn-be-ts-be-tb-hr-se-cr,
627
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr))
628
- );
629
- --_sf-hr-ft-fy: var(
630
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
631
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy))
632
- );
633
- --_sf-hr-ft-se: var(
634
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
635
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se))
636
- );
637
- --_sf-hr-ft-wt: var(
638
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt,
639
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt))
640
- );
641
- --_sf-hr-ft-se-ic: var(
642
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic,
643
- var(
644
- --_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic,
645
- var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic)
646
- )
647
- );
648
- --_sf-hr-tt-an: var(
649
- --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an,
650
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an))
651
- );
652
- --_sf-hr-lr-sg: var(
653
- --_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg,
654
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg))
655
- );
656
- --_sf-hr-le-ht: var(
657
- --_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht,
658
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht))
659
- );
660
-
661
- --_sf-hr-in-se: var(
662
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
663
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
664
- );
665
- --_sf-hr-in-se: var(
666
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
667
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
668
- );
669
- --_sf-hr-in-c1: var(
670
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1,
671
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1))
672
- );
673
- --_sf-hr-ue: var(
674
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ue,
675
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue))
676
- );
677
-
678
- // for pading and width
679
- --_sf-hr-pg: var(
680
- --_ctm-mob-dn-be-ts-be-tb-hr-se-pg,
681
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg))
682
- );
683
- --_sf-hr-wh: var(
684
- --_ctm-mob-dn-be-ts-be-tb-hr-se-wh,
685
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh))
686
- );
687
-
688
- &[data-hover-show-shadow="false"] {
689
- --_hover-show-shadow: none;
690
- }
691
- &[data-hover-show-icon="false"] {
692
- --_hover-show-icon: none;
693
- }
694
- }
695
-
696
- background-color: var(
697
- --_sf-hr-bd-cr,
698
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
699
- );
700
-
701
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
702
- display: flex;
703
- flex-direction: var(--_sf-fd-bn);
704
- align-items: center;
705
-
706
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
707
- gap: var(
708
- --_sf-hr-in-ad-tt-sg,
709
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
710
- );
711
-
712
- border-radius: var(
713
- --_sf-hr-br-rs,
714
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
715
- );
716
-
717
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
718
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
719
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
720
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
721
-
722
- &[data-show-border="true"] {
723
- border-color: var(
724
- --_sf-hr-br-cr,
725
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
726
- );
727
-
728
- border-style: var(
729
- --_sf-hr-br-se,
730
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
731
- );
732
-
733
- border-width: var(
734
- --_sf-hr-br-wh,
735
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
736
- );
737
- }
738
-
739
- // text styles
740
-
741
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
742
-
743
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
744
-
745
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
746
-
747
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
748
-
749
- font-style: var(
750
- --_sf-hr-ft-se-ic,
751
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
752
- );
753
-
754
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
755
-
756
- letter-spacing: var(
757
- --_sf-hr-lr-sg,
758
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
759
- );
760
-
761
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
762
-
763
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
764
-
765
- [data-element-style="Text"] {
766
- display: inline-block;
767
- width: 100%;
768
- }
769
-
770
- &[data-is-selected="true"] {
771
- --_sf-sd-bd-cr: var(
772
- --_ctm-mob-dn-me-sd-se-bd-cr,
773
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr))
774
- );
775
- --_sf-sd-br-cr: var(
776
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
777
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr))
778
- );
779
- --_sf-sd-br-se: var(
780
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
781
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se))
782
- );
783
- --_sf-sd-br-wh: var(
784
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
785
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh))
786
- );
787
- --_sf-sd-br-rs: var(
788
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
789
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs))
790
- );
791
- --_sf-sd-at: var(
792
- --_ctm-mob-dn-be-ts-be-tb-sd-se-at,
793
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at))
794
- );
795
- --_sf-sd-in-ad-tt-sg: var(
796
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
797
- var(
798
- --_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
799
- var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)
800
- )
801
- );
802
-
803
- // for shadow
804
- --_sf-sd-sw-ae: var(
805
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
806
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae))
807
- );
808
- --_sf-sd-sw-br: var(
809
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
810
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br))
811
- );
812
- --_sf-sd-sw-hr: var(
813
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
814
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr))
815
- );
816
- --_sf-sd-sw-cr: var(
817
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
818
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr))
819
- );
820
-
821
- // for font
822
-
823
- --_sf-sd-cr: var(
824
- --_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
825
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr))
826
- );
827
- --_sf-sd-ft-fy: var(
828
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
829
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy))
830
- );
831
- --_sf-sd-ft-se: var(
832
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
833
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se))
834
- );
835
- --_sf-sd-ft-wt: var(
836
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
837
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt))
838
- );
839
- --_sf-sd-ft-se-ic: var(
840
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
841
- var(
842
- --_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
843
- var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)
844
- )
845
- );
846
- --_sf-sd-tt-an: var(
847
- --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
848
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an))
849
- );
850
- --_sf-sd-lr-sg: var(
851
- --_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
852
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg))
853
- );
854
- --_sf-sd-le-ht: var(
855
- --_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
856
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht))
857
- );
858
-
859
- --_sf-sd-in-se: var(
860
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
861
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
862
- );
863
- --_sf-sd-in-se: var(
864
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
865
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
866
- );
867
- --_sf-sd-in-c1: var(
868
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
869
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1))
870
- );
871
- --_sf-sd-ue: var(
872
- --_ctm-mob-dn-be-ts-be-tb-hr-ue,
873
- var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue))
874
- );
875
-
876
- // for pading and width
877
- --_sf-sd-pg: var(
878
- --_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
879
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg))
880
- );
881
- --_sf-sd-wh: var(
882
- --_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
883
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh))
884
- );
885
-
886
- &[data-hover-show-shadow="false"] {
887
- --_hover-show-shadow: none;
888
- }
889
- &[data-hover-show-icon="false"] {
890
- --_hover-show-icon: none;
891
- }
892
-
893
- background-color: var(
894
- --_sf-sd-bd-cr,
895
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
896
- );
897
-
898
- padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
899
- display: flex;
900
- flex-direction: var(--_sf-fd-bn);
901
- align-items: center;
902
-
903
- justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
904
- gap: var(
905
- --_sf-sd-in-ad-tt-sg,
906
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
907
- );
908
-
909
- border-radius: var(
910
- --_sf-sd-br-rs,
911
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
912
- );
913
-
914
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
915
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
916
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
917
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
918
-
919
- &[data-show-border="true"] {
920
- border-color: var(
921
- --_sf-sd-br-cr,
922
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
923
- );
924
-
925
- border-style: var(
926
- --_sf-sd-br-se,
927
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
928
- );
929
-
930
- border-width: var(
931
- --_sf-sd-br-wh,
932
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
933
- );
934
- }
935
-
936
- // text styles
937
-
938
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
939
-
940
- font-family: var(
941
- --_sf-sd-ft-fy,
942
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)
943
- );
944
-
945
- font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
946
-
947
- font-weight: var(
948
- --_sf-sd-ft-wt,
949
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt)
950
- );
951
-
952
- font-style: var(
953
- --_sf-sd-ft-se-ic,
954
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
955
- );
956
-
957
- text-align: var(
958
- --_sf-sd-tt-an,
959
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an)
960
- );
961
-
962
- letter-spacing: var(
963
- --_sf-sd-lr-sg,
964
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
965
- );
966
-
967
- line-height: var(
968
- --_sf-sd-le-ht,
969
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht)
970
- );
971
-
972
- text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
973
-
974
- [data-element-style="Text"] {
975
- display: inline-block;
976
- width: 100%;
977
- }
978
- }
979
- }
980
- .embla {
981
- height: auto;
982
- .embla__viewport {
983
- .embla__container {
984
- display: flex;
985
- gap: prepareMediaVariable(--_ctm-dn-be-ts-wt-se-im-gp);
986
- .embla__slide {
987
- width: unset;
988
- }
989
- }
990
- }
991
- }
992
- }
993
- .category__tabs {
994
- width: 100%;
995
- background-color: var(
996
- --_ctm-mob-dn-cy-ts-wt-se-bd-cr,
997
- var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr))
998
- );
999
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
1000
- display: flex;
1001
- flex-direction: column;
1002
- --_sf-gp: var(
1003
- --_ctm-mob-lt-im-sg,
1004
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
1005
- );
1006
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1007
- row-gap: var(--_sf-gp);
1008
- width: 100%;
1009
- // height: 100%;
1010
- // Border only drawn when the widget's "Show Border" toggle is on. The
1011
- // renderer emits data-show-border="true"/"" on the .category__tabs container.
1012
- &[data-show-border="true"] {
1013
- border-color: var(
1014
- --_ctm-mob-dn-cy-ts-wt-se-br-cr,
1015
- var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr))
1016
- );
1017
- border-style: var(
1018
- --_ctm-mob-dn-cy-ts-wt-se-br-se,
1019
- var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se))
1020
- );
1021
- border-width: var(
1022
- --_ctm-mob-dn-cy-ts-wt-se-br-wh,
1023
- var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh))
1024
- );
1025
- }
1026
- border-radius: var(
1027
- --_ctm-mob-dn-cy-ts-wt-se-br-rs,
1028
- var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs))
1029
- );
1030
- box-shadow: var(
1031
- --_show-shadow,
1032
- var(
1033
- --_ctm-mob-dn-cy-ts-wt-se-sw-ae,
1034
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae))
1035
- )
1036
- var(
1037
- --_ctm-mob-dn-cy-ts-wt-se-sw-br,
1038
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br))
1039
- )
1040
- var(
1041
- --_ctm-mob-dn-cy-ts-wt-se-sw-sd,
1042
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd))
1043
- )
1044
- var(
1045
- --_ctm-mob-dn-cy-ts-wt-se-sw-cr,
1046
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr))
1047
- )
1048
- );
1049
- .profile__button {
1050
- &[data-show-shadow="false"] {
1051
- --_show-shadow: none;
1052
- }
1053
- &[data-icon-position="left"] {
1054
- --_sf-fd-bn: row;
1055
- }
1056
- &[data-icon-position="right"] {
1057
- --_sf-fd-bn: row-reverse;
1058
- }
1059
- &[data-icon-position="center"] {
1060
- --_sf-fd-bn: row;
1061
- }
1062
-
1063
- &:hover {
1064
- --_sf-hr-bd-cr: var(
1065
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
1066
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr))
1067
- );
1068
- --_sf-hr-br-cr: var(
1069
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr,
1070
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr))
1071
- );
1072
- --_sf-hr-br-se: var(
1073
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se,
1074
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se))
1075
- );
1076
- --_sf-hr-br-wh: var(
1077
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh,
1078
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh))
1079
- );
1080
- --_sf-hr-br-rs: var(
1081
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs,
1082
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs))
1083
- );
1084
- --_sf-hr-at: var(
1085
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-at,
1086
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at))
1087
- );
1088
- --_sf-hr-in-ad-tt-sg: var(
1089
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1090
- var(
1091
- --_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1092
- var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg)
1093
- )
1094
- );
1095
-
1096
- // for shadow
1097
- --_sf-hr-sw-ae: var(
1098
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae,
1099
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae))
1100
- );
1101
- --_sf-hr-sw-br: var(
1102
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br,
1103
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br))
1104
- );
1105
- --_sf-hr-sw-hr: var(
1106
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr,
1107
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr))
1108
- );
1109
- --_sf-hr-sw-cr: var(
1110
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr,
1111
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr))
1112
- );
1113
-
1114
- // for font
1115
-
1116
- --_sf-hr-cr: var(
1117
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr,
1118
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr))
1119
- );
1120
- --_sf-hr-ft-fy: var(
1121
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
1122
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy))
1123
- );
1124
- --_sf-hr-ft-se: var(
1125
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
1126
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se))
1127
- );
1128
- --_sf-hr-ft-wt: var(
1129
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt,
1130
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt))
1131
- );
1132
- --_sf-hr-ft-se-ic: var(
1133
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1134
- var(
1135
- --_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1136
- var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic)
1137
- )
1138
- );
1139
- --_sf-hr-tt-an: var(
1140
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an,
1141
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an))
1142
- );
1143
- --_sf-hr-lr-sg: var(
1144
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg,
1145
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg))
1146
- );
1147
- --_sf-hr-le-ht: var(
1148
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht,
1149
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht))
1150
- );
1151
-
1152
- --_sf-hr-in-se: var(
1153
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1154
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1155
- );
1156
- --_sf-hr-in-se: var(
1157
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1158
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1159
- );
1160
- --_sf-hr-in-c1: var(
1161
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1,
1162
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1))
1163
- );
1164
- --_sf-hr-ue: var(
1165
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue,
1166
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue))
1167
- );
1168
-
1169
- // for pading and width
1170
- --_sf-hr-pg: var(
1171
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg,
1172
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg))
1173
- );
1174
- --_sf-hr-wh: var(
1175
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh,
1176
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh))
1177
- );
1178
-
1179
- &[data-hover-show-shadow="false"] {
1180
- --_hover-show-shadow: none;
1181
- }
1182
- &[data-hover-show-icon="false"] {
1183
- --_hover-show-icon: none;
1184
- }
1185
- }
1186
-
1187
- background-color: var(
1188
- --_sf-hr-bd-cr,
1189
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1190
- );
1191
-
1192
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1193
- display: flex;
1194
- flex-direction: var(--_sf-fd-bn);
1195
- align-items: center;
1196
-
1197
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1198
- gap: var(
1199
- --_sf-hr-in-ad-tt-sg,
1200
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1201
- );
1202
-
1203
- border-radius: var(
1204
- --_sf-hr-br-rs,
1205
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1206
- );
1207
-
1208
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1209
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1210
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1211
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1212
-
1213
- &[data-show-border="true"] {
1214
- border-color: var(
1215
- --_sf-hr-br-cr,
1216
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1217
- );
1218
-
1219
- border-style: var(
1220
- --_sf-hr-br-se,
1221
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1222
- );
1223
-
1224
- border-width: var(
1225
- --_sf-hr-br-wh,
1226
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1227
- );
1228
- }
1229
-
1230
- // text styles
1231
-
1232
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1233
-
1234
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
1235
-
1236
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1237
-
1238
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
1239
-
1240
- font-style: var(
1241
- --_sf-hr-ft-se-ic,
1242
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1243
- );
1244
-
1245
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
1246
-
1247
- letter-spacing: var(
1248
- --_sf-hr-lr-sg,
1249
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1250
- );
1251
-
1252
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
1253
-
1254
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1255
-
1256
- [data-element-style="Text"] {
1257
- display: inline-block;
1258
- width: 100%;
1259
- }
1260
-
1261
- &[data-is-selected="true"] {
1262
- --_sf-sd-bd-cr: var(
1263
- --_ctm-mob-dn-me-sd-se-bd-cr,
1264
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr))
1265
- );
1266
- --_sf-sd-br-cr: var(
1267
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
1268
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr))
1269
- );
1270
- --_sf-sd-br-se: var(
1271
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
1272
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se))
1273
- );
1274
- --_sf-sd-br-wh: var(
1275
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
1276
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh))
1277
- );
1278
- --_sf-sd-br-rs: var(
1279
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
1280
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs))
1281
- );
1282
- --_sf-sd-at: var(
1283
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
1284
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at))
1285
- );
1286
- --_sf-sd-in-ad-tt-sg: var(
1287
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1288
- var(
1289
- --_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1290
- var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)
1291
- )
1292
- );
1293
-
1294
- // for shadow
1295
- --_sf-sd-sw-ae: var(
1296
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
1297
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae))
1298
- );
1299
- --_sf-sd-sw-br: var(
1300
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
1301
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br))
1302
- );
1303
- --_sf-sd-sw-hr: var(
1304
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
1305
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr))
1306
- );
1307
- --_sf-sd-sw-cr: var(
1308
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
1309
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr))
1310
- );
1311
-
1312
- // for font
1313
-
1314
- --_sf-sd-cr: var(
1315
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
1316
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr))
1317
- );
1318
- --_sf-sd-ft-fy: var(
1319
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
1320
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy))
1321
- );
1322
- --_sf-sd-ft-se: var(
1323
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
1324
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se))
1325
- );
1326
- --_sf-sd-ft-wt: var(
1327
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
1328
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt))
1329
- );
1330
- --_sf-sd-ft-se-ic: var(
1331
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1332
- var(
1333
- --_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1334
- var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)
1335
- )
1336
- );
1337
- --_sf-sd-tt-an: var(
1338
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
1339
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an))
1340
- );
1341
- --_sf-sd-lr-sg: var(
1342
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
1343
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg))
1344
- );
1345
- --_sf-sd-le-ht: var(
1346
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
1347
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht))
1348
- );
1349
-
1350
- --_sf-sd-in-se: var(
1351
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1352
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1353
- );
1354
- --_sf-sd-in-se: var(
1355
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1356
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1357
- );
1358
- --_sf-sd-in-c1: var(
1359
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
1360
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1))
1361
- );
1362
- --_sf-sd-ue: var(
1363
- --_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
1364
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue))
1365
- );
1366
-
1367
- // for pading and width
1368
- --_sf-sd-pg: var(
1369
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
1370
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg))
1371
- );
1372
- --_sf-sd-wh: var(
1373
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
1374
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh))
1375
- );
1376
-
1377
- &[data-hover-show-shadow="false"] {
1378
- --_hover-show-shadow: none;
1379
- }
1380
- &[data-hover-show-icon="false"] {
1381
- --_hover-show-icon: none;
1382
- }
1383
-
1384
- background-color: var(
1385
- --_sf-sd-bd-cr,
1386
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1387
- );
1388
-
1389
- padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1390
- display: flex;
1391
- flex-direction: var(--_sf-fd-bn);
1392
- align-items: center;
1393
-
1394
- justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1395
- gap: var(
1396
- --_sf-sd-in-ad-tt-sg,
1397
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1398
- );
1399
-
1400
- border-radius: var(
1401
- --_sf-sd-br-rs,
1402
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1403
- );
1404
-
1405
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1406
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1407
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1408
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1409
-
1410
- &[data-show-border="true"] {
1411
- border-color: var(
1412
- --_sf-sd-br-cr,
1413
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1414
- );
1415
-
1416
- border-style: var(
1417
- --_sf-sd-br-se,
1418
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1419
- );
1420
-
1421
- border-width: var(
1422
- --_sf-sd-br-wh,
1423
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1424
- );
1425
- }
1426
-
1427
- // text styles
1428
-
1429
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1430
-
1431
- font-family: var(
1432
- --_sf-sd-ft-fy,
1433
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)
1434
- );
1435
-
1436
- font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1437
-
1438
- font-weight: var(
1439
- --_sf-sd-ft-wt,
1440
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt)
1441
- );
1442
-
1443
- font-style: var(
1444
- --_sf-sd-ft-se-ic,
1445
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1446
- );
1447
-
1448
- text-align: var(
1449
- --_sf-sd-tt-an,
1450
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an)
1451
- );
1452
-
1453
- letter-spacing: var(
1454
- --_sf-sd-lr-sg,
1455
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1456
- );
1457
-
1458
- line-height: var(
1459
- --_sf-sd-le-ht,
1460
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht)
1461
- );
1462
-
1463
- text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1464
-
1465
- [data-element-style="Text"] {
1466
- display: inline-block;
1467
- width: 100%;
1468
- }
1469
- }
1470
- }
1471
- .embla {
1472
- height: auto;
1473
- .embla__viewport {
1474
- .embla__container {
1475
- display: flex;
1476
- gap: prepareMediaVariable(--_ctm-dn-cy-ts-wt-se-im-gp);
1477
- .embla__slide {
1478
- width: unset;
1479
- }
1480
- }
1481
- }
1482
- }
1483
- }
1484
- .single__bundle_container {
1485
- display: flex;
1486
- flex-direction: column;
1487
- gap: 16px;
1488
- height: 100%;
1489
-
1490
- .bundle__header {
1491
- display: flex;
1492
- flex-direction: row;
1493
- align-items: center;
1494
- justify-content: space-between;
1495
-
1496
- .bundle__title {
1497
- font-family: prepareMediaVariable(--_ctm-dn-hg-dn-ft-fy);
1498
- font-size: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se);
1499
- color: prepareMediaVariable(--_ctm-dn-hg-dn-cr);
1500
- font-weight: prepareMediaVariable(--_ctm-dn-hg-dn-ft-wt);
1501
- font-style: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se-ic);
1502
- text-decoration: prepareMediaVariable(--_ctm-dn-hg-dn-ue);
1503
- text-align: prepareMediaVariable(--_ctm-dn-hg-dn-tt-an);
1504
- letter-spacing: vaprepareMediaVariabler(--_ctm-dn-hg-dn-lr-sg);
1505
- line-height: prepareMediaVariable(--_ctm-dn-hg-dn-le-ht);
1506
- background-color: prepareMediaVariable(--_ctm-dn-hg-dn-bd-cr);
1507
- border-width: prepareMediaVariable(--_ctm-dn-hg-dn-br-wh);
1508
- border-color: prepareMediaVariable(--_ctm-dn-hg-dn-br-cr);
1509
- border-style: prepareMediaVariable(--_ctm-dn-hg-dn-br-se);
1510
- border-radius: prepareMediaVariable(--_ctm-dn-hg-dn-br-rs);
1511
- box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae)
1512
- prepareMediaVariable(--_ctm-dn-hg-dn-sw-br)
1513
- prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd)
1514
- prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
1515
- }
1516
-
1517
- .bundle__description {
1518
- font-family: prepareMediaVariable(--_ctm-dn-dn-dn-ft-fy);
1519
- font-size: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se);
1520
- color: prepareMediaVariable(--_ctm-dn-dn-dn-cr);
1521
- font-weight: prepareMediaVariable(--_ctm-dn-dn-dn-ft-wt);
1522
- font-style: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se-ic);
1523
- text-decoration: prepareMediaVariable(--_ctm-dn-dn-dn-ue);
1524
- text-align: prepareMediaVariable(--_ctm-dn-dn-dn-tt-an);
1525
- letter-spacing: prepareMediaVariable(--_ctm-dn-dn-dn-lr-sg);
1526
- line-height: prepareMediaVariable(--_ctm-dn-dn-dn-le-ht);
1527
- background-color: prepareMediaVariable(--_ctm-dn-dn-dn-bd-cr);
1528
- border-width: prepareMediaVariable(--_ctm-dn-dn-dn-br-wh);
1529
- border-color: prepareMediaVariable(--_ctm-dn-dn-dn-br-cr);
1530
- border-style: prepareMediaVariable(--_ctm-dn-dn-dn-br-se);
1531
- border-radius: prepareMediaVariable(--_ctm-dn-dn-dn-br-rs);
1532
- box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae)
1533
- prepareMediaVariable(--_ctm-dn-dn-dn-sw-br)
1534
- prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd)
1535
- prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
1536
- }
1537
- .button__items {
1538
- display: flex;
1539
- align-items: center;
1540
- }
1541
- .btn__with__text[data-btn-name="bundleDetailPageButton"] {
1542
- justify-content: center;
1543
- &[data-show-shadow="false"] {
1544
- --_show-shadow: none;
1545
- }
1546
- &[data-icon-position="left"] {
1547
- --_sf-fd-bn: row;
1548
- }
1549
- &[data-icon-position="right"] {
1550
- --_sf-fd-bn: row-reverse;
1551
- }
1552
- &[data-icon-position="center"] {
1553
- --_sf-fd-bn: row;
1554
- }
1555
-
1556
- &:hover {
1557
- --_sf-hr-bd-cr: var(
1558
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1559
- var(
1560
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1561
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)
1562
- )
1563
- );
1564
- --_sf-hr-br-cr: var(
1565
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1566
- var(
1567
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1568
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)
1569
- )
1570
- );
1571
- --_sf-hr-br-se: var(
1572
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
1573
- var(
1574
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
1575
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)
1576
- )
1577
- );
1578
- --_sf-hr-br-wh: var(
1579
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1580
- var(
1581
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1582
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)
1583
- )
1584
- );
1585
- --_sf-hr-br-rs: var(
1586
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1587
- var(
1588
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1589
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)
1590
- )
1591
- );
1592
- --_sf-hr-at: var(
1593
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
1594
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at))
1595
- );
1596
- --_sf-hr-gp: var(
1597
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
1598
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp))
1599
- );
1600
-
1601
- // for shadow
1602
- --_sf-hr-sw-ae: var(
1603
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1604
- var(
1605
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1606
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)
1607
- )
1608
- );
1609
- --_sf-hr-sw-br: var(
1610
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1611
- var(
1612
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1613
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)
1614
- )
1615
- );
1616
- --_sf-hr-sw-hr: var(
1617
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1618
- var(
1619
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1620
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)
1621
- )
1622
- );
1623
- --_sf-hr-sw-cr: var(
1624
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1625
- var(
1626
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1627
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)
1628
- )
1629
- );
1630
-
1631
- // for font
1632
-
1633
- --_sf-hr-cr: var(
1634
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
1635
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr))
1636
- );
1637
- --_sf-hr-ft-fy: var(
1638
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1639
- var(
1640
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1641
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)
1642
- )
1643
- );
1644
- --_sf-hr-ft-se: var(
1645
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1646
- var(
1647
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1648
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)
1649
- )
1650
- );
1651
- --_sf-hr-ft-wt: var(
1652
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1653
- var(
1654
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1655
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)
1656
- )
1657
- );
1658
- --_sf-hr-ft-se-ic: var(
1659
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1660
- var(
1661
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1662
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)
1663
- )
1664
- );
1665
- --_sf-hr-tt-an: var(
1666
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1667
- var(
1668
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1669
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)
1670
- )
1671
- );
1672
- --_sf-hr-lr-sg: var(
1673
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1674
- var(
1675
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1676
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)
1677
- )
1678
- );
1679
- --_sf-hr-le-ht: var(
1680
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1681
- var(
1682
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1683
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)
1684
- )
1685
- );
1686
-
1687
- --_sf-hr-in-se: var(
1688
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1689
- var(
1690
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1691
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1692
- )
1693
- );
1694
- --_sf-hr-in-se: var(
1695
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1696
- var(
1697
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1698
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1699
- )
1700
- );
1701
- --_sf-hr-in-c1: var(
1702
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1703
- var(
1704
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1705
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)
1706
- )
1707
- );
1708
- --_sf-hr-ue: var(
1709
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
1710
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue))
1711
- );
1712
-
1713
- // for pading and width
1714
- --_sf-hr-pg: var(
1715
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
1716
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg))
1717
- );
1718
- --_sf-hr-wh: var(
1719
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
1720
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh))
1721
- );
1722
-
1723
- &[data-hover-show-shadow="false"] {
1724
- --_hover-show-shadow: none;
1725
- }
1726
- &[data-hover-show-icon="false"] {
1727
- --_hover-show-icon: none;
1728
- }
1729
- }
1730
- background-color: var(
1731
- --_sf-hr-bd-cr,
1732
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr)
1733
- );
1734
-
1735
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-pg));
1736
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wh));
1737
- display: flex;
1738
- flex-direction: var(--_sf-fd-bn);
1739
- align-items: center;
1740
-
1741
- justify-content: var(
1742
- --_sf-hr-at,
1743
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at)
1744
- );
1745
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-gp));
1746
-
1747
- border-radius: var(
1748
- --_sf-hr-br-rs,
1749
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs)
1750
- );
1751
-
1752
- box-shadow: var(
1753
- --_sf-hr-sw-ae,
1754
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)
1755
- )
1756
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br))
1757
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd))
1758
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));
1759
-
1760
- &[data-show-border="true"] {
1761
- border-color: var(
1762
- --_sf-hr-br-cr,
1763
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr)
1764
- );
1765
-
1766
- border-style: var(
1767
- --_sf-hr-br-se,
1768
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se)
1769
- );
1770
-
1771
- border-width: var(
1772
- --_sf-hr-br-wh,
1773
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh)
1774
- );
1775
- }
1776
-
1777
- .txt {
1778
- display: flex;
1779
-
1780
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-cr));
1781
-
1782
- font-family: var(
1783
- --_sf-hr-ft-fy,
1784
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy)
1785
- );
1786
-
1787
- font-size: var(
1788
- --_sf-hr-ft-se,
1789
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se)
1790
- );
1791
-
1792
- font-weight: var(
1793
- --_sf-hr-ft-wt,
1794
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt)
1795
- );
1796
-
1797
- font-style: var(
1798
- --_sf-hr-ft-se-ic,
1799
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic)
1800
- );
1801
-
1802
- text-align: var(
1803
- --_sf-hr-tt-an,
1804
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an)
1805
- );
1806
-
1807
- letter-spacing: var(
1808
- --_sf-hr-lr-sg,
1809
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg)
1810
- );
1811
-
1812
- line-height: var(
1813
- --_sf-hr-le-ht,
1814
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht)
1815
- );
1816
-
1817
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1818
- }
1819
-
1820
- .icon {
1821
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1822
- svg {
1823
- width: var(
1824
- --_sf-hr-in-se,
1825
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1826
- );
1827
- height: var(
1828
- --_sf-hr-in-se,
1829
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1830
- );
1831
-
1832
- path {
1833
- stroke: var(
1834
- --_sf-hr-in-c1,
1835
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1)
1836
- );
1837
- // Overrides the stroke-width presentation attribute baked into the icon markup.
1838
- stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-se-wh, 1.25);
1839
- }
1840
- }
1841
- }
1842
- [data-element-style="Text"] {
1843
- display: inline-block;
1844
- width: 100%;
1845
- }
1846
-
1847
- .icon--hover {
1848
- // position: absolute;
1849
- // inset: 0;
1850
- // opacity: 0;
1851
- display: none;
1852
- transition: opacity 0.2s ease;
1853
- }
1854
-
1855
- &:hover .icon--hover {
1856
- // opacity: 1;
1857
- display: flex;
1858
- }
1859
-
1860
- &:hover .icon--default {
1861
- // opacity: 0;
1862
- display: none;
1863
- }
1864
- }
1865
- }
1866
- .divider {
1867
- border: none;
1868
- height: var(
1869
- --_ctm-mob-dr-dr-wt,
1870
- var(--_ctm-tab-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
1871
- ); /* Set thickness */
1872
- background-color: var(
1873
- --_ctm-mob-dr-dr-cr,
1874
- var(--_ctm-tab-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
1875
- );
1876
- }
1877
- .single__bundle_slider {
1878
- display: flex;
1879
- flex-direction: column;
1880
- gap: prepareMediaVariable(--_ctm-lt-im-gp);
1881
- align-items: flex-start;
1882
- flex: 1;
1883
- min-height: 0;
1884
- // height: 100%;
1885
- // & > div {
1886
- // height: 100%;
1887
- // }
1888
- .embla__warper {
1889
- // height: 80%;
1890
- flex: 1;
1891
- min-height: 0;
1892
- width: 100%;
1893
- }
1894
- .items__warper {
1895
- display: flex;
1896
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
1897
- flex-wrap: wrap;
1898
- // align-items: center;
1899
- --items-per-row: #{prepareMediaVariable(--_ctm-lt-is-pr-rw)};
1900
- .bundle-image-container,
1901
- .tiles-grid-view {
1902
- flex: 0 0 calc((100% / var(--items-per-row)) - var(--_ctm-lt-im-sg));
1903
- height: unset;
1904
- }
1905
- }
1906
- .bundle-image-container {
1907
- height: 100%;
1908
- background-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-bd-cr);
1909
- border-width: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-wh);
1910
- border-style: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-se);
1911
- border-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-cr);
1912
- border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-rs);
1913
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae)
1914
- prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br)
1915
- prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd)
1916
- prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
1917
- width: 100%;
1918
- display: flex;
1919
- flex-direction: column;
1920
- gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
1921
-
1922
- .showcase-img {
1923
- flex-grow: 1;
1924
- // padding: 16px;
1925
- align-items: center;
1926
- justify-content: center;
1927
- display: flex;
1928
- // height: 100%;
1929
- flex: 1;
1930
- min-height: 100px;
1931
- width: 100%;
1932
- max-height: prepareMediaVariable(--_ctm-lt-ie-ht);
1933
- img {
1934
- max-width: 100%;
1935
- // max-height: 100%;
1936
- // height: 100%;
1937
- width: 100%;
1938
- // object-fit: fill;
1939
- height: prepareMediaVariable(--_ctm-lt-ie-ht);
1940
- }
1941
- }
1942
- .img-title {
1943
- // padding: 12px;
1944
- font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
1945
- font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
1946
- color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
1947
- font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
1948
- font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
1949
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
1950
- text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
1951
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
1952
- line-height: prepareMediaVariablear(--_ctm-dn-pt-ne-dn-le-ht);
1953
- background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
1954
- border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
1955
- border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
1956
- border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1957
- border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1958
- text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1959
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
1960
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
1961
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
1962
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1963
- &#{$overflowSelector} {
1964
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1965
- }
1966
- }
1967
- }
1968
- .bundle__navigation_btn_wrapper {
1969
- display: flex;
1970
- width: 100%;
1971
- justify-content: center;
1972
- }
1973
- .btn__with__text[data-btn-name="bundle_navigation_button"] {
1974
- justify-content: center;
1975
- &[data-show-shadow="false"] {
1976
- --_show-shadow: none;
1977
- }
1978
- &[data-icon-position="left"] {
1979
- --_sf-fd-bn: row;
1980
- }
1981
- &[data-icon-position="right"] {
1982
- --_sf-fd-bn: row-reverse;
1983
- }
1984
- &[data-icon-position="center"] {
1985
- --_sf-fd-bn: row;
1986
- }
1987
-
1988
- &:hover {
1989
- --_sf-hr-bd-cr: var(
1990
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
1991
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr))
1992
- );
1993
- --_sf-hr-br-cr: var(
1994
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
1995
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr))
1996
- );
1997
- --_sf-hr-br-se: var(
1998
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
1999
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se))
2000
- );
2001
- --_sf-hr-br-wh: var(
2002
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
2003
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh))
2004
- );
2005
- --_sf-hr-br-rs: var(
2006
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
2007
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs))
2008
- );
2009
- --_sf-hr-at: var(
2010
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
2011
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at))
2012
- );
2013
- --_sf-hr-gp: var(
2014
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
2015
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp))
2016
- );
2017
-
2018
- // for shadow
2019
- --_sf-hr-sw-ae: var(
2020
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
2021
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae))
2022
- );
2023
- --_sf-hr-sw-br: var(
2024
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
2025
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br))
2026
- );
2027
- --_sf-hr-sw-hr: var(
2028
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
2029
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr))
2030
- );
2031
- --_sf-hr-sw-cr: var(
2032
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
2033
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr))
2034
- );
2035
-
2036
- // for font
2037
-
2038
- --_sf-hr-cr: var(
2039
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
2040
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr))
2041
- );
2042
- --_sf-hr-ft-fy: var(
2043
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
2044
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy))
2045
- );
2046
- --_sf-hr-ft-se: var(
2047
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
2048
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se))
2049
- );
2050
- --_sf-hr-ft-wt: var(
2051
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
2052
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt))
2053
- );
2054
- --_sf-hr-ft-se-ic: var(
2055
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2056
- var(
2057
- --_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2058
- var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)
2059
- )
2060
- );
2061
- --_sf-hr-tt-an: var(
2062
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
2063
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an))
2064
- );
2065
- --_sf-hr-lr-sg: var(
2066
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
2067
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg))
2068
- );
2069
- --_sf-hr-le-ht: var(
2070
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
2071
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht))
2072
- );
2073
-
2074
- --_sf-hr-in-se: var(
2075
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2076
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2077
- );
2078
- --_sf-hr-in-se: var(
2079
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2080
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2081
- );
2082
- --_sf-hr-in-c1: var(
2083
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
2084
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1))
2085
- );
2086
- --_sf-hr-ue: var(
2087
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
2088
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue))
2089
- );
2090
-
2091
- // for pading and width
2092
- --_sf-hr-pg: var(
2093
- --_ctm-mob-dn-be-nn-bn-dn-hr-pg,
2094
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg))
2095
- );
2096
- --_sf-hr-wh: var(
2097
- --_ctm-mob-dn-be-nn-bn-dn-hr-wh,
2098
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh))
2099
- );
2100
-
2101
- &[data-hover-show-shadow="false"] {
2102
- --_hover-show-shadow: none;
2103
- }
2104
- &[data-hover-show-icon="false"] {
2105
- --_hover-show-icon: none;
2106
- }
2107
- }
2108
- background-color: var(
2109
- --_sf-hr-bd-cr,
2110
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr)
2111
- );
2112
-
2113
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-pg));
2114
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wh));
2115
- display: flex;
2116
- flex-direction: var(--_sf-fd-bn);
2117
- align-items: center;
2118
-
2119
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-at));
2120
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-gp));
2121
-
2122
- border-radius: var(
2123
- --_sf-hr-br-rs,
2124
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs)
2125
- );
2126
-
2127
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae))
2128
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br))
2129
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd))
2130
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));
2131
-
2132
- &[data-show-border="true"] {
2133
- border-color: var(
2134
- --_sf-hr-br-cr,
2135
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr)
2136
- );
2137
-
2138
- border-style: var(
2139
- --_sf-hr-br-se,
2140
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se)
2141
- );
2142
-
2143
- border-width: var(
2144
- --_sf-hr-br-wh,
2145
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh)
2146
- );
2147
- }
2148
-
2149
- .txt {
2150
- display: flex;
2151
-
2152
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-cr));
2153
-
2154
- font-family: var(
2155
- --_sf-hr-ft-fy,
2156
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy)
2157
- );
2158
-
2159
- font-size: var(
2160
- --_sf-hr-ft-se,
2161
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se)
2162
- );
2163
-
2164
- font-weight: var(
2165
- --_sf-hr-ft-wt,
2166
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt)
2167
- );
2168
-
2169
- font-style: var(
2170
- --_sf-hr-ft-se-ic,
2171
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic)
2172
- );
2173
-
2174
- text-align: var(
2175
- --_sf-hr-tt-an,
2176
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an)
2177
- );
2178
-
2179
- letter-spacing: var(
2180
- --_sf-hr-lr-sg,
2181
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg)
2182
- );
2183
-
2184
- line-height: var(
2185
- --_sf-hr-le-ht,
2186
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht)
2187
- );
2188
-
2189
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2190
- }
2191
-
2192
- .icon {
2193
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2194
- svg {
2195
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
2196
- height: var(
2197
- --_sf-hr-in-se,
2198
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se)
2199
- );
2200
-
2201
- path {
2202
- stroke: var(
2203
- --_sf-hr-in-c1,
2204
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1)
2205
- );
2206
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2207
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-se-wh, 1.25);
2208
- }
2209
- }
2210
- }
2211
- [data-element-style="Text"] {
2212
- display: inline-block;
2213
- width: 100%;
2214
- }
2215
-
2216
- .icon--hover {
2217
- // position: absolute;
2218
- // inset: 0;
2219
- // opacity: 0;
2220
- display: none;
2221
- transition: opacity 0.2s ease;
2222
- }
2223
-
2224
- &:hover .icon--hover {
2225
- // opacity: 1;
2226
- display: flex;
2227
- }
2228
-
2229
- &:hover .icon--default {
2230
- // opacity: 0;
2231
- display: none;
2232
- }
2233
- }
2234
-
2235
- a {
2236
- width: 100%;
2237
- display: flex;
2238
- align-items: center;
2239
-
2240
- .bundle_navigation_button {
2241
- display: flex;
2242
- width: 100%;
2243
- padding: 16px 24px;
2244
- justify-content: center;
2245
- align-items: center;
2246
- gap: 12px;
2247
- align-self: stretch;
2248
- font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2249
- font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2250
- color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2251
- font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2252
- font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2253
- text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2254
- text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2255
- letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2256
- line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2257
- background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2258
- border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2259
- border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2260
- border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2261
- border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2262
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2263
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2264
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2265
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2266
-
2267
- .icon {
2268
- svg {
2269
- width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2270
- height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2271
- path {
2272
- stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2273
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2274
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2275
- }
2276
- }
2277
- }
2278
- }
2279
- }
2280
- }
2281
-
2282
- .tiles-grid-view {
2283
- display: flex;
2284
- flex-wrap: wrap;
2285
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
2286
- width: 100%;
2287
- height: 100%;
2288
-
2289
- .tiles-container {
2290
- display: flex;
2291
- flex-wrap: wrap;
2292
- justify-content: center;
2293
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
2294
- width: 100%;
2295
- height: 100%;
2296
-
2297
- .tile {
2298
- // width: 350px !important;
2299
- width: 100%;
2300
- height: 100%;
2301
- overflow: hidden;
2302
- padding: 16px;
2303
- display: flex;
2304
- flex-direction: column;
2305
- align-items: flex-start;
2306
- gap: prepareMediaVariable(--_ctm-lt-im-gp);
2307
- justify-content: space-between;
2308
- background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
2309
- // Border only drawn when the tile card's "Show Border" toggle is on.
2310
- &[data-show-border="true"] {
2311
- border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
2312
- border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
2313
- border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
2314
- }
2315
- border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
2316
- box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae)
2317
- prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br)
2318
- prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd)
2319
- prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);
2320
-
2321
- .tile-content {
2322
- display: flex;
2323
- flex-direction: column;
2324
- gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
2325
- align-items: flex-start;
2326
- height: 100%;
2327
- width: 100%;
2328
- .tile_bundle_name {
2329
- display: flex;
2330
- align-items: flex-start;
2331
- justify-content: flex-start;
2332
- width: 100%;
2333
- // overflow: hidden;
2334
- // text-overflow: ellipsis;
2335
- // white-space: nowrap;
2336
- font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
2337
- font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
2338
- color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
2339
- font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
2340
- font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
2341
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
2342
- text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
2343
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
2344
- line-height: prepareMediaVariable(--_ctm-dn-pt-ne-dn-le-ht);
2345
- background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
2346
- border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
2347
- border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
2348
- border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
2349
- border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
2350
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
2351
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
2352
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
2353
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
2354
-
2355
- &#{$overflowSelector} {
2356
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2357
- }
2358
- }
2359
-
2360
- .brand-tile {
2361
- display: flex;
2362
- justify-content: center;
2363
- align-items: center;
2364
- height: -webkit-fill-available;
2365
-
2366
- img {
2367
- width: 100%;
2368
- height: 100%;
2369
- // object-fit: fill;
2370
- }
2371
- }
2372
-
2373
- .product-tile {
2374
- display: grid;
2375
- flex: 1 1 auto;
2376
- row-gap: prepareMediaVariable(--_ctm-lt-te-rw-gp);
2377
- column-gap: prepareMediaVariable(--_ctm-lt-te-cn-gp);
2378
- // padding: 10px;
2379
- box-sizing: border-box;
2380
- width: 100%;
2381
- // i want height to be mutiple of 2 with --_ctm-lt-ie-ht\
2382
-
2383
- height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * 2);
2384
-
2385
- &.images-1 {
2386
- // Single tile sits in the top-left cell at the same size as a
2387
- // full 2x2 grid; the other three cells remain empty space.
2388
- grid-template-columns: 1fr 1fr;
2389
- grid-template-rows: 1fr 1fr;
2390
- }
2391
-
2392
- &.images-2 {
2393
- grid-template-columns: 1fr 1fr;
2394
- // Keep the full two-row height: the two tiles stay in the top
2395
- // row at 50% each and the bottom row remains empty space.
2396
- grid-template-rows: 1fr 1fr;
2397
- }
2398
-
2399
- &.images-3 {
2400
- grid-template-columns: 1fr 1fr;
2401
- grid-template-rows: 1fr 1fr;
2402
-
2403
- // The third tile stays in a single column (50% width) like the
2404
- // tiles above; the fourth cell is left as empty space.
2405
- }
2406
-
2407
- &.images-4 {
2408
- grid-template-columns: 1fr 1fr;
2409
- grid-template-rows: 1fr 1fr;
2410
- }
2411
-
2412
- &.animate-flip {
2413
- .product-image-wrapper {
2414
- animation: flip 0.6s ease-in-out;
2415
- }
2416
-
2417
- @keyframes flip {
2418
- 0% {
2419
- transform: rotateY(0deg);
2420
- }
2421
- 100% {
2422
- transform: rotateY(180deg);
2423
- }
2424
- }
2425
- }
2426
-
2427
- .product-image-wrapper {
2428
- width: 100%;
2429
- height: 100%;
2430
- overflow: hidden;
2431
- display: flex;
2432
- justify-content: center;
2433
- align-items: center;
2434
- background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
2435
- // Border only drawn when the tile card image's "Show Border" toggle is on.
2436
- &[data-show-border="true"] {
2437
- border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2438
- border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2439
- border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2440
- }
2441
- border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
2442
- box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae)
2443
- prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br)
2444
- prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd)
2445
- prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);
2446
-
2447
- img {
2448
- // max-height: 135px;
2449
- height: 100%;
2450
- width: 100%;
2451
- // object-fit: fill;
2452
- }
2453
- }
2454
- }
2455
- }
2456
-
2457
- .bundle_navigation_button {
2458
- width: 100%;
2459
- display: flex;
2460
- padding: 16px 24px;
2461
- justify-content: center;
2462
- align-items: center;
2463
- gap: 12px;
2464
- align-self: stretch;
2465
- font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2466
- font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2467
- color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2468
- font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2469
- font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2470
- text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2471
- text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2472
- letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2473
- line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2474
- background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2475
- border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2476
- border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2477
- border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2478
- border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2479
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2480
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2481
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2482
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2483
-
2484
- .icon {
2485
- svg {
2486
- width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2487
- height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2488
- path {
2489
- stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2490
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2491
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2492
- }
2493
- }
2494
- }
2495
- }
2496
-
2497
- a {
2498
- display: flex;
2499
- align-items: center;
2500
- width: 100%;
2501
-
2502
- .bundle_navigation_button {
2503
- width: 100%;
2504
- display: flex;
2505
- padding: 16px 24px;
2506
- justify-content: center;
2507
- align-items: center;
2508
- gap: 12px;
2509
- align-self: stretch;
2510
- text-transform: uppercase;
2511
- font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2512
- font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2513
- color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2514
- font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2515
- font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2516
- text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2517
- text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2518
- letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2519
- line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2520
- background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2521
- border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2522
- border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2523
- border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2524
- border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2525
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2526
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2527
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2528
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2529
-
2530
- .icon {
2531
- svg {
2532
- width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2533
- height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2534
- path {
2535
- stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2536
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2537
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2538
- }
2539
- }
2540
- }
2541
- }
2542
- }
2543
- }
2544
- }
2545
- }
2546
- .embla__container {
2547
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
2548
- }
2549
- }
2550
- .arrow-navigation-categories {
2551
- display: flex;
2552
- flex-direction: row;
2553
- align-items: center;
2554
- justify-content: space-between;
2555
- gap: 4px;
2556
-
2557
- & > button {
2558
- // display: var(--_d-flex);
2559
- // align-items: center;
2560
- // justify-content: center;
2561
-
2562
- @include NAVIGATION_STYLES();
2563
- }
2564
- }
2565
- }
2566
- }
2567
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $overflowSelector: ".flex__overflow";
5
+ // --_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se
6
+
7
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
8
+ $resizeActive: '[data-cms-element-resizer="true"]';
9
+
10
+ @mixin NAVIGATION_STYLES($type: 1) {
11
+ $TYPE: "cy";
12
+ @if ($type == 2) {
13
+ $TYPE: "pt";
14
+ }
15
+ $size: var(
16
+ --_sf-icn-size,
17
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-se, 16px)}
18
+ );
19
+ $clr: var(
20
+ --_sf-icn-clr,
21
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-c1, #000)}
22
+ );
23
+ $perc: 1.75;
24
+ display: var(--_d-flex);
25
+ align-items: center;
26
+ justify-content: center;
27
+ width: calc(#{$size} * #{$perc});
28
+ height: calc(#{$size} * #{$perc});
29
+ background: var(
30
+ --_sf-icn-bg,
31
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)}
32
+ );
33
+ border-radius: var(
34
+ --_sf-icn-brs,
35
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)}
36
+ );
37
+ // Border is only drawn when the "Show Border" toggle is on. The renderer emits
38
+ // data-show-border="false" when the toggle is off; an absent/"true" value keeps
39
+ // the border (so existing arrows that don't set the attribute are unaffected).
40
+ &:not([data-show-border="false"]) {
41
+ border-color: var(
42
+ --_sf-icn-br,
43
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)}
44
+ );
45
+ border-width: var(
46
+ --_sf-icn-bw,
47
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)}
48
+ );
49
+ border-style: var(
50
+ --_sf-icn-bs,
51
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)}
52
+ );
53
+ }
54
+ // Hide the arrow glyph when the "Show Icon" toggle is off.
55
+ &[data-show-icon="false"] > span {
56
+ display: none;
57
+ }
58
+ &:disabled {
59
+ opacity: 0.65;
60
+ cursor: no-drop;
61
+ }
62
+
63
+ &:hover {
64
+ --_sf-icn-size: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-se)};
65
+ --_sf-icn-clr: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-c1)};
66
+ --_sf-icn-bg: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-bd-cr)};
67
+ --_sf-icn-br: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-cr)};
68
+ --_sf-icn-bw: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-wh)};
69
+ --_sf-icn-bs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-se)};
70
+ --_sf-icn-brs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-rs)};
71
+ }
72
+ & > span {
73
+ display: var(--_d-flex);
74
+
75
+ svg {
76
+ width: #{$size};
77
+ height: #{$size};
78
+
79
+ path {
80
+ stroke: #{$clr};
81
+ }
82
+ }
83
+ }
84
+ }
85
+ [data-div-type="element"] {
86
+ &[data-element-type="bundle"] {
87
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
88
+
89
+ // width: var(--_sf-con-nw-wh);--_ctm-ele-nw-wh-vl
90
+ // width: var(
91
+ // --_sf-mob-el-wh-st-mx,
92
+ // var(
93
+ // --_sf-tab-el-wh-st-mx,
94
+ // var(
95
+ // --_sf-el-wh-st-mx,
96
+ // calc(
97
+ // 1% *
98
+ // var(
99
+ // --_ctm-mob-bun-ele-nw-wh-vl,
100
+ // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
101
+ // )
102
+ // )
103
+ // )
104
+ // )
105
+ // );
106
+ width: var(
107
+ --_sf-el-wh-st-mx,
108
+ calc(
109
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
110
+ )
111
+ );
112
+ // min-height: var();
113
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
114
+
115
+ // &[data-view-state="full"] {
116
+ // height: auto;
117
+ // }
118
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
119
+
120
+ // --_aspect-ratio: calc(
121
+ // 1 *
122
+ // (
123
+ // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
124
+ // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
125
+ // )
126
+ // );
127
+ // &[data-view-state="full"] {
128
+ // & > .wrapper {
129
+ // & > div {
130
+ // height: 100%;
131
+ // }
132
+ // }
133
+ // }
134
+
135
+ // height: auto;
136
+
137
+ // margin: var(
138
+ // --_ctm-mob-bun-lt-mn,
139
+ // var(
140
+ // --_ctm-tab-bun-lt-mn,
141
+ // var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
142
+ // )
143
+ // );
144
+
145
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
146
+ // min-height: 100px !important;
147
+ // }
148
+
149
+ & > .wrapper {
150
+ width: 100%;
151
+ // height: 100%;
152
+ }
153
+ .embla {
154
+ width: 100%;
155
+ // height: 100%;
156
+ position: relative;
157
+ display: flex;
158
+ flex-direction: column;
159
+ overflow: var(--_ctm-lt-ow-ss);
160
+
161
+ .embla__viewport {
162
+ width: 100%;
163
+ height: 100%;
164
+ position: relative;
165
+ display: flex;
166
+ flex-direction: column;
167
+
168
+ // overflow: hidden;
169
+
170
+ .embla__container {
171
+ width: 100%;
172
+ height: 100%;
173
+ display: grid;
174
+ grid-template-rows: 100%;
175
+
176
+ grid-template-columns: repeat(
177
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
178
+ calc(
179
+ (
180
+ 100% -
181
+ (
182
+ var(
183
+ --_ctm-mob-lt-is-pr-se,
184
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
185
+ ) -
186
+ 1
187
+ ) *
188
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
189
+ ) /
190
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
191
+ )
192
+ );
193
+
194
+ grid-auto-flow: column;
195
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
196
+
197
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
198
+ height: calc(
199
+ 100% - calc(
200
+ var(
201
+ --_ctm-mob-dn-pn-as-aw-se,
202
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
203
+ ) +
204
+ 10px
205
+ )
206
+ );
207
+ }
208
+
209
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
210
+ height: calc(
211
+ 100% - calc(
212
+ var(
213
+ --_ctm-mob-dn-pn-le-le-ht,
214
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
215
+ ) +
216
+ 20px
217
+ )
218
+ );
219
+ }
220
+
221
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
222
+ height: calc(
223
+ 100% - calc(
224
+ var(
225
+ --_ctm-mob-dn-pn-ds-dt-se,
226
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
227
+ ) +
228
+ 20px
229
+ )
230
+ );
231
+ }
232
+
233
+ .embla__slide {
234
+ width: 100%;
235
+ height: 100%;
236
+ }
237
+ }
238
+ }
239
+ &:not([data-display-style="Column"]) {
240
+ .embla__container {
241
+ grid-auto-columns: calc(
242
+ (
243
+ 100% -
244
+ (
245
+ var(
246
+ --_ctm-mob-lt-is-pr-se,
247
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
248
+ ) -
249
+ 1
250
+ ) *
251
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
252
+ ) /
253
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
254
+ );
255
+ }
256
+ }
257
+
258
+ &[data-display-style="Column"] {
259
+ // overflow: unset;
260
+
261
+ .embla__viewport {
262
+ .embla__container {
263
+ display: flex;
264
+ .embla__slide {
265
+ width: unset;
266
+ height: 100%;
267
+ aspect-ratio: 1.3 / 2;
268
+ }
269
+ }
270
+ }
271
+ }
272
+
273
+ .arrow-navigation {
274
+ display: flex;
275
+ position: absolute;
276
+ top: 50%;
277
+ left: 50%;
278
+ width: 100%;
279
+ justify-content: space-between;
280
+ transform: translate(-50%, -50%);
281
+ // padding-left: 20px;
282
+ &[data-control-type="Side"] {
283
+ .left-button,
284
+ .right-button {
285
+ background-color: transparent;
286
+ }
287
+ }
288
+ &[data-background-shape="Round"] {
289
+ .left-button,
290
+ .right-button {
291
+ background-color: #f2f5f5;
292
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
293
+ }
294
+ }
295
+ &[data-control-type="Bottom-Overflow"] {
296
+ transform: translateX(-50%);
297
+ width: 100%;
298
+ justify-content: center;
299
+ gap: 12px;
300
+ top: unset;
301
+ bottom: 6px;
302
+ }
303
+ &[data-control-type="Bottom"] {
304
+ transform: unset;
305
+ position: static;
306
+ width: 100%;
307
+ justify-content: center;
308
+ gap: 12px;
309
+ margin-top: 10px;
310
+ }
311
+ .left-button {
312
+ padding: 10px;
313
+ border-radius: 50%;
314
+ border: none;
315
+ width: var(
316
+ --_ctm-mob-dn-pn-as-aw-se,
317
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
318
+ );
319
+ height: var(
320
+ --_ctm-mob-dn-pn-as-aw-se,
321
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
322
+ );
323
+
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ cursor: pointer;
328
+ outline: none;
329
+ margin-left: 12px;
330
+ &:disabled {
331
+ & svg {
332
+ path {
333
+ stroke: rgb(192, 192, 192);
334
+ }
335
+ }
336
+ }
337
+ }
338
+ .right-button {
339
+ border-radius: 50%;
340
+ border: none;
341
+ width: var(
342
+ --_ctm-mob-dn-pn-as-aw-se,
343
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
344
+ );
345
+ height: var(
346
+ --_ctm-mob-dn-pn-as-aw-se,
347
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
348
+ );
349
+
350
+ display: flex;
351
+ align-items: center;
352
+ justify-content: center;
353
+ cursor: pointer;
354
+ outline: none;
355
+ margin-right: 12px;
356
+ padding: 10px;
357
+
358
+ &:disabled {
359
+ & svg {
360
+ path {
361
+ stroke: rgb(192, 192, 192);
362
+ }
363
+ }
364
+ }
365
+ }
366
+ .icon {
367
+ display: flex;
368
+
369
+ svg {
370
+ width: calc(
371
+ var(
372
+ --_ctm-mob-dn-pn-as-aw-se,
373
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
374
+ ) *
375
+ 0.5
376
+ );
377
+ height: calc(
378
+ var(
379
+ --_ctm-mob-dn-pn-as-aw-se,
380
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
381
+ ) *
382
+ 0.5
383
+ );
384
+
385
+ path {
386
+ stroke: var(
387
+ --_ctm-mob-dn-pn-as-aw-cr,
388
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
389
+ );
390
+ }
391
+ }
392
+ }
393
+
394
+ .left-button,
395
+ .right-button {
396
+ @include NAVIGATION_STYLES(2);
397
+ }
398
+ }
399
+
400
+ &[data-control-type="Side"] {
401
+ .embla__viewport {
402
+ width: calc(100% - 120px);
403
+ margin-inline: auto;
404
+ }
405
+ .left-button {
406
+ position: absolute;
407
+ left: 0;
408
+ top: 50%;
409
+ transform: translateY(-50%);
410
+ z-index: 2;
411
+
412
+ @include NAVIGATION_STYLES(1);
413
+ }
414
+ .right-button {
415
+ position: absolute;
416
+ z-index: 2;
417
+ right: 0;
418
+ top: 50%;
419
+ transform: translateY(-50%);
420
+
421
+ @include NAVIGATION_STYLES(1);
422
+ }
423
+
424
+ // :is(.left-button, .right-button) {
425
+ // @include NAVIGATION_STYLES(1);
426
+ // }
427
+ }
428
+
429
+ &[data-thumbnail-placement="top"] {
430
+ flex-direction: column-reverse;
431
+ }
432
+ &[data-thumbnail-placement="bottom"] {
433
+ flex-direction: column;
434
+ }
435
+ &[data-thumbnail-placement="left"] {
436
+ flex-direction: row-reverse;
437
+
438
+ .embla__thumbs {
439
+ width: prepareMediaVariable(--_ctm-lt-tl-se);
440
+ height: 100%;
441
+
442
+ & .embla__thumbs__container {
443
+ flex-direction: column;
444
+ height: 100%;
445
+ }
446
+ }
447
+ }
448
+ &[data-thumbnail-placement="right"] {
449
+ flex-direction: row;
450
+ .embla__thumbs {
451
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
452
+
453
+ height: 100%;
454
+
455
+ & .embla__thumbs__container {
456
+ flex-direction: column;
457
+ height: 100%;
458
+ }
459
+ }
460
+ }
461
+ }
462
+ .bundle__element__container {
463
+ // height: 100%;
464
+ background-color: var(
465
+ --_ctm-mob-dn-wt-se-bd-cr,
466
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
467
+ );
468
+
469
+ border-color: var(
470
+ --_ctm-mob-dn-wt-se-br-cr,
471
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
472
+ );
473
+
474
+ border-style: var(
475
+ --_ctm-mob-dn-wt-se-br-se,
476
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
477
+ );
478
+
479
+ border-width: var(
480
+ --_ctm-mob-dn-wt-se-br-wh,
481
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
482
+ );
483
+
484
+ border-radius: var(
485
+ --_ctm-mob-dn-wt-se-br-rs,
486
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
487
+ );
488
+
489
+ box-shadow: var(
490
+ --_show-shadow,
491
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
492
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
493
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
494
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
495
+ );
496
+
497
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
498
+ display: flex;
499
+ flex-direction: column;
500
+ // height: 100%;
501
+
502
+ .bundle__tabs {
503
+ width: 100%;
504
+ background-color: var(
505
+ --_ctm-mob-dn-be-ts-wt-se-bd-cr,
506
+ var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr))
507
+ );
508
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
509
+ display: flex;
510
+ flex-direction: column;
511
+ --_sf-gp: var(
512
+ --_ctm-mob-lt-im-sg,
513
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
514
+ );
515
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
516
+ row-gap: var(--_sf-gp);
517
+ width: 100%;
518
+ // height: 100%;
519
+ // Border only drawn when the widget's "Show Border" toggle is on. The
520
+ // renderer emits data-show-border="true"/"" on the .bundle__tabs container.
521
+ &[data-show-border="true"] {
522
+ border-color: var(
523
+ --_ctm-mob-dn-be-ts-wt-se-br-cr,
524
+ var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr))
525
+ );
526
+ border-style: var(
527
+ --_ctm-mob-dn-be-ts-wt-se-br-se,
528
+ var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se))
529
+ );
530
+ border-width: var(
531
+ --_ctm-mob-dn-be-ts-wt-se-br-wh,
532
+ var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh))
533
+ );
534
+ }
535
+ border-radius: var(
536
+ --_ctm-mob-dn-be-ts-wt-se-br-rs,
537
+ var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs))
538
+ );
539
+ box-shadow: var(
540
+ --_show-shadow,
541
+ var(
542
+ --_ctm-mob-dn-be-ts-wt-se-sw-ae,
543
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae))
544
+ )
545
+ var(
546
+ --_ctm-mob-dn-be-ts-wt-se-sw-br,
547
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br))
548
+ )
549
+ var(
550
+ --_ctm-mob-dn-be-ts-wt-se-sw-sd,
551
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd))
552
+ )
553
+ var(
554
+ --_ctm-mob-dn-be-ts-wt-se-sw-cr,
555
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr))
556
+ )
557
+ );
558
+ .profile__button {
559
+ &[data-show-shadow="false"] {
560
+ --_show-shadow: none;
561
+ }
562
+ &[data-icon-position="left"] {
563
+ --_sf-fd-bn: row;
564
+ }
565
+ &[data-icon-position="right"] {
566
+ --_sf-fd-bn: row-reverse;
567
+ }
568
+ &[data-icon-position="center"] {
569
+ --_sf-fd-bn: row;
570
+ }
571
+
572
+ &:hover {
573
+ --_sf-hr-bd-cr: var(
574
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
575
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr))
576
+ );
577
+ --_sf-hr-br-cr: var(
578
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr,
579
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr))
580
+ );
581
+ --_sf-hr-br-se: var(
582
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-se,
583
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se))
584
+ );
585
+ --_sf-hr-br-wh: var(
586
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh,
587
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh))
588
+ );
589
+ --_sf-hr-br-rs: var(
590
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs,
591
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs))
592
+ );
593
+ --_sf-hr-at: var(
594
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-at,
595
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at))
596
+ );
597
+ --_sf-hr-in-ad-tt-sg: var(
598
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
599
+ var(
600
+ --_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
601
+ var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg)
602
+ )
603
+ );
604
+
605
+ // for shadow
606
+ --_sf-hr-sw-ae: var(
607
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae,
608
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae))
609
+ );
610
+ --_sf-hr-sw-br: var(
611
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br,
612
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br))
613
+ );
614
+ --_sf-hr-sw-hr: var(
615
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr,
616
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr))
617
+ );
618
+ --_sf-hr-sw-cr: var(
619
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr,
620
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr))
621
+ );
622
+
623
+ // for font
624
+
625
+ --_sf-hr-cr: var(
626
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-cr,
627
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr))
628
+ );
629
+ --_sf-hr-ft-fy: var(
630
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
631
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy))
632
+ );
633
+ --_sf-hr-ft-se: var(
634
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
635
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se))
636
+ );
637
+ --_sf-hr-ft-wt: var(
638
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt,
639
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt))
640
+ );
641
+ --_sf-hr-ft-se-ic: var(
642
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic,
643
+ var(
644
+ --_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic,
645
+ var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic)
646
+ )
647
+ );
648
+ --_sf-hr-tt-an: var(
649
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an,
650
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an))
651
+ );
652
+ --_sf-hr-lr-sg: var(
653
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg,
654
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg))
655
+ );
656
+ --_sf-hr-le-ht: var(
657
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht,
658
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht))
659
+ );
660
+
661
+ --_sf-hr-in-se: var(
662
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
663
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
664
+ );
665
+ --_sf-hr-in-se: var(
666
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
667
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
668
+ );
669
+ --_sf-hr-in-c1: var(
670
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1,
671
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1))
672
+ );
673
+ --_sf-hr-ue: var(
674
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ue,
675
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue))
676
+ );
677
+
678
+ // for pading and width
679
+ --_sf-hr-pg: var(
680
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-pg,
681
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg))
682
+ );
683
+ --_sf-hr-wh: var(
684
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-wh,
685
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh))
686
+ );
687
+
688
+ &[data-hover-show-shadow="false"] {
689
+ --_hover-show-shadow: none;
690
+ }
691
+ &[data-hover-show-icon="false"] {
692
+ --_hover-show-icon: none;
693
+ }
694
+ }
695
+
696
+ background-color: var(
697
+ --_sf-hr-bd-cr,
698
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
699
+ );
700
+
701
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
702
+ display: flex;
703
+ flex-direction: var(--_sf-fd-bn);
704
+ align-items: center;
705
+
706
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
707
+ gap: var(
708
+ --_sf-hr-in-ad-tt-sg,
709
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
710
+ );
711
+
712
+ border-radius: var(
713
+ --_sf-hr-br-rs,
714
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
715
+ );
716
+
717
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
718
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
719
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
720
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
721
+
722
+ &[data-show-border="true"] {
723
+ border-color: var(
724
+ --_sf-hr-br-cr,
725
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
726
+ );
727
+
728
+ border-style: var(
729
+ --_sf-hr-br-se,
730
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
731
+ );
732
+
733
+ border-width: var(
734
+ --_sf-hr-br-wh,
735
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
736
+ );
737
+ }
738
+
739
+ // text styles
740
+
741
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
742
+
743
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
744
+
745
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
746
+
747
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
748
+
749
+ font-style: var(
750
+ --_sf-hr-ft-se-ic,
751
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
752
+ );
753
+
754
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
755
+
756
+ letter-spacing: var(
757
+ --_sf-hr-lr-sg,
758
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
759
+ );
760
+
761
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
762
+
763
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
764
+
765
+ [data-element-style="Text"] {
766
+ display: inline-block;
767
+ width: 100%;
768
+ }
769
+
770
+ &[data-is-selected="true"] {
771
+ --_sf-sd-bd-cr: var(
772
+ --_ctm-mob-dn-me-sd-se-bd-cr,
773
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr))
774
+ );
775
+ --_sf-sd-br-cr: var(
776
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
777
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr))
778
+ );
779
+ --_sf-sd-br-se: var(
780
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
781
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se))
782
+ );
783
+ --_sf-sd-br-wh: var(
784
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
785
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh))
786
+ );
787
+ --_sf-sd-br-rs: var(
788
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
789
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs))
790
+ );
791
+ --_sf-sd-at: var(
792
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-at,
793
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at))
794
+ );
795
+ --_sf-sd-in-ad-tt-sg: var(
796
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
797
+ var(
798
+ --_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
799
+ var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)
800
+ )
801
+ );
802
+
803
+ // for shadow
804
+ --_sf-sd-sw-ae: var(
805
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
806
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae))
807
+ );
808
+ --_sf-sd-sw-br: var(
809
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
810
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br))
811
+ );
812
+ --_sf-sd-sw-hr: var(
813
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
814
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr))
815
+ );
816
+ --_sf-sd-sw-cr: var(
817
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
818
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr))
819
+ );
820
+
821
+ // for font
822
+
823
+ --_sf-sd-cr: var(
824
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
825
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr))
826
+ );
827
+ --_sf-sd-ft-fy: var(
828
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
829
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy))
830
+ );
831
+ --_sf-sd-ft-se: var(
832
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
833
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se))
834
+ );
835
+ --_sf-sd-ft-wt: var(
836
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
837
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt))
838
+ );
839
+ --_sf-sd-ft-se-ic: var(
840
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
841
+ var(
842
+ --_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
843
+ var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)
844
+ )
845
+ );
846
+ --_sf-sd-tt-an: var(
847
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
848
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an))
849
+ );
850
+ --_sf-sd-lr-sg: var(
851
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
852
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg))
853
+ );
854
+ --_sf-sd-le-ht: var(
855
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
856
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht))
857
+ );
858
+
859
+ --_sf-sd-in-se: var(
860
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
861
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
862
+ );
863
+ --_sf-sd-in-se: var(
864
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
865
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
866
+ );
867
+ --_sf-sd-in-c1: var(
868
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
869
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1))
870
+ );
871
+ --_sf-sd-ue: var(
872
+ --_ctm-mob-dn-be-ts-be-tb-hr-ue,
873
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue))
874
+ );
875
+
876
+ // for pading and width
877
+ --_sf-sd-pg: var(
878
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
879
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg))
880
+ );
881
+ --_sf-sd-wh: var(
882
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
883
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh))
884
+ );
885
+
886
+ &[data-hover-show-shadow="false"] {
887
+ --_hover-show-shadow: none;
888
+ }
889
+ &[data-hover-show-icon="false"] {
890
+ --_hover-show-icon: none;
891
+ }
892
+
893
+ background-color: var(
894
+ --_sf-sd-bd-cr,
895
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
896
+ );
897
+
898
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
899
+ display: flex;
900
+ flex-direction: var(--_sf-fd-bn);
901
+ align-items: center;
902
+
903
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
904
+ gap: var(
905
+ --_sf-sd-in-ad-tt-sg,
906
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
907
+ );
908
+
909
+ border-radius: var(
910
+ --_sf-sd-br-rs,
911
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
912
+ );
913
+
914
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
915
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
916
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
917
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
918
+
919
+ &[data-show-border="true"] {
920
+ border-color: var(
921
+ --_sf-sd-br-cr,
922
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
923
+ );
924
+
925
+ border-style: var(
926
+ --_sf-sd-br-se,
927
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
928
+ );
929
+
930
+ border-width: var(
931
+ --_sf-sd-br-wh,
932
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
933
+ );
934
+ }
935
+
936
+ // text styles
937
+
938
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
939
+
940
+ font-family: var(
941
+ --_sf-sd-ft-fy,
942
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)
943
+ );
944
+
945
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
946
+
947
+ font-weight: var(
948
+ --_sf-sd-ft-wt,
949
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt)
950
+ );
951
+
952
+ font-style: var(
953
+ --_sf-sd-ft-se-ic,
954
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
955
+ );
956
+
957
+ text-align: var(
958
+ --_sf-sd-tt-an,
959
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an)
960
+ );
961
+
962
+ letter-spacing: var(
963
+ --_sf-sd-lr-sg,
964
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
965
+ );
966
+
967
+ line-height: var(
968
+ --_sf-sd-le-ht,
969
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht)
970
+ );
971
+
972
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
973
+
974
+ [data-element-style="Text"] {
975
+ display: inline-block;
976
+ width: 100%;
977
+ }
978
+ }
979
+ }
980
+ .embla {
981
+ height: auto;
982
+ .embla__viewport {
983
+ .embla__container {
984
+ display: flex;
985
+ gap: prepareMediaVariable(--_ctm-dn-be-ts-wt-se-im-gp);
986
+ .embla__slide {
987
+ width: unset;
988
+ }
989
+ }
990
+ }
991
+ }
992
+ }
993
+ .category__tabs {
994
+ width: 100%;
995
+ background-color: var(
996
+ --_ctm-mob-dn-cy-ts-wt-se-bd-cr,
997
+ var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr))
998
+ );
999
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
1000
+ display: flex;
1001
+ flex-direction: column;
1002
+ --_sf-gp: var(
1003
+ --_ctm-mob-lt-im-sg,
1004
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
1005
+ );
1006
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1007
+ row-gap: var(--_sf-gp);
1008
+ width: 100%;
1009
+ // height: 100%;
1010
+ // Border only drawn when the widget's "Show Border" toggle is on. The
1011
+ // renderer emits data-show-border="true"/"" on the .category__tabs container.
1012
+ &[data-show-border="true"] {
1013
+ border-color: var(
1014
+ --_ctm-mob-dn-cy-ts-wt-se-br-cr,
1015
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr))
1016
+ );
1017
+ border-style: var(
1018
+ --_ctm-mob-dn-cy-ts-wt-se-br-se,
1019
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se))
1020
+ );
1021
+ border-width: var(
1022
+ --_ctm-mob-dn-cy-ts-wt-se-br-wh,
1023
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh))
1024
+ );
1025
+ }
1026
+ border-radius: var(
1027
+ --_ctm-mob-dn-cy-ts-wt-se-br-rs,
1028
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs))
1029
+ );
1030
+ box-shadow: var(
1031
+ --_show-shadow,
1032
+ var(
1033
+ --_ctm-mob-dn-cy-ts-wt-se-sw-ae,
1034
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae))
1035
+ )
1036
+ var(
1037
+ --_ctm-mob-dn-cy-ts-wt-se-sw-br,
1038
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br))
1039
+ )
1040
+ var(
1041
+ --_ctm-mob-dn-cy-ts-wt-se-sw-sd,
1042
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd))
1043
+ )
1044
+ var(
1045
+ --_ctm-mob-dn-cy-ts-wt-se-sw-cr,
1046
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr))
1047
+ )
1048
+ );
1049
+ .profile__button {
1050
+ &[data-show-shadow="false"] {
1051
+ --_show-shadow: none;
1052
+ }
1053
+ &[data-icon-position="left"] {
1054
+ --_sf-fd-bn: row;
1055
+ }
1056
+ &[data-icon-position="right"] {
1057
+ --_sf-fd-bn: row-reverse;
1058
+ }
1059
+ &[data-icon-position="center"] {
1060
+ --_sf-fd-bn: row;
1061
+ }
1062
+
1063
+ &:hover {
1064
+ --_sf-hr-bd-cr: var(
1065
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
1066
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr))
1067
+ );
1068
+ --_sf-hr-br-cr: var(
1069
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr,
1070
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr))
1071
+ );
1072
+ --_sf-hr-br-se: var(
1073
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se,
1074
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se))
1075
+ );
1076
+ --_sf-hr-br-wh: var(
1077
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh,
1078
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh))
1079
+ );
1080
+ --_sf-hr-br-rs: var(
1081
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs,
1082
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs))
1083
+ );
1084
+ --_sf-hr-at: var(
1085
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-at,
1086
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at))
1087
+ );
1088
+ --_sf-hr-in-ad-tt-sg: var(
1089
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1090
+ var(
1091
+ --_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1092
+ var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg)
1093
+ )
1094
+ );
1095
+
1096
+ // for shadow
1097
+ --_sf-hr-sw-ae: var(
1098
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae,
1099
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae))
1100
+ );
1101
+ --_sf-hr-sw-br: var(
1102
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br,
1103
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br))
1104
+ );
1105
+ --_sf-hr-sw-hr: var(
1106
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr,
1107
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr))
1108
+ );
1109
+ --_sf-hr-sw-cr: var(
1110
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr,
1111
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr))
1112
+ );
1113
+
1114
+ // for font
1115
+
1116
+ --_sf-hr-cr: var(
1117
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr,
1118
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr))
1119
+ );
1120
+ --_sf-hr-ft-fy: var(
1121
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
1122
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy))
1123
+ );
1124
+ --_sf-hr-ft-se: var(
1125
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
1126
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se))
1127
+ );
1128
+ --_sf-hr-ft-wt: var(
1129
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt,
1130
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt))
1131
+ );
1132
+ --_sf-hr-ft-se-ic: var(
1133
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1134
+ var(
1135
+ --_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1136
+ var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic)
1137
+ )
1138
+ );
1139
+ --_sf-hr-tt-an: var(
1140
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an,
1141
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an))
1142
+ );
1143
+ --_sf-hr-lr-sg: var(
1144
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg,
1145
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg))
1146
+ );
1147
+ --_sf-hr-le-ht: var(
1148
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht,
1149
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht))
1150
+ );
1151
+
1152
+ --_sf-hr-in-se: var(
1153
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1154
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1155
+ );
1156
+ --_sf-hr-in-se: var(
1157
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1158
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1159
+ );
1160
+ --_sf-hr-in-c1: var(
1161
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1,
1162
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1))
1163
+ );
1164
+ --_sf-hr-ue: var(
1165
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue,
1166
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue))
1167
+ );
1168
+
1169
+ // for pading and width
1170
+ --_sf-hr-pg: var(
1171
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg,
1172
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg))
1173
+ );
1174
+ --_sf-hr-wh: var(
1175
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh,
1176
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh))
1177
+ );
1178
+
1179
+ &[data-hover-show-shadow="false"] {
1180
+ --_hover-show-shadow: none;
1181
+ }
1182
+ &[data-hover-show-icon="false"] {
1183
+ --_hover-show-icon: none;
1184
+ }
1185
+ }
1186
+
1187
+ background-color: var(
1188
+ --_sf-hr-bd-cr,
1189
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1190
+ );
1191
+
1192
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1193
+ display: flex;
1194
+ flex-direction: var(--_sf-fd-bn);
1195
+ align-items: center;
1196
+
1197
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1198
+ gap: var(
1199
+ --_sf-hr-in-ad-tt-sg,
1200
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1201
+ );
1202
+
1203
+ border-radius: var(
1204
+ --_sf-hr-br-rs,
1205
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1206
+ );
1207
+
1208
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1209
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1210
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1211
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1212
+
1213
+ &[data-show-border="true"] {
1214
+ border-color: var(
1215
+ --_sf-hr-br-cr,
1216
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1217
+ );
1218
+
1219
+ border-style: var(
1220
+ --_sf-hr-br-se,
1221
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1222
+ );
1223
+
1224
+ border-width: var(
1225
+ --_sf-hr-br-wh,
1226
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1227
+ );
1228
+ }
1229
+
1230
+ // text styles
1231
+
1232
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1233
+
1234
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
1235
+
1236
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1237
+
1238
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
1239
+
1240
+ font-style: var(
1241
+ --_sf-hr-ft-se-ic,
1242
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1243
+ );
1244
+
1245
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
1246
+
1247
+ letter-spacing: var(
1248
+ --_sf-hr-lr-sg,
1249
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1250
+ );
1251
+
1252
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
1253
+
1254
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1255
+
1256
+ [data-element-style="Text"] {
1257
+ display: inline-block;
1258
+ width: 100%;
1259
+ }
1260
+
1261
+ &[data-is-selected="true"] {
1262
+ --_sf-sd-bd-cr: var(
1263
+ --_ctm-mob-dn-me-sd-se-bd-cr,
1264
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr))
1265
+ );
1266
+ --_sf-sd-br-cr: var(
1267
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
1268
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr))
1269
+ );
1270
+ --_sf-sd-br-se: var(
1271
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
1272
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se))
1273
+ );
1274
+ --_sf-sd-br-wh: var(
1275
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
1276
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh))
1277
+ );
1278
+ --_sf-sd-br-rs: var(
1279
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
1280
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs))
1281
+ );
1282
+ --_sf-sd-at: var(
1283
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
1284
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at))
1285
+ );
1286
+ --_sf-sd-in-ad-tt-sg: var(
1287
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1288
+ var(
1289
+ --_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1290
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)
1291
+ )
1292
+ );
1293
+
1294
+ // for shadow
1295
+ --_sf-sd-sw-ae: var(
1296
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
1297
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae))
1298
+ );
1299
+ --_sf-sd-sw-br: var(
1300
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
1301
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br))
1302
+ );
1303
+ --_sf-sd-sw-hr: var(
1304
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
1305
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr))
1306
+ );
1307
+ --_sf-sd-sw-cr: var(
1308
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
1309
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr))
1310
+ );
1311
+
1312
+ // for font
1313
+
1314
+ --_sf-sd-cr: var(
1315
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
1316
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr))
1317
+ );
1318
+ --_sf-sd-ft-fy: var(
1319
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
1320
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy))
1321
+ );
1322
+ --_sf-sd-ft-se: var(
1323
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
1324
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se))
1325
+ );
1326
+ --_sf-sd-ft-wt: var(
1327
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
1328
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt))
1329
+ );
1330
+ --_sf-sd-ft-se-ic: var(
1331
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1332
+ var(
1333
+ --_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1334
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)
1335
+ )
1336
+ );
1337
+ --_sf-sd-tt-an: var(
1338
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
1339
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an))
1340
+ );
1341
+ --_sf-sd-lr-sg: var(
1342
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
1343
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg))
1344
+ );
1345
+ --_sf-sd-le-ht: var(
1346
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
1347
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht))
1348
+ );
1349
+
1350
+ --_sf-sd-in-se: var(
1351
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1352
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1353
+ );
1354
+ --_sf-sd-in-se: var(
1355
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1356
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1357
+ );
1358
+ --_sf-sd-in-c1: var(
1359
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
1360
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1))
1361
+ );
1362
+ --_sf-sd-ue: var(
1363
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
1364
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue))
1365
+ );
1366
+
1367
+ // for pading and width
1368
+ --_sf-sd-pg: var(
1369
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
1370
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg))
1371
+ );
1372
+ --_sf-sd-wh: var(
1373
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
1374
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh))
1375
+ );
1376
+
1377
+ &[data-hover-show-shadow="false"] {
1378
+ --_hover-show-shadow: none;
1379
+ }
1380
+ &[data-hover-show-icon="false"] {
1381
+ --_hover-show-icon: none;
1382
+ }
1383
+
1384
+ background-color: var(
1385
+ --_sf-sd-bd-cr,
1386
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1387
+ );
1388
+
1389
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1390
+ display: flex;
1391
+ flex-direction: var(--_sf-fd-bn);
1392
+ align-items: center;
1393
+
1394
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1395
+ gap: var(
1396
+ --_sf-sd-in-ad-tt-sg,
1397
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1398
+ );
1399
+
1400
+ border-radius: var(
1401
+ --_sf-sd-br-rs,
1402
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1403
+ );
1404
+
1405
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1406
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1407
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1408
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1409
+
1410
+ &[data-show-border="true"] {
1411
+ border-color: var(
1412
+ --_sf-sd-br-cr,
1413
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1414
+ );
1415
+
1416
+ border-style: var(
1417
+ --_sf-sd-br-se,
1418
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1419
+ );
1420
+
1421
+ border-width: var(
1422
+ --_sf-sd-br-wh,
1423
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1424
+ );
1425
+ }
1426
+
1427
+ // text styles
1428
+
1429
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1430
+
1431
+ font-family: var(
1432
+ --_sf-sd-ft-fy,
1433
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)
1434
+ );
1435
+
1436
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1437
+
1438
+ font-weight: var(
1439
+ --_sf-sd-ft-wt,
1440
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt)
1441
+ );
1442
+
1443
+ font-style: var(
1444
+ --_sf-sd-ft-se-ic,
1445
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1446
+ );
1447
+
1448
+ text-align: var(
1449
+ --_sf-sd-tt-an,
1450
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an)
1451
+ );
1452
+
1453
+ letter-spacing: var(
1454
+ --_sf-sd-lr-sg,
1455
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1456
+ );
1457
+
1458
+ line-height: var(
1459
+ --_sf-sd-le-ht,
1460
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht)
1461
+ );
1462
+
1463
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1464
+
1465
+ [data-element-style="Text"] {
1466
+ display: inline-block;
1467
+ width: 100%;
1468
+ }
1469
+ }
1470
+ }
1471
+ .embla {
1472
+ height: auto;
1473
+ .embla__viewport {
1474
+ .embla__container {
1475
+ display: flex;
1476
+ gap: prepareMediaVariable(--_ctm-dn-cy-ts-wt-se-im-gp);
1477
+ .embla__slide {
1478
+ width: unset;
1479
+ }
1480
+ }
1481
+ }
1482
+ }
1483
+ }
1484
+ .single__bundle_container {
1485
+ display: flex;
1486
+ flex-direction: column;
1487
+ gap: 16px;
1488
+ height: 100%;
1489
+
1490
+ .bundle__header {
1491
+ display: flex;
1492
+ flex-direction: row;
1493
+ align-items: center;
1494
+ justify-content: space-between;
1495
+
1496
+ .bundle__title {
1497
+ font-family: prepareMediaVariable(--_ctm-dn-hg-dn-ft-fy);
1498
+ font-size: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se);
1499
+ color: prepareMediaVariable(--_ctm-dn-hg-dn-cr);
1500
+ font-weight: prepareMediaVariable(--_ctm-dn-hg-dn-ft-wt);
1501
+ font-style: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se-ic);
1502
+ text-decoration: prepareMediaVariable(--_ctm-dn-hg-dn-ue);
1503
+ text-align: prepareMediaVariable(--_ctm-dn-hg-dn-tt-an);
1504
+ letter-spacing: vaprepareMediaVariabler(--_ctm-dn-hg-dn-lr-sg);
1505
+ line-height: prepareMediaVariable(--_ctm-dn-hg-dn-le-ht);
1506
+ background-color: prepareMediaVariable(--_ctm-dn-hg-dn-bd-cr);
1507
+ border-width: prepareMediaVariable(--_ctm-dn-hg-dn-br-wh);
1508
+ border-color: prepareMediaVariable(--_ctm-dn-hg-dn-br-cr);
1509
+ border-style: prepareMediaVariable(--_ctm-dn-hg-dn-br-se);
1510
+ border-radius: prepareMediaVariable(--_ctm-dn-hg-dn-br-rs);
1511
+ box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae)
1512
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-br)
1513
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd)
1514
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
1515
+ }
1516
+
1517
+ .bundle__description {
1518
+ font-family: prepareMediaVariable(--_ctm-dn-dn-dn-ft-fy);
1519
+ font-size: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se);
1520
+ color: prepareMediaVariable(--_ctm-dn-dn-dn-cr);
1521
+ font-weight: prepareMediaVariable(--_ctm-dn-dn-dn-ft-wt);
1522
+ font-style: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se-ic);
1523
+ text-decoration: prepareMediaVariable(--_ctm-dn-dn-dn-ue);
1524
+ text-align: prepareMediaVariable(--_ctm-dn-dn-dn-tt-an);
1525
+ letter-spacing: prepareMediaVariable(--_ctm-dn-dn-dn-lr-sg);
1526
+ line-height: prepareMediaVariable(--_ctm-dn-dn-dn-le-ht);
1527
+ background-color: prepareMediaVariable(--_ctm-dn-dn-dn-bd-cr);
1528
+ border-width: prepareMediaVariable(--_ctm-dn-dn-dn-br-wh);
1529
+ border-color: prepareMediaVariable(--_ctm-dn-dn-dn-br-cr);
1530
+ border-style: prepareMediaVariable(--_ctm-dn-dn-dn-br-se);
1531
+ border-radius: prepareMediaVariable(--_ctm-dn-dn-dn-br-rs);
1532
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae)
1533
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-br)
1534
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd)
1535
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
1536
+ }
1537
+ .button__items {
1538
+ display: flex;
1539
+ align-items: center;
1540
+ }
1541
+ .btn__with__text[data-btn-name="bundleDetailPageButton"] {
1542
+ justify-content: center;
1543
+ &[data-show-shadow="false"] {
1544
+ --_show-shadow: none;
1545
+ }
1546
+ &[data-icon-position="left"] {
1547
+ --_sf-fd-bn: row;
1548
+ }
1549
+ &[data-icon-position="right"] {
1550
+ --_sf-fd-bn: row-reverse;
1551
+ }
1552
+ &[data-icon-position="center"] {
1553
+ --_sf-fd-bn: row;
1554
+ }
1555
+
1556
+ &:hover {
1557
+ --_sf-hr-bd-cr: var(
1558
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1559
+ var(
1560
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1561
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)
1562
+ )
1563
+ );
1564
+ --_sf-hr-br-cr: var(
1565
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1566
+ var(
1567
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1568
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)
1569
+ )
1570
+ );
1571
+ --_sf-hr-br-se: var(
1572
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
1573
+ var(
1574
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
1575
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)
1576
+ )
1577
+ );
1578
+ --_sf-hr-br-wh: var(
1579
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1580
+ var(
1581
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1582
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)
1583
+ )
1584
+ );
1585
+ --_sf-hr-br-rs: var(
1586
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1587
+ var(
1588
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1589
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)
1590
+ )
1591
+ );
1592
+ --_sf-hr-at: var(
1593
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
1594
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at))
1595
+ );
1596
+ --_sf-hr-gp: var(
1597
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
1598
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp))
1599
+ );
1600
+
1601
+ // for shadow
1602
+ --_sf-hr-sw-ae: var(
1603
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1604
+ var(
1605
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1606
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)
1607
+ )
1608
+ );
1609
+ --_sf-hr-sw-br: var(
1610
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1611
+ var(
1612
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1613
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)
1614
+ )
1615
+ );
1616
+ --_sf-hr-sw-hr: var(
1617
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1618
+ var(
1619
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1620
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)
1621
+ )
1622
+ );
1623
+ --_sf-hr-sw-cr: var(
1624
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1625
+ var(
1626
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1627
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)
1628
+ )
1629
+ );
1630
+
1631
+ // for font
1632
+
1633
+ --_sf-hr-cr: var(
1634
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
1635
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr))
1636
+ );
1637
+ --_sf-hr-ft-fy: var(
1638
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1639
+ var(
1640
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1641
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)
1642
+ )
1643
+ );
1644
+ --_sf-hr-ft-se: var(
1645
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1646
+ var(
1647
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1648
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)
1649
+ )
1650
+ );
1651
+ --_sf-hr-ft-wt: var(
1652
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1653
+ var(
1654
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1655
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)
1656
+ )
1657
+ );
1658
+ --_sf-hr-ft-se-ic: var(
1659
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1660
+ var(
1661
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1662
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)
1663
+ )
1664
+ );
1665
+ --_sf-hr-tt-an: var(
1666
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1667
+ var(
1668
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1669
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)
1670
+ )
1671
+ );
1672
+ --_sf-hr-lr-sg: var(
1673
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1674
+ var(
1675
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1676
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)
1677
+ )
1678
+ );
1679
+ --_sf-hr-le-ht: var(
1680
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1681
+ var(
1682
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1683
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)
1684
+ )
1685
+ );
1686
+
1687
+ --_sf-hr-in-se: var(
1688
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1689
+ var(
1690
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1691
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1692
+ )
1693
+ );
1694
+ --_sf-hr-in-se: var(
1695
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1696
+ var(
1697
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1698
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1699
+ )
1700
+ );
1701
+ --_sf-hr-in-c1: var(
1702
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1703
+ var(
1704
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1705
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)
1706
+ )
1707
+ );
1708
+ --_sf-hr-ue: var(
1709
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
1710
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue))
1711
+ );
1712
+
1713
+ // for pading and width
1714
+ --_sf-hr-pg: var(
1715
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
1716
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg))
1717
+ );
1718
+ --_sf-hr-wh: var(
1719
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
1720
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh))
1721
+ );
1722
+
1723
+ &[data-hover-show-shadow="false"] {
1724
+ --_hover-show-shadow: none;
1725
+ }
1726
+ &[data-hover-show-icon="false"] {
1727
+ --_hover-show-icon: none;
1728
+ }
1729
+ }
1730
+ background-color: var(
1731
+ --_sf-hr-bd-cr,
1732
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr)
1733
+ );
1734
+
1735
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-pg));
1736
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wh));
1737
+ display: flex;
1738
+ flex-direction: var(--_sf-fd-bn);
1739
+ align-items: center;
1740
+
1741
+ justify-content: var(
1742
+ --_sf-hr-at,
1743
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at)
1744
+ );
1745
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-gp));
1746
+
1747
+ border-radius: var(
1748
+ --_sf-hr-br-rs,
1749
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs)
1750
+ );
1751
+
1752
+ box-shadow: var(
1753
+ --_sf-hr-sw-ae,
1754
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)
1755
+ )
1756
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br))
1757
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd))
1758
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));
1759
+
1760
+ &[data-show-border="true"] {
1761
+ border-color: var(
1762
+ --_sf-hr-br-cr,
1763
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr)
1764
+ );
1765
+
1766
+ border-style: var(
1767
+ --_sf-hr-br-se,
1768
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se)
1769
+ );
1770
+
1771
+ border-width: var(
1772
+ --_sf-hr-br-wh,
1773
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh)
1774
+ );
1775
+ }
1776
+
1777
+ .txt {
1778
+ display: flex;
1779
+
1780
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-cr));
1781
+
1782
+ font-family: var(
1783
+ --_sf-hr-ft-fy,
1784
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy)
1785
+ );
1786
+
1787
+ font-size: var(
1788
+ --_sf-hr-ft-se,
1789
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se)
1790
+ );
1791
+
1792
+ font-weight: var(
1793
+ --_sf-hr-ft-wt,
1794
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt)
1795
+ );
1796
+
1797
+ font-style: var(
1798
+ --_sf-hr-ft-se-ic,
1799
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic)
1800
+ );
1801
+
1802
+ text-align: var(
1803
+ --_sf-hr-tt-an,
1804
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an)
1805
+ );
1806
+
1807
+ letter-spacing: var(
1808
+ --_sf-hr-lr-sg,
1809
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg)
1810
+ );
1811
+
1812
+ line-height: var(
1813
+ --_sf-hr-le-ht,
1814
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht)
1815
+ );
1816
+
1817
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1818
+ }
1819
+
1820
+ .icon {
1821
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1822
+ svg {
1823
+ width: var(
1824
+ --_sf-hr-in-se,
1825
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1826
+ );
1827
+ height: var(
1828
+ --_sf-hr-in-se,
1829
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1830
+ );
1831
+
1832
+ path {
1833
+ stroke: var(
1834
+ --_sf-hr-in-c1,
1835
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1)
1836
+ );
1837
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
1838
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-se-wh, 1.25);
1839
+ }
1840
+ }
1841
+ }
1842
+ [data-element-style="Text"] {
1843
+ display: inline-block;
1844
+ width: 100%;
1845
+ }
1846
+
1847
+ .icon--hover {
1848
+ // position: absolute;
1849
+ // inset: 0;
1850
+ // opacity: 0;
1851
+ display: none;
1852
+ transition: opacity 0.2s ease;
1853
+ }
1854
+
1855
+ &:hover .icon--hover {
1856
+ // opacity: 1;
1857
+ display: flex;
1858
+ }
1859
+
1860
+ &:hover .icon--default {
1861
+ // opacity: 0;
1862
+ display: none;
1863
+ }
1864
+ }
1865
+ }
1866
+ .divider {
1867
+ border: none;
1868
+ height: var(
1869
+ --_ctm-mob-dr-dr-wt,
1870
+ var(--_ctm-tab-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
1871
+ ); /* Set thickness */
1872
+ background-color: var(
1873
+ --_ctm-mob-dr-dr-cr,
1874
+ var(--_ctm-tab-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
1875
+ );
1876
+ }
1877
+ .single__bundle_slider {
1878
+ display: flex;
1879
+ flex-direction: column;
1880
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
1881
+ align-items: flex-start;
1882
+ flex: 1;
1883
+ min-height: 0;
1884
+ // height: 100%;
1885
+ // & > div {
1886
+ // height: 100%;
1887
+ // }
1888
+ .embla__warper {
1889
+ // height: 80%;
1890
+ flex: 1;
1891
+ min-height: 0;
1892
+ width: 100%;
1893
+ }
1894
+ .items__warper {
1895
+ display: flex;
1896
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
1897
+ flex-wrap: wrap;
1898
+ // align-items: center;
1899
+ --items-per-row: #{prepareMediaVariable(--_ctm-lt-is-pr-rw)};
1900
+ .bundle-image-container,
1901
+ .tiles-grid-view {
1902
+ flex: 0 0 calc((100% / var(--items-per-row)) - var(--_ctm-lt-im-sg));
1903
+ height: unset;
1904
+ }
1905
+ }
1906
+ .bundle-image-container {
1907
+ height: 100%;
1908
+ background-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-bd-cr);
1909
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-wh);
1910
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-se);
1911
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-cr);
1912
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-rs);
1913
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae)
1914
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br)
1915
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd)
1916
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
1917
+ width: 100%;
1918
+ display: flex;
1919
+ flex-direction: column;
1920
+ gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
1921
+
1922
+ .showcase-img {
1923
+ flex-grow: 1;
1924
+ // padding: 16px;
1925
+ align-items: center;
1926
+ justify-content: center;
1927
+ display: flex;
1928
+ // height: 100%;
1929
+ flex: 1;
1930
+ min-height: 100px;
1931
+ width: 100%;
1932
+ max-height: prepareMediaVariable(--_ctm-lt-ie-ht);
1933
+ img {
1934
+ max-width: 100%;
1935
+ // max-height: 100%;
1936
+ // height: 100%;
1937
+ width: 100%;
1938
+ // object-fit: fill;
1939
+ height: prepareMediaVariable(--_ctm-lt-ie-ht);
1940
+ }
1941
+ }
1942
+ .img-title {
1943
+ // padding: 12px;
1944
+ font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
1945
+ font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
1946
+ color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
1947
+ font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
1948
+ font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
1949
+ text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
1950
+ text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
1951
+ letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
1952
+ line-height: prepareMediaVariablear(--_ctm-dn-pt-ne-dn-le-ht);
1953
+ background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
1954
+ border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
1955
+ border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
1956
+ border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1957
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1958
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1959
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
1960
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
1961
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
1962
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1963
+ &#{$overflowSelector} {
1964
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1965
+ }
1966
+ }
1967
+ }
1968
+ .bundle__navigation_btn_wrapper {
1969
+ display: flex;
1970
+ width: 100%;
1971
+ justify-content: center;
1972
+ }
1973
+ .btn__with__text[data-btn-name="bundle_navigation_button"] {
1974
+ justify-content: center;
1975
+ &[data-show-shadow="false"] {
1976
+ --_show-shadow: none;
1977
+ }
1978
+ &[data-icon-position="left"] {
1979
+ --_sf-fd-bn: row;
1980
+ }
1981
+ &[data-icon-position="right"] {
1982
+ --_sf-fd-bn: row-reverse;
1983
+ }
1984
+ &[data-icon-position="center"] {
1985
+ --_sf-fd-bn: row;
1986
+ }
1987
+
1988
+ &:hover {
1989
+ --_sf-hr-bd-cr: var(
1990
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
1991
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr))
1992
+ );
1993
+ --_sf-hr-br-cr: var(
1994
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
1995
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr))
1996
+ );
1997
+ --_sf-hr-br-se: var(
1998
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
1999
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se))
2000
+ );
2001
+ --_sf-hr-br-wh: var(
2002
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
2003
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh))
2004
+ );
2005
+ --_sf-hr-br-rs: var(
2006
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
2007
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs))
2008
+ );
2009
+ --_sf-hr-at: var(
2010
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
2011
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at))
2012
+ );
2013
+ --_sf-hr-gp: var(
2014
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
2015
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp))
2016
+ );
2017
+
2018
+ // for shadow
2019
+ --_sf-hr-sw-ae: var(
2020
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
2021
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae))
2022
+ );
2023
+ --_sf-hr-sw-br: var(
2024
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
2025
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br))
2026
+ );
2027
+ --_sf-hr-sw-hr: var(
2028
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
2029
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr))
2030
+ );
2031
+ --_sf-hr-sw-cr: var(
2032
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
2033
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr))
2034
+ );
2035
+
2036
+ // for font
2037
+
2038
+ --_sf-hr-cr: var(
2039
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
2040
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr))
2041
+ );
2042
+ --_sf-hr-ft-fy: var(
2043
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
2044
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy))
2045
+ );
2046
+ --_sf-hr-ft-se: var(
2047
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
2048
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se))
2049
+ );
2050
+ --_sf-hr-ft-wt: var(
2051
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
2052
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt))
2053
+ );
2054
+ --_sf-hr-ft-se-ic: var(
2055
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2056
+ var(
2057
+ --_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2058
+ var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)
2059
+ )
2060
+ );
2061
+ --_sf-hr-tt-an: var(
2062
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
2063
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an))
2064
+ );
2065
+ --_sf-hr-lr-sg: var(
2066
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
2067
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg))
2068
+ );
2069
+ --_sf-hr-le-ht: var(
2070
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
2071
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht))
2072
+ );
2073
+
2074
+ --_sf-hr-in-se: var(
2075
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2076
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2077
+ );
2078
+ --_sf-hr-in-se: var(
2079
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2080
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2081
+ );
2082
+ --_sf-hr-in-c1: var(
2083
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
2084
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1))
2085
+ );
2086
+ --_sf-hr-ue: var(
2087
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
2088
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue))
2089
+ );
2090
+
2091
+ // for pading and width
2092
+ --_sf-hr-pg: var(
2093
+ --_ctm-mob-dn-be-nn-bn-dn-hr-pg,
2094
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg))
2095
+ );
2096
+ --_sf-hr-wh: var(
2097
+ --_ctm-mob-dn-be-nn-bn-dn-hr-wh,
2098
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh))
2099
+ );
2100
+
2101
+ &[data-hover-show-shadow="false"] {
2102
+ --_hover-show-shadow: none;
2103
+ }
2104
+ &[data-hover-show-icon="false"] {
2105
+ --_hover-show-icon: none;
2106
+ }
2107
+ }
2108
+ background-color: var(
2109
+ --_sf-hr-bd-cr,
2110
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr)
2111
+ );
2112
+
2113
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-pg));
2114
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wh));
2115
+ display: flex;
2116
+ flex-direction: var(--_sf-fd-bn);
2117
+ align-items: center;
2118
+
2119
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-at));
2120
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-gp));
2121
+
2122
+ border-radius: var(
2123
+ --_sf-hr-br-rs,
2124
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs)
2125
+ );
2126
+
2127
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae))
2128
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br))
2129
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd))
2130
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));
2131
+
2132
+ &[data-show-border="true"] {
2133
+ border-color: var(
2134
+ --_sf-hr-br-cr,
2135
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr)
2136
+ );
2137
+
2138
+ border-style: var(
2139
+ --_sf-hr-br-se,
2140
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se)
2141
+ );
2142
+
2143
+ border-width: var(
2144
+ --_sf-hr-br-wh,
2145
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh)
2146
+ );
2147
+ }
2148
+
2149
+ .txt {
2150
+ display: flex;
2151
+
2152
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-cr));
2153
+
2154
+ font-family: var(
2155
+ --_sf-hr-ft-fy,
2156
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy)
2157
+ );
2158
+
2159
+ font-size: var(
2160
+ --_sf-hr-ft-se,
2161
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se)
2162
+ );
2163
+
2164
+ font-weight: var(
2165
+ --_sf-hr-ft-wt,
2166
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt)
2167
+ );
2168
+
2169
+ font-style: var(
2170
+ --_sf-hr-ft-se-ic,
2171
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic)
2172
+ );
2173
+
2174
+ text-align: var(
2175
+ --_sf-hr-tt-an,
2176
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an)
2177
+ );
2178
+
2179
+ letter-spacing: var(
2180
+ --_sf-hr-lr-sg,
2181
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg)
2182
+ );
2183
+
2184
+ line-height: var(
2185
+ --_sf-hr-le-ht,
2186
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht)
2187
+ );
2188
+
2189
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2190
+ }
2191
+
2192
+ .icon {
2193
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2194
+ svg {
2195
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
2196
+ height: var(
2197
+ --_sf-hr-in-se,
2198
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se)
2199
+ );
2200
+
2201
+ path {
2202
+ stroke: var(
2203
+ --_sf-hr-in-c1,
2204
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1)
2205
+ );
2206
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
2207
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-se-wh, 1.25);
2208
+ }
2209
+ }
2210
+ }
2211
+ [data-element-style="Text"] {
2212
+ display: inline-block;
2213
+ width: 100%;
2214
+ }
2215
+
2216
+ .icon--hover {
2217
+ // position: absolute;
2218
+ // inset: 0;
2219
+ // opacity: 0;
2220
+ display: none;
2221
+ transition: opacity 0.2s ease;
2222
+ }
2223
+
2224
+ &:hover .icon--hover {
2225
+ // opacity: 1;
2226
+ display: flex;
2227
+ }
2228
+
2229
+ &:hover .icon--default {
2230
+ // opacity: 0;
2231
+ display: none;
2232
+ }
2233
+ }
2234
+
2235
+ a {
2236
+ width: 100%;
2237
+ display: flex;
2238
+ align-items: center;
2239
+
2240
+ .bundle_navigation_button {
2241
+ display: flex;
2242
+ width: 100%;
2243
+ padding: 16px 24px;
2244
+ justify-content: center;
2245
+ align-items: center;
2246
+ gap: 12px;
2247
+ align-self: stretch;
2248
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2249
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2250
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2251
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2252
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2253
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2254
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2255
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2256
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2257
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2258
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2259
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2260
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2261
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2262
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2263
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2264
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2265
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2266
+
2267
+ .icon {
2268
+ svg {
2269
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2270
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2271
+ path {
2272
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2273
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
2274
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2275
+ }
2276
+ }
2277
+ }
2278
+ }
2279
+ }
2280
+ }
2281
+
2282
+ .tiles-grid-view {
2283
+ display: flex;
2284
+ flex-wrap: wrap;
2285
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
2286
+ width: 100%;
2287
+ height: 100%;
2288
+
2289
+ .tiles-container {
2290
+ display: flex;
2291
+ flex-wrap: wrap;
2292
+ justify-content: center;
2293
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
2294
+ width: 100%;
2295
+ height: 100%;
2296
+
2297
+ .tile {
2298
+ // width: 350px !important;
2299
+ width: 100%;
2300
+ height: 100%;
2301
+ overflow: hidden;
2302
+ padding: 16px;
2303
+ display: flex;
2304
+ flex-direction: column;
2305
+ align-items: flex-start;
2306
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
2307
+ justify-content: space-between;
2308
+ background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
2309
+ // Border only drawn when the tile card's "Show Border" toggle is on.
2310
+ &[data-show-border="true"] {
2311
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
2312
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
2313
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
2314
+ }
2315
+ border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
2316
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae)
2317
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br)
2318
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd)
2319
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);
2320
+
2321
+ .tile-content {
2322
+ display: flex;
2323
+ flex-direction: column;
2324
+ gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
2325
+ align-items: flex-start;
2326
+ height: 100%;
2327
+ width: 100%;
2328
+ .tile_bundle_name {
2329
+ display: flex;
2330
+ align-items: flex-start;
2331
+ justify-content: flex-start;
2332
+ width: 100%;
2333
+ // overflow: hidden;
2334
+ // text-overflow: ellipsis;
2335
+ // white-space: nowrap;
2336
+ font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
2337
+ font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
2338
+ color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
2339
+ font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
2340
+ font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
2341
+ text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
2342
+ text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
2343
+ letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
2344
+ line-height: prepareMediaVariable(--_ctm-dn-pt-ne-dn-le-ht);
2345
+ background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
2346
+ border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
2347
+ border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
2348
+ border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
2349
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
2350
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
2351
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
2352
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
2353
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
2354
+
2355
+ &#{$overflowSelector} {
2356
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2357
+ }
2358
+ }
2359
+
2360
+ // Category name + slider arrows of a category bundle. Tiles in the
2361
+ // same row whose bundle has no category render this row empty, so
2362
+ // every tile's image grid starts at the same height instead of
2363
+ // riding up under the bundle name.
2364
+ .tile_category_row {
2365
+ display: flex;
2366
+ align-items: center;
2367
+ justify-content: space-between;
2368
+ width: 100%;
2369
+
2370
+ // An empty name still has to occupy its line box.
2371
+ .tile_category_name:empty::before {
2372
+ content: "\00a0";
2373
+ }
2374
+
2375
+ // Rows next to a category slider also reserve the arrow button
2376
+ // box — same sizing NAVIGATION_STYLES gives those buttons.
2377
+ &[data-reserve-nav-height="true"] {
2378
+ min-height: calc(
2379
+ var(
2380
+ --_sf-icn-size,
2381
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se, 16px)}
2382
+ ) *
2383
+ 1.75
2384
+ );
2385
+ }
2386
+ }
2387
+
2388
+ .brand-tile {
2389
+ display: flex;
2390
+ justify-content: center;
2391
+ align-items: center;
2392
+ height: -webkit-fill-available;
2393
+
2394
+ img {
2395
+ width: 100%;
2396
+ height: 100%;
2397
+ // object-fit: fill;
2398
+ }
2399
+ }
2400
+
2401
+ .product-tile {
2402
+ // `--_sf-tile-columns` / `--_sf-tile-rows` are set inline by
2403
+ // TilesGridView from the Tile Columns / Tile Rows layout
2404
+ // settings — the same numbers it uses to decide how many image
2405
+ // cells to mount, so the template never holds cells the
2406
+ // renderer did not fill. The 2x2 fallback covers elements
2407
+ // rendered before those settings existed.
2408
+ display: grid;
2409
+ flex: 1 1 auto;
2410
+ row-gap: prepareMediaVariable(--_ctm-lt-te-rw-gp);
2411
+ column-gap: prepareMediaVariable(--_ctm-lt-te-cn-gp);
2412
+ // padding: 10px;
2413
+ box-sizing: border-box;
2414
+ width: 100%;
2415
+ grid-template-columns: repeat(var(--_sf-tile-columns, 2), 1fr);
2416
+ grid-template-rows: repeat(var(--_sf-tile-rows, 2), 1fr);
2417
+
2418
+ // One image height per row.
2419
+ height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * var(--_sf-tile-rows, 2));
2420
+
2421
+ // A bundle with no products at all shows a single placeholder
2422
+ // image, which keeps the whole grid area to itself.
2423
+ &.images-0 .product-image-wrapper {
2424
+ grid-column: 1 / -1;
2425
+ grid-row: 1 / -1;
2426
+ }
2427
+
2428
+ &.animate-flip {
2429
+ // Padding cells hold no image, so they sit the animation out.
2430
+ .product-image-wrapper:not(.empty-image-slot) {
2431
+ animation: flip 0.6s ease-in-out;
2432
+ }
2433
+
2434
+ @keyframes flip {
2435
+ 0% {
2436
+ transform: rotateY(0deg);
2437
+ }
2438
+ 100% {
2439
+ transform: rotateY(180deg);
2440
+ }
2441
+ }
2442
+ }
2443
+
2444
+ .product-image-wrapper {
2445
+ width: 100%;
2446
+ height: 100%;
2447
+ overflow: hidden;
2448
+ display: flex;
2449
+ justify-content: center;
2450
+ align-items: center;
2451
+ background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
2452
+ // Border only drawn when the tile card image's "Show Border" toggle is on.
2453
+ &[data-show-border="true"] {
2454
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2455
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2456
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2457
+ }
2458
+ border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
2459
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae)
2460
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br)
2461
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd)
2462
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);
2463
+
2464
+ img {
2465
+ // max-height: 135px;
2466
+ height: 100%;
2467
+ width: 100%;
2468
+ // object-fit: fill;
2469
+ }
2470
+ }
2471
+ }
2472
+ }
2473
+
2474
+ .bundle_navigation_button {
2475
+ width: 100%;
2476
+ display: flex;
2477
+ padding: 16px 24px;
2478
+ justify-content: center;
2479
+ align-items: center;
2480
+ gap: 12px;
2481
+ align-self: stretch;
2482
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2483
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2484
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2485
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2486
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2487
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2488
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2489
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2490
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2491
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2492
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2493
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2494
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2495
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2496
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2497
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2498
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2499
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2500
+
2501
+ .icon {
2502
+ svg {
2503
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2504
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2505
+ path {
2506
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2507
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
2508
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2509
+ }
2510
+ }
2511
+ }
2512
+ }
2513
+
2514
+ a {
2515
+ display: flex;
2516
+ align-items: center;
2517
+ width: 100%;
2518
+
2519
+ .bundle_navigation_button {
2520
+ width: 100%;
2521
+ display: flex;
2522
+ padding: 16px 24px;
2523
+ justify-content: center;
2524
+ align-items: center;
2525
+ gap: 12px;
2526
+ align-self: stretch;
2527
+ text-transform: uppercase;
2528
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2529
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2530
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2531
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2532
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2533
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2534
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2535
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2536
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2537
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2538
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2539
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2540
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2541
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2542
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2543
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2544
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2545
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2546
+
2547
+ .icon {
2548
+ svg {
2549
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2550
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2551
+ path {
2552
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2553
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
2554
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2555
+ }
2556
+ }
2557
+ }
2558
+ }
2559
+ }
2560
+ }
2561
+ }
2562
+ }
2563
+ .embla__container {
2564
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
2565
+ }
2566
+ }
2567
+ .arrow-navigation-categories {
2568
+ display: flex;
2569
+ flex-direction: row;
2570
+ align-items: center;
2571
+ justify-content: space-between;
2572
+ gap: 4px;
2573
+
2574
+ & > button {
2575
+ // display: var(--_d-flex);
2576
+ // align-items: center;
2577
+ // justify-content: center;
2578
+
2579
+ @include NAVIGATION_STYLES();
2580
+ }
2581
+ }
2582
+ }
2583
+ }
2584
+ }