@sc-360-v2/storefront-cms-library 0.5.80 → 0.5.81

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.
@@ -11,13 +11,23 @@ $defaultValues: (
11
11
  &[data-element-type="productImage"] {
12
12
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
13
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
14
- width: var(--_sf-el-wh-st-mx,
15
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
14
+ width: var(
15
+ --_sf-el-wh-st-mx,
16
+ calc(
17
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
18
+ )
19
+ );
16
20
  // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
17
21
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
18
22
 
19
23
  // aspect-ratio
20
- --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-lt-wh, var(--_tst-lt-wh))));
24
+ --_aspect-ratio: calc(
25
+ 1 *
26
+ (
27
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
28
+ var(--_ctm-lt-wh, var(--_tst-lt-wh))
29
+ )
30
+ );
21
31
 
22
32
  // Display styles whose items stack vertically, with scroll control left at "Non".
23
33
  // These size to their content, so the element grows as more images arrive — 6
@@ -62,7 +72,7 @@ $defaultValues: (
62
72
  // }
63
73
  // }
64
74
 
65
- &>.wrapper {
75
+ & > .wrapper {
66
76
  width: 100%;
67
77
  height: 100%;
68
78
 
@@ -87,8 +97,22 @@ $defaultValues: (
87
97
  align-items: center;
88
98
  }
89
99
 
100
+ // "No image found" placeholder (product has no image url). It fills the
101
+ // whole image box with `cover`, like a real product photo, instead of
102
+ // sitting at its natural size in the middle. `.text-element` only caps it
103
+ // at 100%, so the img - and the link FlexAnchorTag wraps it in when the
104
+ // element has one - are stretched to the box first; `cover` has nothing
105
+ // to crop otherwise.
106
+ > a:has(> .image__fallback__contain) {
107
+ display: block;
108
+ width: 100%;
109
+ height: 100%;
110
+ }
111
+
90
112
  .image__fallback__contain {
91
- object-fit: contain !important;
113
+ width: 100%;
114
+ height: 100%;
115
+ object-fit: cover !important;
92
116
  }
93
117
  }
94
118
  }
@@ -205,9 +229,13 @@ $defaultValues: (
205
229
  overflow: hidden;
206
230
 
207
231
  position: relative;
208
- background-color: var(--_ctm-mob-dn-gy-wt-se-bd-cr,
209
- var(--_ctm-tab-dn-gy-wt-se-bd-cr,
210
- var(--_ctm-dn-gy-wt-se-bd-cr, var(--_tst-dn-gy-wt-se-bd-cr))));
232
+ background-color: var(
233
+ --_ctm-mob-dn-gy-wt-se-bd-cr,
234
+ var(
235
+ --_ctm-tab-dn-gy-wt-se-bd-cr,
236
+ var(--_ctm-dn-gy-wt-se-bd-cr, var(--_tst-dn-gy-wt-se-bd-cr))
237
+ )
238
+ );
211
239
 
212
240
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
213
241
 
@@ -215,8 +243,10 @@ $defaultValues: (
215
243
  flex-direction: column;
216
244
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
217
245
 
218
- gap: var(--_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
219
- var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg)));
246
+ gap: var(
247
+ --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
248
+ var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
249
+ );
220
250
 
221
251
  width: 100%;
222
252
  height: 100%;
@@ -232,27 +262,54 @@ $defaultValues: (
232
262
  --_show-gy-shadow: none;
233
263
  }
234
264
 
235
- border-color: var(--_show-gy-border,
236
- var(--_ctm-mob-dn-gy-wt-se-br-cr,
237
- var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))));
238
-
239
- border-style: var(--_show-gy-border,
240
- var(--_ctm-mob-dn-gy-wt-se-br-se,
241
- var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))));
242
-
243
- border-width: var(--_show-gy-border,
244
- var(--_ctm-mob-dn-gy-wt-se-br-wh,
245
- var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))));
246
-
247
- border-radius: var(--_ctm-mob-dn-gy-wt-se-br-rs,
248
- var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs)));
249
-
250
- box-shadow: var(--_show-gy-shadow,
251
- var(--_ctm-mob-dn-gy-wt-se-sw-ae,
252
- var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))) var(--_ctm-mob-dn-gy-wt-se-sw-br,
253
- var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))) var(--_ctm-mob-dn-gy-wt-se-sw-sd,
254
- var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))) var(--_ctm-mob-dn-gy-wt-se-sw-cr,
255
- var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))));
265
+ border-color: var(
266
+ --_show-gy-border,
267
+ var(
268
+ --_ctm-mob-dn-gy-wt-se-br-cr,
269
+ var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
270
+ )
271
+ );
272
+
273
+ border-style: var(
274
+ --_show-gy-border,
275
+ var(
276
+ --_ctm-mob-dn-gy-wt-se-br-se,
277
+ var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
278
+ )
279
+ );
280
+
281
+ border-width: var(
282
+ --_show-gy-border,
283
+ var(
284
+ --_ctm-mob-dn-gy-wt-se-br-wh,
285
+ var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
286
+ )
287
+ );
288
+
289
+ border-radius: var(
290
+ --_ctm-mob-dn-gy-wt-se-br-rs,
291
+ var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
292
+ );
293
+
294
+ box-shadow: var(
295
+ --_show-gy-shadow,
296
+ var(
297
+ --_ctm-mob-dn-gy-wt-se-sw-ae,
298
+ var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
299
+ )
300
+ var(
301
+ --_ctm-mob-dn-gy-wt-se-sw-br,
302
+ var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
303
+ )
304
+ var(
305
+ --_ctm-mob-dn-gy-wt-se-sw-sd,
306
+ var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
307
+ )
308
+ var(
309
+ --_ctm-mob-dn-gy-wt-se-sw-cr,
310
+ var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
311
+ )
312
+ );
256
313
 
