@sc-360-v2/storefront-cms-library 0.4.65 → 0.4.67

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 (39) hide show
  1. package/dist/add-products-tab copy.scss +1122 -1132
  2. package/dist/add-products-tab-details.scss +1 -1
  3. package/dist/add-products-tab.scss +1 -6
  4. package/dist/builder.js +1 -1
  5. package/dist/builderLite.js +2 -0
  6. package/dist/builderLite.js.LICENSE.txt +1 -0
  7. package/dist/bulk-order-pad.scss +673 -677
  8. package/dist/bulk-variant-picker.scss +3294 -3294
  9. package/dist/bundle copy.scss +2805 -2805
  10. package/dist/bundle.scss +2385 -2383
  11. package/dist/bundleDetails.scss +1 -1
  12. package/dist/buyForHeaders.scss +0 -2
  13. package/dist/cart-details.scss +1 -1
  14. package/dist/cartDropdownOverlay.scss +7 -6
  15. package/dist/checkout.scss +4 -6
  16. package/dist/confirm-modal.scss +9 -6
  17. package/dist/coupon.scss +1257 -1254
  18. package/dist/editCartItem.scss +110 -111
  19. package/dist/embroidery.scss +212 -213
  20. package/dist/employee-bulk-order.scss +0 -2
  21. package/dist/empty-states.scss +0 -4
  22. package/dist/functions.js +1 -1
  23. package/dist/login.scss +9 -8
  24. package/dist/mfa-element.scss +0 -3
  25. package/dist/modal.scss +35 -33
  26. package/dist/order-status.scss +0 -2
  27. package/dist/product-highlights copy.scss +217 -217
  28. package/dist/product-highlights.scss +310 -311
  29. package/dist/product-price.scss +2597 -2598
  30. package/dist/quick-order-pad.scss +236 -237
  31. package/dist/spotlight.scss +1658 -1663
  32. package/dist/types/builder/builder-lite.d.ts +10 -0
  33. package/dist/types/builder/tools/element-edit/icon-list.d.ts +45 -0
  34. package/dist/uom-selector.scss +1168 -1169
  35. package/dist/variant-picker.scss +2384 -2384
  36. package/dist/volume-pricing copy 2.scss +1468 -1468
  37. package/dist/volume-pricing copy.scss +1076 -1077
  38. package/dist/volume-pricing.scss +1174 -1175
  39. package/package.json +5 -1
