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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/types/builder/tools/element-edit/bundle.d.ts +104 -4
  3. package/package.json +1 -1
  4. package/dist/add-products-tab copy.scss +0 -1122
  5. package/dist/allocationDetails copy.scss +0 -757
  6. package/dist/bulk-variant-picker copy.scss +0 -1121
  7. package/dist/bundle copy.scss +0 -2805
  8. package/dist/bundleDetails copy.scss +0 -1431
  9. package/dist/button copy.scss +0 -271
  10. package/dist/product-actions copy.scss +0 -2765
  11. package/dist/product-highlights copy.scss +0 -217
  12. package/dist/product-image copy.scss +0 -787
  13. package/dist/repeater copy.scss +0 -635
  14. package/dist/user-elements copy.scss +0 -1437
  15. package/dist/volume-pricing copy 2.scss +0 -1468
  16. package/dist/volume-pricing copy.scss +0 -1076
package/dist/bundleDetails copy.scss DELETED
@@ -1,1431 +0,0 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- $resizerId: "[data-cms-tool='cms-element-resizer']";
5
- $resizeActive: '[data-cms-element-resizer="true"]';
6
- [data-div-type="element"] {
7
- &[data-element-type="bundleDetails"] {
8
- // width: var(--_sf-con-nw-wh);
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
13
- )
14
- );
15
-
16
- height: auto;
17
-
18
- margin: var(
19
- --_ctm-mob-lt-mn,
20
- var(
21
- --_ctm-tab-lt-mn,
22
- var(--_ctm-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
23
- )
24
- );
25
-
26
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
27
- background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
28
- background-attachment: var(--_ctm-mob-dn-bd-at, var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at)));
29
- background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
30
- background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
31
- background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
32
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
33
-
34
- border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
35
-
36
- border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
37
-
38
- border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
39
-
40
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
41
-
42
- box-shadow: var(
43
- --_show-shadow,
44
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
45
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
46
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
47
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
48
- );
49
-
50
- // &:not(:has(#{$resizerId}#{$resizeActive})) {
51
- // min-height: 100px !important;
52
- // }
53
-
54
- & > div {
55
- &.wrapper {
56
- width: 100%;
57
- // grid-template-rows: max(var(--_ctm-lt-ht), auto) !important;
58
- }
59
- }
60
-
61
- .embla {
62
- width: 100%;
63
- height: 100%;
64
- position: relative;
65
- display: flex;
66
- flex-direction: column;
67
- // overflow: hidden;
68
-
69
- .embla__viewport {
70
- width: 100%;
71
- height: 100%;
72
- position: relative;
73
- display: flex;
74
- flex-direction: column;
75
-
76
- overflow: hidden;
77
-
78
- .embla__container {
79
- width: 100%;
80
- height: 100%;
81
- display: grid;
82
- grid-template-rows: 100%;
83
-
84
- grid-template-columns: repeat(
85
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
86
- calc(
87
- 100% /
88
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
89
- )
90
- );
91
-
92
- grid-auto-flow: column;
93
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
94
-
95
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
96
- height: calc(
97
- 100% - calc(
98
- var(
99
- --_ctm-mob-dn-pn-as-aw-se,
100
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
101
- ) +
102
- 10px
103
- )
104
- );
105
- }
106
-
107
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
108
- height: calc(
109
- 100% - calc(
110
- var(
111
- --_ctm-mob-dn-pn-le-le-ht,
112
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
113
- ) +
114
- 20px
115
- )
116
- );
117
- }
118
-
119
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
120
- height: calc(
121
- 100% - calc(
122
- var(
123
- --_ctm-mob-dn-pn-ds-dt-se,
124
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
125
- ) +
126
- 20px
127
- )
128
- );
129
- }
130
-
131
- .embla__slide {
132
- width: 100%;
133
- height: 100%;
134
- }
135
- }
136
- }
137
- &:not([data-display-style="Column"]) {
138
- .embla__container {
139
- grid-auto-columns: calc(
140
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
141
- );
142
- }
143
- }
144
-
145
- &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
146
- // overflow: unset;
147
-
148
- .embla__viewport {
149
- overflow: unset;
150
- height: 80%;
151
- flex-grow: 1;
152
- &:not([data-is-builder-type="true"]) {
153
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
154
- }
155
-
156
- .embla__container {
157
- overflow: unset;
158
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
159
- // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
160
-
161
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
162
- grid-template-rows: unset;
163
-
164
- grid-auto-flow: row;
165
-
166
- &[data-overflow-hidden="true"] {
167
- overflow: hidden;
168
- }
169
- }
170
- }
171
- }
172
-
173
- &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
174
- .embla__viewport {
175
- .embla__container {
176
- grid-template-rows: repeat(
177
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
178
- calc(
179
- 100% /
180
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
181
- )
182
- );
183
- }
184
- }
185
- }
186
-
187
- &[data-display-style="Rows"] {
188
- // overflow: unset;
189
-
190
- .embla__viewport {
191
- overflow: unset;
192
- height: 80%;
193
- flex-grow: 1;
194
-
195
- &:not([data-is-builder-type="true"]) {
196
- height: var(--_ctm-height);
197
- }
198
-
199
- .embla__container {
200
- overflow: hidden;
201
- height: var(--_ctm-height);
202
- // min-height: var(--_ctm-height);
203
-
204
- grid-template-columns: repeat(
205
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
206
- 1fr
207
- );
208
- grid-template-rows: unset;
209
- grid-auto-flow: row;
210
- }
211
- }
212
- }
213
-
214
- &[data-display-style="Column"] {
215
- // overflow: unset;
216
-
217
- .embla__viewport {
218
- .embla__container {
219
- display: flex;
220
- .embla__slide {
221
- width: unset;
222
- height: 100%;
223
- aspect-ratio: 1 / 2;
224
- }
225
- }
226
- }
227
- }
228
- &[data-display-style="Masonry"] {
229
- // overflow: unset;
230
-
231
- .embla__viewport {
232
- overflow: hidden;
233
- height: 80%;
234
- flex-grow: 1;
235
-
236
- &:not([data-is-builder-type="true"]) {
237
- height: var(--_ctm-height);
238
- }
239
-
240
- .embla__container {
241
- overflow: unset;
242
- display: block;
243
-
244
- column-count: var(
245
- --_ctm-mob-lt-is-pr-rw,
246
- var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
247
- );
248
- gap: unset;
249
-
250
- column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
251
-
252
- height: auto;
253
-
254
- .embla__slide {
255
- margin-bottom: var(
256
- --_ctm-mob-lt-im-gp,
257
- var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
258
- );
259
- height: unset;
260
-
261
- .gallery__slide {
262
- height: unset;
263
- }
264
- }
265
- }
266
- }
267
- }
268
-
269
- .arrow-navigation {
270
- display: flex;
271
- position: absolute;
272
- top: 50%;
273
- left: 50%;
274
- width: 100%;
275
- justify-content: space-between;
276
- transform: translate(-50%, -50%);
277
- // padding-left: 20px;
278
- &[data-control-type="Side"] {
279
- .left-button,
280
- .right-button {
281
- background-color: transparent;
282
- }
283
- }
284
- &[data-background-shape="Round"] {
285
- .left-button,
286
- .right-button {
287
- background-color: #f2f5f5;
288
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
289
- }
290
- }
291
- &[data-control-type="Bottom-Overflow"] {
292
- transform: translateX(-50%);
293
- width: 100%;
294
- justify-content: center;
295
- gap: 12px;
296
- top: unset;
297
- bottom: 6px;
298
- }
299
- &[data-control-type="Bottom"] {
300
- transform: unset;
301
- position: static;
302
- width: 100%;
303
- justify-content: center;
304
- gap: 12px;
305
- margin-top: 10px;
306
- }
307
- .left-button {
308
- padding: 10px;
309
- border-radius: 50%;
310
- border: none;
311
- width: var(
312
- --_ctm-mob-dn-pn-as-aw-se,
313
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
314
- );
315
- height: var(
316
- --_ctm-mob-dn-pn-as-aw-se,
317
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
318
- );
319
-
320
- display: flex;
321
- align-items: center;
322
- justify-content: center;
323
- cursor: pointer;
324
- outline: none;
325
- margin-left: 12px;
326
- &:disabled {
327
- & svg {
328
- path {
329
- stroke: rgb(192, 192, 192);
330
- }
331
- }
332
- }
333
- }
334
- .right-button {
335
- border-radius: 50%;
336
- border: none;
337
- width: var(
338
- --_ctm-mob-dn-pn-as-aw-se,
339
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
340
- );
341
- height: var(
342
- --_ctm-mob-dn-pn-as-aw-se,
343
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
344
- );
345
-
346
- display: flex;
347
- align-items: center;
348
- justify-content: center;
349
- cursor: pointer;
350
- outline: none;
351
- margin-right: 12px;
352
- padding: 10px;
353
-
354
- &:disabled {
355
- & svg {
356
- path {
357
- stroke: rgb(192, 192, 192);
358
- }
359
- }
360
- }
361
- }
362
- .icon {
363
- display: flex;
364
-
365
- svg {
366
- width: calc(
367
- var(
368
- --_ctm-mob-dn-pn-as-aw-se,
369
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
370
- ) *
371
- 0.5
372
- );
373
- height: calc(
374
- var(
375
- --_ctm-mob-dn-pn-as-aw-se,
376
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
377
- ) *
378
- 0.5
379
- );
380
-
381
- path {
382
- stroke: var(
383
- --_ctm-mob-dn-pn-as-aw-cr,
384
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
385
- );
386
- }
387
- }
388
- }
389
- }
390
-
391
- &[data-control-type="Side"] {
392
- .embla__viewport {
393
- width: calc(100% - 120px);
394
- margin-inline: auto;
395
- }
396
- .left-button {
397
- position: absolute;
398
- left: 0;
399
- top: 50%;
400
- transform: translateY(-50%);
401
- }
402
- .right-button {
403
- position: absolute;
404
-
405
- right: 0;
406
- top: 50%;
407
- transform: translateY(-50%);
408
- }
409
- }
410
-
411
- &[data-thumbnail-placement="top"] {
412
- flex-direction: column-reverse;
413
- }
414
- &[data-thumbnail-placement="bottom"] {
415
- flex-direction: column;
416
- }
417
- &[data-thumbnail-placement="left"] {
418
- flex-direction: row-reverse;
419
-
420
- .embla__thumbs {
421
- width: var(--_ctm-lt-tl-se);
422
- height: 100%;
423
-
424
- & .embla__thumbs__container {
425
- flex-direction: column;
426
- height: 100%;
427
- }
428
- }
429
- }
430
- &[data-thumbnail-placement="right"] {
431
- flex-direction: row;
432
- .embla__thumbs {
433
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
434
-
435
- height: 100%;
436
-
437
- & .embla__thumbs__container {
438
- flex-direction: column;
439
- height: 100%;
440
- }
441
- }
442
- }
443
- .embla__dots {
444
- display: flex;
445
- flex-wrap: wrap;
446
- justify-content: center;
447
- align-items: center;
448
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
449
- gap: 6px;
450
- margin-top: 16px;
451
-
452
- &[data-control-type="Bottom-Overflow"] {
453
- position: absolute;
454
- bottom: 10px;
455
- left: 50%;
456
- transform: translateX(-50%);
457
- width: 75%;
458
- }
459
- .embla__dot {
460
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
461
- -webkit-appearance: none;
462
- appearance: none;
463
- background-color: var(
464
- --_ctm-mob-dn-pn-ds-or-dt-cr,
465
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
466
- );
467
-
468
- touch-action: manipulation;
469
- display: inline-flex;
470
- text-decoration: none;
471
- cursor: pointer;
472
- border: 0;
473
- padding: 0;
474
- margin: 0;
475
- // width: 0.6rem;
476
- // height: 0.6rem;
477
- width: var(
478
- --_ctm-mob-dn-pn-ds-dt-se,
479
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
480
- );
481
- height: var(
482
- --_ctm-mob-dn-pn-ds-dt-se,
483
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
484
- );
485
-
486
- display: flex;
487
- align-items: center;
488
- justify-content: center;
489
- border-radius: 50%;
490
- }
491
- .embla__dot:after {
492
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
493
- width: var(
494
- --_ctm-mob-dn-pn-ds-dt-se,
495
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
496
- );
497
- height: var(
498
- --_ctm-mob-dn-pn-ds-dt-se,
499
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
500
- );
501
-
502
- border-radius: 50%;
503
- display: flex;
504
- align-items: center;
505
- content: "";
506
- }
507
- .embla__dot--selected:after {
508
- box-shadow: inset 0 0 0 1px var(--text-body);
509
- background-color: var(
510
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
511
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
512
- );
513
- }
514
- &[data-slider-control="Pagination Line"] {
515
- .embla__dot {
516
- width: var(
517
- --_ctm-mob-dn-pn-le-le-wh,
518
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
519
- );
520
- height: var(
521
- --_ctm-mob-dn-pn-le-le-ht,
522
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
523
- );
524
- background-color: var(
525
- --_ctm-mob-dn-pn-le-or-le-cr,
526
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
527
- );
528
- border-radius: 6px;
529
- }
530
-
531
- .embla__dot--selected:after {
532
- box-shadow: inset 0 0 0 1px var(--text-body);
533
- border-radius: 6px;
534
- width: var(
535
- --_ctm-mob-dn-pn-le-le-wh,
536
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
537
- );
538
- height: var(
539
- --_ctm-mob-dn-pn-le-le-ht,
540
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
541
- );
542
- background-color: var(
543
- --_ctm-mob-dn-pn-le-ct-le-cr,
544
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
545
- );
546
- }
547
- }
548
- }
549
-
550
- .embla__thumbs {
551
- width: 100%;
552
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
553
-
554
- position: relative;
555
- display: grid;
556
- grid-template-columns: 1fr;
557
- overflow: hidden;
558
- // margin: 10px;
559
- padding: 10px;
560
-
561
- .embla__thumbs__viewport {
562
- width: 100%;
563
- height: 100%;
564
- position: relative;
565
- display: flex;
566
- flex-direction: column;
567
-
568
- overflow: hidden;
569
- }
570
- .embla__thumbs__container {
571
- display: flex;
572
- flex-direction: row;
573
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
574
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
575
-
576
- width: 100%;
577
- // justify-content: center;
578
- // height: 200px;
579
-
580
- .embla__thumbs__slide {
581
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
582
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
583
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
584
-
585
- & img {
586
- width: 100%;
587
- height: 100%;
588
- }
589
- }
590
- }
591
- }
592
- }
593
-
594
- .bundle__details__element__container {
595
- width: 100%;
596
- }
597
-
598
- .bundle_details_heading_wrapper {
599
- display: flex;
600
- width: 100%;
601
- flex-direction: column;
602
- padding: 24px 96px;
603
- border-bottom: 1px solid #d0d5dd;
604
- gap: 16px;
605
-
606
- .bundle_details_heading_text_wrapper {
607
- display: flex;
608
- flex-direction: column;
609
- gap: 6px;
610
- width: 100%;
611
- flex: 1 0 0;
612
-
613
- .bundle_name {
614
- background-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-bd-cr);
615
- border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
616
- border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
617
- border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
618
- border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
619
- color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
620
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
621
- font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
622
- font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
623
- font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
624
- line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
625
- letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
626
- box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
627
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
628
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
629
- text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
630
- text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
631
- }
632
-
633
- .bundle_description {
634
- background-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-bd-cr);
635
- border-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-cr);
636
- border-radius: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-rs);
637
- border-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-se);
638
- border-width: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-wh);
639
- color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-cr);
640
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-fy);
641
- font-size: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se);
642
- font-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se-ic);
643
- font-weight: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-wt);
644
- line-height: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-le-ht);
645
- letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-lr-sg);
646
- box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-ae)
647
- var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-sd)
648
- var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-cr);
649
- text-align: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-tt-an);
650
- text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ue);
651
- }
652
- }
653
-
654
- .category_card_wrapper {
655
- display: flex;
656
- padding: 16px;
657
- gap: 12px;
658
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-bd-cr);
659
- border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-cr);
660
- border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-rs);
661
- border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-se);
662
- border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-wh);
663
- box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-ae)
664
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-br)
665
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-sd)
666
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-cr);
667
-
668
- &:hover {
669
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-bd-cr);
670
- border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-cr);
671
- border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-rs);
672
- border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-se);
673
- border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-wh);
674
- box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-ae)
675
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-br)
676
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-sd)
677
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-cr);
678
- }
679
-
680
- &.active {
681
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-bd-cr);
682
- border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-cr);
683
- border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-rs);
684
- border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-se);
685
- border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-wh);
686
- box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-ae)
687
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-br)
688
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-sd)
689
- var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-cr);
690
- }
691
-
692
- .category_image {
693
- width: 48px;
694
- height: 72px;
695
- }
696
-
697
- .category_card_info_wrapper {
698
- display: flex;
699
- flex-direction: column;
700
- gap: 4px;
701
- width: fit-content;
702
- white-space: nowrap;
703
-
704
- .category_card_category_name {
705
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-bd-cr);
706
- color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-cr);
707
- font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-fy);
708
- font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se);
709
- font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se-ic);
710
- font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-wt);
711
- line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-le-ht);
712
- letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-lr-sg);
713
- text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-an);
714
- text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ue);
715
- }
716
-
717
- .category_card_product_count {
718
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
719
- color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
720
- font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
721
- font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
722
- font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
723
- font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
724
- line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
725
- letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
726
- text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
727
- text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
728
- }
729
-
730
- .category_card_product_select_count {
731
- background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
732
- color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
733
- font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
734
- font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
735
- font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
736
- font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
737
- line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
738
- letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
739
- text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
740
- text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
741
- }
742
- }
743
- }
744
- }
745
-
746
- .bundle_details_product_list_wrapper {
747
- display: flex;
748
- flex-direction: column;
749
- gap: 16px;
750
- padding: 36px 96px;
751
- width: 100%;
752
-
753
- .add_to_cart_wrapper {
754
- display: flex;
755
- flex-direction: column;
756
- gap: 16px;
757
- padding: 16px;
758
- width: 100%;
759
- background-color: #f5f5f5;
760
-
761
- .add_to_cart_heading {
762
- border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
763
- border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
764
- border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
765
- border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
766
- color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
767
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
768
- font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
769
- font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
770
- font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
771
- line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
772
- letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
773
- box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
774
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
775
- var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
776
- text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
777
- text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
778
- }
779
-
780
- .add_to_cart_estimator_wrapper {
781
- display: flex;
782
- gap: 48px;
783
- justify-content: space-between;
784
- width: 100%;
785
-
786
- .add_to_cart_estimate_wrapper {
787
- display: flex;
788
- flex-direction: column;
789
- gap: 6px;
790
-
791
- .add_to_cart_qty {
792
- width: 205px;
793
- border: 1px solid #d0d5dd !important;
794
- border-radius: 2px !important;
795
- outline: none;
796
- padding: 8px 12px !important;
797
- background-color: #f9fafb;
798
- }
799
-
800
- .add_to_cart_price {
801
- background-color: transparent;
802
- color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
803
- font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
804
- font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
805
- font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
806
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
807
- line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
808
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
809
- text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
810
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
811
- }
812
-
813
- .add_to_cart_estimate_label {
814
- font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
815
- line-height: 150%;
816
- font-size: 16px;
817
- color: #000000;
818
- }
819
- }
820
- }
821
-
822
- .add_to_cart_btn {
823
- display: flex;
824
- justify-content: center;
825
- align-items: center;
826
- padding: 10px 16px;
827
- transition: all 0.3s ease;
828
- background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr);
829
- border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr);
830
- border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs);
831
- border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se);
832
- border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh);
833
- color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr);
834
- font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy);
835
- font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se);
836
- font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic);
837
- font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt);
838
- line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht);
839
- letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg);
840
- box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae)
841
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br)
842
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd)
843
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr);
844
- text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an);
845
- text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue);
846
-
847
- &:disabled {
848
- cursor: not-allowed;
849
- }
850
-
851
- &:hover {
852
- background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr);
853
- border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr);
854
- border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs);
855
- border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se);
856
- border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh);
857
- color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr);
858
- font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy);
859
- font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se);
860
- font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic);
861
- font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt);
862
- line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht);
863
- letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg);
864
- box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)
865
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)
866
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)
867
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr);
868
- text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an);
869
- text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue);
870
- }
871
-
872
- &.selected {
873
- background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-bd-cr);
874
- border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-cr);
875
- border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-rs);
876
- border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-se);
877
- border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-wh);
878
- color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-cr);
879
- font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-fy);
880
- font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se);
881
- font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se-ic);
882
- font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-wt);
883
- line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-le-ht);
884
- letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-lr-sg);
885
- box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-ae)
886
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-br)
887
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-sd)
888
- var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-cr);
889
- text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-an);
890
- text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ue);
891
-
892
- .icon {
893
- color: white;
894
- }
895
- }
896
- }
897
- }
898
-
899
- .bundle_details_product_wrapper {
900
- display: flex;
901
- gap: 48px;
902
- width: 100%;
903
-
904
- &.vertical_wrapper {
905
- flex-direction: row;
906
-
907
- .product_card_scroll_wrapper {
908
- min-width: 400px;
909
- max-width: 400px;
910
- display: flex;
911
- flex-direction: column;
912
- gap: 16px;
913
-
914
- .category_bundle_product_card {
915
- width: 100%;
916
- display: flex;
917
- padding: 16px;
918
- gap: 16px;
919
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-bd-cr);
920
- border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-cr);
921
- border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-rs);
922
- border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-se);
923
- border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-wh);
924
- box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-ae)
925
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-br)
926
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-sd)
927
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-cr);
928
-
929
- &:hover {
930
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-bd-cr);
931
- border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-cr);
932
- border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-rs);
933
- border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-se);
934
- border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-wh);
935
- box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-ae)
936
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-br)
937
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-sd)
938
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-cr);
939
- }
940
-
941
- &.active {
942
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr);
943
- border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr);
944
- border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-rs);
945
- border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-se);
946
- border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-wh);
947
- box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-ae)
948
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-br)
949
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-sd)
950
- var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-cr);
951
-
952
- .category_bundle_product_card_product_name {
953
- font-weight: bolder;
954
- }
955
- }
956
-
957
- .category_bundle_product_card_select {
958
- width: auto;
959
- }
960
-
961
- .category_bundle_product_card_img {
962
- width: 80px;
963
- height: auto;
964
- }
965
-
966
- .category_bundle_product_card_info {
967
- display: flex;
968
- flex-direction: column;
969
- gap: 24px;
970
-
971
- .category_bundle_product_card_info_wrapper {
972
- display: flex;
973
- flex-direction: column;
974
- gap: 6px;
975
-
976
- .category_bundle_product_card_product_name {
977
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-bd-cr);
978
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-cr);
979
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-fy);
980
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se);
981
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se-ic);
982
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-wt);
983
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-le-ht);
984
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-lr-sg);
985
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-an);
986
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ue);
987
- }
988
-
989
- .category_bundle_product_card_brand_name {
990
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
991
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
992
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
993
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
994
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
995
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
996
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
997
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
998
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
999
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
1000
- }
1001
-
1002
- .category_bundle_product_card_item_name {
1003
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
1004
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
1005
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
1006
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
1007
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
1008
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
1009
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
1010
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
1011
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
1012
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
1013
- }
1014
- }
1015
-
1016
- .category_bundle_product_card_product_price {
1017
- background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-bd-cr);
1018
- color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr);
1019
- font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy);
1020
- font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se);
1021
- font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic);
1022
- font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt);
1023
- line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht);
1024
- letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg);
1025
- text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an);
1026
- text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue);
1027
- }
1028
- }
1029
- }
1030
- }
1031
- }
1032
-
1033
- .gallery {
1034
- display: flex;
1035
- flex-direction: column;
1036
- gap: 16px;
1037
-
1038
- .mainImage {
1039
- position: relative;
1040
- overflow: visible;
1041
- border-radius: 8px;
1042
- background-color: #f9fafb;
1043
- aspect-ratio: 1 / 1;
1044
- width: 360px;
1045
-
1046
- &::before {
1047
- content: "";
1048
- display: block;
1049
- padding-top: 100%;
1050
- }
1051
- }
1052
-
1053
- .image {
1054
- position: absolute;
1055
- top: 0;
1056
- left: 0;
1057
- width: 100%;
1058
- height: 100%;
1059
- object-fit: cover;
1060
- transition: transform 0.3s ease-in-out;
1061
-
1062
- &:hover {
1063
- transform: scale(1.05);
1064
- }
1065
- }
1066
-
1067
- .thumbnails {
1068
- display: flex;
1069
- gap: 8px;
1070
- }
1071
-
1072
- .thumbnailButton {
1073
- width: 80px;
1074
- height: 80px;
1075
- padding: 0;
1076
- border: 2px solid transparent;
1077
- border-radius: 6px;
1078
- overflow: hidden;
1079
- cursor: pointer;
1080
- background: none;
1081
- transition: border-color 0.2s ease-in-out;
1082
-
1083
- &:hover {
1084
- border-color: #dbeafe;
1085
- }
1086
-
1087
- &.active {
1088
- border-color: #2563eb;
1089
- }
1090
-
1091
- &:focus {
1092
- outline: none;
1093
- border-color: #2563eb;
1094
- box-shadow: 0 0 0 2px #dbeafe;
1095
- }
1096
- }
1097
-
1098
- .thumbnailImage {
1099
- width: 100%;
1100
- height: 100%;
1101
- object-fit: cover;
1102
- }
1103
- }
1104
-
1105
- .bundle_detail_product_information {
1106
- display: flex;
1107
- flex-direction: column;
1108
- flex: 1 0 0;
1109
- width: 100%;
1110
- gap: 24px;
1111
-
1112
- .bundle_detail_product_image_slide_wrapper {
1113
- display: flex;
1114
- max-width: 40rem;
1115
- gap: 16px;
1116
- overflow-x: scroll;
1117
-
1118
- .bundle_detail_product_image_slide {
1119
- width: 148px;
1120
- height: 248px;
1121
- }
1122
- }
1123
-
1124
- .bundle_detail_product_heading_wrapper {
1125
- display: flex;
1126
- flex-direction: column;
1127
- gap: 6px;
1128
- width: 100%;
1129
-
1130
- .bundle_detail_product_name {
1131
- background-color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-bd-cr);
1132
- color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-cr);
1133
- font-family: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-fy);
1134
- font-size: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se);
1135
- font-style: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se-ic);
1136
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-wt);
1137
- line-height: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-le-ht);
1138
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-lr-sg);
1139
- text-align: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-an);
1140
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ue);
1141
- width: 100%;
1142
- }
1143
-
1144
- .bundle_detail_product_info {
1145
- background-color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-bd-cr);
1146
- color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-cr);
1147
- font-family: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-fy);
1148
- font-size: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se);
1149
- font-style: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se-ic);
1150
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-wt);
1151
- line-height: var(--_ctm-dn-pt-pl-dn-pt-io-dn-le-ht);
1152
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-io-dn-lr-sg);
1153
- text-align: var(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-an);
1154
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ue);
1155
- width: 100%;
1156
- }
1157
- }
1158
-
1159
- .bundle_detail_product_price {
1160
- background-color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-bd-cr);
1161
- color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
1162
- font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
1163
- font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
1164
- font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
1165
- font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
1166
- line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
1167
- letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
1168
- text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
1169
- text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
1170
- width: 100%;
1171
- }
1172
-
1173
- .standard_wrapper {
1174
- // Select Colors
1175
- .select__colors {
1176
- font-size: 16px;
1177
- color: var(--_gray-500);
1178
- display: flex;
1179
- flex-direction: column;
1180
- gap: 8px;
1181
- padding: 12px;
1182
-
1183
- .title {
1184
- margin-bottom: 4px;
1185
- color: #000000;
1186
- font-size: 16px;
1187
- }
1188
-
1189
- .select__group {
1190
- display: flex;
1191
- flex-direction: row;
1192
- gap: 8px;
1193
-
1194
- .item {
1195
- background-color: #ffffff;
1196
-
1197
- &.selected_item {
1198
- width: fit-content;
1199
- border: 1px solid #000000;
1200
- }
1201
- .select__group__item {
1202
- transition: width 0.3s ease;
1203
- width: 30px;
1204
- height: 30px;
1205
- border: 1px solid #d0d5dd;
1206
- cursor: pointer;
1207
- overflow: hidden;
1208
-
1209
- &.selected {
1210
- width: 45px;
1211
- border: 1px solid #000;
1212
- }
1213
-
1214
- &.disabled {
1215
- cursor: not-allowed;
1216
- opacity: 0.4;
1217
- }
1218
- .product-select-image {
1219
- width: 40px;
1220
- height: 40px;
1221
- object-fit: contain;
1222
- }
1223
- }
1224
- }
1225
- }
1226
- }
1227
- // Select Fit and Size
1228
- .select__fit {
1229
- font-size: 16px;
1230
- color: var(--_gray-500);
1231
- display: flex;
1232
- flex-direction: column;
1233
- gap: 8px;
1234
-
1235
- padding: 12px;
1236
-
1237
- .title {
1238
- margin-bottom: 4px;
1239
- color: #000000;
1240
- font-size: 16px;
1241
- line-height: 150%;
1242
- }
1243
- .select__group {
1244
- display: flex;
1245
- gap: 8px;
1246
- flex-wrap: wrap;
1247
- margin-bottom: 10px;
1248
- flex-direction: row;
1249
- gap: 8px;
1250
-
1251
- .select__group__item {
1252
- transition: color 0.3s ease;
1253
- padding: 5px 12px;
1254
- border-radius: 6px;
1255
- border: 1px solid var(--_gray-200);
1256
- font-size: 16px;
1257
- font-weight: 600;
1258
- cursor: pointer;
1259
- border: 1px solid #d0d5dd;
1260
- color: #000000;
1261
- font-size: 16px;
1262
- line-height: 150%;
1263
-
1264
- &.child {
1265
- border: 0;
1266
- border-radius: 0;
1267
- border-bottom: 2px solid var(--_gray-200);
1268
- }
1269
- &.selected {
1270
- border: 1px solid var(--_primary-200);
1271
- background-color: var(--_primary-25);
1272
- color: var(--_primary-400);
1273
-
1274
- border: 1pxsolid #000000;
1275
- color: #000000;
1276
- font-weight: bold;
1277
- }
1278
-
1279
- &.selected__child {
1280
- border: 0px;
1281
- border-bottom: 2px solid var(--_primary-400);
1282
- }
1283
- &.disabled {
1284
- cursor: not-allowed;
1285
- opacity: 0.4;
1286
- position: relative;
1287
- overflow: hidden;
1288
- &::after {
1289
- content: "";
1290
- width: 172%;
1291
- height: 1px;
1292
- position: absolute;
1293
- background: #f00;
1294
- left: -14px;
1295
- transform: rotate(48deg);
1296
- /* -webkit-transform: rotate(48deg); */
1297
- -moz-transform: rotate(48deg);
1298
- top: 14px;
1299
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1300
- }
1301
- &::before {
1302
- content: "";
1303
- width: 164%;
1304
- height: 1px;
1305
- position: absolute;
1306
- background: #f00;
1307
- left: -14px;
1308
- transform: rotate(-48deg);
1309
- -webkit-transform: rotate(-48deg);
1310
- -moz-transform: rotate(-48deg);
1311
- top: 14px;
1312
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1313
- }
1314
- }
1315
- }
1316
- }
1317
- }
1318
- }
1319
-
1320
- .bundle_detail_product_qty_select {
1321
- display: flex;
1322
- justify-content: space-between;
1323
- align-items: flex-start;
1324
- width: 100%;
1325
-
1326
- .add_to_cart_qty_wrapper {
1327
- display: flex;
1328
- flex-direction: column;
1329
- gap: 6px;
1330
-
1331
- .add_to_cart_qty {
1332
- width: 205px;
1333
- border: 1px solid #d0d5dd !important;
1334
- border-radius: 2px !important;
1335
- outline: none;
1336
- padding: 8px 12px !important;
1337
- background-color: #f9fafb;
1338
- }
1339
-
1340
- small {
1341
- color: red;
1342
- }
1343
- }
1344
-
1345
- .select-button {
1346
- display: flex;
1347
- align-items: center;
1348
- padding: 10px 16px;
1349
- transition: all 0.3s ease;
1350
- background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr);
1351
- border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr);
1352
- border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs);
1353
- border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se);
1354
- border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh);
1355
- color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr);
1356
- font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy);
1357
- font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se);
1358
- font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic);
1359
- font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt);
1360
- line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht);
1361
- letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg);
1362
- box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
1363
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)
1364
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)
1365
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr);
1366
- text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an);
1367
- text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue);
1368
-
1369
- &:hover {
1370
- background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr);
1371
- border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr);
1372
- border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs);
1373
- border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se);
1374
- border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh);
1375
- color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr);
1376
- font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy);
1377
- font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se);
1378
- font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic);
1379
- font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt);
1380
- line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht);
1381
- letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg);
1382
- box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)
1383
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)
1384
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)
1385
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr);
1386
- text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an);
1387
- text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue);
1388
- }
1389
-
1390
- .icon {
1391
- margin-right: 8px;
1392
- color: #003366;
1393
- }
1394
-
1395
- &.selected {
1396
- background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr);
1397
- border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr);
1398
- border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs);
1399
- border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se);
1400
- border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh);
1401
- color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr);
1402
- font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy);
1403
- font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se);
1404
- font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic);
1405
- font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt);
1406
- line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht);
1407
- letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg);
1408
- box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae)
1409
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br)
1410
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd)
1411
- var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr);
1412
- text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an);
1413
- text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue);
1414
-
1415
- .icon {
1416
- color: white;
1417
- }
1418
- }
1419
- }
1420
- }
1421
- }
1422
- }
1423
-
1424
- hr {
1425
- &:last-child {
1426
- display: none;
1427
- }
1428
- }
1429
- }
1430
- }
1431
- }