257
314
  .gallery-header {
258
315
  // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
@@ -260,107 +317,184 @@ $defaultValues: (
260
317
  display: flex;
261
318
  flex-direction: column;
262
319
 
263
- gap: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
264
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg)));
320
+ gap: var(
321
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
322
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
323
+ );
265
324
 
266
- padding-block: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
267
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg)));
325
+ padding-block: var(
326
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
327
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
328
+ );
268
329
 
269
- padding-inline: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
270
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg)));
330
+ padding-inline: var(
331
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
332
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
333
+ );
271
334
 
272
- background-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
273
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr)));
335
+ background-color: var(
336
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
337
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
338
+ );
274
339
 
275
340
  width: 100%;
276
341
 
277
- border-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
278
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr)));
279
-
280
- border-style: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
281
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se)));
282
-
283
- border-width: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
284
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh)));
285
-
286
- border-radius: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
287
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs)));
288
-
289
- box-shadow: var(--_show-shadow,
290
- var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
291
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
292
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
293
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
294
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))));
342
+ border-color: var(
343
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
344
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
345
+ );
346
+
347
+ border-style: var(
348
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
349
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
350
+ );
351
+
352
+ border-width: var(
353
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
354
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
355
+ );
356
+
357
+ border-radius: var(
358
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
359
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
360
+ );
361
+
362
+ box-shadow: var(
363
+ --_show-shadow,
364
+ var(
365
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
366
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
367
+ )
368
+ var(
369
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
370
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
371
+ )
372
+ var(
373
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
374
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
375
+ )
376
+ var(
377
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
378
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
379
+ )
380
+ );
295
381
 
296
382
  & h3 {
297
- color: var(--_ctm-mob-dn-gy-wt-se-cr,
298
- var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr)));
299
-
300
- font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy,
301
- var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy)));
302
- text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm,
303
- var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm)));
304
- word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp,
305
- var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp)));
306
- word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk,
307
- var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk)));
308
-
309
- font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se,
310
- var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se)));
311
-
312
- font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt,
313
- var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt)));
314
-
315
- font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic,
316
- var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic)));
317
-
318
- text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an,
319
- var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an)));
320
-
321
- letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg,
322
- var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg)));
323
-
324
- line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht,
325
- var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht)));
326
-
327
- text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue,
328
- var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue)));
383
+ color: var(
384
+ --_ctm-mob-dn-gy-wt-se-cr,
385
+ var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
386
+ );
387
+
388
+ font-family: var(
389
+ --_ctm-mob-dn-gy-wt-se-ft-fy,
390
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
391
+ );
392
+ text-transform: var(
393
+ --_ctm-mob-dn-gy-wt-se-tt-tm,
394
+ var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm))
395
+ );
396
+ word-wrap: var(
397
+ --_ctm-mob-dn-gy-wt-se-wd-wp,
398
+ var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp))
399
+ );
400
+ word-break: var(
401
+ --_ctm-mob-dn-gy-wt-se-wd-bk,
402
+ var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk))
403
+ );
404
+
405
+ font-size: var(
406
+ --_ctm-mob-dn-gy-wt-se-ft-se,
407
+ var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
408
+ );
409
+
410
+ font-weight: var(
411
+ --_ctm-mob-dn-gy-wt-se-ft-wt,
412
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
413
+ );
414
+
415
+ font-style: var(
416
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic,
417
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
418
+ );
419
+
420
+ text-align: var(
421
+ --_ctm-mob-dn-gy-wt-se-tt-an,
422
+ var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
423
+ );
424
+
425
+ letter-spacing: var(
426
+ --_ctm-mob-dn-gy-wt-se-lr-sg,
427
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
428
+ );
429
+
430
+ line-height: var(
431
+ --_ctm-mob-dn-gy-wt-se-le-ht,
432
+ var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
433
+ );
434
+
435
+ text-decoration: var(
436
+ --_ctm-mob-dn-gy-wt-se-ue,
437
+ var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
438
+ );
329
439
  }
330
440
 
331
441
  & p {
332
- color: var(--_ctm-mob-dn-gy-wt-se-cr-dc,
333
- var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc)));
334
-
335
- font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy-dc,
336
- var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc)));
337
- text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm-dc,
338
- var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc)));
339
- word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp-dc,
340
- var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc)));
341
- word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk-dc,
342
- var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc)));
343
-
344
- font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se-dc,
345
- var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc)));
346
-
347
- font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt-dc,
348
- var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc)));
349
-
350
- font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
351
- var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc)));
352
-
353
- text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an-dc,
354
- var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc)));
355
-
356
- letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg-dc,
357
- var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc)));
358
-
359
- line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht-dc,
360
- var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc)));
361
-
362
- text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue-dc,
363
- var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc)));
442
+ color: var(
443
+ --_ctm-mob-dn-gy-wt-se-cr-dc,
444
+ var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
445
+ );
446
+
447
+ font-family: var(
448
+ --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
449
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
450
+ );
451
+ text-transform: var(
452
+ --_ctm-mob-dn-gy-wt-se-tt-tm-dc,
453
+ var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc))
454
+ );
455
+ word-wrap: var(
456
+ --_ctm-mob-dn-gy-wt-se-wd-wp-dc,
457
+ var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc))
458
+ );
459
+ word-break: var(
460
+ --_ctm-mob-dn-gy-wt-se-wd-bk-dc,
461
+ var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc))
462
+ );
463
+
464
+ font-size: var(
465
+ --_ctm-mob-dn-gy-wt-se-ft-se-dc,
466
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
467
+ );
468
+
469
+ font-weight: var(
470
+ --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
471
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
472
+ );
473
+
474
+ font-style: var(
475
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
476
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
477
+ );
478
+
479
+ text-align: var(
480
+ --_ctm-mob-dn-gy-wt-se-tt-an-dc,
481
+ var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
482
+ );
483
+
484
+ letter-spacing: var(
485
+ --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
486
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
487
+ );
488
+
489
+ line-height: var(
490
+ --_ctm-mob-dn-gy-wt-se-le-ht-dc,
491
+ var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
492
+ );
493
+
494
+ text-decoration: var(
495
+ --_ctm-mob-dn-gy-wt-se-ue-dc,
496
+ var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
497
+ );
364
498
  }
