@sc-360-v2/storefront-cms-library 0.4.28 → 0.4.30

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 (30) hide show
  1. package/dist/add-products-tab.scss +163 -36
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +6 -0
  4. package/dist/bundle copy.scss +2805 -0
  5. package/dist/bundle.scss +1632 -1614
  6. package/dist/buyForHeaders.scss +35 -15
  7. package/dist/buyForPopup.scss +19 -5
  8. package/dist/default-dropdown.scss +226 -0
  9. package/dist/filters.scss +78 -20
  10. package/dist/language-selector.scss +25 -1
  11. package/dist/modal.scss +8 -0
  12. package/dist/multi-select-dropdown.scss +23 -13
  13. package/dist/order-status.scss +1 -1
  14. package/dist/product-image.scss +61 -3
  15. package/dist/quick-order-pad.scss +49 -46
  16. package/dist/repeater.scss +9 -4
  17. package/dist/review-cart.scss +5 -3
  18. package/dist/shipping-payments.scss +475 -187
  19. package/dist/types/builder/enums/data-connectors.d.ts +0 -1
  20. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +28 -12
  21. package/dist/types/builder/tools/element-edit/bundle.d.ts +837 -4
  22. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +868 -84
  23. package/dist/types/builder/tools/element-edit/filters.d.ts +8 -1
  24. package/dist/types/builder/tools/element-edit/imageInstance.d.ts +33 -0
  25. package/dist/types/builder/tools/element-edit/product-image.d.ts +1 -0
  26. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +1 -6
  27. package/dist/types/website/constants/data-connectors.d.ts +0 -4
  28. package/dist/website.js +1 -1
  29. package/dist/widget.scss +1 -0
  30. package/package.json +1 -1
