@sc-360-v2/storefront-cms-library 0.2.84 → 0.2.85

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 (21) hide show
  1. package/dist/allocationDetails.scss +4 -0
  2. package/dist/allocations.scss +9 -0
  3. package/dist/builder.js +1 -1
  4. package/dist/bundle.scss +482 -297
  5. package/dist/bundleDetails.scss +1312 -0
  6. package/dist/code-temp.scss +2 -2
  7. package/dist/product.scss +1 -0
  8. package/dist/quick-links.scss +3 -3
  9. package/dist/search.scss +5 -5
  10. package/dist/spotlight.scss +125 -0
  11. package/dist/types/builder/elements/form-builder/index.d.ts +21 -20
  12. package/dist/types/builder/elements/spotlight/index.d.ts +63 -0
  13. package/dist/types/builder/enums/index.d.ts +6 -2
  14. package/dist/types/builder/index.d.ts +2 -1
  15. package/dist/types/builder/tools/element-edit/bundle.d.ts +493 -24
  16. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +17 -0
  17. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  18. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +14 -38
  19. package/dist/types/builder/tools/element-edit/spotlight.d.ts +32 -0
  20. package/dist/widget.scss +2 -0
  21. package/package.json +1 -1
package/dist/bundle.scss CHANGED
@@ -102,14 +102,91 @@ $resizeActive: '[data-cms-element-resizer="true"]';
102
102
  flex-direction: column;
103
103
  padding: 2rem;