365
499
 
366
500
  // h3 {
@@ -488,25 +622,51 @@ $defaultValues: (
488
622
  display: grid;
489
623
  grid-template-rows: 100%;
490
624
  // grid-template-columns: 100%;
491
- grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
492
- calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
625
+ grid-template-columns: repeat(
626
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
627
+ calc(
628
+ 100% /
629
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
630
+ )
631
+ );
493
632
 
494
633
  grid-auto-flow: column;
495
634
  gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
496
635
 
497
636
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
498
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
499
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px));
637
+ height: calc(
638
+ 100% - calc(
639
+ var(
640
+ --_ctm-mob-dn-pn-as-aw-se,
641
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
642
+ ) +
643
+ 10px
644
+ )
645
+ );
500
646
  }
501
647
 
502
648
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
503
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
504
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
649
+ height: calc(
650
+ 100% - calc(
651
+ var(
652
+ --_ctm-mob-dn-pn-le-le-ht,
653
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
654
+ ) +
655
+ 20px
656
+ )
657
+ );
505
658
  }
506
659
 
507
660
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
508
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
509
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
661
+ height: calc(
662
+ 100% - calc(
663
+ var(
664
+ --_ctm-mob-dn-pn-ds-dt-se,
665
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
666
+ ) +
667
+ 20px
668
+ )
669
+ );
510
670
  }
511
671
 
512
672
  .embla__slide {
@@ -519,7 +679,9 @@ $defaultValues: (
519
679
 
520
680
  &:not([data-display-style="Column"]) {
521
681
  .embla__container {
522
- grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
682
+ grid-auto-columns: calc(
683
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
684
+ );
523
685
  }
524
686
  }
525
687
 
@@ -541,8 +703,10 @@ $defaultValues: (
541
703
 
542
704
  // min-height: var(--_ctm-height);
543
705
 
544
- grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
545
- 1fr);
706
+ grid-template-columns: repeat(
707
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
708
+ 1fr
709
+ );
546
710
 
547
711
  grid-template-rows: unset;
548
712
 
@@ -562,8 +726,13 @@ $defaultValues: (
562
726
  &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
563
727
  .embla__viewport {
564
728
  .embla__container {
565
- grid-template-rows: repeat(var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
566
- calc(100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))));
729
+ grid-template-rows: repeat(
730
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
731
+ calc(
732
+ 100% /
733
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
734
+ )
735
+ );
567
736
  }
568
737
  }
569
738
  }
@@ -630,8 +799,10 @@ $defaultValues: (
630
799
  overflow: unset;
631
800
 
632
801
  display: block;
633
- column-count: var(--_ctm-mob-lt-is-pr-rw,
634
- var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw)));
802
+ column-count: var(
803
+ --_ctm-mob-lt-is-pr-rw,
804
+ var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
805
+ );
635
806
  gap: unset;
636
807
  column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
637
808
 