package/dist/bundle copy.scss ADDED
@@ -0,0 +1,2805 @@
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:
352
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)), sans-serif;
353
+
354
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
355
+
356
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
357
+
358
+ font-style: var(
359
+ --_sf-hr-ft-se-ic,
360
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
361
+ );
362
+
363
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
364
+
365
+ letter-spacing: var(
366
+ --_sf-hr-lr-sg,
367
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
368
+ );
369
+
370
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
371
+
372
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
373
+
374
+ [data-element-style="Text"] {
375
+ display: inline-block;
376
+ width: 100%;
377
+ }
378
+
379
+ &[data-is-selected="true"] {
380
+ --_sf-sd-bd-cr: var(
381
+ --_ctm-mob-dn-me-sd-se-bd-cr,
382
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr))
383
+ );
384
+ --_sf-sd-br-cr: var(
385
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
386
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr))
387
+ );
388
+ --_sf-sd-br-se: var(
389
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
390
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se))
391
+ );
392
+ --_sf-sd-br-wh: var(
393
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
394
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh))
395
+ );
396
+ --_sf-sd-br-rs: var(
397
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
398
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs))
399
+ );
400
+ --_sf-sd-at: var(
401
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-at,
402
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at))
403
+ );
404
+ --_sf-sd-in-ad-tt-sg: var(
405
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
406
+ var(
407
+ --_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
408
+ var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)
409
+ )
410
+ );
411
+
412
+ // for shadow
413
+ --_sf-sd-sw-ae: var(
414
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
415
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae))
416
+ );
417
+ --_sf-sd-sw-br: var(
418
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
419
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br))
420
+ );
421
+ --_sf-sd-sw-hr: var(
422
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
423
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr))
424
+ );
425
+ --_sf-sd-sw-cr: var(
426
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
427
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr))
428
+ );
429
+
430
+ // for font
431
+
432
+ --_sf-sd-cr: var(
433
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
434
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr))
435
+ );
436
+ --_sf-sd-ft-fy: var(
437
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
438
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy))
439
+ );
440
+ --_sf-sd-ft-se: var(
441
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
442
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se))
443
+ );
444
+ --_sf-sd-ft-wt: var(
445
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
446
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt))
447
+ );
448
+ --_sf-sd-ft-se-ic: var(
449
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
450
+ var(
451
+ --_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
452
+ var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)
453
+ )
454
+ );
455
+ --_sf-sd-tt-an: var(
456
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
457
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an))
458
+ );
459
+ --_sf-sd-lr-sg: var(
460
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
461
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg))
462
+ );
463
+ --_sf-sd-le-ht: var(
464
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
465
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht))
466
+ );
467
+
468
+ --_sf-sd-in-se: var(
469
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
470
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
471
+ );
472
+ --_sf-sd-in-se: var(
473
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
474
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
475
+ );
476
+ --_sf-sd-in-c1: var(
477
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
478
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1))
479
+ );
480
+ --_sf-sd-ue: var(
481
+ --_ctm-mob-dn-be-ts-be-tb-hr-ue,
482
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue))
483
+ );
484
+
485
+ // for pading and width
486
+ --_sf-sd-pg: var(
487
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
488
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg))
489
+ );
490
+ --_sf-sd-wh: var(
491
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
492
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh))
493
+ );
494
+
495
+ &[data-hover-show-shadow="false"] {
496
+ --_hover-show-shadow: none;
497
+ }
498
+ &[data-hover-show-icon="false"] {
499
+ --_hover-show-icon: none;
500
+ }
501
+
502
+ background-color: var(
503
+ --_sf-sd-bd-cr,
504
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
505
+ );
506
+
507
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
508
+ display: flex;
509
+ flex-direction: var(--_sf-fd-bn);
510
+ align-items: center;
511
+
512
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
513
+ gap: var(
514
+ --_sf-sd-in-ad-tt-sg,
515
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
516
+ );
517
+
518
+ border-radius: var(
519
+ --_sf-sd-br-rs,
520
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
521
+ );
522
+
523
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
524
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
525
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
526
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
527
+
528
+ &[data-show-border="true"] {
529
+ border-color: var(
530
+ --_sf-sd-br-cr,
531
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
532
+ );
533
+
534
+ border-style: var(
535
+ --_sf-sd-br-se,
536
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
537
+ );
538
+
539
+ border-width: var(
540
+ --_sf-sd-br-wh,
541
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
542
+ );
543
+ }
544
+
545
+ // text styles
546
+
547
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
548
+
549
+ font-family:
550
+ var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)),
551
+ sans-serif;
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:
839
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)), sans-serif;
840
+
841
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
842
+
843
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
844
+
845
+ font-style: var(
846
+ --_sf-hr-ft-se-ic,
847
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
848
+ );
849
+
850
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
851
+
852
+ letter-spacing: var(
853
+ --_sf-hr-lr-sg,
854
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
855
+ );
856
+
857
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
858
+
859
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
860
+
861
+ [data-element-style="Text"] {
862
+ display: inline-block;
863
+ width: 100%;
864
+ }
865
+
866
+ &[data-is-selected="true"] {
867
+ --_sf-sd-bd-cr: var(
868
+ --_ctm-mob-dn-me-sd-se-bd-cr,
869
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr))
870
+ );
871
+ --_sf-sd-br-cr: var(
872
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
873
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr))
874
+ );
875
+ --_sf-sd-br-se: var(
876
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
877
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se))
878
+ );
879
+ --_sf-sd-br-wh: var(
880
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
881
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh))
882
+ );
883
+ --_sf-sd-br-rs: var(
884
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
885
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs))
886
+ );
887
+ --_sf-sd-at: var(
888
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
889
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at))
890
+ );
891
+ --_sf-sd-in-ad-tt-sg: var(
892
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
893
+ var(
894
+ --_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
895
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)
896
+ )
897
+ );
898
+
899
+ // for shadow
900
+ --_sf-sd-sw-ae: var(
901
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
902
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae))
903
+ );
904
+ --_sf-sd-sw-br: var(
905
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
906
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br))
907
+ );
908
+ --_sf-sd-sw-hr: var(
909
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
910
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr))
911
+ );
912
+ --_sf-sd-sw-cr: var(
913
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
914
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr))
915
+ );
916
+
917
+ // for font
918
+
919
+ --_sf-sd-cr: var(
920
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
921
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr))
922
+ );
923
+ --_sf-sd-ft-fy: var(
924
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
925
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy))
926
+ );
927
+ --_sf-sd-ft-se: var(
928
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
929
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se))
930
+ );
931
+ --_sf-sd-ft-wt: var(
932
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
933
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt))
934
+ );
935
+ --_sf-sd-ft-se-ic: var(
936
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
937
+ var(
938
+ --_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
939
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)
940
+ )
941
+ );
942
+ --_sf-sd-tt-an: var(
943
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
944
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an))
945
+ );
946
+ --_sf-sd-lr-sg: var(
947
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
948
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg))
949
+ );
950
+ --_sf-sd-le-ht: var(
951
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
952
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht))
953
+ );
954
+
955
+ --_sf-sd-in-se: var(
956
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
957
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
958
+ );
959
+ --_sf-sd-in-se: var(
960
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
961
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
962
+ );
963
+ --_sf-sd-in-c1: var(
964
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
965
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1))
966
+ );
967
+ --_sf-sd-ue: var(
968
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
969
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue))
970
+ );
971
+
972
+ // for pading and width
973
+ --_sf-sd-pg: var(
974
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
975
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg))
976
+ );
977
+ --_sf-sd-wh: var(
978
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
979
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh))
980
+ );
981
+
982
+ &[data-hover-show-shadow="false"] {
983
+ --_hover-show-shadow: none;
984
+ }
985
+ &[data-hover-show-icon="false"] {
986
+ --_hover-show-icon: none;
987
+ }
988
+
989
+ background-color: var(
990
+ --_sf-sd-bd-cr,
991
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
992
+ );
993
+
994
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
995
+ display: flex;
996
+ flex-direction: var(--_sf-fd-bn);
997
+ align-items: center;
998
+
999
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1000
+ gap: var(
1001
+ --_sf-sd-in-ad-tt-sg,
1002
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1003
+ );
1004
+
1005
+ border-radius: var(
1006
+ --_sf-sd-br-rs,
1007
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1008
+ );
1009
+
1010
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1011
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1012
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1013
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1014
+
1015
+ &[data-show-border="true"] {
1016
+ border-color: var(
1017
+ --_sf-sd-br-cr,
1018
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1019
+ );
1020
+
1021
+ border-style: var(
1022
+ --_sf-sd-br-se,
1023
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1024
+ );
1025
+
1026
+ border-width: var(
1027
+ --_sf-sd-br-wh,
1028
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1029
+ );
1030
+ }
1031
+
1032
+ // text styles
1033
+
1034
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1035
+
1036
+ font-family:
1037
+ var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)),
1038
+ sans-serif;
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
+ }