@sc-360-v2/storefront-cms-library 0.4.51 → 0.4.53

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