@@ -641,8 +812,10 @@ $defaultValues: (
641
812
 
642
813
  .embla__slide {
643
814
  // break-inside: avoid;
644
- margin-bottom: var(--_ctm-mob-lt-im-gp,
645
- var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
815
+ margin-bottom: var(
816
+ --_ctm-mob-lt-im-gp,
817
+ var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
818
+ );
646
819
 
647
820
  height: unset;
648
821
 
@@ -686,7 +859,6 @@ $defaultValues: (
686
859
  }
687
860
 
688
861
  &[data-control-type="Side"] {
689
-
690
862
  .left-button,
691
863
  .right-button {
692
864
  background-color: transparent;
@@ -694,7 +866,6 @@ $defaultValues: (
694
866
  }
695
867
 
696
868
  &[data-background-shape="Round"] {
697
-
698
869
  .left-button,
699
870
  .right-button {
700
871
  @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%);
@@ -709,10 +880,14 @@ $defaultValues: (
709
880
  padding: 10px;
710
881
  border-radius: 50%;
711
882
  border: none;
712
- width: var(--_ctm-mob-dn-pn-as-aw-se,
713
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
714
- height: var(--_ctm-mob-dn-pn-as-aw-se,
715
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
883
+ width: var(
884
+ --_ctm-mob-dn-pn-as-aw-se,
885
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
886
+ );
887
+ height: var(
888
+ --_ctm-mob-dn-pn-as-aw-se,
889
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
890
+ );
716
891
 
717
892
  display: flex;
718
893
  align-items: center;
@@ -725,14 +900,26 @@ $defaultValues: (
725
900
  display: flex;
726
901
 
727
902
  svg {
728
- width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
729
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
730
- height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
731
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
903
+ width: calc(
904
+ var(
905
+ --_ctm-mob-dn-pn-as-aw-se,
906
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
907
+ ) *
908
+ 0.5
909
+ );
910
+ height: calc(
911
+ var(
912
+ --_ctm-mob-dn-pn-as-aw-se,
913
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
914
+ ) *
915
+ 0.5
916
+ );
732
917
 
733
918
  path {
734
- stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
735
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
919
+ stroke: var(
920
+ --_ctm-mob-dn-pn-as-aw-cr,
921
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
922
+ );
736
923
  }
737
924
  }
738
925
  }
@@ -749,10 +936,14 @@ $defaultValues: (
749
936
  .right-button {
750
937
  border-radius: 50%;
751
938
  border: none;
752
- width: var(--_ctm-mob-dn-pn-as-aw-se,
753
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
754
- height: var(--_ctm-mob-dn-pn-as-aw-se,
755
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
939
+ width: var(
940
+ --_ctm-mob-dn-pn-as-aw-se,
941
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
942
+ );
943
+ height: var(
944
+ --_ctm-mob-dn-pn-as-aw-se,
945
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
946
+ );
756
947
 
757
948
  display: flex;
758
949
  align-items: center;
@@ -766,14 +957,26 @@ $defaultValues: (
766
957
  display: flex;
767
958
 
768
959
  svg {
769
- width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
770
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
771
- height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
772
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
960
+ width: calc(
961
+ var(
962
+ --_ctm-mob-dn-pn-as-aw-se,
963
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
964
+ ) *
965
+ 0.5
966
+ );
967
+ height: calc(
968
+ var(
969
+ --_ctm-mob-dn-pn-as-aw-se,
970
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
971
+ ) *
972
+ 0.5
973
+ );
773
974
 
774
975
  path {
775
- stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
776
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
976
+ stroke: var(
977
+ --_ctm-mob-dn-pn-as-aw-cr,
978
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
979
+ );
777
980
  }
778
981
  }
779
982
  }
@@ -791,14 +994,26 @@ $defaultValues: (
791
994
  display: flex;
792
995
 
793
996
  svg {
794
- width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
795
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
796
- height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
797
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
997
+ width: calc(
998
+ var(
999
+ --_ctm-mob-dn-pn-as-aw-se,
1000
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1001
+ ) *
1002
+ 0.5
1003
+ );
1004
+ height: calc(
1005
+ var(
1006
+ --_ctm-mob-dn-pn-as-aw-se,
1007
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1008
+ ) *
1009
+ 0.5
1010
+ );
798
1011
 
799
1012
  path {
800
- stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
801
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
1013
+ stroke: var(
1014
+ --_ctm-mob-dn-pn-as-aw-cr,
1015
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
1016
+ );
802
1017
  }
803
1018
  }
804
1019
  }
@@ -826,8 +1041,10 @@ $defaultValues: (
826
1041
  height: 100%;
827
1042
  flex-direction: column;
828
1043
  margin-top: 0;
829
- margin-right: var(--_ctm-mob-lt-sr-ad-tl-gp,
830
- var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
1044
+ margin-right: var(
1045
+ --_ctm-mob-lt-sr-ad-tl-gp,
1046
+ var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
1047
+ );
831
1048
 
832
1049
  & .embla__thumbs__container {
833
1050
  flex-direction: column;
@@ -856,8 +1073,10 @@ $defaultValues: (
856
1073
  height: 100%;
857
1074
  flex-direction: column;
858
1075
  margin-top: 0;
859
- margin-left: var(--_ctm-mob-lt-sr-ad-tl-gp,
860
- var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
1076
+ margin-left: var(
1077
+ --_ctm-mob-lt-sr-ad-tl-gp,
1078
+ var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
1079
+ );
861
1080
 
862
1081
  & .embla__thumbs__container {
863
1082
  flex-direction: column;
@@ -904,8 +1123,10 @@ $defaultValues: (
904
1123
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
905
1124
  -webkit-appearance: none;
906
1125
  appearance: none;
907
- background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
908
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)));
1126
+ background-color: var(
1127
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
1128
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
1129
+ );
909
1130
 
910
1131
  touch-action: manipulation;
911
1132
  display: inline-flex;
@@ -916,10 +1137,14 @@ $defaultValues: (
916
1137
  margin: 0;
917
1138
  // width: 0.6rem;
918
1139
  // height: 0.6rem;
919
- width: var(--_ctm-mob-dn-pn-ds-dt-se,
920
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
921
- height: var(--_ctm-mob-dn-pn-ds-dt-se,
922
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
1140
+ width: var(
1141
+ --_ctm-mob-dn-pn-ds-dt-se,
1142
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1143
+ );
1144
+ height: var(
1145
+ --_ctm-mob-dn-pn-ds-dt-se,
1146
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1147
+ );
923
1148
 
924
1149
  display: flex;
925
1150
  align-items: center;
@@ -929,10 +1154,14 @@ $defaultValues: (
929
1154
 
930
1155
  .embla__dot:after {
931
1156
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
932
- width: var(--_ctm-mob-dn-pn-ds-dt-se,
933
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
934
- height: var(--_ctm-mob-dn-pn-ds-dt-se,
935
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
1157
+ width: var(
1158
+ --_ctm-mob-dn-pn-ds-dt-se,
1159
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1160
+ );
1161
+ height: var(
1162
+ --_ctm-mob-dn-pn-ds-dt-se,
1163
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1164
+ );
936
1165
 
937
1166
  border-radius: 50%;
938
1167
  display: flex;
@@ -942,20 +1171,28 @@ $defaultValues: (
942
1171
 
943
1172
  .embla__dot--selected:after {
944
1173
  box-shadow: inset 0 0 0 1px var(--text-body);
945
- background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
946
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
1174
+ background-color: var(
1175
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
1176
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
1177
+ );
947
1178
  }
948
1179
 
949
1180
  &[data-slider-control="Pagination Line"] {
950
1181
  .embla__dot {
951
- width: var(--_ctm-mob-dn-pn-le-le-wh,
952
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
1182
+ width: var(
1183
+ --_ctm-mob-dn-pn-le-le-wh,
1184
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1185
+ );
953
1186
 
954
- height: var(--_ctm-mob-dn-pn-le-le-ht,
955
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
1187
+ height: var(
1188
+ --_ctm-mob-dn-pn-le-le-ht,
1189
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1190
+ );
956
1191
 
957
- background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
958
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
1192
+ background-color: var(
1193
+ --_ctm-mob-dn-pn-le-or-le-cr,
1194
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
1195
+ );
959
1196
 
960
1197
  border-radius: 6px;
961
1198
  }
@@ -963,15 +1200,21 @@ $defaultValues: (
963
1200
  .embla__dot--selected:after {
964
1201
  box-shadow: inset 0 0 0 1px var(--text-body);
965
1202
  border-radius: 6px;
966
- width: var(--_ctm-mob-dn-pn-le-le-wh,
967
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
1203
+ width: var(
1204
+ --_ctm-mob-dn-pn-le-le-wh,
1205
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1206
+ );
968
1207
 
969
- height: var(--_ctm-mob-dn-pn-le-le-ht,
970
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
1208
+ height: var(
1209
+ --_ctm-mob-dn-pn-le-le-ht,
1210
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1211
+ );
971
1212
 
972
1213
  // background-color: #fff;
973
- background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
974
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
1214
+ background-color: var(
1215
+ --_ctm-mob-dn-pn-le-ct-le-cr,
1216
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
1217
+ );
975
1218
  }
976
1219
  }
977
1220
  }
@@ -979,8 +1222,10 @@ $defaultValues: (
979
1222
  .embla__thumbs {
980
1223
  width: 100%;
981
1224
  height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht)));
982
- margin-top: var(--_ctm-mob-lt-sr-ad-tl-gp,
983
- var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
1225
+ margin-top: var(
1226
+ --_ctm-mob-lt-sr-ad-tl-gp,
1227
+ var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
1228
+ );
984
1229
 
985
1230
  position: relative;
986
1231
  display: flex;
@@ -1003,23 +1248,39 @@ $defaultValues: (
1003
1248
  background-color: transparent;
1004
1249
  z-index: 1;
1005
1250
 
1006
- width: var(--_ctm-mob-dn-tl-as-aw-se,
1007
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px)));
1008
- height: var(--_ctm-mob-dn-tl-as-aw-se,
1009
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px)));
1251
+ width: var(
1252
+ --_ctm-mob-dn-tl-as-aw-se,
1253
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1254
+ );
1255
+ height: var(
1256
+ --_ctm-mob-dn-tl-as-aw-se,
1257
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1258
+ );
1010
1259
 
1011
1260
  span {
1012
1261
  display: flex;
1013
1262
 
1014
1263
  svg {
1015
- width: calc(var(--_ctm-mob-dn-tl-as-aw-se,
1016
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5);
1017
- height: calc(var(--_ctm-mob-dn-tl-as-aw-se,
1018
- var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5);
1264
+ width: calc(
1265
+ var(
1266
+ --_ctm-mob-dn-tl-as-aw-se,
1267
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1268
+ ) *
1269
+ 0.5
1270
+ );
1271
+ height: calc(
1272
+ var(
1273
+ --_ctm-mob-dn-tl-as-aw-se,
1274
+ var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
1275
+ ) *
1276
+ 0.5
1277
+ );
1019
1278
 
1020
1279
  path {
1021
- stroke: var(--_ctm-mob-dn-tl-as-aw-cr,
1022
- var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr)));
1280
+ stroke: var(
1281
+ --_ctm-mob-dn-tl-as-aw-cr,
1282
+ var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr))
1283
+ );
1023
1284
  }
1024
1285
  }
1025
1286
  }
@@ -1031,7 +1292,6 @@ $defaultValues: (
1031
1292
  }
1032
1293
 
1033
1294
  &[data-background-shape="Round"] {
1034
-
1035
1295
  .thumb-prev-button,
1036
1296
  .thumb-next-button {
1037
1297
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -1077,66 +1337,112 @@ $defaultValues: (
1077
1337
 
1078
1338
  // thumbnailStyle - hoverState
1079
1339
  &:hover {
1080
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-tl-se-hr-se-bd-cr,
1081
- var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr)));
1082
- --_sf-hr-br-cr: var(--_ctm-mob-dn-tl-se-hr-se-br-cr,
1083
- var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr)));
1084
- --_sf-hr-br-se: var(--_ctm-mob-dn-tl-se-hr-se-br-se,
1085
- var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se)));
1086
- --_sf-hr-br-wh: var(--_ctm-mob-dn-tl-se-hr-se-br-wh,
1087
- var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh)));
1088
- --_sf-hr-br-rs: var(--_ctm-mob-dn-tl-se-hr-se-br-rs,
1089
- var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs)));
1090
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-tl-se-hr-se-sw-ae,
1091
- var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae)));
1092
- --_sf-hr-sw-br: var(--_ctm-mob-dn-tl-se-hr-se-sw-br,
1093
- var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br)));
1094
- --_sf-hr-sw-sd: var(--_ctm-mob-dn-tl-se-hr-se-sw-sd,
1095
- var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd)));
1096
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-tl-se-hr-se-sw-cr,
1097
- var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr)));
1340
+ --_sf-hr-bd-cr: var(
1341
+ --_ctm-mob-dn-tl-se-hr-se-bd-cr,
1342
+ var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr))
1343
+ );
1344
+ --_sf-hr-br-cr: var(
1345
+ --_ctm-mob-dn-tl-se-hr-se-br-cr,
1346
+ var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr))
1347
+ );
1348
+ --_sf-hr-br-se: var(
1349
+ --_ctm-mob-dn-tl-se-hr-se-br-se,
1350
+ var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se))
1351
+ );
1352
+ --_sf-hr-br-wh: var(
1353
+ --_ctm-mob-dn-tl-se-hr-se-br-wh,
1354
+ var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh))
1355
+ );
1356
+ --_sf-hr-br-rs: var(
1357
+ --_ctm-mob-dn-tl-se-hr-se-br-rs,
1358
+ var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs))
1359
+ );
1360
+ --_sf-hr-sw-ae: var(
1361
+ --_ctm-mob-dn-tl-se-hr-se-sw-ae,
1362
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae))
1363
+ );
1364
+ --_sf-hr-sw-br: var(
1365
+ --_ctm-mob-dn-tl-se-hr-se-sw-br,
1366
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br))
1367
+ );
1368
+ --_sf-hr-sw-sd: var(
1369
+ --_ctm-mob-dn-tl-se-hr-se-sw-sd,
1370
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd))
1371
+ );
1372
+ --_sf-hr-sw-cr: var(
1373
+ --_ctm-mob-dn-tl-se-hr-se-sw-cr,
1374
+ var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr))
1375
+ );
1098
1376
  }
