@sc-360-v2/storefront-cms-library 0.4.81 → 0.4.82

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