@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.50

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