1099
1377
 
1100
1378
  // thumbnailStyle - defaultState
1101
- background-color: var(--_sf-hr-bd-cr,
1102
- prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr));
1379
+ background-color: var(
1380
+ --_sf-hr-bd-cr,
1381
+ prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
1382
+ );
1103
1383
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
1104
1384
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
1105
1385
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
1106
1386
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
1107
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1387
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
1388
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
1389
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
1390
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1108
1391
 
1109
1392
  // thumbnailStyle - selectedState
1110
1393
  &[data-selected="true"] {
1111
- --_sf-sd-bd-cr: var(--_ctm-mob-dn-tl-se-sd-se-bd-cr,
1112
- var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr)));
1113
- --_sf-sd-br-cr: var(--_ctm-mob-dn-tl-se-sd-se-br-cr,
1114
- var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr)));
1115
- --_sf-sd-br-se: var(--_ctm-mob-dn-tl-se-sd-se-br-se,
1116
- var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se)));
1117
- --_sf-sd-br-wh: var(--_ctm-mob-dn-tl-se-sd-se-br-wh,
1118
- var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh)));
1119
- --_sf-sd-br-rs: var(--_ctm-mob-dn-tl-se-sd-se-br-rs,
1120
- var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs)));
1121
- --_sf-sd-sw-ae: var(--_ctm-mob-dn-tl-se-sd-se-sw-ae,
1122
- var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae)));
1123
- --_sf-sd-sw-br: var(--_ctm-mob-dn-tl-se-sd-se-sw-br,
1124
- var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br)));
1125
- --_sf-sd-sw-sd: var(--_ctm-mob-dn-tl-se-sd-se-sw-sd,
1126
- var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd)));
1127
- --_sf-sd-sw-cr: var(--_ctm-mob-dn-tl-se-sd-se-sw-cr,
1128
- var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr)));
1129
-
1130
- background-color: var(--_sf-sd-bd-cr,
1131
- prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr));
1394
+ --_sf-sd-bd-cr: var(
1395
+ --_ctm-mob-dn-tl-se-sd-se-bd-cr,
1396
+ var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr))
1397
+ );
1398
+ --_sf-sd-br-cr: var(
1399
+ --_ctm-mob-dn-tl-se-sd-se-br-cr,
1400
+ var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr))
1401
+ );
1402
+ --_sf-sd-br-se: var(
1403
+ --_ctm-mob-dn-tl-se-sd-se-br-se,
1404
+ var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se))
1405
+ );
1406
+ --_sf-sd-br-wh: var(
1407
+ --_ctm-mob-dn-tl-se-sd-se-br-wh,
1408
+ var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh))
1409
+ );
1410
+ --_sf-sd-br-rs: var(
1411
+ --_ctm-mob-dn-tl-se-sd-se-br-rs,
1412
+ var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs))
1413
+ );
1414
+ --_sf-sd-sw-ae: var(
1415
+ --_ctm-mob-dn-tl-se-sd-se-sw-ae,
1416
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae))
1417
+ );
1418
+ --_sf-sd-sw-br: var(
1419
+ --_ctm-mob-dn-tl-se-sd-se-sw-br,
1420
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br))
1421
+ );
1422
+ --_sf-sd-sw-sd: var(
1423
+ --_ctm-mob-dn-tl-se-sd-se-sw-sd,
1424
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd))
1425
+ );
1426
+ --_sf-sd-sw-cr: var(
1427
+ --_ctm-mob-dn-tl-se-sd-se-sw-cr,
1428
+ var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr))
1429
+ );
1430
+
1431
+ background-color: var(
1432
+ --_sf-sd-bd-cr,
1433
+ prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
1434
+ );
1132
1435
  border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