package/dist/add-products-tab copy.scss CHANGED
@@ -1,1132 +1,1122 @@
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
- // $defaultValues: (
8
- // --_dm-flt: getListOfResponsive(flex-end, flex-start),
9
- // );
10
- [data-div-type="element"] {
11
- &[data-element-type="addProductsTab"] {
12
- // width: var(
13
- // --_sf-el-wh-st-mx,
14
- // calc(
15
- // 1% *
16
- // var(
17
- // --_mob-ctm-ele-nw-wh-vl,
18
- // var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
- // )
20
- // )
21
- // );
22
- // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
23
- & > div {
24
- &.wrapper {
25
- width: 100%;
26
- }
27
- }
28
-
29
- .product-section {
30
- display: flex;
31
- justify-content: space-between;
32
- align-items: center;
33
- border-bottom: 1px solid #e0e0e0;
34
- padding: 0.5rem;
35
- .section-title {
36
- font-size: var(
37
- --_ctm-mob-dn-hr-te-ft-se,
38
- var(--_ctm-tab-dn-hr-te-ft-se, var(--_ctm-dn-hr-te-ft-se))
39
- );
40
- font-family: var(
41
- --_ctm-mob-dn-hr-te-ft-fy,
42
- var(--_ctm-tab-dn-hr-te-ft-fy, var(--_ctm-dn-hr-te-ft-fy))
43
- );
44
- font-weight: var(
45
- --_ctm-mob-dn-hr-te-ft-wt,
46
- var(--_ctm-tab-dn-hr-te-ft-wtvar(--_ctm-dn-hr-te-ft-wt))
47
- );
48
- line-height: var(
49
- --_ctm-mob-dn-hr-te-le-ht,
50
- var(--_ctm-tab-dn-hr-te-le-ht, var(--_ctm-dn-hr-te-le-ht))
51
- );
52
- letter-spacing: var(
53
- --_ctm-mob-dn-hr-te-lr-sg,
54
- var(--_ctm-tab-dn-hr-te-lr-sg, var(--_ctm-dn-hr-te-lr-sg))
55
- );
56
- color: var(--_ctm-mob-dn-hr-te-cr, var(--_ctm-tab-dn-hr-te-cr, var(--_ctm-dn-hr-te-cr)));
57
- }
58
- .search-bar {
59
- display: flex;
60
- align-items: center;
61
- gap: 0.5rem;
62
-
63
- .search-input {
64
- display: flex;
65
- align-items: center;
66
- border: 1px solid #d1d5db;
67
- border-radius: 4px;
68
- padding: 0.25rem 0.5rem;
69
- background: #fff;
70
- height: 40px;
71
-
72
- .icon {
73
- margin-right: 0.5rem;
74
- color: #6b7280;
75
- }
76
-
77
- input {
78
- border: none;
79
- outline: none;
80
- font-size: 14px;
81
- width: 160px;
82
- }
83
- }
84
-
85
- .filter-btn {
86
- border: 1px solid #d1d5db;
87
- background: white;
88
- border-radius: 4px;
89
- padding: 0.25rem 0.5rem;
90
- font-size: 18px;
91
- cursor: pointer;
92
- }
93
- }
94
- }
95
-
96
- .add-product-wrapper {
97
- display: grid;
98
- grid-template-columns: 1fr 1fr;
99
- gap: 48px;
100
- padding-top: 16px;
101
-
102
- .product-list {
103
- display: flex;
104
- flex-direction: column;
105
- gap: 48px;
106
-
107
- .product-category {
108
- display: flex;
109
- flex-direction: column;
110
- gap: 16px;
111
-
112
- .product-header {
113
- display: flex;
114
- gap: 6px;
115
- border-bottom: 0.5px solid #d0d5dd;
116
- padding-bottom: 16px;
117
- flex-direction: column;
118
-
119
- h2 {
120
- font-family: "Lato";
121
- font-size: 20px;
122
- color: var(--_gray-900);
123
- font-weight: 700;
124
- line-height: 30px;
125
- }
126
- .product-subheader {
127
- display: flex;
128
- flex-direction: row;
129
- gap: 12px;
130
- word-break: keep-all;
131
- align-items: center;
132
-
133
- @media (max-width: 500px) {
134
- flex-direction: column;
135
- white-space: nowrap;
136
- align-items: flex-start;
137
- }
138
- .product-quota {
139
- font-family: "Lato";
140
- font-weight: 400;
141
- font-size: 14px;
142
- line-height: 20px;
143
- letter-spacing: 0%;
144
- color: var(--_gray-500);
145
- padding-right: 12px;
146
- border-right: 1px solid var(--_border-light-color);
147
- gap: 6px;
148
- display: flex;
149
- span {
150
- font-family: "Lato";
151
- font-weight: 700;
152
- font-size: 14px;
153
- line-height: 20px;
154
- color: var(--_gray-900);
155
- }
156
- }
157
- .product-payment-methods {
158
- font-family: "Lato";
159
- font-weight: 400;
160
- font-size: 14px;
161
- line-height: 20px;
162
- letter-spacing: 0%;
163
- color: var(--_gray-500);
164
- gap: 6px;
165
- display: flex;
166
- span {
167
- font-family: "Lato";
168
- font-weight: 700;
169
- font-size: 14px;
170
- line-height: 20px;
171
- letter-spacing: 0%;
172
- color: var(--_gray-900);
173
- }
174
- }
175
- }
176
- }
177
-
178
- .product-grid {
179
- display: grid;
180
- // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
181
- grid-template-columns: 1fr 1fr;
182
-
183
- @media (max-width: 500px) {
184
- grid-template-columns: 1fr;
185
- }
186
-
187
- .product-card {
188
- display: flex;
189
- flex-direction: column;
190
- gap: 24px;
191
- padding: 16px;
192
- border: 0.5px solid transparent;
193
- &:hover {
194
- background-color: var(--_gray-100);
195
- border: 0.5px solid var(--_primary-400);
196
- cursor: pointer;
197
- border-radius: 4px;
198
- }
199
- &.active {
200
- border: 0.5px solid #243dc6;
201
- border-radius: 4px;
202
- border-width: 0.5px;
203
-
204
- background-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-bd-cr);
205
- border-width: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-wh);
206
- border-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-cr);
207
- border-style: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-se);
208
- border-radius: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-rs);
209
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-ae)
210
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-br)
211
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-sd)
212
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-cr);
213
- }
214
-
215
- .product-image {
216
- width: 268px;
217
- height: 240px;
218
- display: flex;
219
- align-items: center;
220
- justify-content: center;
221
- align-self: center;
222
- }
223
-
224
- .product-info {
225
- gap: 4px;
226
- display: flex;
227
- flex-direction: column;
228
-
229
- .product-title {
230
- font-family: var(
231
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-fy,
232
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-te-ft-fy))
233
- );
234
- font-size: var(
235
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se,
236
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-se, var(--_ctm-dn-pt-cd-pt-cd-te-ft-se))
237
- );
238
- font-weight: var(
239
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-wt,
240
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-te-ft-wt))
241
- );
242
- color: var(
243
- --_ctm-mob-dn-pt-cd-pt-cd-te-cr,
244
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-cr, var(--_ctm-dn-pt-cd-pt-cd-te-cr))
245
- );
246
- line-height: var(
247
- --_ctm-mob-dn-pt-cd-pt-cd-te-le-ht,
248
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-le-ht, var(--_ctm-dn-pt-cd-pt-cd-te-le-ht))
249
- );
250
- letter-spacing: var(
251
- --_ctm-mob-dn-pt-cd-pt-cd-te-lr-sg,
252
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-te-lr-sg))
253
- );
254
- text-decoration: var(
255
- --_ctm-mob-dn-pt-cd-pt-cd-te-ue,
256
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ue, var(--_ctm-dn-pt-cd-pt-cd-te-ue))
257
- );
258
- font-style: var(
259
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se-ic,
260
- var(
261
- --_ctm-tab-dn-pt-cd-pt-cd-te-ft-se-ic,
262
- var(--_ctm-dn-pt-cd-pt-cd-te-ft-se-ic)
263
- )
264
- );
265
- padding: var(
266
- --_ctm-mob-dn-pt-cd-pt-cd-te-pg,
267
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-pg, var(--_ctm-dn-pt-cd-pt-cd-te-pg))
268
- );
269
- }
270
-
271
- .product-code {
272
- font-family: var(
273
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-fy,
274
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-fy))
275
- );
276
- font-size: var(
277
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se,
278
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se))
279
- );
280
- font-weight: var(
281
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-wt,
282
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-wt))
283
- );
284
- color: var(
285
- --_ctm-mob-dn-pt-cd-pt-cd-dn-cr,
286
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-cr, var(--_ctm-dn-pt-cd-pt-cd-dn-cr))
287
- );
288
- line-height: var(
289
- --_ctm-mob-dn-pt-cd-pt-cd-dn-le-ht,
290
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-le-ht, var(--_ctm-dn-pt-cd-pt-cd-dn-le-ht))
291
- );
292
- letter-spacing: var(
293
- --_ctm-mob-dn-pt-cd-pt-cd-dn-lr-sg,
294
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-dn-lr-sg))
295
- );
296
- text-decoration: var(
297
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ue,
298
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ue, var(--_ctm-dn-pt-cd-pt-cd-dn-ue))
299
- );
300
- font-style: var(
301
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se-ic,
302
- var(
303
- --_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se-ic,
304
- var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se-ic)
305
- )
306
- );
307
- padding: var(
308
- --_ctm-mob-dn-pt-cd-pt-cd-dn-pg,
309
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-pg, var(--_ctm-dn-pt-cd-pt-cd-dn-pg))
310
- );
311
- }
312
- .product-price {
313
- font-family: var(
314
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-fy,
315
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-fy))
316
- );
317
- font-size: var(
318
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se,
319
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se))
320
- );
321
- font-weight: var(
322
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-wt,
323
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-wt))
324
- );
325
- color: var(
326
- --_ctm-mob-dn-pt-cd-pt-cd-pe-cr,
327
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-cr, var(--_ctm-dn-pt-cd-pt-cd-pe-cr))
328
- );
329
- line-height: var(
330
- --_ctm-mob-dn-pt-cd-pt-cd-pe-le-ht,
331
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-le-ht, var(--_ctm-dn-pt-cd-pt-cd-pe-le-ht))
332
- );
333
- letter-spacing: var(
334
- --_ctm-mob-dn-pt-cd-pt-cd-pe-lr-sg,
335
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-pe-lr-sg))
336
- );
337
- text-decoration: var(
338
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ue,
339
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ue, var(--_ctm-dn-pt-cd-pt-cd-pe-ue))
340
- );
341
- font-style: var(
342
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se-ic,
343
- var(
344
- --_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se-ic,
345
- var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se-ic)
346
- )
347
- );
348
- padding: var(
349
- --_ctm-mob-dn-pt-cd-pt-cd-pe-pg,
350
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-pg, var(--_ctm-dn-pt-cd-pt-cd-pe-pg))
351
- );
352
- }
353
-
354
- .product-meta {
355
- font-size: 0.75rem;
356
- display: flex;
357
- gap: 0.5rem;
358
- margin-top: 0.5rem;
359
- justify-content: space-between;
360
- align-items: center;
361
- .product-views {
362
- gap: 6px;
363
- display: flex;
364
- flex-direction: row;
365
- align-items: center;
366
- span {
367
- gap: 6px;
368
- display: flex;
369
- flex-direction: row;
370
- align-items: center;
371
- .icon {
372
- display: flex;
373
- svg {
374
- width: 20px;
375
- height: 20px;
376
-
377
- path {
378
- stroke: var(--_gray-400);
379
- }
380
- }
381
- }
382
-
383
- font-family: "Lato";
384
- font-weight: 700;
385
- font-size: 16px;
386
- line-height: 150%;
387
- color: var(--_gray-600);
388
- }
389
- }
390
- .product-cart {
391
- position: relative;
392
- width: 50px;
393
- height: 50px;
394
- .icon {
395
- display: flex;
396
- svg {
397
- width: 32px;
398
- height: 32px;
399
-
400
- path {
401
- stroke: var(--_gray-400);
402
- }
403
- }
404
- }
405
- .cart-badge {
406
- position: absolute;
407
- top: -5px;
408
- right: 8px;
409
- background-color: #ffd400; /* bright yellow */
410
- color: #000;
411
- border-radius: 4px;
412
- padding: 2px 6px;
413
- font-size: 14px;
414
- font-weight: bold;
415
- min-width: 20px;
416
- text-align: center;
417
- }
418
- }
419
- }
420
- }
421
- }
422
- }
423
- }
424
- }
425
-
426
- .customizer-panel {
427
- display: flex;
428
- flex-direction: column;
429
- gap: 12px;
430
- border-left: 0.5px solid #d0d5dd;
431
- padding-left: 48px;
432
-
433
- .product-header {
434
- display: flex;
435
- flex-direction: column;
436
- gap: 12px;
437
- h2 {
438
- font-family: var(
439
- --_ctm-mob-dn-pt-ds-pt-te-ft-fy,
440
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-fy, var(--_ctm-dn-pt-ds-pt-te-ft-fy))
441
- );
442
- font-size: var(
443
- --_ctm-mob-dn-pt-ds-pt-te-ft-se,
444
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-se, var(--_ctm-dn-pt-ds-pt-te-ft-se))
445
- );
446
- font-weight: var(
447
- --_ctm-mob-dn-pt-ds-pt-te-ft-wt,
448
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-wt, var(--_ctm-dn-pt-ds-pt-te-ft-wt))
449
- );
450
- color: var(
451
- --_ctm-mob-dn-pt-ds-pt-te-cr,
452
- var(--_ctm-tab-dn-pt-ds-pt-te-cr, var(--_ctm-dn-pt-ds-pt-te-cr))
453
- );
454
- line-height: var(
455
- --_ctm-mob-dn-pt-ds-pt-te-le-ht,
456
- var(--_ctm-tab-dn-pt-ds-pt-te-le-ht, var(--_ctm-dn-pt-ds-pt-te-le-ht))
457
- );
458
- letter-spacing: var(
459
- --_ctm-mob-dn-pt-ds-pt-te-lr-sg,
460
- var(--_ctm-tab-dn-pt-ds-pt-te-lr-sg, var(--_ctm-dn-pt-ds-pt-te-lr-sg))
461
- );
462
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
463
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
464
- padding: var(
465
- --_ctm-dn-mob-pt-ds-pt-te-pg,
466
- var(--_ctm-tab-dn-pt-ds-pt-te-pg, var(--_ctm-dn-pt-ds-pt-te-pg))
467
- );
468
- }
469
- p {
470
- font-family: var(
471
- --_ctm-mob-dn-pt-ds-pt-dn-ft-fy,
472
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-fy, var(--_ctm-dn-pt-ds-pt-dn-ft-fy))
473
- );
474
- font-size: var(
475
- --_ctm-mob-dn-pt-ds-pt-dn-ft-se,
476
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-se, var(--_ctm-dn-pt-ds-pt-dn-ft-se))
477
- );
478
- font-weight: var(
479
- --_ctm-mob-dn-pt-ds-pt-dn-ft-wt,
480
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-wt, var(--_ctm-dn-pt-ds-pt-dn-ft-wt))
481
- );
482
- color: var(
483
- --_ctm-mob-dn-pt-ds-pt-dn-cr,
484
- var(--_ctm-tab-dn-pt-ds-pt-dn-cr, var(--_ctm-dn-pt-ds-pt-dn-cr))
485
- );
486
- line-height: var(
487
- --_ctm-mob-dn-pt-ds-pt-dn-le-ht,
488
- var(--_ctm-tab-dn-pt-ds-pt-dn-le-ht, var(--_ctm-dn-pt-ds-pt-dn-le-ht))
489
- );
490
- letter-spacing: var(
491
- --_ctm-mob-dn-pt-ds-pt-dn-lr-sg,
492
- var(--_ctm-tab-dn-pt-ds-pt-dn-lr-sg, var(--_ctm-dn-pt-ds-pt-dn-lr-sg))
493
- );
494
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
495
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
496
- padding: var(
497
- --_ctm-dn-mob-pt-ds-pt-dn-pg,
498
- var(--_ctm-tab-dn-pt-ds-pt-dn-pg, var(--_ctm-dn-pt-ds-pt-dn-pg))
499
- );
500
- }
501
- }
502
-
503
- .price-options {
504
- display: flex;
505
- align-items: center;
506
-
507
- .price {
508
- display: flex;
509
- flex-direction: column;
510
-
511
- .amount {
512
- font-family: var(
513
- --_ctm-mob-dn-pt-ds-pt-pe-ft-fy,
514
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-fy, var(--_ctm-dn-pt-ds-pt-pe-ft-fy))
515
- );
516
- font-size: var(
517
- --_ctm-mob-dn-pt-ds-pt-pe-ft-se,
518
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-se, var(--_ctm-dn-pt-ds-pt-pe-ft-se))
519
- );
520
- font-weight: var(
521
- --_ctm-mob-dn-pt-ds-pt-pe-ft-wt,
522
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-wt, var(--_ctm-dn-pt-ds-pt-pe-ft-wt))
523
- );
524
- color: var(
525
- --_ctm-mob-dn-pt-ds-pt-pe-cr,
526
- var(--_ctm-tab-dn-pt-ds-pt-pe-cr, var(--_ctm-dn-pt-ds-pt-pe-cr))
527
- );
528
- line-height: var(
529
- --_ctm-mob-dn-pt-ds-pt-pe-le-ht,
530
- var(--_ctm-tab-dn-pt-ds-pt-pe-le-ht, var(--_ctm-dn-pt-ds-pt-pe-le-ht))
531
- );
532
- letter-spacing: var(
533
- --_ctm-mob-dn-pt-ds-pt-pe-lr-sg,
534
- var(--_ctm-tab-dn-pt-ds-pt-pe-lr-sg, var(--_ctm-dn-pt-ds-pt-pe-lr-sg))
535
- );
536
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
537
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
538
- padding: var(
539
- --_ctm-dn-mob-pt-ds-pt-pe-pg,
540
- var(--_ctm-tab-dn-pt-ds-pt-pe-pg, var(--_ctm-dn-pt-ds-pt-pe-pg))
541
- );
542
- }
543
-
544
- .note {
545
- font-family: "Lato";
546
- font-weight: 500;
547
- font-size: 16px;
548
- line-height: 24px;
549
- color: var(--_success-700);
550
- }
551
- }
552
- }
553
-
554
- .color-options {
555
- display: flex;
556
- flex-direction: column;
557
- margin-top: 12px;
558
- gap: 6px;
559
-
560
- label {
561
- font-family: "Lato";
562
- font-weight: 600;
563
- font-size: 16px;
564
- line-height: 24px;
565
- color: var(--_gray-600);
566
- }
567
- .colors {
568
- display: flex;
569
- flex-wrap: wrap;
570
- gap: 6px;
571
-
572
- .color-circle {
573
- width: 28px;
574
- height: 28px;
575
- border-radius: 50%;
576
- cursor: pointer;
577
-
578
- &.selected {
579
- width: 50px;
580
- height: 28px;
581
- border-radius: 100px;
582
- //border: 0.5px solid var(--_gray-600);
583
- //padding: 6px 5px;
584
- }
585
- .color-code {
586
- width: 28px;
587
- height: 28px;
588
- border-radius: 50%;
589
- cursor: pointer;
590
- &.selected {
591
- width: 50px;
592
- height: 28px;
593
- border-radius: 100px;
594
- border: 0.5px solid var(--_gray-600);
595
- padding: 6px 5px;
596
- }
597
- }
598
- }
599
- }
600
- }
601
-
602
- .fit-size-options {
603
- display: flex;
604
- flex-direction: column;
605
- margin-top: 20px;
606
- gap: 2rem;
607
-
608
- .select_fit,
609
- .fit,
610
- .size {
611
- display: flex;
612
- flex-direction: column;
613
- gap: 6px;
614
-
615
- label {
616
- font-family: "Lato";
617
- font-weight: 600;
618
- font-size: 16px;
619
- line-height: 24px;
620
- color: var(--_gray-600);
621
- }
622
-
623
- .fit_options,
624
- .size_options {
625
- display: flex;
626
- gap: 12px;
627
- flex-wrap: wrap;
628
-
629
- button {
630
- padding: 8px 12px;
631
- border: 0.5px solid var(--_gray-300);
632
- border-radius: 4px;
633
- background: #fff;
634
- font-family: "Lato";
635
- font-weight: 400;
636
- font-size: 16px;
637
- line-height: 24px;
638
- color: var(--_gray-600);
639
- cursor: pointer;
640
-
641
- &.selected {
642
- border: 0.5px solid var(--_primary-400);
643
- background-color: var(--_gray-200);
644
- font-weight: 600;
645
- font-size: 16px;
646
- color: var(--_primary-400);
647
- }
648
- }
649
- }
650
- }
651
- }
652
-
653
- .product_qty_wrapper {
654
- display: flex;
655
- // width: 124px;
656
- flex-direction: column;
657
- align-items: flex-start;
658
- gap: 6px;
659
- width: 120px;
660
-
661
- .product_qty_container {
662
- display: flex;
663
- align-items: flex-start;
664
- align-self: stretch;
665
- border-radius: 4px;
666
- border: 0.5px solid #d0d5dd;
667
- background: #fff;
668
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
669
-
670
- .product_qty_label {
671
- display: flex;
672
- padding: 8px 12px;
673
- align-items: center;
674
- border-radius: 8px 0px 0px 8px;
675
- p {
676
- color: #475467;
677
- font-size: 16px;
678
- font-weight: 400;
679
- line-height: 24px;
680
- }
681
- }
682
-
683
- .product_qty_number {
684
- display: flex;
685
- padding: 8px 12px;
686
- align-items: center;
687
- gap: 8px;
688
- flex: 1 0 0;
689
- align-self: stretch;
690
- border-radius: 0px 4px 4px 0px;
691
- background: #fff;
692
- border-left: 1px solid #d0d5dd;
693
- max-width: 80px;
694
- text-align: center;
695
- }
696
- }
697
- }
698
- .add-to-cart {
699
- width: 100%;
700
- height: 56;
701
- opacity: 1;
702
- border-radius: 4px;
703
- gap: 8px;
704
- padding-top: 12px;
705
- padding-right: 24px;
706
- padding-bottom: 12px;
707
- padding-left: 24px;
708
- border-width: 1px;
709
- background: #243dc6;
710
- border: 1px solid #243dc6;
711
- box-shadow: 0px 1px 2px 0px #1018280d;
712
- text-align: center;
713
- span {
714
- vertical-align: middle;
715
- }
716
- button {
717
- font-family: Lato;
718
- font-weight: 600;
719
- font-size: 16px;
720
- line-height: 24px;
721
- letter-spacing: 0%;
722
- color: #ffffff;
723
- }
724
- }
725
- }
726
-
727
- @media (max-width: 768px) {
728
- grid-template-columns: 1fr;
729
- .customizer-panel {
730
- border-left: none;
731
- padding-left: 0;
732
- margin-top: 2rem;
733
- }
734
- }
735
- }
736
-
737
- .embla {
738
- width: 100%;
739
- height: 100%;
740
- position: relative;
741
- display: flex;
742
- flex-direction: column;
743
- padding: 20px;
744
- // overflow: hidden;
745
-
746
- .embla__viewport {
747
- width: 100%;
748
- height: 100%;
749
- position: relative;
750
- display: flex;
751
- flex-direction: column;
752
-
753
- overflow: hidden;
754
-
755
- .embla__container {
756
- width: 100%;
757
- height: 100%;
758
- display: grid;
759
- grid-template-rows: 100%;
760
-
761
- grid-template-columns: repeat(
762
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
763
- calc(
764
- 100% /
765
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
766
- )
767
- );
768
-
769
- grid-auto-flow: column;
770
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
771
-
772
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
773
- height: calc(100% - calc(50px + 10px));
774
- }
775
-
776
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
777
- height: calc(100% - calc(50px + 20px));
778
- }
779
-
780
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
781
- height: calc(
782
- 100% - calc(
783
- var(
784
- --_ctm-mob-dn-pn-ds-dt-se,
785
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
786
- ) +
787
- 20px
788
- )
789
- );
790
- }
791
-
792
- .embla__slide {
793
- width: 100%;
794
- height: 100%;
795
- & > img {
796
- width: 100%;
797
- height: 100%;
798
- }
799
- }
800
- }
801
- }
802
- &:not([data-display-style="Column"]) {
803
- .embla__container {
804
- grid-auto-columns: calc(
805
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
806
- );
807
- }
808
- }
809
-
810
- .arrow-navigation {
811
- display: flex;
812
- position: absolute;
813
- top: 50%;
814
- left: 50%;
815
- width: 100%;
816
- justify-content: space-between;
817
- transform: translate(-50%, -50%);
818
- // padding-left: 20px;
819
-
820
- &[data-control-type="Bottom-Overflow"] {
821
- transform: translateX(-50%);
822
- width: 100%;
823
- justify-content: center;
824
- gap: 12px;
825
- top: unset;
826
- bottom: 6px;
827
- }
828
- &[data-control-type="Bottom"] {
829
- transform: unset;
830
- position: static;
831
- width: 100%;
832
- justify-content: center;
833
- gap: 12px;
834
- margin-top: 10px;
835
- }
836
- }
837
- &[data-control-type="Side"] {
838
- .left-button,
839
- .right-button {
840
- background-color: transparent;
841
- }
842
- }
843
- &[data-background-shape="Round"] {
844
- .left-button,
845
- .right-button {
846
- background-color: #f2f5f5;
847
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
848
- }
849
- }
850
- .left-button {
851
- padding: 10px;
852
- border-radius: 50%;
853
- border: none;
854
- width: var(
855
- --_ctm-mob-dn-pn-as-aw-se,
856
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
857
- );
858
- height: var(
859
- --_ctm-mob-dn-pn-as-aw-se,
860
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
861
- );
862
-
863
- display: flex;
864
- align-items: center;
865
- justify-content: center;
866
- cursor: pointer;
867
- outline: none;
868
- margin-left: 12px;
869
- &:disabled {
870
- & svg {
871
- path {
872
- stroke: #c3b7b7;
873
- }
874
- }
875
- }
876
- }
877
- .right-button {
878
- border-radius: 50%;
879
- border: none;
880
- width: var(
881
- --_ctm-mob-dn-pn-as-aw-se,
882
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
883
- );
884
- height: var(
885
- --_ctm-mob-dn-pn-as-aw-se,
886
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
887
- );
888
-
889
- display: flex;
890
- align-items: center;
891
- justify-content: center;
892
- cursor: pointer;
893
- outline: none;
894
- margin-right: 12px;
895
- padding: 10px;
896
-
897
- &:disabled {
898
- & svg {
899
- path {
900
- stroke: #c3b7b7;
901
- }
902
- }
903
- }
904
- }
905
- .icon {
906
- display: flex;
907
-
908
- svg {
909
- width: calc(
910
- var(
911
- --_ctm-mob-dn-pn-as-aw-se,
912
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
913
- ) *
914
- 0.5
915
- );
916
- height: calc(
917
- var(
918
- --_ctm-mob-dn-pn-as-aw-se,
919
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
920
- ) *
921
- 0.5
922
- );
923
-
924
- path {
925
- stroke: #514949;
926
- }
927
- }
928
- }
929
-
930
- &[data-control-type="Side"] {
931
- .embla__viewport {
932
- width: calc(100% - 120px);
933
- margin-inline: auto;
934
- }
935
- .left-button {
936
- position: absolute;
937
- left: 0;
938
- top: 50%;
939
- transform: translateY(-50%);
940
- }
941
- .right-button {
942
- position: absolute;
943
-
944
- right: 0;
945
- top: 50%;
946
- transform: translateY(-50%);
947
- }
948
- }
949
-
950
- &[data-thumbnail-placement="top"] {
951
- flex-direction: column-reverse;
952
- }
953
- &[data-thumbnail-placement="bottom"] {
954
- flex-direction: column;
955
- }
956
- &[data-thumbnail-placement="left"] {
957
- flex-direction: row-reverse;
958
-
959
- .embla__thumbs {
960
- width: var(--_ctm-lt-tl-se);
961
- height: 100%;
962
-
963
- & .embla__thumbs__container {
964
- flex-direction: column;
965
- height: 100%;
966
- }
967
- }
968
- }
969
- &[data-thumbnail-placement="right"] {
970
- flex-direction: row;
971
- .embla__thumbs {
972
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
973
-
974
- height: 100%;
975
-
976
- & .embla__thumbs__container {
977
- flex-direction: column;
978
- height: 100%;
979
- }
980
- }
981
- }
982
- .embla__dots {
983
- display: flex;
984
- flex-wrap: wrap;
985
- justify-content: center;
986
- align-items: center;
987
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
988
- gap: 6px;
989
-
990
- &[data-control-type="Bottom-Overflow"] {
991
- position: absolute;
992
- bottom: 10px;
993
- left: 50%;
994
- transform: translateX(-50%);
995
- width: 75%;
996
- }
997
- .embla__dot {
998
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
999
- -webkit-appearance: none;
1000
- appearance: none;
1001
- background-color: var(
1002
- --_ctm-mob-dn-pn-ds-or-dt-cr,
1003
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
1004
- );
1005
-
1006
- touch-action: manipulation;
1007
- display: inline-flex;
1008
- text-decoration: none;
1009
- cursor: pointer;
1010
- border: 0;
1011
- padding: 0;
1012
- margin: 0;
1013
- // width: 0.6rem;
1014
- // height: 0.6rem;
1015
- width: var(
1016
- --_ctm-mob-dn-pn-ds-dt-se,
1017
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1018
- );
1019
- height: var(
1020
- --_ctm-mob-dn-pn-ds-dt-se,
1021
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1022
- );
1023
-
1024
- display: flex;
1025
- align-items: center;
1026
- justify-content: center;
1027
- border-radius: 50%;
1028
- }
1029
- .embla__dot:after {
1030
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1031
- width: var(
1032
- --_ctm-mob-dn-pn-ds-dt-se,
1033
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1034
- );
1035
- height: var(
1036
- --_ctm-mob-dn-pn-ds-dt-se,
1037
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1038
- );
1039
-
1040
- border-radius: 50%;
1041
- display: flex;
1042
- align-items: center;
1043
- content: "";
1044
- }
1045
- .embla__dot--selected:after {
1046
- box-shadow: inset 0 0 0 1px var(--text-body);
1047
- background-color: var(
1048
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
1049
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
1050
- );
1051
- }
1052
- &[data-slider-control="Pagination Line"] {
1053
- .embla__dot {
1054
- width: var(
1055
- --_ctm-mob-dn-pn-le-le-wh,
1056
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1057
- );
1058
- height: var(
1059
- --_ctm-mob-dn-pn-le-le-ht,
1060
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1061
- );
1062
- background-color: var(
1063
- --_ctm-mob-dn-pn-le-or-le-cr,
1064
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
1065
- );
1066
- border-radius: 6px;
1067
- }
1068
-
1069
- .embla__dot--selected:after {
1070
- box-shadow: inset 0 0 0 1px var(--text-body);
1071
- border-radius: 6px;
1072
- width: var(
1073
- --_ctm-mob-dn-pn-le-le-wh,
1074
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1075
- );
1076
- height: var(
1077
- --_ctm-mob-dn-pn-le-le-ht,
1078
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1079
- );
1080
- background-color: var(
1081
- --_ctm-mob-dn-pn-le-ct-le-cr,
1082
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
1083
- );
1084
- }
1085
- }
1086
- }
1087
-
1088
- .embla__thumbs {
1089
- width: 100%;
1090
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1091
-
1092
- position: relative;
1093
- display: grid;
1094
- grid-template-columns: 1fr;
1095
- overflow: hidden;
1096
- // margin: 10px;
1097
- padding: 10px;
1098
-
1099
- .embla__thumbs__viewport {
1100
- width: 100%;
1101
- height: 100%;
1102
- position: relative;
1103
- display: flex;
1104
- flex-direction: column;
1105
-
1106
- overflow: hidden;
1107
- }
1108
- .embla__thumbs__container {
1109
- display: flex;
1110
- flex-direction: row;
1111
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
1112
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
1113
-
1114
- width: 100%;
1115
- // justify-content: center;
1116
- // height: 200px;
1117
-
1118
- .embla__thumbs__slide {
1119
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1120
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1121
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1122
-
1123
- & img {
1124
- width: 100%;
1125
- height: 100%;
1126
- }
1127
- }
1128
- }
1129
- }
1130
- }
1131
- }
1132
- }
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
+ // $defaultValues: (
8
+ // --_dm-flt: getListOfResponsive(flex-end, flex-start),
9
+ // );
10
+ [data-div-type="element"] {
11
+ &[data-element-type="addProductsTab"] {
12
+ // width: var(
13
+ // --_sf-el-wh-st-mx,
14
+ // calc(
15
+ // 1% *
16
+ // var(
17
+ // --_mob-ctm-ele-nw-wh-vl,
18
+ // var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
+ // )
20
+ // )
21
+ // );
22
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
23
+ & > div {
24
+ &.wrapper {
25
+ width: 100%;
26
+ }
27
+ }
28
+
29
+ .product-section {
30
+ display: flex;
31
+ justify-content: space-between;
32
+ align-items: center;
33
+ border-bottom: 1px solid #e0e0e0;
34
+ padding: 0.5rem;
35
+ .section-title {
36
+ font-size: var(
37
+ --_ctm-mob-dn-hr-te-ft-se,
38
+ var(--_ctm-tab-dn-hr-te-ft-se, var(--_ctm-dn-hr-te-ft-se))
39
+ );
40
+ font-family: var(
41
+ --_ctm-mob-dn-hr-te-ft-fy,
42
+ var(--_ctm-tab-dn-hr-te-ft-fy, var(--_ctm-dn-hr-te-ft-fy))
43
+ );
44
+ font-weight: var(
45
+ --_ctm-mob-dn-hr-te-ft-wt,
46
+ var(--_ctm-tab-dn-hr-te-ft-wtvar(--_ctm-dn-hr-te-ft-wt))
47
+ );
48
+ line-height: var(
49
+ --_ctm-mob-dn-hr-te-le-ht,
50
+ var(--_ctm-tab-dn-hr-te-le-ht, var(--_ctm-dn-hr-te-le-ht))
51
+ );
52
+ letter-spacing: var(
53
+ --_ctm-mob-dn-hr-te-lr-sg,
54
+ var(--_ctm-tab-dn-hr-te-lr-sg, var(--_ctm-dn-hr-te-lr-sg))
55
+ );
56
+ color: var(--_ctm-mob-dn-hr-te-cr, var(--_ctm-tab-dn-hr-te-cr, var(--_ctm-dn-hr-te-cr)));
57
+ }
58
+ .search-bar {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 0.5rem;
62
+
63
+ .search-input {
64
+ display: flex;
65
+ align-items: center;
66
+ border: 1px solid #d1d5db;
67
+ border-radius: 4px;
68
+ padding: 0.25rem 0.5rem;
69
+ background: #fff;
70
+ height: 40px;
71
+
72
+ .icon {
73
+ margin-right: 0.5rem;
74
+ color: #6b7280;
75
+ }
76
+
77
+ input {
78
+ border: none;
79
+ outline: none;
80
+ font-size: 14px;
81
+ width: 160px;
82
+ }
83
+ }
84
+
85
+ .filter-btn {
86
+ border: 1px solid #d1d5db;
87
+ background: white;
88
+ border-radius: 4px;
89
+ padding: 0.25rem 0.5rem;
90
+ font-size: 18px;
91
+ cursor: pointer;
92
+ }
93
+ }
94
+ }
95
+
96
+ .add-product-wrapper {
97
+ display: grid;
98
+ grid-template-columns: 1fr 1fr;
99
+ gap: 48px;
100
+ padding-top: 16px;
101
+
102
+ .product-list {
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 48px;
106
+
107
+ .product-category {
108
+ display: flex;
109
+ flex-direction: column;
110
+ gap: 16px;
111
+
112
+ .product-header {
113
+ display: flex;
114
+ gap: 6px;
115
+ border-bottom: 0.5px solid #d0d5dd;
116
+ padding-bottom: 16px;
117
+ flex-direction: column;
118
+
119
+ h2 {
120
+ font-size: 20px;
121
+ color: var(--_gray-900);
122
+ font-weight: 700;
123
+ line-height: 30px;
124
+ }
125
+ .product-subheader {
126
+ display: flex;
127
+ flex-direction: row;
128
+ gap: 12px;
129
+ word-break: keep-all;
130
+ align-items: center;
131
+
132
+ @media (max-width: 500px) {
133
+ flex-direction: column;
134
+ white-space: nowrap;
135
+ align-items: flex-start;
136
+ }
137
+ .product-quota {
138
+ font-weight: 400;
139
+ font-size: 14px;
140
+ line-height: 20px;
141
+ letter-spacing: 0%;
142
+ color: var(--_gray-500);
143
+ padding-right: 12px;
144
+ border-right: 1px solid var(--_border-light-color);
145
+ gap: 6px;
146
+ display: flex;
147
+ span {
148
+ font-weight: 700;
149
+ font-size: 14px;
150
+ line-height: 20px;
151
+ color: var(--_gray-900);
152
+ }
153
+ }
154
+ .product-payment-methods {
155
+ font-weight: 400;
156
+ font-size: 14px;
157
+ line-height: 20px;
158
+ letter-spacing: 0%;
159
+ color: var(--_gray-500);
160
+ gap: 6px;
161
+ display: flex;
162
+ span {
163
+ font-weight: 700;
164
+ font-size: 14px;
165
+ line-height: 20px;
166
+ letter-spacing: 0%;
167
+ color: var(--_gray-900);
168
+ }
169
+ }
170
+ }
171
+ }
172
+
173
+ .product-grid {
174
+ display: grid;
175
+ // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
176
+ grid-template-columns: 1fr 1fr;
177
+
178
+ @media (max-width: 500px) {
179
+ grid-template-columns: 1fr;
180
+ }
181
+
182
+ .product-card {
183
+ display: flex;
184
+ flex-direction: column;
185
+ gap: 24px;
186
+ padding: 16px;
187
+ border: 0.5px solid transparent;
188
+ &:hover {
189
+ background-color: var(--_gray-100);
190
+ border: 0.5px solid var(--_primary-400);
191
+ cursor: pointer;
192
+ border-radius: 4px;
193
+ }
194
+ &.active {
195
+ border: 0.5px solid #243dc6;
196
+ border-radius: 4px;
197
+ border-width: 0.5px;
198
+
199
+ background-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-bd-cr);
200
+ border-width: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-wh);
201
+ border-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-cr);
202
+ border-style: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-se);
203
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-rs);
204
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-ae)
205
+ prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-br)
206
+ prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-sd)
207
+ prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-cr);
208
+ }
209
+
210
+ .product-image {
211
+ width: 268px;
212
+ height: 240px;
213
+ display: flex;
214
+ align-items: center;
215
+ justify-content: center;
216
+ align-self: center;
217
+ }
218
+
219
+ .product-info {
220
+ gap: 4px;
221
+ display: flex;
222
+ flex-direction: column;
223
+
224
+ .product-title {
225
+ font-family: var(
226
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-fy,
227
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-te-ft-fy))
228
+ );
229
+ font-size: var(
230
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se,
231
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-se, var(--_ctm-dn-pt-cd-pt-cd-te-ft-se))
232
+ );
233
+ font-weight: var(
234
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-wt,
235
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-te-ft-wt))
236
+ );
237
+ color: var(
238
+ --_ctm-mob-dn-pt-cd-pt-cd-te-cr,
239
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-cr, var(--_ctm-dn-pt-cd-pt-cd-te-cr))
240
+ );
241
+ line-height: var(
242
+ --_ctm-mob-dn-pt-cd-pt-cd-te-le-ht,
243
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-le-ht, var(--_ctm-dn-pt-cd-pt-cd-te-le-ht))
244
+ );
245
+ letter-spacing: var(
246
+ --_ctm-mob-dn-pt-cd-pt-cd-te-lr-sg,
247
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-te-lr-sg))
248
+ );
249
+ text-decoration: var(
250
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ue,
251
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ue, var(--_ctm-dn-pt-cd-pt-cd-te-ue))
252
+ );
253
+ font-style: var(
254
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se-ic,
255
+ var(
256
+ --_ctm-tab-dn-pt-cd-pt-cd-te-ft-se-ic,
257
+ var(--_ctm-dn-pt-cd-pt-cd-te-ft-se-ic)
258
+ )
259
+ );
260
+ padding: var(
261
+ --_ctm-mob-dn-pt-cd-pt-cd-te-pg,
262
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-pg, var(--_ctm-dn-pt-cd-pt-cd-te-pg))
263
+ );
264
+ }
265
+
266
+ .product-code {
267
+ font-family: var(
268
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-fy,
269
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-fy))
270
+ );
271
+ font-size: var(
272
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se,
273
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se))
274
+ );
275
+ font-weight: var(
276
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-wt,
277
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-wt))
278
+ );
279
+ color: var(
280
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-cr,
281
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-cr, var(--_ctm-dn-pt-cd-pt-cd-dn-cr))
282
+ );
283
+ line-height: var(
284
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-le-ht,
285
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-le-ht, var(--_ctm-dn-pt-cd-pt-cd-dn-le-ht))
286
+ );
287
+ letter-spacing: var(
288
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-lr-sg,
289
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-dn-lr-sg))
290
+ );
291
+ text-decoration: var(
292
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ue,
293
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ue, var(--_ctm-dn-pt-cd-pt-cd-dn-ue))
294
+ );
295
+ font-style: var(
296
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se-ic,
297
+ var(
298
+ --_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se-ic,
299
+ var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se-ic)
300
+ )
301
+ );
302
+ padding: var(
303
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-pg,
304
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-pg, var(--_ctm-dn-pt-cd-pt-cd-dn-pg))
305
+ );
306
+ }
307
+ .product-price {
308
+ font-family: var(
309
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-fy,
310
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-fy))
311
+ );
312
+ font-size: var(
313
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se,
314
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se))
315
+ );
316
+ font-weight: var(
317
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-wt,
318
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-wt))
319
+ );
320
+ color: var(
321
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-cr,
322
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-cr, var(--_ctm-dn-pt-cd-pt-cd-pe-cr))
323
+ );
324
+ line-height: var(
325
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-le-ht,
326
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-le-ht, var(--_ctm-dn-pt-cd-pt-cd-pe-le-ht))
327
+ );
328
+ letter-spacing: var(
329
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-lr-sg,
330
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-pe-lr-sg))
331
+ );
332
+ text-decoration: var(
333
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ue,
334
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ue, var(--_ctm-dn-pt-cd-pt-cd-pe-ue))
335
+ );
336
+ font-style: var(
337
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se-ic,
338
+ var(
339
+ --_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se-ic,
340
+ var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se-ic)
341
+ )
342
+ );
343
+ padding: var(
344
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-pg,
345
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-pg, var(--_ctm-dn-pt-cd-pt-cd-pe-pg))
346
+ );
347
+ }
348
+
349
+ .product-meta {
350
+ font-size: 0.75rem;
351
+ display: flex;
352
+ gap: 0.5rem;
353
+ margin-top: 0.5rem;
354
+ justify-content: space-between;
355
+ align-items: center;
356
+ .product-views {
357
+ gap: 6px;
358
+ display: flex;
359
+ flex-direction: row;
360
+ align-items: center;
361
+ span {
362
+ gap: 6px;
363
+ display: flex;
364
+ flex-direction: row;
365
+ align-items: center;
366
+ .icon {
367
+ display: flex;
368
+ svg {
369
+ width: 20px;
370
+ height: 20px;
371
+
372
+ path {
373
+ stroke: var(--_gray-400);
374
+ }
375
+ }
376
+ }
377
+
378
+ font-weight: 700;
379
+ font-size: 16px;
380
+ line-height: 150%;
381
+ color: var(--_gray-600);
382
+ }
383
+ }
384
+ .product-cart {
385
+ position: relative;
386
+ width: 50px;
387
+ height: 50px;
388
+ .icon {
389
+ display: flex;
390
+ svg {
391
+ width: 32px;
392
+ height: 32px;
393
+
394
+ path {
395
+ stroke: var(--_gray-400);
396
+ }
397
+ }
398
+ }
399
+ .cart-badge {
400
+ position: absolute;
401
+ top: -5px;
402
+ right: 8px;
403
+ background-color: #ffd400; /* bright yellow */
404
+ color: #000;
405
+ border-radius: 4px;
406
+ padding: 2px 6px;
407
+ font-size: 14px;
408
+ font-weight: bold;
409
+ min-width: 20px;
410
+ text-align: center;
411
+ }
412
+ }
413
+ }
414
+ }
415
+ }
416
+ }
417
+ }
418
+ }
419
+
420
+ .customizer-panel {
421
+ display: flex;
422
+ flex-direction: column;
423
+ gap: 12px;
424
+ border-left: 0.5px solid #d0d5dd;
425
+ padding-left: 48px;
426
+
427
+ .product-header {
428
+ display: flex;
429
+ flex-direction: column;
430
+ gap: 12px;
431
+ h2 {
432
+ font-family: var(
433
+ --_ctm-mob-dn-pt-ds-pt-te-ft-fy,
434
+ var(--_ctm-tab-dn-pt-ds-pt-te-ft-fy, var(--_ctm-dn-pt-ds-pt-te-ft-fy))
435
+ );
436
+ font-size: var(
437
+ --_ctm-mob-dn-pt-ds-pt-te-ft-se,
438
+ var(--_ctm-tab-dn-pt-ds-pt-te-ft-se, var(--_ctm-dn-pt-ds-pt-te-ft-se))
439
+ );
440
+ font-weight: var(
441
+ --_ctm-mob-dn-pt-ds-pt-te-ft-wt,
442
+ var(--_ctm-tab-dn-pt-ds-pt-te-ft-wt, var(--_ctm-dn-pt-ds-pt-te-ft-wt))
443
+ );
444
+ color: var(
445
+ --_ctm-mob-dn-pt-ds-pt-te-cr,
446
+ var(--_ctm-tab-dn-pt-ds-pt-te-cr, var(--_ctm-dn-pt-ds-pt-te-cr))
447
+ );
448
+ line-height: var(
449
+ --_ctm-mob-dn-pt-ds-pt-te-le-ht,
450
+ var(--_ctm-tab-dn-pt-ds-pt-te-le-ht, var(--_ctm-dn-pt-ds-pt-te-le-ht))
451
+ );
452
+ letter-spacing: var(
453
+ --_ctm-mob-dn-pt-ds-pt-te-lr-sg,
454
+ var(--_ctm-tab-dn-pt-ds-pt-te-lr-sg, var(--_ctm-dn-pt-ds-pt-te-lr-sg))
455
+ );
456
+ // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
457
+ // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
458
+ padding: var(
459
+ --_ctm-dn-mob-pt-ds-pt-te-pg,
460
+ var(--_ctm-tab-dn-pt-ds-pt-te-pg, var(--_ctm-dn-pt-ds-pt-te-pg))
461
+ );
462
+ }
463
+ p {
464
+ font-family: var(
465
+ --_ctm-mob-dn-pt-ds-pt-dn-ft-fy,
466
+ var(--_ctm-tab-dn-pt-ds-pt-dn-ft-fy, var(--_ctm-dn-pt-ds-pt-dn-ft-fy))
467
+ );
468
+ font-size: var(
469
+ --_ctm-mob-dn-pt-ds-pt-dn-ft-se,
470
+ var(--_ctm-tab-dn-pt-ds-pt-dn-ft-se, var(--_ctm-dn-pt-ds-pt-dn-ft-se))
471
+ );
472
+ font-weight: var(
473
+ --_ctm-mob-dn-pt-ds-pt-dn-ft-wt,
474
+ var(--_ctm-tab-dn-pt-ds-pt-dn-ft-wt, var(--_ctm-dn-pt-ds-pt-dn-ft-wt))
475
+ );
476
+ color: var(
477
+ --_ctm-mob-dn-pt-ds-pt-dn-cr,
478
+ var(--_ctm-tab-dn-pt-ds-pt-dn-cr, var(--_ctm-dn-pt-ds-pt-dn-cr))
479
+ );
480
+ line-height: var(
481
+ --_ctm-mob-dn-pt-ds-pt-dn-le-ht,
482
+ var(--_ctm-tab-dn-pt-ds-pt-dn-le-ht, var(--_ctm-dn-pt-ds-pt-dn-le-ht))
483
+ );
484
+ letter-spacing: var(
485
+ --_ctm-mob-dn-pt-ds-pt-dn-lr-sg,
486
+ var(--_ctm-tab-dn-pt-ds-pt-dn-lr-sg, var(--_ctm-dn-pt-ds-pt-dn-lr-sg))
487
+ );
488
+ // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
489
+ // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
490
+ padding: var(
491
+ --_ctm-dn-mob-pt-ds-pt-dn-pg,
492
+ var(--_ctm-tab-dn-pt-ds-pt-dn-pg, var(--_ctm-dn-pt-ds-pt-dn-pg))
493
+ );
494
+ }
495
+ }
496
+
497
+ .price-options {
498
+ display: flex;
499
+ align-items: center;
500
+
501
+ .price {
502
+ display: flex;
503
+ flex-direction: column;
504
+
505
+ .amount {
506
+ font-family: var(
507
+ --_ctm-mob-dn-pt-ds-pt-pe-ft-fy,
508
+ var(--_ctm-tab-dn-pt-ds-pt-pe-ft-fy, var(--_ctm-dn-pt-ds-pt-pe-ft-fy))
509
+ );
510
+ font-size: var(
511
+ --_ctm-mob-dn-pt-ds-pt-pe-ft-se,
512
+ var(--_ctm-tab-dn-pt-ds-pt-pe-ft-se, var(--_ctm-dn-pt-ds-pt-pe-ft-se))
513
+ );
514
+ font-weight: var(
515
+ --_ctm-mob-dn-pt-ds-pt-pe-ft-wt,
516
+ var(--_ctm-tab-dn-pt-ds-pt-pe-ft-wt, var(--_ctm-dn-pt-ds-pt-pe-ft-wt))
517
+ );
518
+ color: var(
519
+ --_ctm-mob-dn-pt-ds-pt-pe-cr,
520
+ var(--_ctm-tab-dn-pt-ds-pt-pe-cr, var(--_ctm-dn-pt-ds-pt-pe-cr))
521
+ );
522
+ line-height: var(
523
+ --_ctm-mob-dn-pt-ds-pt-pe-le-ht,
524
+ var(--_ctm-tab-dn-pt-ds-pt-pe-le-ht, var(--_ctm-dn-pt-ds-pt-pe-le-ht))
525
+ );
526
+ letter-spacing: var(
527
+ --_ctm-mob-dn-pt-ds-pt-pe-lr-sg,
528
+ var(--_ctm-tab-dn-pt-ds-pt-pe-lr-sg, var(--_ctm-dn-pt-ds-pt-pe-lr-sg))
529
+ );
530
+ // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
531
+ // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
532
+ padding: var(
533
+ --_ctm-dn-mob-pt-ds-pt-pe-pg,
534
+ var(--_ctm-tab-dn-pt-ds-pt-pe-pg, var(--_ctm-dn-pt-ds-pt-pe-pg))
535
+ );
536
+ }
537
+
538
+ .note {
539
+ font-weight: 500;
540
+ font-size: 16px;
541
+ line-height: 24px;
542
+ color: var(--_success-700);
543
+ }
544
+ }
545
+ }
546
+
547
+ .color-options {
548
+ display: flex;
549
+ flex-direction: column;
550
+ margin-top: 12px;
551
+ gap: 6px;
552
+
553
+ label {
554
+ font-weight: 600;
555
+ font-size: 16px;
556
+ line-height: 24px;
557
+ color: var(--_gray-600);
558
+ }
559
+ .colors {
560
+ display: flex;
561
+ flex-wrap: wrap;
562
+ gap: 6px;
563
+
564
+ .color-circle {
565
+ width: 28px;
566
+ height: 28px;
567
+ border-radius: 50%;
568
+ cursor: pointer;
569
+
570
+ &.selected {
571
+ width: 50px;
572
+ height: 28px;
573
+ border-radius: 100px;
574
+ //border: 0.5px solid var(--_gray-600);
575
+ //padding: 6px 5px;
576
+ }
577
+ .color-code {
578
+ width: 28px;
579
+ height: 28px;
580
+ border-radius: 50%;
581
+ cursor: pointer;
582
+ &.selected {
583
+ width: 50px;
584
+ height: 28px;
585
+ border-radius: 100px;
586
+ border: 0.5px solid var(--_gray-600);
587
+ padding: 6px 5px;
588
+ }
589
+ }
590
+ }
591
+ }
592
+ }
593
+
594
+ .fit-size-options {
595
+ display: flex;
596
+ flex-direction: column;
597
+ margin-top: 20px;
598
+ gap: 2rem;
599
+
600
+ .select_fit,
601
+ .fit,
602
+ .size {
603
+ display: flex;
604
+ flex-direction: column;
605
+ gap: 6px;
606
+
607
+ label {
608
+ font-weight: 600;
609
+ font-size: 16px;
610
+ line-height: 24px;
611
+ color: var(--_gray-600);
612
+ }
613
+
614
+ .fit_options,
615
+ .size_options {
616
+ display: flex;
617
+ gap: 12px;
618
+ flex-wrap: wrap;
619
+
620
+ button {
621
+ padding: 8px 12px;
622
+ border: 0.5px solid var(--_gray-300);
623
+ border-radius: 4px;
624
+ background: #fff;
625
+
626
+ font-weight: 400;
627
+ font-size: 16px;
628
+ line-height: 24px;
629
+ color: var(--_gray-600);
630
+ cursor: pointer;
631
+
632
+ &.selected {
633
+ border: 0.5px solid var(--_primary-400);
634
+ background-color: var(--_gray-200);
635
+ font-weight: 600;
636
+ font-size: 16px;
637
+ color: var(--_primary-400);
638
+ }
639
+ }
640
+ }
641
+ }
642
+ }
643
+
644
+ .product_qty_wrapper {
645
+ display: flex;
646
+ // width: 124px;
647
+ flex-direction: column;
648
+ align-items: flex-start;
649
+ gap: 6px;
650
+ width: 120px;
651
+
652
+ .product_qty_container {
653
+ display: flex;
654
+ align-items: flex-start;
655
+ align-self: stretch;
656
+ border-radius: 4px;
657
+ border: 0.5px solid #d0d5dd;
658
+ background: #fff;
659
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
660
+
661
+ .product_qty_label {
662
+ display: flex;
663
+ padding: 8px 12px;
664
+ align-items: center;
665
+ border-radius: 8px 0px 0px 8px;
666
+ p {
667
+ color: #475467;
668
+ font-size: 16px;
669
+ font-weight: 400;
670
+ line-height: 24px;
671
+ }
672
+ }
673
+
674
+ .product_qty_number {
675
+ display: flex;
676
+ padding: 8px 12px;
677
+ align-items: center;
678
+ gap: 8px;
679
+ flex: 1 0 0;
680
+ align-self: stretch;
681
+ border-radius: 0px 4px 4px 0px;
682
+ background: #fff;
683
+ border-left: 1px solid #d0d5dd;
684
+ max-width: 80px;
685
+ text-align: center;
686
+ }
687
+ }
688
+ }
689
+ .add-to-cart {
690
+ width: 100%;
691
+ height: 56;
692
+ opacity: 1;
693
+ border-radius: 4px;
694
+ gap: 8px;
695
+ padding-top: 12px;
696
+ padding-right: 24px;
697
+ padding-bottom: 12px;
698
+ padding-left: 24px;
699
+ border-width: 1px;
700
+ background: #243dc6;
701
+ border: 1px solid #243dc6;
702
+ box-shadow: 0px 1px 2px 0px #1018280d;
703
+ text-align: center;
704
+ span {
705
+ vertical-align: middle;
706
+ }
707
+ button {
708
+ font-weight: 600;
709
+ font-size: 16px;
710
+ line-height: 24px;
711
+ letter-spacing: 0%;
712
+ color: #ffffff;
713
+ }
714
+ }
715
+ }
716
+
717
+ @media (max-width: 768px) {
718
+ grid-template-columns: 1fr;
719
+ .customizer-panel {
720
+ border-left: none;
721
+ padding-left: 0;
722
+ margin-top: 2rem;
723
+ }
724
+ }
725
+ }
726
+
727
+ .embla {
728
+ width: 100%;
729
+ height: 100%;
730
+ position: relative;
731
+ display: flex;
732
+ flex-direction: column;
733
+ padding: 20px;
734
+ // overflow: hidden;
735
+
736
+ .embla__viewport {
737
+ width: 100%;
738
+ height: 100%;
739
+ position: relative;
740
+ display: flex;
741
+ flex-direction: column;
742
+
743
+ overflow: hidden;
744
+
745
+ .embla__container {
746
+ width: 100%;
747
+ height: 100%;
748
+ display: grid;
749
+ grid-template-rows: 100%;
750
+
751
+ grid-template-columns: repeat(
752
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
753
+ calc(
754
+ 100% /
755
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
756
+ )
757
+ );
758
+
759
+ grid-auto-flow: column;
760
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
761
+
762
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
763
+ height: calc(100% - calc(50px + 10px));
764
+ }
765
+
766
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
767
+ height: calc(100% - calc(50px + 20px));
768
+ }
769
+
770
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
771
+ height: calc(
772
+ 100% - calc(
773
+ var(
774
+ --_ctm-mob-dn-pn-ds-dt-se,
775
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
776
+ ) +
777
+ 20px
778
+ )
779
+ );
780
+ }
781
+
782
+ .embla__slide {
783
+ width: 100%;
784
+ height: 100%;
785
+ & > img {
786
+ width: 100%;
787
+ height: 100%;
788
+ }
789
+ }
790
+ }
791
+ }
792
+ &:not([data-display-style="Column"]) {
793
+ .embla__container {
794
+ grid-auto-columns: calc(
795
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
796
+ );
797
+ }
798
+ }
799
+
800
+ .arrow-navigation {
801
+ display: flex;
802
+ position: absolute;
803
+ top: 50%;
804
+ left: 50%;
805
+ width: 100%;
806
+ justify-content: space-between;
807
+ transform: translate(-50%, -50%);
808
+ // padding-left: 20px;
809
+
810
+ &[data-control-type="Bottom-Overflow"] {
811
+ transform: translateX(-50%);
812
+ width: 100%;
813
+ justify-content: center;
814
+ gap: 12px;
815
+ top: unset;
816
+ bottom: 6px;
817
+ }
818
+ &[data-control-type="Bottom"] {
819
+ transform: unset;
820
+ position: static;
821
+ width: 100%;
822
+ justify-content: center;
823
+ gap: 12px;
824
+ margin-top: 10px;
825
+ }
826
+ }
827
+ &[data-control-type="Side"] {
828
+ .left-button,
829
+ .right-button {
830
+ background-color: transparent;
831
+ }
832
+ }
833
+ &[data-background-shape="Round"] {
834
+ .left-button,
835
+ .right-button {
836
+ background-color: #f2f5f5;
837
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
838
+ }
839
+ }
840
+ .left-button {
841
+ padding: 10px;
842
+ border-radius: 50%;
843
+ border: none;
844
+ width: var(
845
+ --_ctm-mob-dn-pn-as-aw-se,
846
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
847
+ );
848
+ height: var(
849
+ --_ctm-mob-dn-pn-as-aw-se,
850
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
851
+ );
852
+
853
+ display: flex;
854
+ align-items: center;
855
+ justify-content: center;
856
+ cursor: pointer;
857
+ outline: none;
858
+ margin-left: 12px;
859
+ &:disabled {
860
+ & svg {
861
+ path {
862
+ stroke: #c3b7b7;
863
+ }
864
+ }
865
+ }
866
+ }
867
+ .right-button {
868
+ border-radius: 50%;
869
+ border: none;
870
+ width: var(
871
+ --_ctm-mob-dn-pn-as-aw-se,
872
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
873
+ );
874
+ height: var(
875
+ --_ctm-mob-dn-pn-as-aw-se,
876
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
877
+ );
878
+
879
+ display: flex;
880
+ align-items: center;
881
+ justify-content: center;
882
+ cursor: pointer;
883
+ outline: none;
884
+ margin-right: 12px;
885
+ padding: 10px;
886
+
887
+ &:disabled {
888
+ & svg {
889
+ path {
890
+ stroke: #c3b7b7;
891
+ }
892
+ }
893
+ }
894
+ }
895
+ .icon {
896
+ display: flex;
897
+
898
+ svg {
899
+ width: calc(
900
+ var(
901
+ --_ctm-mob-dn-pn-as-aw-se,
902
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
903
+ ) *
904
+ 0.5
905
+ );
906
+ height: calc(
907
+ var(
908
+ --_ctm-mob-dn-pn-as-aw-se,
909
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
910
+ ) *
911
+ 0.5
912
+ );
913
+
914
+ path {
915
+ stroke: #514949;
916
+ }
917
+ }
918
+ }
919
+
920
+ &[data-control-type="Side"] {
921
+ .embla__viewport {
922
+ width: calc(100% - 120px);
923
+ margin-inline: auto;
924
+ }
925
+ .left-button {
926
+ position: absolute;
927
+ left: 0;
928
+ top: 50%;
929
+ transform: translateY(-50%);
930
+ }
931
+ .right-button {
932
+ position: absolute;
933
+
934
+ right: 0;
935
+ top: 50%;
936
+ transform: translateY(-50%);
937
+ }
938
+ }
939
+
940
+ &[data-thumbnail-placement="top"] {
941
+ flex-direction: column-reverse;
942
+ }
943
+ &[data-thumbnail-placement="bottom"] {
944
+ flex-direction: column;
945
+ }
946
+ &[data-thumbnail-placement="left"] {
947
+ flex-direction: row-reverse;
948
+
949
+ .embla__thumbs {
950
+ width: var(--_ctm-lt-tl-se);
951
+ height: 100%;
952
+
953
+ & .embla__thumbs__container {
954
+ flex-direction: column;
955
+ height: 100%;
956
+ }
957
+ }
958
+ }
959
+ &[data-thumbnail-placement="right"] {
960
+ flex-direction: row;
961
+ .embla__thumbs {
962
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
963
+
964
+ height: 100%;
965
+
966
+ & .embla__thumbs__container {
967
+ flex-direction: column;
968
+ height: 100%;
969
+ }
970
+ }
971
+ }
972
+ .embla__dots {
973
+ display: flex;
974
+ flex-wrap: wrap;
975
+ justify-content: center;
976
+ align-items: center;
977
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
978
+ gap: 6px;
979
+
980
+ &[data-control-type="Bottom-Overflow"] {
981
+ position: absolute;
982
+ bottom: 10px;
983
+ left: 50%;
984
+ transform: translateX(-50%);
985
+ width: 75%;
986
+ }
987
+ .embla__dot {
988
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
989
+ -webkit-appearance: none;
990
+ appearance: none;
991
+ background-color: var(
992
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
993
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
994
+ );
995
+
996
+ touch-action: manipulation;
997
+ display: inline-flex;
998
+ text-decoration: none;
999
+ cursor: pointer;
1000
+ border: 0;
1001
+ padding: 0;
1002
+ margin: 0;
1003
+ // width: 0.6rem;
1004
+ // height: 0.6rem;
1005
+ width: var(
1006
+ --_ctm-mob-dn-pn-ds-dt-se,
1007
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1008
+ );
1009
+ height: var(
1010
+ --_ctm-mob-dn-pn-ds-dt-se,
1011
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1012
+ );
1013
+
1014
+ display: flex;
1015
+ align-items: center;
1016
+ justify-content: center;
1017
+ border-radius: 50%;
1018
+ }
1019
+ .embla__dot:after {
1020
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1021
+ width: var(
1022
+ --_ctm-mob-dn-pn-ds-dt-se,
1023
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1024
+ );
1025
+ height: var(
1026
+ --_ctm-mob-dn-pn-ds-dt-se,
1027
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1028
+ );
1029
+
1030
+ border-radius: 50%;
1031
+ display: flex;
1032
+ align-items: center;
1033
+ content: "";
1034
+ }
1035
+ .embla__dot--selected:after {
1036
+ box-shadow: inset 0 0 0 1px var(--text-body);
1037
+ background-color: var(
1038
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
1039
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
1040
+ );
1041
+ }
1042
+ &[data-slider-control="Pagination Line"] {
1043
+ .embla__dot {
1044
+ width: var(
1045
+ --_ctm-mob-dn-pn-le-le-wh,
1046
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1047
+ );
1048
+ height: var(
1049
+ --_ctm-mob-dn-pn-le-le-ht,
1050
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1051
+ );
1052
+ background-color: var(
1053
+ --_ctm-mob-dn-pn-le-or-le-cr,
1054
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
1055
+ );
1056
+ border-radius: 6px;
1057
+ }
1058
+
1059
+ .embla__dot--selected:after {
1060
+ box-shadow: inset 0 0 0 1px var(--text-body);
1061
+ border-radius: 6px;
1062
+ width: var(
1063
+ --_ctm-mob-dn-pn-le-le-wh,
1064
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1065
+ );
1066
+ height: var(
1067
+ --_ctm-mob-dn-pn-le-le-ht,
1068
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1069
+ );
1070
+ background-color: var(
1071
+ --_ctm-mob-dn-pn-le-ct-le-cr,
1072
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
1073
+ );
1074
+ }
1075
+ }
1076
+ }
1077
+
1078
+ .embla__thumbs {
1079
+ width: 100%;
1080
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1081
+
1082
+ position: relative;
1083
+ display: grid;
1084
+ grid-template-columns: 1fr;
1085
+ overflow: hidden;
1086
+ // margin: 10px;
1087
+ padding: 10px;
1088
+
1089
+ .embla__thumbs__viewport {
1090
+ width: 100%;
1091
+ height: 100%;
1092
+ position: relative;
1093
+ display: flex;
1094
+ flex-direction: column;
1095
+
1096
+ overflow: hidden;
1097
+ }
1098
+ .embla__thumbs__container {
1099
+ display: flex;
1100
+ flex-direction: row;
1101
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
1102
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
1103
+
1104
+ width: 100%;
1105
+ // justify-content: center;
1106
+ // height: 200px;
1107
+
1108
+ .embla__thumbs__slide {
1109
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1110
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1111
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1112
+
1113
+ & img {
1114
+ width: 100%;
1115
+ height: 100%;
1116
+ }
1117
+ }
1118
+ }
1119
+ }
1120
+ }
1121
+ }
1122
+ }