104
104
  .single__bundle_container {
105
+ display: flex;
106
+ flex-direction: column;
107
+ gap: 16px;
108
+
105
109
  .bundle__header {
106
110
  display: flex;
107
111
  flex-direction: row;
108
112
  align-items: center;
109
113
  justify-content: space-between;
114
+
115
+ .bundle__title {
116
+ font-family: var(--_ctm-dn-hg-dn-ft-fy);
117
+ font-size: var(--_ctm-dn-hg-dn-ft-se);
118
+ color: var(--_ctm-dn-hg-dn-cr);
119
+ font-weight: var(--_ctm-dn-hg-dn-ft-wt);
120
+ font-style: var(--_ctm-dn-hg-dn-ft-se-ic);
121
+ text-decoration: var(--_ctm-dn-hg-dn-ue);
122
+ text-align: var(--_ctm-dn-hg-dn-tt-an);
123
+ letter-spacing: var(--_ctm-dn-hg-dn-lr-sg);
124
+ line-height: var(--_ctm-dn-hg-dn-le-ht);
125
+ background-color: var(--_ctm-dn-hg-dn-bd-cr);
126
+ border-width: var(--_ctm-dn-hg-dn-br-wh);
127
+ border-color: var(--_ctm-dn-hg-dn-br-cr);
128
+ border-style: var(--_ctm-dn-hg-dn-br-se);
129
+ border-radius: var(--_ctm-dn-hg-dn-br-rs);
130
+ box-shadow: var(--_ctm-dn-hg-dn-sw-ae) var(--_ctm-dn-hg-dn-sw-br)
131
+ var(--_ctm-dn-hg-dn-sw-sd) var(--_ctm-dn-hg-dn-sw-cr);
132
+ }
133
+
134
+ .bundle__description {
135
+ font-family: var(--_ctm-dn-dn-dn-ft-fy);
136
+ font-size: var(--_ctm-dn-dn-dn-ft-se);
137
+ color: var(--_ctm-dn-dn-dn-cr);
138
+ font-weight: var(--_ctm-dn-dn-dn-ft-wt);
139
+ font-style: var(--_ctm-dn-dn-dn-ft-se-ic);
140
+ text-decoration: var(--_ctm-dn-dn-dn-ue);
141
+ text-align: var(--_ctm-dn-dn-dn-tt-an);
142
+ letter-spacing: var(--_ctm-dn-dn-dn-lr-sg);
143
+ line-height: var(--_ctm-dn-dn-dn-le-ht);
144
+ background-color: var(--_ctm-dn-dn-dn-bd-cr);
145
+ border-width: var(--_ctm-dn-dn-dn-br-wh);
146
+ border-color: var(--_ctm-dn-dn-dn-br-cr);
147
+ border-style: var(--_ctm-dn-dn-dn-br-se);
148
+ border-radius: var(--_ctm-dn-dn-dn-br-rs);
149
+ box-shadow: var(--_ctm-dn-dn-dn-sw-ae) var(--_ctm-dn-dn-dn-sw-br)
150
+ var(--_ctm-dn-dn-dn-sw-sd) var(--_ctm-dn-dn-dn-sw-cr);
151
+ }
110
152
  .button__items {
111
153
  display: flex;
112
154
  align-items: center;
155
+
156
+ .bundle_detail_btn {
157
+ display: flex;
158
+ padding: 16px 24px;
159
+ justify-content: center;
160
+ align-items: center;
161
+ gap: 12px;
162
+ align-self: stretch;
163
+ font-family: var(--_ctm-dn-be-ds-pe-bn-dn-ft-fy);
164
+ font-size: var(--_ctm-dn-be-ds-pe-bn-dn-ft-se);
165
+ color: var(--_ctm-dn-be-ds-pe-bn-dn-cr);
166
+ font-weight: var(--_ctm-dn-be-ds-pe-bn-dn-ft-wt);
167
+ font-style: var(--_ctm-dn-be-ds-pe-bn-dn-ft-se-ic);
168
+ text-decoration: var(--_ctm-dn-be-ds-pe-bn-dn-ue);
169
+ text-align: var(--_ctm-dn-be-ds-pe-bn-dn-tt-an);
170
+ letter-spacing: var(--_ctm-dn-be-ds-pe-bn-dn-lr-sg);
171
+ line-height: var(--_ctm-dn-be-ds-pe-bn-dn-le-ht);
172
+ background-color: var(--_ctm-dn-be-ds-pe-bn-dn-bd-cr);
173
+ border-width: var(--_ctm-dn-be-ds-pe-bn-dn-br-wh);
174
+ border-color: var(--_ctm-dn-be-ds-pe-bn-dn-br-cr);
175
+ border-style: var(--_ctm-dn-be-ds-pe-bn-dn-br-se);
176
+ border-radius: var(--_ctm-dn-be-ds-pe-bn-dn-br-rs);
177
+ box-shadow: var(--_ctm-dn-be-ds-pe-bn-dn-sw-ae) var(--_ctm-dn-be-ds-pe-bn-dn-sw-br)
178
+ var(--_ctm-dn-be-ds-pe-bn-dn-sw-sd) var(--_ctm-dn-be-ds-pe-bn-dn-sw-cr);
179
+
180
+ .icon {
181
+ svg {
182
+ width: var(--_ctm-dn-be-ds-pe-bn-dn-in-se);
183
+ height: var(--_ctm-dn-be-ds-pe-bn-dn-in-se);
184
+ path {
185
+ stroke: var(--_ctm-dn-be-ds-pe-bn-dn-in-c1);
186
+ }
187
+ }
188
+ }
189
+ }
113
190
  .arrow-navigation {
114
191
  display: flex;
115
192
  flex-direction: row;
@@ -118,319 +195,428 @@ $resizeActive: '[data-cms-element-resizer="true"]';
118
195
  }
119
196
  }
120
197
  }
121
- hr {
122
- margin: 1rem;
123
- }
124
198
  .single__bundle_slider {
199
+ display: flex;
200
+ flex-direction: column;
201
+ gap: var(--_ctm-lt-im-gp);
202
+ align-items: flex-start;
203
+
125
204
  .bundle-image-container {
126
- border: 1px solid gray;
127
- border-radius: 1rem;
205
+ background-color: var(--_ctm-dn-pt-cd-dn-bd-cr);
206
+ border: var(--_ctm-dn-pt-cd-dn-br-wh) var(--_ctm-dn-pt-cd-dn-br-se)
207
+ var(--_ctm-dn-pt-cd-dn-br-cr);
208
+ border-radius: var(--_ctm-dn-pt-cd-dn-br-rs);
209
+ box-shadow: var(--_ctm-dn-pt-cd-dn-sw-ae) var(--_ctm-dn-pt-cd-dn-sw-br)
210
+ var(--_ctm-dn-pt-cd-dn-sw-sd) var(--_ctm-dn-pt-cd-dn-sw-cr);
128
211
  width: 100%;
212
+ display: flex;
213
+ flex-direction: column;
214
+ gap: var(--_ctm-lt-ig-tt-sg);
215
+
129
216
  .showcase-img {
130
217
  height: 400px;
131
- padding: 24px;
218
+ padding: 16px;
219
+ align-items: center;
220
+ justify-content: center;
221
+ display: flex;
222
+
132
223
  img {
133
224
  max-width: 100%;
134
225
  max-height: 100%;
135
226
  object-fit: contain;
136
227
  }
137
228
  }
138
- h4 {
229
+ .img-title {
139
230
  padding: 12px;
231
+ font-family: var(--_ctm-dn-pt-ne-dn-ft-fy);
232
+ font-size: var(--_ctm-dn-pt-ne-dn-ft-se);
233
+ color: var(--_ctm-dn-pt-ne-dn-cr);
234
+ font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt);
235
+ font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic);
236
+ text-decoration: var(--_ctm-dn-pt-ne-dn-ue);
237
+ text-align: var(--_ctm-dn-pt-ne-dn-tt-an);
238
+ letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg);
239
+ line-height: var(--_ctm-dn-pt-ne-dn-le-ht);
240
+ background-color: var(--_ctm-dn-pt-ne-dn-bd-cr);
241
+ border-width: var(--_ctm-dn-pt-ne-dn-br-wh);
242
+ border-color: var(--_ctm-dn-pt-ne-dn-br-cr);
243
+ border-style: var(--_ctm-dn-pt-ne-dn-br-se);
244
+ border-radius: var(--_ctm-dn-pt-ne-dn-br-rs);
245
+ box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br)
246
+ var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr);
247
+ }
248
+ }
249
+
250
+ .bundle_navigation_button {
251
+ display: flex;
252
+ padding: 16px 24px;
253
+ justify-content: center;
254
+ align-items: center;
255
+ gap: 12px;
256
+ align-self: stretch;
257
+ font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy);
258
+ font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se);
259
+ color: var(--_ctm-dn-be-nn-bn-dn-cr);
260
+ font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt);
261
+ font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
262
+ text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue);
263
+ text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an);
264
+ letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg);
265
+ line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht);
266
+ background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr);
267
+ border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh);
268
+ border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr);
269
+ border-style: var(--_ctm-dn-be-nn-bn-dn-br-se);
270
+ border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs);
271
+ box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br)
272
+ var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr);
273
+
274
+ .icon {
275
+ svg {
276
+ width: var(--_ctm-dn-be-nn-bn-dn-in-se);
277
+ height: var(--_ctm-dn-be-nn-bn-dn-in-se);
278
+ path {
279
+ stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
280
+ }
281
+ }
282
+ }
283
+ }
284
+ }
285
+
286
+ .single__bundle_vertical_scroll_wrapper {
287
+ display: flex;
288
+ flex-direction: column;
289
+ gap: var(--_ctm-lt-im-gp);
290
+ align-items: flex-start;
291
+ height: auto;
292
+
293
+ .single__bundle__vertical_scroll {
294
+ display: flex;
295
+ align-items: flex-start;
296
+ flex-direction: column;
297
+ gap: var(--_ctm-lt-im-gp);
298
+ height: auto;
299
+ max-height: var(--_ctm-lt-cr-ht);
300
+ overflow-y: auto;
301
+ width: 100%;
302
+
303
+ .vertical_card_wrapper {
304
+ display: flex;
305
+ align-items: center;
306
+ gap: var(--_ctm-lt-ig-tt-sg);
307
+ padding: 16px;
308
+ width: 100%;
309
+ background-color: var(--_ctm-dn-pt-cd-dn-bd-cr);
310
+ border-width: var(--_ctm-dn-lt-vw-cd-dn-br-wh);
311
+ border-style: var(--_ctm-dn-lt-vw-cd-dn-br-se);
312
+ border-color: var(--_ctm-dn-lt-vw-cd-dn-br-cr);
313
+ border-radius: var(--_ctm-dn-lt-vw-cd-dn-br-rs);
314
+ box-shadow: var(--_ctm-dn-lt-vw-cd-dn-sw-ae) var(--_ctm-dn-lt-vw-cd-dn-sw-br)
315
+ var(--_ctm-dn-lt-vw-cd-dn-sw-sd) var(--_ctm-dn-lt-vw-cd-dn-sw-cr);
316
+
317
+ .vertical_card_img_wrapper {
318
+ height: 100px;
319
+ width: 90px;
320
+
321
+ img {
322
+ width: 100% !important;
323
+ height: 100% !important;
324
+ }
325
+ }
326
+
327
+ .product_name {
328
+ display: flex;
329
+ flex: 1 0 0;
330
+ align-items: center;
331
+ justify-content: flex-start;
332
+ font-family: var(--_ctm-dn-pt-ne-dn-ft-fy);
333
+ font-size: var(--_ctm-dn-pt-ne-dn-ft-se);
334
+ color: var(--_ctm-dn-pt-ne-dn-cr);
335
+ font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt);
336
+ font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic);
337
+ text-decoration: var(--_ctm-dn-pt-ne-dn-ue);
338
+ text-align: var(--_ctm-dn-pt-ne-dn-tt-an);
339
+ letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg);
340
+ line-height: var(--_ctm-dn-pt-ne-dn-le-ht);
341
+ background-color: var(--_ctm-dn-pt-ne-dn-bd-cr);
342
+ border-width: var(--_ctm-dn-pt-ne-dn-br-wh);
343
+ border-color: var(--_ctm-dn-pt-ne-dn-br-cr);
344
+ border-style: var(--_ctm-dn-pt-ne-dn-br-se);
345
+ border-radius: var(--_ctm-dn-pt-ne-dn-br-rs);
346
+ box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br)
347
+ var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr);
348
+ }
349
+ }
350
+ }
351
+
352
+ .bundle_navigation_button {
353
+ display: flex;
354
+ padding: 16px 24px;
355
+ justify-content: center;
356
+ align-items: center;
357
+ gap: 12px;
358
+ align-self: stretch;
359
+ font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy);
360
+ font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se);
361
+ color: var(--_ctm-dn-be-nn-bn-dn-cr);
362
+ font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt);
363
+ font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
364
+ text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue);
365
+ text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an);
366
+ letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg);
367
+ line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht);
368
+ background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr);
369
+ border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh);
370
+ border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr);
371
+ border-style: var(--_ctm-dn-be-nn-bn-dn-br-se);
372
+ border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs);
373
+ box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br)
374
+ var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr);
375
+
376
+ .icon {
377
+ svg {
378
+ width: var(--_ctm-dn-be-nn-bn-dn-in-se);
379
+ height: var(--_ctm-dn-be-nn-bn-dn-in-se);
380
+ path {
381
+ stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
382
+ }
383
+ }
384
+ }
385
+ }
386
+ }
387
+
388
+ .single__bundle__grid_list {
389
+ .tiles-grid-view {
390
+ display: flex;
391
+ flex-wrap: wrap;
392
+ justify-content: center;
393
+ gap: var(--_ctm-lt-im-sg);
394
+
395
+ .tiles-container {
396
+ display: flex;
397
+ flex-wrap: wrap;
398
+ padding: 10px;
399
+ justify-content: center;
400
+ gap: var(--_ctm-lt-im-sg);
401
+
402
+ .tile {
403
+ width: 350px !important;
404
+ overflow: hidden;
405
+ padding: 16px;
406
+ display: flex;
407
+ flex-direction: column;
408
+ align-items: flex-start;
409
+ gap: var(--_ctm-lt-im-gp);
410
+ justify-content: space-between;
411
+ background-color: var(--_ctm-dn-te-cd-dn-bd-cr);
412
+ border-width: var(--_ctm-dn-te-cd-dn-br-wh);
413
+ border-style: var(--_ctm-dn-te-cd-dn-br-se);
414
+ border-color: var(--_ctm-dn-te-cd-dn-br-cr);
415
+ border-radius: var(--_ctm-dn-te-cd-dn-br-rs);
416
+ box-shadow: var(--_ctm-dn-te-cd-dn-sw-ae) var(--_ctm-dn-te-cd-dn-sw-br)
417
+ var(--_ctm-dn-te-cd-dn-sw-sd) var(--_ctm-dn-te-cd-dn-sw-cr);
418
+
419
+ .tile-content {
420
+ display: flex;
421
+ flex-direction: column;
422
+ gap: var(--_ctm-lt-ig-tt-sg);
423
+ align-items: flex-start;
424
+ height: 100%;
425
+ .tile_bundle_name {
426
+ display: flex;
427
+ flex: 1 0 0;
428
+ align-items: flex-start;
429
+ justify-content: flex-start;
430
+ font-family: var(--_ctm-dn-pt-ne-dn-ft-fy);
431
+ font-size: var(--_ctm-dn-pt-ne-dn-ft-se);
432
+ color: var(--_ctm-dn-pt-ne-dn-cr);
433
+ font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt);
434
+ font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic);
435
+ text-decoration: var(--_ctm-dn-pt-ne-dn-ue);
436
+ text-align: var(--_ctm-dn-pt-ne-dn-tt-an);
437
+ letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg);
438
+ line-height: var(--_ctm-dn-pt-ne-dn-le-ht);
439
+ background-color: var(--_ctm-dn-pt-ne-dn-bd-cr);
440
+ border-width: var(--_ctm-dn-pt-ne-dn-br-wh);
441
+ border-color: var(--_ctm-dn-pt-ne-dn-br-cr);
442
+ border-style: var(--_ctm-dn-pt-ne-dn-br-se);
443
+ border-radius: var(--_ctm-dn-pt-ne-dn-br-rs);
444
+ box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br)
445
+ var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr);
446
+ }
447
+
448
+ .brand-tile {
449
+ display: flex;
450
+ justify-content: center;
451
+ align-items: center;
452
+ height: -webkit-fill-available;
453
+
454
+ img {
455
+ width: 100%;
456
+ height: 100%;
457
+ object-fit: contain;
458
+ }
459
+ }
460
+
461
+ .product-tile {
462
+ display: grid;
463
+ flex: 1 1 auto;
464
+ row-gap: var(--_ctm-lt-te-rw-gp);
465
+ column-gap: var(--_ctm-lt-te-cn-gp);
466
+ padding: 10px;
467
+ box-sizing: border-box;
468
+
469
+ &.images-1 {
470
+ grid-template-columns: 1fr;
471
+ grid-template-rows: 1fr;
472
+ }
473
+
474
+ &.images-2 {
475
+ grid-template-columns: 1fr 1fr;
476
+ grid-template-rows: 1fr;
477
+ }
478
+
479
+ &.images-3 {
480
+ grid-template-columns: 1fr 1fr;
481
+ grid-template-rows: 1fr 1fr;
482
+
483
+ .product-image-wrapper:last-child {
484
+ grid-column: 1 / -1; // span both columns
485
+ }
486
+ }
487
+
488
+ &.images-4 {
489
+ grid-template-columns: 1fr 1fr;
490
+ grid-template-rows: 1fr 1fr;
491
+ }
492
+
493
+ &.animate-flip {
494
+ .product-image-wrapper {
495
+ animation: flip 0.6s ease-in-out;
496
+ }
497
+
498
+ @keyframes flip {
499
+ 0% {
500
+ transform: rotateY(0deg);
501
+ }
502
+ 100% {
503
+ transform: rotateY(180deg);
504
+ }
505
+ }
506
+ }
507
+
508
+ .product-image-wrapper {
509
+ width: 100%;
510
+ height: 100%;
511
+ overflow: hidden;
512
+ display: flex;
513
+ justify-content: center;
514
+ align-items: center;
515
+ background-color: var(--_ctm-dn-te-cd-ie-dn-bd-cr);
516
+ border-width: var(--_ctm-dn-te-cd-ie-dn-br-wh);
517
+ border-color: var(--_ctm-dn-te-cd-ie-dn-br-cr);
518
+ border-style: var(--_ctm-dn-te-cd-ie-dn-br-se);
519
+ border-radius: var(--_ctm-dn-te-cd-ie-dn-br-rs);
520
+ box-shadow: var(--_ctm-dn-te-cd-ie-dn-sw-ae) var(--_ctm-dn-te-cd-ie-dn-sw-br)
521
+ var(--_ctm-dn-te-cd-ie-dn-sw-sd) var(--_ctm-dn-te-cd-ie-dn-sw-cr);
522
+
523
+ img {
524
+ max-height: 135px;
525
+ }
526
+ }
527
+ }
528
+ }
529
+
530
+ .bundle_navigation_button {
531
+ display: flex;
532
+ padding: 16px 24px;
533
+ justify-content: center;
534
+ align-items: center;
535
+ gap: 12px;
536
+ align-self: stretch;
537
+ text-transform: uppercase;
538
+ font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy);
539
+ font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se);
540
+ color: var(--_ctm-dn-be-nn-bn-dn-cr);
541
+ font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt);
542
+ font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
543
+ text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue);
544
+ text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an);
545
+ letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg);
546
+ line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht);
547
+ background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr);
548
+ border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh);
549
+ border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr);
550
+ border-style: var(--_ctm-dn-be-nn-bn-dn-br-se);
551
+ border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs);
552
+ box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br)
553
+ var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr);
554
+
555
+ .icon {
556
+ svg {
557
+ width: var(--_ctm-dn-be-nn-bn-dn-in-se);
558
+ height: var(--_ctm-dn-be-nn-bn-dn-in-se);
559
+ path {
560
+ stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
561
+ }
562
+ }
563
+ }
564
+ }
565
+ }
140
566
  }