1133
1436
  border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
1134
1437
  border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
1135
1438
  border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
1136
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1439
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
1440
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
1441
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
1442
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1137
1443
  }
1138
1444
 
1139
- &>div {
1445
+ & > div {
1140
1446
  height: 100%;
1141
1447
  }
1142
1448
 
@@ -1176,8 +1482,10 @@ $defaultValues: (
1176
1482
 
1177
1483
  // flex-direction: column;
1178
1484
 
1179
- background-color: var(--_ctm-mob-dn-im-se-bd-cr,
1180
- var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr)));
1485
+ background-color: var(
1486
+ --_ctm-mob-dn-im-se-bd-cr,
1487
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
1488
+ );
1181
1489
 
1182
1490
  // Item Style > Border / Shadow toggles.
1183
1491
  &[data-show-border="false"] {
@@ -1188,101 +1496,191 @@ $defaultValues: (
1188
1496
  --_show-im-shadow: none;
1189
1497
  }
1190
1498
 
1191
- border-color: var(--_show-im-border,
1192
- var(--_ctm-mob-dn-im-se-br-cr, var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))));
1193
- border-style: var(--_show-im-border,
1194
- var(--_ctm-mob-dn-im-se-br-se, var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))));
1195
- border-width: var(--_show-im-border,
1196
- var(--_ctm-mob-dn-im-se-br-wh, var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))));
1197
- border-radius: var(--_ctm-mob-dn-im-se-br-rs,
1198
- var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)));
1199
-
1200
- box-shadow: var(--_show-im-shadow,
1201
- var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))));
1202
-
1203
- gap: var(--_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
1204
- var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg)));
1499
+ border-color: var(
1500
+ --_show-im-border,
1501
+ var(--_ctm-mob-dn-im-se-br-cr, var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)))
1502
+ );
1503
+ border-style: var(
1504
+ --_show-im-border,
1505
+ var(--_ctm-mob-dn-im-se-br-se, var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)))
1506
+ );
1507
+ border-width: var(
1508
+ --_show-im-border,
1509
+ var(--_ctm-mob-dn-im-se-br-wh, var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)))
1510
+ );
1511
+ border-radius: var(
1512
+ --_ctm-mob-dn-im-se-br-rs,
1513
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
1514
+ );
1515
+
1516
+ box-shadow: var(
1517
+ --_show-im-shadow,
1518
+ var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
1519
+ var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
1520
+ var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
1521
+ var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
1522
+ );
1523
+
1524
+ gap: var(
1525
+ --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
1526
+ var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
1527
+ );
1205
1528
  overflow: hidden;
