@sc-360-v2/storefront-cms-library 0.3.8 → 0.3.10

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.
@@ -0,0 +1,1815 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ [data-div-type="element"] {
6
+ &[data-element-type="productSizeChart"] {
7
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
8
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
9
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
10
+
11
+ // & > .wrapper {
12
+ // // width: 100%;
13
+ // // height: 100%;
14
+ // }
15
+
16
+ .embla__container {
17
+ grid-template-columns: max-content !important;
18
+ grid-auto-columns: max-content !important;
19
+
20
+ .embla__slide {
21
+ width: max-content !important;
22
+ }
23
+ }
24
+ .text-element {
25
+ background: #6d96e4;
26
+ padding: 10px;
27
+ font-weight: 600;
28
+ color: rgba(75, 69, 70, 1);
29
+ }
30
+ .sizechart__buttons__wrapper {
31
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
32
+
33
+ display: flex;
34
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
35
+ flex-direction: column;
36
+ // &[data-actions-overflow-item-wrap="true"] {
37
+ // flex-wrap: wrap;
38
+ // }
39
+ // &[data-actions-display-style="true"] {
40
+ // flex-direction: column;
41
+ // }
42
+
43
+ .btn__with__text {
44
+ white-space: nowrap;
45
+ }
46
+
47
+ .show__more__btn__wrapper {
48
+ position: relative;
49
+ }
50
+
51
+ .btn__with__text[data-btn-name="sizeChart"] {
52
+ &[data-show-shadow="false"] {
53
+ --_show-shadow: none;
54
+ }
55
+ &[data-icon-position="left"] {
56
+ --_sf-fd-bn: row;
57
+ }
58
+ &[data-icon-position="right"] {
59
+ --_sf-fd-bn: row-reverse;
60
+ }
61
+ &[data-icon-position="center"] {
62
+ --_sf-fd-bn: row;
63
+ }
64
+
65
+ &:hover {
66
+ --_sf-hr-bd-cr: var(
67
+ --_ctm-mob-dn-se-ct-hr-se-bd-cr,
68
+ var(--_ctm-tab-dn-se-ct-hr-se-bd-cr, var(--_ctm-dn-se-ct-hr-se-bd-cr))
69
+ );
70
+ --_sf-hr-br-cr: var(
71
+ --_ctm-mob-dn-se-ct-hr-se-br-cr,
72
+ var(--_ctm-tab-dn-se-ct-hr-se-br-cr, var(--_ctm-dn-se-ct-hr-se-br-cr))
73
+ );
74
+ --_sf-hr-br-se: var(
75
+ --_ctm-mob-dn-se-ct-hr-se-br-se,
76
+ var(--_ctm-tab-dn-se-ct-hr-se-br-se, var(--_ctm-dn-se-ct-hr-se-br-se))
77
+ );
78
+ --_sf-hr-br-wt: var(
79
+ --_ctm-mob-dn-se-ct-hr-se-br-wh,
80
+ var(--_ctm-tab-dn-se-ct-hr-se-br-wh, var(--_ctm-dn-se-ct-hr-se-br-wh))
81
+ );
82
+ --_sf-hr-br-rs: var(
83
+ --_ctm-mob-dn-se-ct-hr-se-br-rs,
84
+ var(--_ctm-tab-dn-se-ct-hr-se-br-rs, var(--_ctm-dn-se-ct-hr-se-br-rs))
85
+ );
86
+ --_sf-hr-at: var(
87
+ --_ctm-mob-dn-se-ct-hr-se-at,
88
+ var(--_ctm-tab-dn-se-ct-hr-se-at, var(--_ctm-dn-se-ct-hr-se-at))
89
+ );
90
+ --_sf-hr-in-ad-tt-sg: var(
91
+ --_ctm-mob-dn-se-ct-hr-se-in-ad-tt-sg,
92
+ var(--_ctm-tab-dn-se-ct-hr-se-in-ad-tt-sg, var(--_ctm-dn-se-ct-hr-se-in-ad-tt-sg))
93
+ );
94
+
95
+ // for shadow
96
+ --_sf-hr-sw-ae: var(
97
+ --_ctm-mob-dn-se-ct-hr-se-sw-ae,
98
+ var(--_ctm-tab-dn-se-ct-hr-se-sw-ae, var(--_ctm-dn-se-ct-hr-se-sw-ae))
99
+ );
100
+ --_sf-hr-sw-br: var(
101
+ --_ctm-mob-dn-se-ct-hr-se-sw-br,
102
+ var(--_ctm-tab-dn-se-ct-hr-se-sw-br, var(--_ctm-dn-se-ct-hr-se-sw-br))
103
+ );
104
+ --_sf-hr-sw-hr: var(
105
+ --_ctm-mob-dn-se-ct-hr-se-sw-hr,
106
+ var(--_ctm-tab-dn-se-ct-hr-se-sw-hr, var(--_ctm-dn-se-ct-hr-se-sw-hr))
107
+ );
108
+ --_sf-hr-sw-cr: var(
109
+ --_ctm-mob-dn-se-ct-hr-se-sw-cr,
110
+ var(--_ctm-tab-dn-se-ct-hr-se-sw-cr, var(--_ctm-dn-se-ct-hr-se-sw-cr))
111
+ );
112
+
113
+ // for font
114
+
115
+ --_sf-hr-cr: var(
116
+ --_ctm-mob-dn-se-ct-hr-se-cr,
117
+ var(--_ctm-tab-dn-se-ct-hr-se-cr, var(--_ctm-dn-se-ct-hr-se-cr))
118
+ );
119
+ --_sf-hr-ft-fy: var(
120
+ --_ctm-mob-dn-se-ct-hr-se-ft-fy,
121
+ var(--_ctm-tab-dn-se-ct-hr-se-ft-fy, var(--_ctm-dn-se-ct-hr-se-ft-fy))
122
+ );
123
+ --_sf-hr-ft-se: var(
124
+ --_ctm-mob-dn-se-ct-hr-se-ft-se,
125
+ var(--_ctm-tab-dn-se-ct-hr-se-ft-se, var(--_ctm-dn-se-ct-hr-se-ft-se))
126
+ );
127
+ --_sf-hr-ft-wt: var(
128
+ --_ctm-mob-dn-se-ct-hr-se-ft-wt,
129
+ var(--_ctm-tab-dn-se-ct-hr-se-ft-wt, var(--_ctm-dn-se-ct-hr-se-ft-wt))
130
+ );
131
+ --_sf-hr-ft-se-ic: var(
132
+ --_ctm-mob-dn-se-ct-hr-se-ft-se-ic,
133
+ var(--_ctm-tab-dn-se-ct-hr-se-ft-se-ic, var(--_ctm-dn-se-ct-hr-se-ft-se-ic))
134
+ );
135
+ --_sf-hr-tt-an: var(
136
+ --_ctm-mob-dn-se-ct-hr-se-tt-an,
137
+ var(--_ctm-tab-dn-se-ct-hr-se-tt-an, var(--_ctm-dn-se-ct-hr-se-tt-an))
138
+ );
139
+ --_sf-hr-lr-sg: var(
140
+ --_ctm-mob-dn-se-ct-hr-se-lr-sg,
141
+ var(--_ctm-tab-dn-se-ct-hr-se-lr-sg, var(--_ctm-dn-se-ct-hr-se-lr-sg))
142
+ );
143
+ --_sf-hr-le-ht: var(
144
+ --_ctm-mob-dn-se-ct-hr-se-le-ht,
145
+ var(--_ctm-tab-dn-se-ct-hr-se-le-ht, var(--_ctm-dn-se-ct-hr-se-le-ht))
146
+ );
147
+
148
+ --_sf-hr-in-se: var(
149
+ --_ctm-mob-dn-se-ct-hr-se-in-se,
150
+ var(--_ctm-tab-dn-se-ct-hr-se-in-se, var(--_ctm-dn-se-ct-hr-se-in-se))
151
+ );
152
+ --_sf-hr-in-se: var(
153
+ --_ctm-mob-dn-se-ct-hr-se-in-se,
154
+ var(--_ctm-tab-dn-se-ct-hr-se-in-se, var(--_ctm-dn-se-ct-hr-se-in-se))
155
+ );
156
+ --_sf-hr-in-c1: var(
157
+ --_ctm-mob-dn-se-ct-hr-se-in-c1,
158
+ var(--_ctm-tab-dn-se-ct-hr-se-in-c1, var(--_ctm-dn-se-ct-hr-se-in-c1))
159
+ );
160
+ --_sf-hr-ue: var(--_ctm-mob-dn-hr-ue, var(--_ctm-tab-dn-hr-ue, var(--_ctm-dn-hr-ue)));
161
+
162
+ &[data-hover-show-shadow="false"] {
163
+ --_hover-show-shadow: none;
164
+ }
165
+ &[data-hover-show-icon="false"] {
166
+ --_hover-show-icon: none;
167
+ }
168
+ }
169
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-bd-cr));
170
+
171
+ padding: 5px 10px;
172
+ display: flex;
173
+ flex-direction: var(--_sf-fd-bn);
174
+ align-items: center;
175
+
176
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-at));
177
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-in-ad-tt-sg));
178
+
179
+ width: 100%;
180
+ height: 100%;
181
+
182
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-br-rs));
183
+
184
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-sw-ae))
185
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-sw-br))
186
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-sw-sd))
187
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-sw-cr));
188
+
189
+ &[data-show-border="true"] {
190
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-br-cr));
191
+
192
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-br-se));
193
+
194
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-br-wh));
195
+ }
196
+
197
+ .txt {
198
+ display: flex;
199
+
200
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-cr));
201
+
202
+ font-family:
203
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-ft-fy)), sans-serif;
204
+
205
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-ft-se));
206
+
207
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-ft-wt));
208
+
209
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-ft-se-ic));
210
+
211
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-tt-an));
212
+
213
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-lr-sg));
214
+
215
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-le-ht));
216
+
217
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
218
+ }
219
+
220
+ .icon {
221
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
222
+ svg {
223
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-in-se));
224
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-in-se));
225
+
226
+ path {
227
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-se-ct-dt-se-in-c1));
228
+ }
229
+ }
230
+ }
231
+ [data-element-style="Text"] {
232
+ display: inline-block;
233
+ width: 100%;
234
+ }
235
+ }
236
+
237
+ .dropdown-menu {
238
+ display: block;
239
+ position: absolute;
240
+ top: 78%;
241
+ left: 100%;
242
+ margin-left: 8px;
243
+ background: white;
244
+ border-radius: 8px;
245
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
246
+ min-width: 200px;
247
+ z-index: 100;
248
+ padding: 8px 0;
249
+ }
250
+
251
+ .button_options {
252
+ position: relative;
253
+ .more__button {
254
+ padding: 0.45rem;
255
+ min-width: 50px;
256
+ cursor: pointer;
257
+ display: flex;
258
+ align-items: center;
259
+ justify-content: var(
260
+ --_ctm-mob-dn-me-se-ct-dt-se-at,
261
+ var(--_ctm-tab-dn-me-se-ct-dt-se-at, var(--_ctm-dn-me-se-ct-dt-se-at))
262
+ );
263
+ gap: var(
264
+ --_ctm-mob-dn-me-se-ct-dt-se-in-ad-tt-sg,
265
+ var(--_ctm-tab-dn-me-se-ct-dt-se-in-ad-tt-sg, var(--_ctm-dn-me-se-ct-dt-se-in-ad-tt-sg))
266
+ );
267
+ background-color: var(
268
+ --_sf-at-hr-bd-cr,
269
+ var(
270
+ --_ctm-mob-dn-me-se-ct-dt-se-bd-cr,
271
+ var(--_ctm-tab-dn-me-se-ct-dt-se-bd-cr, var(--_ctm-dn-me-se-ct-dt-se-bd-cr))
272
+ )
273
+ );
274
+ border-color: var(
275
+ --_sf-at-hr-br-cr,
276
+ var(
277
+ --_ctm-mob-dn-me-se-ct-dt-se-br-cr,
278
+ var(--_ctm-tab-dn-me-se-ct-dt-se-br-cr, var(--_ctm-dn-me-se-ct-dt-se-br-cr))
279
+ )
280
+ );
281
+ border-style: var(
282
+ --_sf-at-hr-br-se,
283
+ var(
284
+ --_ctm-mob-dn-me-se-ct-dt-se-br-se,
285
+ var(--_ctm-tab-dn-me-se-ct-dt-se-br-se, var(--_ctm-dn-me-se-ct-dt-se-br-se))
286
+ )
287
+ );
288
+ border-width: var(
289
+ --_sf-at-hr-br-wt,
290
+ var(
291
+ --_ctm-mob-dn-me-se-ct-dt-se-br-wh,
292
+ var(--_ctm-tab-dn-me-se-ct-dt-se-br-wh, var(--_ctm-dn-me-se-ct-dt-se-br-wh))
293
+ )
294
+ );
295
+ border-radius: var(
296
+ --_sf-at-hr-br-br,
297
+ var(
298
+ --_ctm-mob-dn-me-se-ct-dt-se-br-rs,
299
+ var(--_ctm-tab-dn-me-se-ct-dt-se-br-rs, var(--_ctm-dn-me-se-ct-dt-se-br-rs))
300
+ )
301
+ );
302
+ box-shadow: var(
303
+ --_hover-show-shadow,
304
+ var(
305
+ --_sf-at-hr-bx-sw,
306
+ var(
307
+ --_show-shadow,
308
+ var(
309
+ --_ctm-mob-dn-me-se-ct-dt-se-sw-ae,
310
+ var(--_ctm-tab-dn-me-se-ct-dt-se-sw-ae, var(--_ctm-dn-me-se-ct-dt-se-sw-ae))
311
+ )
312
+ var(
313
+ --_ctm-mob-dn-me-se-ct-dt-se-sw-br,
314
+ var(--_ctm-tab-dn-me-se-ct-dt-se-sw-br, var(--_ctm-dn-me-se-ct-dt-se-sw-br))
315
+ )
316
+ var(
317
+ --_ctm-mob-dn-me-se-ct-dt-se-sw-sd,
318
+ var(--_ctm-tab-dn-me-se-ct-dt-se-sw-sd, var(--_ctm-dn-me-se-ct-dt-se-sw-sd))
319
+ )
320
+ var(
321
+ --_ctm-mob-dn-me-se-ct-dt-se-sw-cr,
322
+ var(--_ctm-tab-dn-me-se-ct-dt-se-sw-cr, var(--_ctm-dn-me-se-ct-dt-se-sw-cr))
323
+ )
324
+ )
325
+ )
326
+ );
327
+ .btn__with__text {
328
+ border: none;
329
+ background-color: transparent;
330
+ color: var(
331
+ --_ctm-mob-dn-me-se-ct-dt-se-cr,
332
+ var(--_ctm-tab-dn-me-se-ct-dt-se-cr, var(--_ctm-dn-me-se-ct-dt-se-cr))
333
+ );
334
+ font-family:
335
+ var(
336
+ --_ctm-mob-dn-me-se-ct-dt-se-ft-fy,
337
+ var(--_ctm-tab-dn-me-se-ct-dt-se-ft-fy, var(--_ctm-dn-me-se-ct-dt-se-ft-fy))
338
+ ),
339
+ sans-serif;
340
+ font-size: var(
341
+ --_ctm-mob-dn-me-se-ct-dt-se-ft-se,
342
+ var(--_ctm-tab-dn-me-se-ct-dt-se-ft-se, var(--_ctm-dn-me-se-ct-dt-se-ft-se))
343
+ );
344
+ font-weight: var(
345
+ --_ctm-mob-dn-me-se-ct-dt-se-ft-wt,
346
+ var(--_ctm-tab-dn-me-se-ct-dt-se-ft-wt, var(--_ctm-dn-me-se-ct-dt-se-ft-wt))
347
+ );
348
+ font-style: var(
349
+ --_ctm-mob-dn-me-se-ct-dt-se-ft-se-ic,
350
+ var(--_ctm-tab-dn-me-se-ct-dt-se-ft-se-ic, var(--_ctm-dn-me-se-ct-dt-se-ft-se-ic))
351
+ );
352
+ text-align: var(
353
+ --_ctm-mob-dn-me-se-ct-dt-se-tt-an,
354
+ var(--_ctm-tab-dn-me-se-ct-dt-se-tt-an, var(--_ctm-dn-me-se-ct-dt-se-tt-an))
355
+ );
356
+ letter-spacing: var(
357
+ --_ctm-mob-dn-me-se-ct-dt-se-lr-sg,
358
+ var(--_ctm-tab-dn-me-se-ct-dt-se-lr-sg, var(--_ctm-dn-me-se-ct-dt-se-lr-sg))
359
+ );
360
+ line-height: var(
361
+ --_ctm-mob-dn-me-se-ct-dt-se-le-ht,
362
+ var(--_ctm-tab-dn-me-se-ct-dt-se-le-ht, var(--_ctm-dn-me-se-ct-dt-se-le-ht))
363
+ );
364
+ text-decoration: var(
365
+ --_ctm-mob-dn-me-se-ct-dt-se-ue,
366
+ var(--_ctm-tab-dn-me-se-ct-dt-se-ue, var(--_ctm-dn-me-se-ct-dt-se-ue))
367
+ );
368
+ }
369
+ span {
370
+ svg {
371
+ width: var(
372
+ --_ctm-mob-dn-me-se-ct-dt-se-in-se,
373
+ var(--_ctm-tab-dn-me-se-ct-dt-se-in-se, var(--_ctm-dn-me-se-ct-dt-se-in-se))
374
+ );
375
+ height: var(
376
+ --_ctm-mob-dn-me-se-ct-dt-se-in-se,
377
+ var(--_ctm-tab-dn-me-se-ct-dt-se-in-se, var(--_ctm-dn-me-se-ct-dt-se-in-se))
378
+ );
379
+ path {
380
+ stroke: var(
381
+ --_ctm-mob-dn-me-se-ct-dt-se-in-c1,
382
+ var(--_ctm-tab-dn-me-se-ct-dt-se-in-c1, var(--_ctm-dn-me-se-ct-dt-se-in-c1))
383
+ );
384
+ }
385
+ }
386
+ }
387
+ &:hover {
388
+ justify-content: var(
389
+ --_ctm-mob-dn-me-se-ct-hr-se-at,
390
+ var(--_ctm-tab-dn-me-se-ct-hr-se-at, var(--_ctm-dn-me-se-ct-hr-se-at))
391
+ );
392
+
393
+ background-color: var(
394
+ --_sf-at-hr-bd-cr,
395
+ var(
396
+ --_ctm-mob-dn-me-se-ct-hr-se-bd-cr,
397
+ var(--_ctm-tab-dn-me-se-ct-hr-se-bd-cr, var(--_ctm-dn-me-se-ct-hr-se-bd-cr))
398
+ )
399
+ );
400
+
401
+ border-color: var(
402
+ --_sf-at-hr-br-cr,
403
+ var(
404
+ --_ctm-mob-dn-me-se-ct-hr-se-br-cr,
405
+ var(--_ctm-tab-dn-me-se-ct-hr-se-br-cr, var(--_ctm-dn-me-se-ct-hr-se-br-cr))
406
+ )
407
+ );
408
+
409
+ border-style: var(
410
+ --_sf-at-hr-br-se,
411
+ var(
412
+ --_ctm-mob-dn-me-se-ct-hr-se-br-se,
413
+ var(--_ctm-tab-dn-me-se-ct-hr-se-br-se, var(--_ctm-dn-me-se-ct-hr-se-br-se))
414
+ )
415
+ );
416
+
417
+ border-width: var(
418
+ --_sf-at-hr-br-wt,
419
+ var(
420
+ --_ctm-mob-dn-me-se-ct-hr-se-br-wh,
421
+ var(--_ctm-tab-dn-me-se-ct-hr-se-br-wh, var(--_ctm-dn-me-se-ct-hr-se-br-wh))
422
+ )
423
+ );
424
+
425
+ border-radius: var(
426
+ --_sf-at-hr-br-br,
427
+ var(
428
+ --_ctm-mob-dn-me-se-ct-hr-se-br-rs,
429
+ var(--_ctm-tab-dn-me-se-ct-hr-se-br-rs, var(--_ctm-dn-me-se-ct-hr-se-br-rs))
430
+ )
431
+ );
432
+
433
+ box-shadow: var(
434
+ --_hover-show-shadow,
435
+ var(
436
+ --_sf-at-hr-bx-sw,
437
+ var(
438
+ --_show-shadow,
439
+ var(
440
+ --_ctm-mob-dn-me-se-ct-hr-se-sw-ae,
441
+ var(--_ctm-tab-dn-me-se-ct-hr-se-sw-ae, var(--_ctm-dn-me-se-ct-hr-se-sw-ae))
442
+ )
443
+ var(
444
+ --_ctm-mob-dn-me-se-ct-hr-se-sw-br,
445
+ var(--_ctm-tab-dn-me-se-ct-hr-se-sw-br, var(--_ctm-dn-me-se-ct-hr-se-sw-br))
446
+ )
447
+ var(
448
+ --_ctm-mob-dn-me-se-ct-hr-se-sw-sd,
449
+ var(--_ctm-tab-dn-me-se-ct-hr-se-sw-sd, var(--_ctm-dn-me-se-ct-hr-se-sw-sd))
450
+ )
451
+ var(
452
+ --_ctm-mob-dn-me-se-ct-hr-se-sw-cr,
453
+ var(--_ctm-tab-dn-me-se-ct-hr-se-sw-cr, var(--_ctm-dn-me-se-ct-hr-se-sw-cr))
454
+ )
455
+ )
456
+ )
457
+ );
458
+
459
+ .btn__with__text {
460
+ border: none;
461
+ background-color: transparent;
462
+ color: var(
463
+ --_ctm-mob-dn-me-se-ct-hr-se-cr,
464
+ var(--_ctm-tab-dn-me-se-ct-hr-se-cr, var(--_ctm-dn-me-se-ct-hr-se-cr))
465
+ );
466
+ font-family:
467
+ var(
468
+ --_ctm-mob-dn-me-se-ct-hr-se-ft-fy,
469
+ var(--_ctm-tab-dn-me-se-ct-hr-se-ft-fy, var(--_ctm-dn-me-se-ct-hr-se-ft-fy))
470
+ ),
471
+ sans-serif;
472
+ font-size: var(
473
+ --_ctm-mob-dn-me-se-ct-hr-se-ft-se,
474
+ var(--_ctm-tab-dn-me-se-ct-hr-se-ft-se, var(--_ctm-dn-me-se-ct-hr-se-ft-se))
475
+ );
476
+ font-weight: var(
477
+ --_ctm-mob-dn-me-se-ct-hr-se-ft-wt,
478
+ var(--_ctm-tab-dn-me-se-ct-hr-se-ft-wt, var(--_ctm-dn-me-se-ct-hr-se-ft-wt))
479
+ );
480
+ font-style: var(
481
+ --_ctm-mob-dn-me-se-ct-hr-se-ft-se-ic,
482
+ var(--_ctm-tab-dn-me-se-ct-hr-se-ft-se-ic, var(--_ctm-dn-me-se-ct-hr-se-ft-se-ic))
483
+ );
484
+ text-align: var(
485
+ --_ctm-mob-dn-me-se-ct-hr-se-tt-an,
486
+ var(--_ctm-tab-dn-me-se-ct-hr-se-tt-an, var(--_ctm-dn-me-se-ct-hr-se-tt-an))
487
+ );
488
+ letter-spacing: var(
489
+ --_ctm-mob-dn-me-se-ct-hr-se-lr-sg,
490
+ var(--_ctm-tab-dn-me-se-ct-hr-se-lr-sg, var(--_ctm-dn-me-se-ct-hr-se-lr-sg))
491
+ );
492
+ line-height: var(
493
+ --_ctm-mob-dn-me-se-ct-hr-se-le-ht,
494
+ var(--_ctm-tab-dn-me-se-ct-hr-se-le-ht, var(--_ctm-dn-me-se-ct-hr-se-le-ht))
495
+ );
496
+ text-decoration: var(
497
+ --_ctm-mob-dn-me-se-ct-hr-se-ue,
498
+ var(--_ctm-tab-dn-me-se-ct-hr-se-ue, var(--_ctm-dn-me-se-ct-hr-se-ue))
499
+ );
500
+ }
501
+
502
+ span {
503
+ svg {
504
+ width: var(
505
+ --_ctm-mob-dn-me-se-ct-hr-se-in-se,
506
+ var(--_ctm-tab-dn-me-se-ct-hr-se-in-se, var(--_ctm-dn-me-se-ct-hr-se-in-se))
507
+ );
508
+ height: var(
509
+ --_ctm-mob-dn-me-se-ct-hr-se-in-se,
510
+ var(--_ctm-tab-dn-me-se-ct-hr-se-in-se, var(--_ctm-dn-me-se-ct-hr-se-in-se))
511
+ );
512
+ path {
513
+ stroke: var(
514
+ --_ctm-mob-dn-me-se-ct-hr-se-in-c1,
515
+ var(--_ctm-tab-dn-me-se-ct-hr-se-in-c1, var(--_ctm-dn-me-se-ct-hr-se-in-c1))
516
+ );
517
+ }
518
+ }
519
+ }
520
+ }
521
+ }
522
+ .dropdown_buttons {
523
+ position: absolute;
524
+ min-width: 150px;
525
+ width: 80%;
526
+ top: 100%;
527
+ right: 0px;
528
+ border: 1px solid var(--_gray-200);
529
+ border-radius: 8px;
530
+ overflow: hidden;
531
+ margin-top: 2px;
532
+ ul {
533
+ list-style: none;
534
+ max-height: 200px;
535
+ overflow-y: auto;
536
+ li {
537
+ background-color: var(--_base-white);
538
+ padding: 5px;
539
+ color: var(--_gray-700);
540
+ font-size: 14px;
541
+ font-weight: 500;
542
+ cursor: pointer;
543
+ &:hover {
544
+ background-color: var(--_primary-25);
545
+ color: var(--_primary-400);
546
+ cursor: pointer;
547
+ }
548
+ }
549
+ }
550
+ }
551
+ }
552
+ }
553
+ .sizechart-overlay {
554
+ position: fixed;
555
+ inset: 0;
556
+ background: rgba(0, 0, 0, 0.6);
557
+ display: flex;
558
+ justify-content: center;
559
+ align-items: center;
560
+ z-index: 1000;
561
+ }
562
+
563
+ .sizechart-modal {
564
+ background: #fff;
565
+ padding: 24px;
566
+ border-radius: 12px;
567
+ width: 90%;
568
+ max-width: 700px;
569
+ position: relative;
570
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
571
+ font-family: "Arial", sans-serif;
572
+ height: 600px;
573
+ overflow: scroll;
574
+ z-index: 99999999;
575
+
576
+ .close-btn {
577
+ position: absolute;
578
+ top: 12px;
579
+ right: 16px;
580
+ background: none;
581
+ border: none;
582
+ font-size: 22px;
583
+ cursor: pointer;
584
+ }
585
+ .sizechart-container {
586
+ display: flex;
587
+ flex-direction: column;
588
+ position: relative;
589
+ align-items: center;
590
+ }
591
+
592
+ .tabs {
593
+ display: flex;
594
+ border-bottom: 2px solid #eee;
595
+ margin-bottom: 16px;
596
+
597
+ .tab {
598
+ flex: 1;
599
+ text-align: center;
600
+ padding: 10px 0;
601
+ font-weight: 600;
602
+ cursor: pointer;
603
+ border-bottom: 2px solid transparent;
604
+ color: #555;
605
+
606
+ &.active {
607
+ border-bottom: 2px solid #ff3f6c;
608
+ color: #ff3f6c;
609
+ }
610
+ }
611
+ }
612
+
613
+ .sizechart-table {
614
+ width: 100%;
615
+ border-collapse: collapse;
616
+ font-size: 14px;
617
+
618
+ th,
619
+ td {
620
+ padding: 12px;
621
+ border: 1px solid #ddd;
622
+ text-align: center;
623
+ }
624
+
625
+ th {
626
+ background-color: #f5f5f5;
627
+ font-weight: 600;
628
+ }
629
+ }
630
+
631
+ .how-to-measure {
632
+ text-align: center;
633
+
634
+ img {
635
+ width: 150px;
636
+ margin-bottom: 12px;
637
+ }
638
+
639
+ p {
640
+ font-size: 13px;
641
+ color: #666;
642
+ }
643
+ }
644
+
645
+ .pdf-viewer iframe {
646
+ border: none;
647
+ width: 100%;
648
+ height: 600px;
649
+ }
650
+ }
651
+
652
+ .gallery-slider-element {
653
+ --text-high-contrast-rgb-value: 49, 49, 49;
654
+ --detail-medium-contrast: rgb(234, 234, 234);
655
+ --text-body: rgb(54, 49, 61);
656
+
657
+ position: relative;
658
+ background-color: var(
659
+ --_ctm-mob-dn-gy-wt-se-bd-cr,
660
+ var(
661
+ --_ctm-tab-dn-gy-wt-se-bd-cr,
662
+ var(--_ctm-dn-gy-wt-se-bd-cr, var(--_tst-dn-gy-wt-se-bd-cr))
663
+ )
664
+ );
665
+
666
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
667
+
668
+ display: flex;
669
+ flex-direction: column;
670
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
671
+
672
+ gap: var(
673
+ --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
674
+ var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
675
+ );
676
+
677
+ width: 400px;
678
+ height: 400px;
679
+ border-color: var(
680
+ --_ctm-mob-dn-gy-wt-se-br-cr,
681
+ var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
682
+ );
683
+
684
+ border-style: var(
685
+ --_ctm-mob-dn-gy-wt-se-br-se,
686
+ var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
687
+ );
688
+
689
+ border-width: var(
690
+ --_ctm-mob-dn-gy-wt-se-br-wh,
691
+ var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
692
+ );
693
+
694
+ border-radius: var(
695
+ --_ctm-mob-dn-gy-wt-se-br-rs,
696
+ var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
697
+ );
698
+
699
+ box-shadow: var(
700
+ --_show-shadow,
701
+ var(
702
+ --_ctm-mob-dn-gy-wt-se-sw-ae,
703
+ var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
704
+ )
705
+ var(
706
+ --_ctm-mob-dn-gy-wt-se-sw-br,
707
+ var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
708
+ )
709
+ var(
710
+ --_ctm-mob-dn-gy-wt-se-sw-sd,
711
+ var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
712
+ )
713
+ var(
714
+ --_ctm-mob-dn-gy-wt-se-sw-cr,
715
+ var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
716
+ )
717
+ );
718
+
719
+ .gallery-header {
720
+ // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
721
+ // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
722
+ display: flex;
723
+ flex-direction: column;
724
+
725
+ gap: var(
726
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
727
+ 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))
728
+ );
729
+
730
+ padding-block: var(
731
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
732
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
733
+ );
734
+
735
+ padding-inline: var(
736
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
737
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
738
+ );
739
+
740
+ background-color: var(
741
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
742
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
743
+ );
744
+
745
+ width: 100%;
746
+
747
+ border-color: var(
748
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
749
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
750
+ );
751
+
752
+ border-style: var(
753
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
754
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
755
+ );
756
+
757
+ border-width: var(
758
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
759
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
760
+ );
761
+
762
+ border-radius: var(
763
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
764
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
765
+ );
766
+
767
+ box-shadow: var(
768
+ --_show-shadow,
769
+ var(
770
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
771
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
772
+ )
773
+ var(
774
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
775
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
776
+ )
777
+ var(
778
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
779
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
780
+ )
781
+ var(
782
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
783
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
784
+ )
785
+ );
786
+
787
+ & h3 {
788
+ color: var(
789
+ --_ctm-mob-dn-gy-wt-se-cr,
790
+ var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
791
+ );
792
+
793
+ font-family:
794
+ var(
795
+ --_ctm-mob-dn-gy-wt-se-ft-fy,
796
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
797
+ ),
798
+ sans-serif;
799
+
800
+ font-size: var(
801
+ --_ctm-mob-dn-gy-wt-se-ft-se,
802
+ var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
803
+ );
804
+
805
+ font-weight: var(
806
+ --_ctm-mob-dn-gy-wt-se-ft-wt,
807
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
808
+ );
809
+
810
+ font-style: var(
811
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic,
812
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
813
+ );
814
+
815
+ text-align: var(
816
+ --_ctm-mob-dn-gy-wt-se-tt-an,
817
+ var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
818
+ );
819
+
820
+ letter-spacing: var(
821
+ --_ctm-mob-dn-gy-wt-se-lr-sg,
822
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
823
+ );
824
+
825
+ line-height: var(
826
+ --_ctm-mob-dn-gy-wt-se-le-ht,
827
+ var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
828
+ );
829
+
830
+ text-decoration: var(
831
+ --_ctm-mob-dn-gy-wt-se-ue,
832
+ var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
833
+ );
834
+ }
835
+
836
+ & p {
837
+ color: var(
838
+ --_ctm-mob-dn-gy-wt-se-cr-dc,
839
+ var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
840
+ );
841
+
842
+ font-family:
843
+ var(
844
+ --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
845
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
846
+ ),
847
+ sans-serif;
848
+
849
+ font-size: var(
850
+ --_ctm-mob-dn-gy-wt-se-ft-se-dc,
851
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
852
+ );
853
+
854
+ font-weight: var(
855
+ --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
856
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
857
+ );
858
+
859
+ font-style: var(
860
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
861
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
862
+ );
863
+
864
+ text-align: var(
865
+ --_ctm-mob-dn-gy-wt-se-tt-an-dc,
866
+ var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
867
+ );
868
+
869
+ letter-spacing: var(
870
+ --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
871
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
872
+ );
873
+
874
+ line-height: var(
875
+ --_ctm-mob-dn-gy-wt-se-le-ht-dc,
876
+ var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
877
+ );
878
+
879
+ text-decoration: var(
880
+ --_ctm-mob-dn-gy-wt-se-ue-dc,
881
+ var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
882
+ );
883
+ }
884
+
885
+ // h3 {
886
+ // margin-bottom: var(--_mb-4);
887
+ // }
888
+ }
889
+ }
890
+
891
+ &[data-text-position="top"] {
892
+ .gallery-slider-element {
893
+ flex-direction: column;
894
+ }
895
+ }
896
+ &[data-text-position="bottom"] {
897
+ .gallery-slider-element {
898
+ flex-direction: column-reverse;
899
+ }
900
+ }
901
+ &[data-text-position="left"] {
902
+ .gallery-slider-element {
903
+ flex-direction: row;
904
+ }
905
+ .gallery-header {
906
+ width: fit-content;
907
+ height: 100%;
908
+ }
909
+ &[data-widget-alignment="top"] {
910
+ .gallery-slider-element {
911
+ align-items: flex-start;
912
+ }
913
+ .gallery-header {
914
+ justify-content: flex-start;
915
+ }
916
+ }
917
+ &[data-widget-alignment="center"] {
918
+ .gallery-slider-element {
919
+ align-items: center;
920
+ }
921
+ .gallery-header {
922
+ justify-content: center;
923
+ }
924
+ }
925
+ &[data-widget-alignment="bottom"] {
926
+ .gallery-slider-element {
927
+ align-items: flex-end;
928
+ }
929
+ .gallery-header {
930
+ justify-content: flex-end;
931
+ }
932
+ }
933
+ }
934
+ &[data-text-position="right"] {
935
+ .gallery-header {
936
+ width: fit-content;
937
+ height: 100%;
938
+ }
939
+ .gallery-slider-element {
940
+ flex-direction: row-reverse;
941
+ }
942
+
943
+ &[data-widget-alignment="top"] {
944
+ .gallery-slider-element {
945
+ align-items: flex-start;
946
+ }
947
+ .gallery-header {
948
+ justify-content: flex-start;
949
+ }
950
+ }
951
+ &[data-widget-alignment="center"] {
952
+ .gallery-slider-element {
953
+ align-items: center;
954
+ }
955
+ .gallery-header {
956
+ justify-content: center;
957
+ }
958
+ }
959
+ &[data-widget-alignment="bottom"] {
960
+ .gallery-slider-element {
961
+ align-items: flex-end;
962
+ }
963
+ .gallery-header {
964
+ justify-content: flex-end;
965
+ }
966
+ }
967
+ }
968
+ .embla {
969
+ width: 100%;
970
+ height: 100%;
971
+ position: relative;
972
+ display: flex;
973
+ //flex-direction: column;
974
+ // overflow: hidden;
975
+
976
+ .embla__viewport {
977
+ width: 100%;
978
+ height: 100%;
979
+ position: relative;
980
+ display: flex;
981
+ flex-direction: column;
982
+
983
+ overflow: hidden;
984
+
985
+ .embla__container {
986
+ width: 100%;
987
+ height: 100%;
988
+ display: grid;
989
+ grid-template-rows: 100%;
990
+ // grid-template-columns: 100%;
991
+ grid-template-columns: repeat(
992
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
993
+ calc(
994
+ 100% /
995
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
996
+ )
997
+ );
998
+
999
+ grid-auto-flow: column;
1000
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
1001
+
1002
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1003
+ height: calc(
1004
+ 100% - 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
+ 10px
1010
+ )
1011
+ );
1012
+ }
1013
+
1014
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1015
+ height: calc(
1016
+ 100% - calc(
1017
+ var(
1018
+ --_ctm-mob-dn-pn-le-le-ht,
1019
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1020
+ ) +
1021
+ 20px
1022
+ )
1023
+ );
1024
+ }
1025
+
1026
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
1027
+ height: calc(
1028
+ 100% - calc(
1029
+ var(
1030
+ --_ctm-mob-dn-pn-ds-dt-se,
1031
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1032
+ ) +
1033
+ 20px
1034
+ )
1035
+ );
1036
+ }
1037
+
1038
+ .embla__slide {
1039
+ width: 100%;
1040
+ height: 100%;
1041
+ }
1042
+ }
1043
+ }
1044
+ &:not([data-display-style="Column"]) {
1045
+ .embla__container {
1046
+ grid-auto-columns: calc(
1047
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
1048
+ );
1049
+ }
1050
+ }
1051
+
1052
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
1053
+ // overflow: unset;
1054
+
1055
+ .embla__viewport {
1056
+ overflow: unset;
1057
+ height: 80%;
1058
+ flex-grow: 1;
1059
+ &:not([data-is-builder-type="true"]) {
1060
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
1061
+ }
1062
+
1063
+ .embla__container {
1064
+ overflow: unset;
1065
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
1066
+
1067
+ // min-height: var(--_ctm-height);
1068
+
1069
+ grid-template-columns: repeat(
1070
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
1071
+ 1fr
1072
+ );
1073
+
1074
+ grid-template-rows: unset;
1075
+
1076
+ grid-auto-flow: row;
1077
+ &[data-overflow-hidden="true"] {
1078
+ overflow: hidden;
1079
+ }
1080
+ }
1081
+ }
1082
+ }
1083
+
1084
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
1085
+ .embla__viewport {
1086
+ .embla__container {
1087
+ grid-template-rows: repeat(
1088
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
1089
+ calc(
1090
+ 100% /
1091
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
1092
+ )
1093
+ );
1094
+ }
1095
+ }
1096
+ }
1097
+
1098
+ &[data-display-style="Rows"] {
1099
+ // overflow: unset;
1100
+
1101
+ .embla__viewport {
1102
+ overflow: unset;
1103
+ height: 80%;
1104
+ flex-grow: 1;
1105
+ &:not([data-is-builder-type="true"]) {
1106
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
1107
+ }
1108
+
1109
+ .embla__container {
1110
+ overflow: hidden;
1111
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
1112
+
1113
+ // min-height: var(--_ctm-height);
1114
+
1115
+ grid-template-columns: repeat(
1116
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
1117
+ 1fr
1118
+ );
1119
+ grid-template-rows: unset;
1120
+
1121
+ grid-auto-flow: row;
1122
+ }
1123
+ }
1124
+ }
1125
+
1126
+ &[data-display-style="Column"] {
1127
+ // overflow: unset;
1128
+
1129
+ .embla__viewport {
1130
+ .embla__container {
1131
+ display: flex;
1132
+ .embla__slide {
1133
+ width: unset;
1134
+ height: 100%;
1135
+ aspect-ratio: 1 / 2;
1136
+ }
1137
+ }
1138
+ }
1139
+ }
1140
+ &[data-display-style="Masonry"] {
1141
+ // overflow: unset;
1142
+
1143
+ .embla__viewport {
1144
+ overflow: hidden;
1145
+ height: 80%;
1146
+ flex-grow: 1;
1147
+ &:not([data-is-builder-type="true"]) {
1148
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
1149
+ }
1150
+ .embla__container {
1151
+ overflow: unset;
1152
+
1153
+ display: block;
1154
+ column-count: var(
1155
+ --_ctm-mob-lt-is-pr-rw,
1156
+ var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
1157
+ );
1158
+ gap: unset;
1159
+ column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
1160
+
1161
+ // height: auto;
1162
+
1163
+ height: auto;
1164
+
1165
+ .embla__slide {
1166
+ // break-inside: avoid;
1167
+ margin-bottom: var(
1168
+ --_ctm-mob-lt-im-gp,
1169
+ var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
1170
+ );
1171
+
1172
+ height: unset;
1173
+ .gallery__slide {
1174
+ height: unset;
1175
+ }
1176
+ }
1177
+ }
1178
+ }
1179
+ }
1180
+
1181
+ .arrow-navigation {
1182
+ display: flex;
1183
+ position: absolute;
1184
+ top: 50%;
1185
+ left: 50%;
1186
+ width: 100%;
1187
+ justify-content: space-between;
1188
+ transform: translate(-50%, -50%);
1189
+ // padding-left: 20px;
1190
+ &[data-control-type="Side"] {
1191
+ .left-button,
1192
+ .right-button {
1193
+ background-color: transparent;
1194
+ }
1195
+ }
1196
+ &[data-background-shape="Round"] {
1197
+ .left-button,
1198
+ .right-button {
1199
+ background-color: #f2f5f5;
1200
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1201
+ }
1202
+ }
1203
+ &[data-control-type="Bottom-Overflow"] {
1204
+ transform: translateX(-50%);
1205
+ width: 100%;
1206
+ justify-content: center;
1207
+ gap: 12px;
1208
+ top: unset;
1209
+ bottom: 6px;
1210
+ }
1211
+ &[data-control-type="Bottom"] {
1212
+ transform: unset;
1213
+ position: static;
1214
+ width: 100%;
1215
+ justify-content: center;
1216
+ gap: 12px;
1217
+ margin-top: 10px;
1218
+ }
1219
+ .left-button {
1220
+ width: var(
1221
+ --_ctm-mob-dn-pn-as-aw-se,
1222
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1223
+ );
1224
+ height: var(
1225
+ --_ctm-mob-dn-pn-as-aw-se,
1226
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1227
+ );
1228
+ }
1229
+ .right-button {
1230
+ width: var(
1231
+ --_ctm-mob-dn-pn-as-aw-se,
1232
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1233
+ );
1234
+ height: var(
1235
+ --_ctm-mob-dn-pn-as-aw-se,
1236
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1237
+ );
1238
+ }
1239
+ }
1240
+ .left-button {
1241
+ padding: 10px;
1242
+ border-radius: 50%;
1243
+ border: none;
1244
+
1245
+ display: flex;
1246
+ align-items: center;
1247
+ justify-content: center;
1248
+ cursor: pointer;
1249
+ outline: none;
1250
+ margin-left: 12px;
1251
+ &:disabled {
1252
+ & svg {
1253
+ path {
1254
+ stroke: rgb(192, 192, 192);
1255
+ }
1256
+ }
1257
+ }
1258
+ }
1259
+ .right-button {
1260
+ border-radius: 50%;
1261
+ border: none;
1262
+
1263
+ display: flex;
1264
+ align-items: center;
1265
+ justify-content: center;
1266
+ cursor: pointer;
1267
+ outline: none;
1268
+ margin-right: 12px;
1269
+ padding: 10px;
1270
+
1271
+ &:disabled {
1272
+ & svg {
1273
+ path {
1274
+ stroke: rgb(192, 192, 192);
1275
+ }
1276
+ }
1277
+ }
1278
+ }
1279
+ .icon {
1280
+ display: flex;
1281
+ svg {
1282
+ width: calc(
1283
+ var(
1284
+ --_ctm-mob-dn-pn-as-aw-se,
1285
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1286
+ ) *
1287
+ 0.5
1288
+ );
1289
+ height: calc(
1290
+ var(
1291
+ --_ctm-mob-dn-pn-as-aw-se,
1292
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1293
+ ) *
1294
+ 0.5
1295
+ );
1296
+
1297
+ path {
1298
+ stroke: var(
1299
+ --_ctm-mob-dn-pn-as-aw-cr,
1300
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
1301
+ );
1302
+ }
1303
+ }
1304
+ }
1305
+
1306
+ &[data-control-type="Side"] {
1307
+ .embla__viewport {
1308
+ width: calc(100% - 120px);
1309
+ margin-inline: auto;
1310
+ }
1311
+ }
1312
+
1313
+ &[data-thumbnail-placement="top"] {
1314
+ flex-direction: column-reverse;
1315
+ }
1316
+ &[data-thumbnail-placement="bottom"] {
1317
+ flex-direction: column;
1318
+ }
1319
+ &[data-thumbnail-placement="left"] {
1320
+ flex-direction: row-reverse;
1321
+
1322
+ .embla__thumbs {
1323
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1324
+
1325
+ height: 100%;
1326
+
1327
+ & .embla__thumbs__container {
1328
+ flex-direction: column;
1329
+ height: 100%;
1330
+ }
1331
+ }
1332
+ }
1333
+ &[data-thumbnail-placement="right"] {
1334
+ flex-direction: row;
1335
+ .embla__thumbs {
1336
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1337
+
1338
+ height: 100%;
1339
+
1340
+ & .embla__thumbs__container {
1341
+ flex-direction: column;
1342
+ height: 100%;
1343
+ }
1344
+ }
1345
+ }
1346
+ .embla__dots {
1347
+ display: flex;
1348
+ flex-wrap: wrap;
1349
+ justify-content: center;
1350
+ align-items: center;
1351
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
1352
+ gap: 6px;
1353
+ margin-top: 16px;
1354
+
1355
+ &[data-control-type="Bottom-Overflow"] {
1356
+ position: absolute;
1357
+ bottom: 10px;
1358
+ left: 50%;
1359
+ transform: translateX(-50%);
1360
+ width: 75%;
1361
+ }
1362
+ .embla__dot {
1363
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1364
+ -webkit-appearance: none;
1365
+ appearance: none;
1366
+ background-color: var(
1367
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
1368
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
1369
+ );
1370
+
1371
+ touch-action: manipulation;
1372
+ display: inline-flex;
1373
+ text-decoration: none;
1374
+ cursor: pointer;
1375
+ border: 0;
1376
+ padding: 0;
1377
+ margin: 0;
1378
+ // width: 0.6rem;
1379
+ // height: 0.6rem;
1380
+ width: var(
1381
+ --_ctm-mob-dn-pn-ds-dt-se,
1382
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1383
+ );
1384
+ height: var(
1385
+ --_ctm-mob-dn-pn-ds-dt-se,
1386
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1387
+ );
1388
+
1389
+ display: flex;
1390
+ align-items: center;
1391
+ justify-content: center;
1392
+ border-radius: 50%;
1393
+ }
1394
+ .embla__dot:after {
1395
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1396
+ width: var(
1397
+ --_ctm-mob-dn-pn-ds-dt-se,
1398
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1399
+ );
1400
+ height: var(
1401
+ --_ctm-mob-dn-pn-ds-dt-se,
1402
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1403
+ );
1404
+
1405
+ border-radius: 50%;
1406
+ display: flex;
1407
+ align-items: center;
1408
+ content: "";
1409
+ }
1410
+ .embla__dot--selected:after {
1411
+ box-shadow: inset 0 0 0 1px var(--text-body);
1412
+ background-color: var(
1413
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
1414
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
1415
+ );
1416
+ }
1417
+ &[data-slider-control="Pagination Line"] {
1418
+ .embla__dot {
1419
+ width: var(
1420
+ --_ctm-mob-dn-pn-le-le-wh,
1421
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1422
+ );
1423
+
1424
+ height: var(
1425
+ --_ctm-mob-dn-pn-le-le-ht,
1426
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1427
+ );
1428
+
1429
+ background-color: var(
1430
+ --_ctm-mob-dn-pn-le-or-le-cr,
1431
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
1432
+ );
1433
+
1434
+ border-radius: 6px;
1435
+ }
1436
+ .embla__dot--selected:after {
1437
+ box-shadow: inset 0 0 0 1px var(--text-body);
1438
+ border-radius: 6px;
1439
+ width: var(
1440
+ --_ctm-mob-dn-pn-le-le-wh,
1441
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1442
+ );
1443
+
1444
+ height: var(
1445
+ --_ctm-mob-dn-pn-le-le-ht,
1446
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1447
+ );
1448
+
1449
+ // background-color: #fff;
1450
+ background-color: var(
1451
+ --_ctm-mob-dn-pn-le-ct-le-cr,
1452
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
1453
+ );
1454
+ }
1455
+ }
1456
+ }
1457
+
1458
+ .embla__thumbs {
1459
+ width: 100%;
1460
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1461
+
1462
+ position: relative;
1463
+ display: grid;
1464
+ grid-template-columns: 1fr;
1465
+ overflow: hidden;
1466
+ // margin: 10px;
1467
+ padding: 10px;
1468
+
1469
+ .embla__thumbs__viewport {
1470
+ width: 100%;
1471
+ height: 100%;
1472
+ position: relative;
1473
+ display: flex;
1474
+ flex-direction: column;
1475
+
1476
+ overflow: hidden;
1477
+ }
1478
+ .embla__thumbs__container {
1479
+ display: flex;
1480
+ flex-direction: row;
1481
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
1482
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
1483
+
1484
+ width: 100%;
1485
+ justify-content: center;
1486
+ // height: 200px;
1487
+
1488
+ .embla__thumbs__slide {
1489
+ // min-width: var(--_ctm-lt-tl-se);
1490
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1491
+
1492
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1493
+
1494
+ & img {
1495
+ width: 100%;
1496
+ height: 100%;
1497
+ object-fit: contain;
1498
+ }
1499
+ }
1500
+ }
1501
+ }
1502
+ }
1503
+
1504
+ .gallery__slide {
1505
+ img[data-has-link="true"] {
1506
+ cursor: pointer;
1507
+ }
1508
+ width: 100%;
1509
+ height: 100%;
1510
+ display: flex;
1511
+ // flex-direction: column;
1512
+
1513
+ background-color: var(
1514
+ --_ctm-mob-dn-im-se-bd-cr,
1515
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
1516
+ );
1517
+ border-color: var(
1518
+ --_ctm-mob-dn-im-se-br-cr,
1519
+ var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
1520
+ );
1521
+ border-style: var(
1522
+ --_ctm-mob-dn-im-se-br-se,
1523
+ var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
1524
+ );
1525
+ border-width: var(
1526
+ --_ctm-mob-dn-im-se-br-wh,
1527
+ var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
1528
+ );
1529
+ border-radius: var(
1530
+ --_ctm-mob-dn-im-se-br-rs,
1531
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
1532
+ );
1533
+
1534
+ box-shadow: var(
1535
+ --_show-shadow,
1536
+ var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
1537
+ var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
1538
+ var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
1539
+ var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
1540
+ );
1541
+
1542
+ gap: var(
1543
+ --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
1544
+ var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
1545
+ );
1546
+
1547
+ .gallery-header {
1548
+ display: flex;
1549
+ flex-direction: column;
1550
+ gap: var(
1551
+ --_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
1552
+ var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
1553
+ );
1554
+ padding-block: var(
1555
+ --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
1556
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
1557
+ );
1558
+ padding-inline: var(
1559
+ --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
1560
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
1561
+ );
1562
+ background-color: var(
1563
+ --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
1564
+ var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
1565
+ );
1566
+ width: 100%;
1567
+ border-color: var(
1568
+ --_ctm-mob-dn-im-tt-cr-dn-br-cr,
1569
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
1570
+ );
1571
+ border-style: var(
1572
+ --_ctm-mob-dn-im-tt-cr-dn-br-se,
1573
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
1574
+ );
1575
+ border-width: var(
1576
+ --_ctm-mob-dn-im-tt-cr-dn-br-wh,
1577
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
1578
+ );
1579
+ border-radius: var(
1580
+ --_ctm-mob-dn-im-tt-cr-dn-br-rs,
1581
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
1582
+ );
1583
+
1584
+ box-shadow: var(
1585
+ --_show-shadow,
1586
+ var(
1587
+ --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
1588
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
1589
+ )
1590
+ var(
1591
+ --_ctm-mob-dn-im-tt-cr-dn-sw-br,
1592
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
1593
+ )
1594
+ var(
1595
+ --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
1596
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
1597
+ )
1598
+ var(
1599
+ --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
1600
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
1601
+ )
1602
+ );
1603
+
1604
+ & h3 {
1605
+ color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
1606
+ font-family:
1607
+ var(
1608
+ --_ctm-mob-dn-im-se-ft-fy,
1609
+ var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1610
+ ),
1611
+ sans-serif;
1612
+ font-size: var(
1613
+ --_ctm-mob-dn-im-se-ft-se,
1614
+ var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
1615
+ );
1616
+ font-weight: var(
1617
+ --_ctm-mob-dn-im-se-ft-wt,
1618
+ var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
1619
+ );
1620
+ font-style: var(
1621
+ --_ctm-mob-dn-im-se-ft-se-ic,
1622
+ var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
1623
+ );
1624
+ text-align: var(
1625
+ --_ctm-mob-dn-im-se-tt-an,
1626
+ var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
1627
+ );
1628
+ letter-spacing: var(
1629
+ --_ctm-mob-dn-im-se-lr-sg,
1630
+ var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
1631
+ );
1632
+ line-height: var(
1633
+ --_ctm-mob-dn-im-se-le-ht,
1634
+ var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
1635
+ );
1636
+ text-decoration: var(
1637
+ --_ctm-mob-dn-im-se-ue,
1638
+ var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
1639
+ );
1640
+ }
1641
+
1642
+ & p {
1643
+ color: var(
1644
+ --_ctm-mob-dn-im-se-cr-dc,
1645
+ var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
1646
+ );
1647
+ font-family:
1648
+ var(
1649
+ --_ctm-mob-dn-im-se-ft-fy-dc,
1650
+ var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1651
+ ),
1652
+ sans-serif;
1653
+ font-size: var(
1654
+ --_ctm-mob-dn-im-se-ft-se-dc,
1655
+ var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
1656
+ );
1657
+ font-weight: var(
1658
+ --_ctm-mob-dn-im-se-ft-wt-dc,
1659
+ var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
1660
+ );
1661
+ font-style: var(
1662
+ --_ctm-mob-dn-im-se-ft-se-ic-dc,
1663
+ var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
1664
+ );
1665
+ text-align: var(
1666
+ --_ctm-mob-dn-im-se-tt-an-dc,
1667
+ var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
1668
+ );
1669
+ letter-spacing: var(
1670
+ --_ctm-mob-dn-im-se-lr-sg-dc,
1671
+ var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
1672
+ );
1673
+ line-height: var(
1674
+ --_ctm-mob-dn-im-se-le-ht-dc,
1675
+ var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
1676
+ );
1677
+ text-decoration: var(
1678
+ --_ctm-mob-dn-im-se-ue-dc,
1679
+ var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
1680
+ );
1681
+ }
1682
+ }
1683
+
1684
+ img {
1685
+ object-fit: contain;
1686
+ }
1687
+ &[data-text-position="On Image"] {
1688
+ .gallery-header {
1689
+ width: 100%;
1690
+ // height: 100%;
1691
+ position: absolute;
1692
+ }
1693
+
1694
+ &[data-widget-alignment="top"] {
1695
+ // align-items: flex-start;
1696
+
1697
+ .gallery-header {
1698
+ top: 0;
1699
+
1700
+ justify-content: flex-start;
1701
+ }
1702
+ }
1703
+ &[data-widget-alignment="center"] {
1704
+ // align-items: center;
1705
+
1706
+ .gallery-header {
1707
+ top: 50%;
1708
+ transform: translateY(-50%);
1709
+ justify-content: center;
1710
+ }
1711
+ }
1712
+ &[data-widget-alignment="bottom"] {
1713
+ // align-items: flex-end;
1714
+ .gallery-header {
1715
+ bottom: 0;
1716
+
1717
+ justify-content: flex-end;
1718
+ }
1719
+ }
1720
+ }
1721
+
1722
+ &[data-text-position="top"] {
1723
+ flex-direction: column;
1724
+ }
1725
+
1726
+ &[data-text-position="bottom"] {
1727
+ flex-direction: column-reverse;
1728
+ }
1729
+ &[data-text-position="left"] {
1730
+ flex-direction: row;
1731
+
1732
+ .gallery-header {
1733
+ width: fit-content;
1734
+ height: 100%;
1735
+ }
1736
+ &[data-widget-alignment="top"] {
1737
+ align-items: flex-start;
1738
+
1739
+ .gallery-header {
1740
+ justify-content: flex-start;
1741
+ }
1742
+ }
1743
+ &[data-widget-alignment="center"] {
1744
+ align-items: center;
1745
+
1746
+ .gallery-header {
1747
+ justify-content: center;
1748
+ }
1749
+ }
1750
+ &[data-widget-alignment="bottom"] {
1751
+ align-items: flex-end;
1752
+
1753
+ .gallery-header {
1754
+ justify-content: flex-end;
1755
+ }
1756
+ }
1757
+ }
1758
+ &[data-text-position="right"] {
1759
+ flex-direction: row-reverse;
1760
+ .gallery-header {
1761
+ width: fit-content;
1762
+ height: 100%;
1763
+ }
1764
+
1765
+ &[data-widget-alignment="top"] {
1766
+ align-items: flex-start;
1767
+
1768
+ .gallery-header {
1769
+ justify-content: flex-start;
1770
+ }
1771
+ }
1772
+ &[data-widget-alignment="center"] {
1773
+ align-items: center;
1774
+
1775
+ .gallery-header {
1776
+ justify-content: center;
1777
+ }
1778
+ }
1779
+ &[data-widget-alignment="bottom"] {
1780
+ align-items: flex-end;
1781
+
1782
+ .gallery-header {
1783
+ justify-content: flex-end;
1784
+ }
1785
+ }
1786
+ }
1787
+ img {
1788
+ width: 100%;
1789
+ height: 100%;
1790
+ // object-fit: cover;
1791
+
1792
+ // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
1793
+ // object-fit: cover;
1794
+
1795
+ &[data-has-title="true"] {
1796
+ height: 85%;
1797
+ }
1798
+
1799
+ /* display: block; */
1800
+ }
1801
+ }
1802
+
1803
+ .load__more__div {
1804
+ display: flex;
1805
+ justify-content: center;
1806
+ margin-block: 12px;
1807
+ & > button {
1808
+ padding-inline: 24px;
1809
+ border: 1px solid gray;
1810
+ padding-block: 12px;
1811
+ border-radius: 6px;
1812
+ }
1813
+ }
1814
+ }
1815
+ }