141
567
  }
142
568
  }
143
569
  }
144
- }
145
- // .embla {
146
- // width: 100%;
147
- // height: 100%;
148
- // position: relative;
149
- // display: flex;
150
- // flex-direction: column;
151
-
152
- // // overflow: hidden;
153
-
154
- // .embla__viewport {
155
- // width: 100%;
156
- // height: 100%;
157
- // position: relative;
158
- // display: flex;
159
- // flex-direction: column;
160
-
161
- // overflow: hidden;
162
-
163
- // .embla__container {
164
- // width: 100%;
165
- // height: 100%;
166
- // display: grid;
167
- // grid-template-rows: 100%;
168
- // grid-template-columns: repeat(
169
- // var(--_ctm-lt-is-pr-se),
170
- // calc(100% / var(--_ctm-lt-is-pr-se))
171
- // );
172
- // grid-auto-flow: column;
173
- // gap: var(--_ctm-lt-sh-im-sg);
174
-
175
- // &[data-control-type="Bottom"][data-slider-control="Arrows"] {
176
- // height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
177
- // }
178
- // &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
179
- // height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
180
- // }
181
- // &[data-control-type="Bottom"][data-slider-control="Dots"] {
182
- // height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
183
- // }
184
-
185
- // .embla__slide {
186
- // height: 100%;
187
- // padding: 24px;
188
- // }
189
- // }
190
- // }
191
-
192
- // .arrow-navigation {
193
- // display: flex;
194
- // position: absolute;
195
- // top: 50%;
196
- // left: 50%;
197
- // width: 100%;
198
- // justify-content: space-between;
199
- // transform: translate(-50%, -50%);
200
- // // padding-left: 20px;
201
- // &[data-control-type="Side"] {
202
- // .left-button,
203
- // .right-button {
204
- // background-color: transparent;
205
- // }
206
- // }
207
- // &[data-background-shape="Round"] {
208
- // .left-button,
209
- // .right-button {
210
- // background-color: #f2f5f5;
211
- // box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
212
- // }
213
- // }
214
- // &[data-control-type="Bottom-Overflow"] {
215
- // transform: translateX(-50%);
216
- // width: 100%;
217
- // justify-content: center;
218
- // gap: 12px;
219
- // top: unset;
220
- // bottom: 6px;
221
- // }
222
- // &[data-control-type="Bottom"] {
223
- // transform: unset;
224
- // position: static;
225
- // width: 100%;
226
- // justify-content: center;
227
- // gap: 12px;
228
- // margin-top: 10px;
229
- // }
230
- // .left-button {
231
- // padding: 10px;
232
- // border-radius: 50%;
233
- // border: none;
234
- // width: var(--_ctm-dn-pn-as-aw-se);
235
- // height: var(--_ctm-dn-pn-as-aw-se);
236
- // display: flex;
237
- // align-items: center;
238
- // justify-content: center;
239
- // cursor: pointer;
240
- // outline: none;
241
- // margin-left: 12px;
242
- // &:disabled {
243
- // & svg {
244
- // path {
245
- // stroke: rgb(192, 192, 192);
246
- // }
247
- // }
248
- // }
249
- // }
250
- // .right-button {
251
- // border-radius: 50%;
252
- // border: none;
253
- // width: var(--_ctm-dn-pn-as-aw-se);
254
- // height: var(--_ctm-dn-pn-as-aw-se);
255
- // display: flex;
256
- // align-items: center;
257
- // justify-content: center;
258
- // cursor: pointer;
259
- // outline: none;
260
- // margin-right: 12px;
261
- // padding: 10px;
262
-
263
- // &:disabled {
264
- // & svg {
265
- // path {
266
- // stroke: rgb(192, 192, 192);
267
- // }
268
- // }
269
- // }
270
- // }
271
- // .icon {
272
- // display: flex;
273
- // svg {
274
- // width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
275
- // height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
276
- // path {
277
- // stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
278
- // }
279
- // }
280
- // }
281
- // }
282
-
283
- // &[data-thumbnail-placement="top"] {
284
- // flex-direction: column-reverse;
285
- // }
286
- // &[data-thumbnail-placement="bottom"] {
287
- // flex-direction: column;
288
- // }
289
- // &[data-thumbnail-placement="left"] {
290
- // flex-direction: row-reverse;
291
-
292
- // .embla__thumbs {
293
- // width: var(--_ctm-lt-tl-se);
294
- // height: 100%;
295
-
296
- // & .embla__thumbs__container {
297
- // flex-direction: column;
298
- // height: 100%;
299
- // }
300
- // }
301
- // }
302
- // &[data-thumbnail-placement="right"] {
303
- // flex-direction: row;
304
- // .embla__thumbs {
305
- // width: var(--_ctm-lt-tl-se);
306
- // height: 100%;
307
-
308
- // & .embla__thumbs__container {
309
- // flex-direction: column;
310
- // height: 100%;
311
- // }
312
- // }
313
- // }
314
- // &[data-control-type="Side"] {
315
- // display: flex;
316
- // align-self: center;
317
- // gap: 16px;
318
- // flex-direction: row;
319
- // .left-button:disabled,
320
- // .right-button:disabled {
321
- // display: none;
322
- // }
323
- // }
324
- // .embla__dots {
325
- // display: flex;
326
- // flex-wrap: wrap;
327
- // justify-content: center;
328
- // align-items: center;
329
- // margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
330
- // gap: 6px;
331
- // margin-top: 16px;
332
-
333
- // &[data-control-type="Bottom-Overflow"] {
334
- // position: absolute;
335
- // bottom: 10px;
336
- // left: 50%;
337
- // transform: translateX(-50%);
338
- // width: 75%;
339
- // }
340
- // .embla__dot {
341
- // -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
342
- // -webkit-appearance: none;
343
- // appearance: none;
344
- // background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
345
- // touch-action: manipulation;
346
- // display: inline-flex;
347
- // text-decoration: none;
348
- // cursor: pointer;
349
- // border: 0;
350
- // padding: 0;
351
- // margin: 0;
352
- // // width: 0.6rem;
353
- // // height: 0.6rem;
354
- // width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
355
- // height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
356
- // display: flex;
357
- // align-items: center;
358
- // justify-content: center;
359
- // border-radius: 50%;
360
- // }
361
- // .embla__dot:after {
362
- // // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
363
- // width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
364
- // height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
365
- // border-radius: 50%;
366
- // display: flex;
367
- // align-items: center;
368
- // content: "";
369
- // }
370
- // .embla__dot--selected:after {
371
- // box-shadow: inset 0 0 0 1px var(--text-body);
372
- // background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
373
- // }
374
- // &[data-slider-control="Pagination Line"] {
375
- // .embla__dot {
376
- // width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
377
- // height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
378
- // background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
379
-
380
- // border-radius: 6px;
381
- // }
382
- // .embla__dot--selected:after {
383
- // box-shadow: inset 0 0 0 1px var(--text-body);
384
- // border-radius: 6px;
385
- // width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
386
- // height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
387
- // // background-color: #fff;
388
- // background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
389
- // }
390
- // }
391
- // }
392
-
393
- // .embla__thumbs {
394
- // width: 100%;
395
- // height: var(--_ctm-lt-tl-se);
396
- // position: relative;
397
- // display: grid;
398
- // grid-template-columns: 1fr;
399
- // overflow: hidden;
400
- // // margin: 10px;
401
- // padding: 10px;
402
-
403
- // .embla__thumbs__viewport {
404
- // width: 100%;
405
- // height: 100%;
406
- // position: relative;
407
- // display: flex;
408
- // flex-direction: column;
409
-
410
- // overflow: hidden;
411
- // }
412
- // .embla__thumbs__container {
413
- // display: flex;
414
- // flex-direction: row;
415
- // margin-left: calc(var(--thumbs-slide-spacing) * -1);
416
- // gap: var(--_ctm-lt-tl-sg);
417
- // width: 100%;
418
- // // justify-content: center;
419
- // // height: 200px;
420
-
421
- // .embla__thumbs__slide {
422
- // min-width: var(--_ctm-lt-tl-se);
423
- // max-width: var(--_ctm-lt-tl-se);
424
- // height: var(--_ctm-lt-tl-se);
425
- // & img {
426
- // width: 100%;
427
- // height: 100%;
428
- // }
429
- // }
430
- // }
431
- // }
432
- // }
433
570
 