1206
1529
 
1207
1530
  .gallery-header {
1208
1531
  display: flex;
1209
1532
  flex-direction: column;
1210
- gap: var(--_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
1211
- var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg)));
1212
- padding-block: var(--_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
1213
- var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg)));
1214
- padding-inline: var(--_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
1215
- var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg)));
1216
- background-color: var(--_ctm-mob-dn-im-tt-cr-dn-bd-cr,
1217
- var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr)));
1533
+ gap: var(
1534
+ --_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
1535
+ var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
1536
+ );
1537
+ padding-block: var(
1538
+ --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
1539
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
1540
+ );
1541
+ padding-inline: var(
1542
+ --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
1543
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
1544
+ );
1545
+ background-color: var(
1546
+ --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
1547
+ var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
1548
+ );
1218
1549
  width: 100%;
1219
- border-color: var(--_ctm-mob-dn-im-tt-cr-dn-br-cr,
1220
- var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr)));
1221
- border-style: var(--_ctm-mob-dn-im-tt-cr-dn-br-se,
1222
- var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se)));
1223
- border-width: var(--_ctm-mob-dn-im-tt-cr-dn-br-wh,
1224
- var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh)));
1225
- border-radius: var(--_ctm-mob-dn-im-tt-cr-dn-br-rs,
1226
- var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs)));
1227
-
1228
- box-shadow: var(--_show-shadow,
1229
- var(--_ctm-mob-dn-im-tt-cr-dn-sw-ae,
1230
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-br,
1231
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-sd,
1232
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-cr,
1233
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))));
1550
+ border-color: var(
1551
+ --_ctm-mob-dn-im-tt-cr-dn-br-cr,
1552
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
1553
+ );
1554
+ border-style: var(
1555
+ --_ctm-mob-dn-im-tt-cr-dn-br-se,
1556
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
1557
+ );
1558
+ border-width: var(
1559
+ --_ctm-mob-dn-im-tt-cr-dn-br-wh,
1560
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
1561
+ );
1562
+ border-radius: var(
1563
+ --_ctm-mob-dn-im-tt-cr-dn-br-rs,
1564
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
1565
+ );
1566
+
1567
+ box-shadow: var(
1568
+ --_show-shadow,
1569
+ var(
1570
+ --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
1571
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
1572
+ )
1573
+ var(
1574
+ --_ctm-mob-dn-im-tt-cr-dn-sw-br,
1575
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
1576
+ )
1577
+ var(
1578
+ --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
1579
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
1580
+ )
1581
+ var(
1582
+ --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
1583
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
1584
+ )
1585
+ );
1234
1586
 
1235
1587
  & h3 {
1236
1588
  color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
1237
- font-family: var(--_ctm-mob-dn-im-se-ft-fy,
1238
- var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy)));
1239
- text-transform: var(--_ctm-mob-dn-im-se-tt-tm,
1240
- var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm)));
1241
- word-wrap: var(--_ctm-mob-dn-im-se-wd-wp,
1242
- var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp)));
1243
- word-break: var(--_ctm-mob-dn-im-se-wd-bk,
1244
- var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk)));
1245
- font-size: var(--_ctm-mob-dn-im-se-ft-se,
1246
- var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se)));
1247
- font-weight: var(--_ctm-mob-dn-im-se-ft-wt,
1248
- var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt)));
1249
- font-style: var(--_ctm-mob-dn-im-se-ft-se-ic,
1250
- var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic)));
1251
- text-align: var(--_ctm-mob-dn-im-se-tt-an,
1252
- var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an)));
1253
- letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg,
1254
- var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg)));
1255
- line-height: var(--_ctm-mob-dn-im-se-le-ht,
1256
- var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht)));
1257
- text-decoration: var(--_ctm-mob-dn-im-se-ue,
1258
- var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue)));
1589
+ font-family: var(
1590
+ --_ctm-mob-dn-im-se-ft-fy,
1591
+ var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1592
+ );
1593
+ text-transform: var(
1594
+ --_ctm-mob-dn-im-se-tt-tm,
1595
+ var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
1596
+ );
1597
+ word-wrap: var(
1598
+ --_ctm-mob-dn-im-se-wd-wp,
1599
+ var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
1600
+ );
1601
+ word-break: var(
1602
+ --_ctm-mob-dn-im-se-wd-bk,
1603
+ var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
1604
+ );
1605
+ font-size: var(
1606
+ --_ctm-mob-dn-im-se-ft-se,
1607
+ var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
1608
+ );
1609
+ font-weight: var(
1610
+ --_ctm-mob-dn-im-se-ft-wt,
1611
+ var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
1612
+ );
1613
+ font-style: var(
1614
+ --_ctm-mob-dn-im-se-ft-se-ic,
1615
+ var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
1616
+ );
1617
+ text-align: var(
1618
+ --_ctm-mob-dn-im-se-tt-an,
1619
+ var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
1620
+ );
1621
+ letter-spacing: var(
1622
+ --_ctm-mob-dn-im-se-lr-sg,
1623
+ var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
1624
+ );
1625
+ line-height: var(
1626
+ --_ctm-mob-dn-im-se-le-ht,
1627
+ var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
1628
+ );
1629
+ text-decoration: var(
1630
+ --_ctm-mob-dn-im-se-ue,
1631
+ var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
1632
+ );
1259
1633
  }
1260
1634
 
1261
1635
  & p {
1262
- color: var(--_ctm-mob-dn-im-se-cr-dc,
1263
- var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc)));
1264
- font-family: var(--_ctm-mob-dn-im-se-ft-fy-dc,
1265
- var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc)));
1266
- text-transform: var(--_ctm-mob-dn-im-se-tt-tm-dc,
1267
- var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc)));
1268
- word-wrap: var(--_ctm-mob-dn-im-se-wd-wp-dc,
1269
- var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc)));
1270
- word-break: var(--_ctm-mob-dn-im-se-wd-bk-dc,
1271
- var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc)));
1272
- font-size: var(--_ctm-mob-dn-im-se-ft-se-dc,
1273
- var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc)));
1274
- font-weight: var(--_ctm-mob-dn-im-se-ft-wt-dc,
1275
- var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc)));
1276
- font-style: var(--_ctm-mob-dn-im-se-ft-se-ic-dc,
1277
- var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc)));
1278
- text-align: var(--_ctm-mob-dn-im-se-tt-an-dc,
1279
- var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc)));
1280
- letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg-dc,
1281
- var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc)));
1282
- line-height: var(--_ctm-mob-dn-im-se-le-ht-dc,
1283
- var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc)));
1284
- text-decoration: var(--_ctm-mob-dn-im-se-ue-dc,
1285
- var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc)));
1636
+ color: var(
1637
+ --_ctm-mob-dn-im-se-cr-dc,
1638
+ var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
1639
+ );
1640
+ font-family: var(
1641
+ --_ctm-mob-dn-im-se-ft-fy-dc,
1642
+ var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1643
+ );
1644
+ text-transform: var(
1645
+ --_ctm-mob-dn-im-se-tt-tm-dc,
1646
+ var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))
1647
+ );
1648
+ word-wrap: var(
1649
+ --_ctm-mob-dn-im-se-wd-wp-dc,
1650
+ var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))
1651
+ );
1652
+ word-break: var(
1653
+ --_ctm-mob-dn-im-se-wd-bk-dc,
1654
+ var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
1655
+ );
1656
+ font-size: var(
1657
+ --_ctm-mob-dn-im-se-ft-se-dc,
1658
+ var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
1659
+ );
1660
+ font-weight: var(
1661
+ --_ctm-mob-dn-im-se-ft-wt-dc,
1662
+ var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
1663
+ );
1664
+ font-style: var(
1665
+ --_ctm-mob-dn-im-se-ft-se-ic-dc,
1666
+ var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
1667
+ );
1668
+ text-align: var(
1669
+ --_ctm-mob-dn-im-se-tt-an-dc,
1670
+ var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
1671
+ );
1672
+ letter-spacing: var(
1673
+ --_ctm-mob-dn-im-se-lr-sg-dc,
1674
+ var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
1675
+ );
1676
+ line-height: var(
1677
+ --_ctm-mob-dn-im-se-le-ht-dc,
1678
+ var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
1679
+ );
1680
+ text-decoration: var(
1681
+ --_ctm-mob-dn-im-se-ue-dc,
1682
+ var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
1683
+ );
1286
1684
  }
1287
1685
  }
1288
1686
 
@@ -1322,7 +1720,6 @@ $defaultValues: (
1322
1720
  }
1323
1721
 
1324
1722
  &[data-widget-alignment="bottom"] {
1325
-
1326
1723
  // align-items: flex-end;
1327
1724
  .gallery-header {
1328
1725
  bottom: 0;
@@ -1454,7 +1851,7 @@ $defaultValues: (
1454
1851
  justify-content: center;
1455
1852
  margin-block: 12px;
1456
1853
 
1457
- &>button {
1854
+ & > button {
1458
1855
  padding-inline: 24px;
1459
1856
  border: 1px solid gray;
1460
1857
  padding-block: 12px;
@@ -1484,7 +1881,7 @@ body:has(.pim__main) {
1484
1881
  justify-content: center;
1485
1882
  @include prepareMediaQueries($defaultValues);
1486
1883
 
1487
- &>.pim__wrapper {
1884
+ & > .pim__wrapper {
1488
1885
  display: var(--_d-flex);
1489
1886
  align-items: center;
1490
1887
  justify-content: center;
@@ -1496,7 +1893,7 @@ body:has(.pim__main) {
1496
1893
  border: 1px solid #98a2b3;
1497
1894
  position: relative;
1498
1895
 
1499
- &>button {
1896
+ & > button {
1500
1897
  position: absolute;
1501
1898
  right: 20px;
1502
1899
  top: 20px;
@@ -1525,7 +1922,7 @@ body:has(.pim__main) {
1525
1922
  height: 100%;
1526
1923
  position: relative;
1527
1924
 
1528
- &>.pim__img__wrapper {
1925
+ & > .pim__img__wrapper {
1529
1926
  height: 100%;
1530
1927
  }
1531
1928
 
@@ -1582,4 +1979,4 @@ body:has(.pim__main) {
1582
1979
  }
1583
1980
  }
1584
1981
  }
1585
- }
1982
+ }