571
+ .multi__bundle_container {
572
+ .bundle_name_slider {
573
+ .embla__container {
574
+ grid-template-columns: max-content !important;
575
+ grid-auto-columns: max-content !important;
576
+
577
+ .embla__slide {
578
+ width: max-content !important;
579
+ }
580
+ }
581
+ }
582
+
583
+ .bundle-name-container {
584
+ display: flex;
585
+ cursor: pointer;
586
+ .bundle_name__tag {
587
+ display: flex;
588
+ padding: 6px;
589
+ font-family: var(--_ctm-dn-be-tg-dn-ft-fy);
590
+ font-size: var(--_ctm-dn-be-tg-dn-ft-se);
591
+ color: var(--_ctm-dn-be-tg-dn-cr);
592
+ font-weight: var(--_ctm-dn-be-tg-dn-ft-wt);
593
+ font-style: var(--_ctm-dn-be-tg-dn-ft-se-ic);
594
+ text-decoration: var(--_ctm-dn-be-tg-dn-ue);
595
+ text-align: var(--_ctm-dn-be-tg-dn-tt-an);
596
+ letter-spacing: var(--_ctm-dn-be-tg-dn-lr-sg);
597
+ line-height: var(--_ctm-dn-be-tg-dn-le-ht);
598
+ background-color: var(--_ctm-dn-be-tg-dn-bd-cr);
599
+ border-width: var(--_ctm-dn-be-tg-dn-br-wh);
600
+ border-color: var(--_ctm-dn-be-tg-dn-br-cr);
601
+ border-style: var(--_ctm-dn-be-tg-dn-br-se);
602
+ border-radius: var(--_ctm-dn-be-tg-dn-br-rs);
603
+ box-shadow: var(--_ctm-dn-be-tg-dn-sw-ae) var(--_ctm-dn-be-tg-dn-sw-br)
604
+ var(--_ctm-dn-be-tg-dn-sw-sd) var(--_ctm-dn-be-tg-dn-sw-cr);
605
+
606
+ &.active {
607
+ font-weight: bold;
608
+ }
609
+ }
610
+ }
611
+
612
+ .single__bundle__grid_list {
613
+ display: flex;
614
+ flex-wrap: wrap;
615
+ justify-content: center;
616
+ gap: var(--_ctm-lt-im-sg);
617
+ }
618
+ }
619
+ }
434
620
  .embla {
435
621
  width: 100%;
436
622
  height: 100%;
@@ -820,7 +1006,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
820
1006
  align-items: center;
821
1007
  margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
822
1008
  gap: 6px;
823
- margin-top: 16px;
824
1009
 
825
1010
  &[data-control-type="Bottom-Overflow"] {
826
1011
  position: absolute;