@sc-360-v2/storefront-cms-library 0.4.50 → 0.4.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/allocationDetails.scss +2253 -2247
  2. package/dist/builder.js +1 -1
  3. package/dist/cart-details.scss +3207 -3207
  4. package/dist/cart.scss +271 -269
  5. package/dist/cartAttributes.scss +932 -935
  6. package/dist/checkout.scss +6496 -6460
  7. package/dist/dropdownTemplate.scss +4 -1
  8. package/dist/filters.scss +2450 -2418
  9. package/dist/functions.scss +91 -1
  10. package/dist/icon-list.scss +277 -268
  11. package/dist/language-selector.scss +702 -528
  12. package/dist/layouter.scss +307 -294
  13. package/dist/login.scss +1605 -1473
  14. package/dist/menu-v2.scss +752 -730
  15. package/dist/my-templates.scss +464 -463
  16. package/dist/myTemplates.scss +5 -5
  17. package/dist/order-status.scss +1877 -1856
  18. package/dist/product-image-allocation.scss +1365 -0
  19. package/dist/product-image.scss +2 -1
  20. package/dist/product-sizechart.scss +1826 -1826
  21. package/dist/profile.scss +23 -20
  22. package/dist/repeater-embla-controls.scss +6 -0
  23. package/dist/repeater.scss +920 -915
  24. package/dist/search.scss +361 -296
  25. package/dist/section.scss +210 -209
  26. package/dist/static-global.scss +5 -0
  27. package/dist/types/builder/tools/element-edit/bundle.d.ts +13 -2
  28. package/dist/types/builder/tools/element-edit/cart.d.ts +1 -0
  29. package/dist/types/builder/tools/element-edit/common.d.ts +5 -0
  30. package/dist/types/builder/tools/element-edit/icon-list.d.ts +17 -0
  31. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  32. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  33. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  34. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -0
  35. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +2 -1
  36. package/dist/types/builder/tools/element-edit/search.d.ts +28 -0
  37. package/dist/types/builder/tools/element-edit/userElements.d.ts +48 -88
  38. package/dist/user-elements.scss +2555 -2471
  39. package/package.json +1 -1
package/dist/allocationDetails.scss CHANGED
@@ -1,2247 +1,2253 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
- [data-div-type="element"] {
8
- &[data-element-type="allocationDetails"] {
9
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
- width: var(
11
- --_sf-el-wh-st-mx,
12
- calc(
13
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
14
- )
15
- );
16
-
17
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
18
-
19
- & > div {
20
- &.wrapper {
21
- width: 100%;
22
- }
23
- }
24
- .loading__container {
25
- width: 100%;
26
- height: 25vh;
27
- display: flex;
28
- align-items: center;
29
- justify-content: center;
30
- }
31
- .allocation_details {
32
- background-color: var(
33
- --_ctm-mob-dn-wt-se-bd-cr,
34
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
35
- );
36
-
37
- border-color: var(
38
- --_ctm-mob-dn-wt-se-br-cr,
39
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
40
- );
41
-
42
- border-style: var(
43
- --_ctm-mob-dn-wt-se-br-se,
44
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
45
- );
46
-
47
- border-width: var(
48
- --_ctm-mob-dn-wt-se-br-wh,
49
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
50
- );
51
-
52
- border-radius: var(
53
- --_ctm-mob-dn-wt-se-br-rs,
54
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
55
- );
56
-
57
- box-shadow: var(
58
- --_show-shadow,
59
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
60
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
61
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
62
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
63
- );
64
-
65
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
66
- gap: var(
67
- --_ctm-mob-lt-it-ad-mn-qy-sg,
68
- var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
69
- );
70
- display: flex;
71
- flex-direction: column;
72
- // text css
73
- .title__wraper {
74
- background-color: var(
75
- --_ctm-mob-dn-te-bd-cr,
76
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
77
- );
78
-
79
- border-color: var(
80
- --_ctm-mob-dn-te-br-cr,
81
- var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
82
- );
83
-
84
- border-style: var(
85
- --_ctm-mob-dn-te-br-se,
86
- var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
87
- );
88
-
89
- border-width: var(
90
- --_ctm-mob-dn-te-br-wh,
91
- var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
92
- );
93
-
94
- border-radius: var(
95
- --_ctm-mob-dn-te-br-rs,
96
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
97
- );
98
-
99
- box-shadow: var(
100
- --_show-shadow,
101
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
102
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
103
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
104
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
105
- );
106
- white-space: nowrap;
107
-
108
- height: 100%;
109
- .title {
110
- color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
111
- font-family: var(
112
- --_ctm-mob-dn-te-ft-fy,
113
- var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
114
- );
115
- font-size: var(
116
- --_ctm-mob-dn-te-ft-se,
117
- var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se))
118
- );
119
- font-weight: var(
120
- --_ctm-mob-dn-te-ft-wt,
121
- var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt))
122
- );
123
- font-style: var(
124
- --_ctm-mob-dn-te-ft-se-ic,
125
- var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic))
126
- );
127
- text-align: var(
128
- --_ctm-mob-dn-te-tt-an,
129
- var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
130
- );
131
- letter-spacing: var(
132
- --_ctm-mob-dn-te-lr-sg,
133
- var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg))
134
- );
135
- line-height: var(
136
- --_ctm-mob-dn-te-le-ht,
137
- var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht))
138
- );
139
- text-decoration: var(--_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue)));
140
- padding: prepareMediaVariable(--_ctm-dn-te-pg);
141
- }
142
- }
143
-
144
- .product__showcase {
145
- width: 100%;
146
-
147
- // height: 100vh;/
148
- // overflow-y: auto;
149
-
150
- .allocation__item {
151
- display: flex;
152
- flex-direction: column;
153
- gap: 10px;
154
- background-color: var(
155
- --_ctm-mob-dn-an-an-im-bd-cr,
156
- var(--_ctm-tab-dn-an-an-im-bd-cr, var(--_ctm-dn-an-an-im-bd-cr))
157
- );
158
-
159
- border-color: var(
160
- --_ctm-mob-dn-an-an-im-br-cr,
161
- var(--_ctm-tab-dn-an-an-im-br-cr, var(--_ctm-dn-an-an-im-br-cr))
162
- );
163
-
164
- border-style: var(
165
- --_ctm-mob-dn-an-an-im-br-se,
166
- var(--_ctm-tab-dn-an-an-im-br-se, var(--_ctm-dn-an-an-im-br-se))
167
- );
168
-
169
- border-width: var(
170
- --_ctm-mob-dn-an-an-im-br-wh,
171
- var(--_ctm-tab-dn-an-an-im-br-wh, var(--_ctm-dn-an-an-im-br-wh))
172
- );
173
-
174
- border-radius: var(
175
- --_ctm-mob-dn-an-an-im-br-rs,
176
- var(--_ctm-tab-dn-an-an-im-br-rs, var(--_ctm-dn-an-an-im-br-rs))
177
- );
178
-
179
- box-shadow: var(
180
- --_show-shadow,
181
- var(
182
- --_ctm-mob-dn-an-an-im-sw-ae,
183
- var(--_ctm-tab-dn-an-an-im-sw-ae, var(--_ctm-dn-an-an-im-sw-ae))
184
- )
185
- var(
186
- --_ctm-mob-dn-an-an-im-sw-br,
187
- var(--_ctm-tab-dn-an-an-im-sw-br, var(--_ctm-dn-an-an-im-sw-br))
188
- )
189
- var(
190
- --_ctm-mob-dn-an-an-im-sw-sd,
191
- var(--_ctm-tab-dn-an-an-im-sw-sd, var(--_ctm-dn-an-an-im-sw-sd))
192
- )
193
- var(
194
- --_ctm-mob-dn-an-an-im-sw-cr,
195
- var(--_ctm-tab-dn-an-an-im-sw-cr, var(--_ctm-dn-an-an-im-sw-cr))
196
- )
197
- );
198
- padding: var(
199
- --_ctm-mob-dn-an-an-im-pg,
200
- var(--_ctm-tab-dn-an-an-im-pg, var(--_ctm-dn-an-an-im-pg))
201
- );
202
-
203
- .quota__left {
204
- background-color: var(
205
- --_ctm-mob-dn-an-qa-lt-bd-cr,
206
- var(--_ctm-tab-dn-an-qa-lt-bd-cr, var(--_ctm-dn-an-qa-lt-bd-cr))
207
- );
208
-
209
- border-color: var(
210
- --_ctm-mob-dn-an-qa-lt-br-cr,
211
- var(--_ctm-tab-dn-an-qa-lt-br-cr, var(--_ctm-dn-an-qa-lt-br-cr))
212
- );
213
-
214
- border-style: var(
215
- --_ctm-mob-dn-an-qa-lt-br-se,
216
- var(--_ctm-tab-dn-an-qa-lt-br-se, var(--_ctm-dn-an-qa-lt-br-se))
217
- );
218
-
219
- border-width: var(
220
- --_ctm-mob-dn-an-qa-lt-br-wh,
221
- var(--_ctm-tab-dn-an-qa-lt-br-wh, var(--_ctm-dn-an-qa-lt-br-wh))
222
- );
223
-
224
- border-radius: var(
225
- --_ctm-mob-dn-an-qa-lt-br-rs,
226
- var(--_ctm-tab-dn-an-qa-lt-br-rs, var(--_ctm-dn-an-qa-lt-br-rs))
227
- );
228
-
229
- box-shadow: var(
230
- --_show-shadow,
231
- var(
232
- --_ctm-mob-dn-an-qa-lt-sw-ae,
233
- var(--_ctm-tab-dn-an-qa-lt-sw-ae, var(--_ctm-dn-an-qa-lt-sw-ae))
234
- )
235
- var(
236
- --_ctm-mob-dn-an-qa-lt-sw-br,
237
- var(--_ctm-tab-dn-an-qa-lt-sw-br, var(--_ctm-dn-an-qa-lt-sw-br))
238
- )
239
- var(
240
- --_ctm-mob-dn-an-qa-lt-sw-sd,
241
- var(--_ctm-tab-dn-an-qa-lt-sw-sd, var(--_ctm-dn-an-qa-lt-sw-sd))
242
- )
243
- var(
244
- --_ctm-mob-dn-an-qa-lt-sw-cr,
245
- var(--_ctm-tab-dn-an-qa-lt-sw-cr, var(--_ctm-dn-an-qa-lt-sw-cr))
246
- )
247
- );
248
- white-space: nowrap;
249
-
250
- height: 100%;
251
-
252
- padding: prepareMediaVariable(--_ctm-dn-an-qa-lt-pg);
253
- .label {
254
- color: var(
255
- --_ctm-mob-dn-an-qa-lt-cr,
256
- var(--_ctm-tab-dn-an-qa-lt-cr, var(--_ctm-dn-an-qa-lt-cr))
257
- );
258
- font-family: var(
259
- --_ctm-mob-dn-an-qa-lt-ft-fy,
260
- var(--_ctm-tab-dn-an-qa-lt-ft-fy, var(--_ctm-dn-an-qa-lt-ft-fy))
261
- );
262
- font-size: var(
263
- --_ctm-mob-dn-an-qa-lt-ft-se,
264
- var(--_ctm-tab-dn-an-qa-lt-ft-se, var(--_ctm-dn-an-qa-lt-ft-se))
265
- );
266
- font-weight: var(
267
- --_ctm-mob-dn-an-qa-lt-ft-wt,
268
- var(--_ctm-tab-dn-an-qa-lt-ft-wt, var(--_ctm-dn-an-qa-lt-ft-wt))
269
- );
270
- font-style: var(
271
- --_ctm-mob-dn-an-qa-lt-ft-se-ic,
272
- var(--_ctm-tab-dn-an-qa-lt-ft-se-ic, var(--_ctm-dn-an-qa-lt-ft-se-ic))
273
- );
274
- text-align: var(
275
- --_ctm-mob-dn-an-qa-lt-tt-an,
276
- var(--_ctm-tab-dn-an-qa-lt-tt-an, var(--_ctm-dn-an-qa-lt-tt-an))
277
- );
278
- letter-spacing: var(
279
- --_ctm-mob-dn-an-qa-lt-lr-sg,
280
- var(--_ctm-tab-dn-an-qa-lt-lr-sg, var(--_ctm-dn-an-qa-lt-lr-sg))
281
- );
282
- line-height: var(
283
- --_ctm-mob-dn-an-qa-lt-le-ht,
284
- var(--_ctm-tab-dn-an-qa-lt-le-ht, var(--_ctm-dn-an-qa-lt-le-ht))
285
- );
286
- text-decoration: var(
287
- --_ctm-mob-dn-an-qa-lt-ue,
288
- var(--_ctm-tab-dn-an-qa-lt-ue, var(--_ctm-dn-an-qa-lt-ue))
289
- );
290
- }
291
- .value {
292
- // padding-block-end: var(--_sf-dc-pd-bt);
293
-
294
- color: var(
295
- --_ctm-mob-dn-an-qa-lt-cr-dc,
296
- var(--_ctm-tab-dn-an-qa-lt-cr-dc, var(--_ctm-dn-an-qa-lt-cr-dc))
297
- );
298
- font-family: var(
299
- --_ctm-mob-dn-an-qa-lt-ft-fy-dc,
300
- var(--_ctm-tab-dn-an-qa-lt-ft-fy-dc, var(--_ctm-dn-an-qa-lt-ft-fy-dc))
301
- );
302
- font-size: var(
303
- --_ctm-mob-dn-an-qa-lt-ft-se-dc,
304
- var(--_ctm-tab-dn-an-qa-lt-ft-se-dc, var(--_ctm-dn-an-qa-lt-ft-se-dc))
305
- );
306
- font-weight: var(
307
- --_ctm-mob-dn-an-qa-lt-ft-wt-dc,
308
- var(--_ctm-tab-dn-an-qa-lt-ft-wt-dc, var(--_ctm-dn-an-qa-lt-ft-wt-dc))
309
- );
310
- font-style: var(
311
- --_ctm-mob-dn-an-qa-lt-ft-se-ic-dc,
312
- var(--_ctm-tab-dn-an-qa-lt-ft-se-ic-dc, var(--_ctm-dn-an-qa-lt-ft-se-ic-dc))
313
- );
314
- text-align: var(
315
- --_ctm-mob-dn-an-qa-lt-tt-an-dc,
316
- var(--_ctm-tab-dn-an-qa-lt-tt-an-dc, var(--_ctm-dn-an-qa-lt-tt-an-dc))
317
- );
318
- letter-spacing: var(
319
- --_ctm-mob-dn-an-qa-lt-lr-sg-dc,
320
- var(--_ctm-tab-dn-an-qa-lt-lr-sg-dc, var(--_ctm-dn-an-qa-lt-lr-sg-dc))
321
- );
322
- line-height: var(
323
- --_ctm-mob-dn-an-qa-lt-le-ht-dc,
324
- var(--_ctm-tab-dn-an-qa-lt-le-ht-dc, var(--_ctm-dn-an-qa-lt-le-ht-dc))
325
- );
326
- text-decoration: var(
327
- --_ctm-mob-dn-an-qa-lt-ue-dc,
328
- var(--_ctm-tab-dn-an-qa-lt-ue-dc, var(--_ctm-dn-an-qa-lt-ue-dc))
329
- );
330
- }
331
- }
332
- .days__left {
333
- .label {
334
- color: var(
335
- --_ctm-mob-dn-an-es-in-cr,
336
- var(--_ctm-tab-dn-an-es-in-cr, var(--_ctm-dn-an-es-in-cr))
337
- );
338
- font-family: var(
339
- --_ctm-mob-dn-an-es-in-ft-fy,
340
- var(--_ctm-tab-dn-an-es-in-ft-fy, var(--_ctm-dn-an-es-in-ft-fy))
341
- );
342
- font-size: var(
343
- --_ctm-mob-dn-an-es-in-ft-se,
344
- var(--_ctm-tab-dn-an-es-in-ft-se, var(--_ctm-dn-an-es-in-ft-se))
345
- );
346
- font-weight: var(
347
- --_ctm-mob-dn-an-es-in-ft-wt,
348
- var(--_ctm-tab-dn-an-es-in-ft-wt, var(--_ctm-dn-an-es-in-ft-wt))
349
- );
350
- font-style: var(
351
- --_ctm-mob-dn-an-es-in-ft-se-ic,
352
- var(--_ctm-tab-dn-an-es-in-ft-se-ic, var(--_ctm-dn-an-es-in-ft-se-ic))
353
- );
354
- text-align: var(
355
- --_ctm-mob-dn-an-es-in-tt-an,
356
- var(--_ctm-tab-dn-an-es-in-tt-an, var(--_ctm-dn-an-es-in-tt-an))
357
- );
358
- letter-spacing: var(
359
- --_ctm-mob-dn-an-es-in-lr-sg,
360
- var(--_ctm-tab-dn-an-es-in-lr-sg, var(--_ctm-dn-an-es-in-lr-sg))
361
- );
362
- line-height: var(
363
- --_ctm-mob-dn-an-es-in-le-ht,
364
- var(--_ctm-tab-dn-an-es-in-le-ht, var(--_ctm-dn-an-es-in-le-ht))
365
- );
366
- text-decoration: var(
367
- --_ctm-mob-dn-an-es-in-ue,
368
- var(--_ctm-tab-dn-an-es-in-ue, var(--_ctm-dn-an-es-in-ue))
369
- );
370
- }
371
- .value {
372
- // padding-block-end: var(--_sf-dc-pd-bt);
373
-
374
- color: var(
375
- --_ctm-mob-dn-an-es-in-cr-dc,
376
- var(--_ctm-tab-dn-an-es-in-cr-dc, var(--_ctm-dn-an-es-in-cr-dc))
377
- );
378
- font-family: var(
379
- --_ctm-mob-dn-an-es-in-ft-fy-dc,
380
- var(--_ctm-tab-dn-an-es-in-ft-fy-dc, var(--_ctm-dn-an-es-in-ft-fy-dc))
381
- );
382
- font-size: var(
383
- --_ctm-mob-dn-an-es-in-ft-se-dc,
384
- var(--_ctm-tab-dn-an-es-in-ft-se-dc, var(--_ctm-dn-an-es-in-ft-se-dc))
385
- );
386
- font-weight: var(
387
- --_ctm-mob-dn-an-es-in-ft-wt-dc,
388
- var(--_ctm-tab-dn-an-es-in-ft-wt-dc, var(--_ctm-dn-an-es-in-ft-wt-dc))
389
- );
390
- font-style: var(
391
- --_ctm-mob-dn-an-es-in-ft-se-ic-dc,
392
- var(--_ctm-tab-dn-an-es-in-ft-se-ic-dc, var(--_ctm-dn-an-es-in-ft-se-ic-dc))
393
- );
394
- text-align: var(
395
- --_ctm-mob-dn-an-es-in-tt-an-dc,
396
- var(--_ctm-tab-dn-an-es-in-tt-an-dc, var(--_ctm-dn-an-es-in-tt-an-dc))
397
- );
398
- letter-spacing: var(
399
- --_ctm-mob-dn-an-es-in-lr-sg-dc,
400
- var(--_ctm-tab-dn-an-es-in-lr-sg-dc, var(--_ctm-dn-an-es-in-lr-sg-dc))
401
- );
402
- line-height: var(
403
- --_ctm-mob-dn-an-es-in-le-ht-dc,
404
- var(--_ctm-tab-dn-an-es-in-le-ht-dc, var(--_ctm-dn-an-es-in-le-ht-dc))
405
- );
406
- text-decoration: var(
407
- --_ctm-mob-dn-an-es-in-ue-dc,
408
- var(--_ctm-tab-dn-an-es-in-ue-dc, var(--_ctm-dn-an-es-in-ue-dc))
409
- );
410
- }
411
- }
412
-
413
- .allocation__name {
414
- background-color: var(
415
- --_ctm-mob-dn-an-an-ne-bd-cr,
416
- var(--_ctm-tab-dn-an-an-ne-bd-cr, var(--_ctm-dn-an-an-ne-bd-cr))
417
- );
418
-
419
- border-color: var(
420
- --_ctm-mob-dn-an-an-ne-br-cr,
421
- var(--_ctm-tab-dn-an-an-ne-br-cr, var(--_ctm-dn-an-an-ne-br-cr))
422
- );
423
-
424
- border-style: var(
425
- --_ctm-mob-dn-an-an-ne-br-se,
426
- var(--_ctm-tab-dn-an-an-ne-br-se, var(--_ctm-dn-an-an-ne-br-se))
427
- );
428
-
429
- border-width: var(
430
- --_ctm-mob-dn-an-an-ne-br-wh,
431
- var(--_ctm-tab-dn-an-an-ne-br-wh, var(--_ctm-dn-an-an-ne-br-wh))
432
- );
433
-
434
- border-radius: var(
435
- --_ctm-mob-dn-an-an-ne-br-rs,
436
- var(--_ctm-tab-dn-an-an-ne-br-rs, var(--_ctm-dn-an-an-ne-br-rs))
437
- );
438
-
439
- box-shadow: var(
440
- --_show-shadow,
441
- var(
442
- --_ctm-mob-dn-an-an-ne-sw-ae,
443
- var(--_ctm-tab-dn-an-an-ne-sw-ae, var(--_ctm-dn-an-an-ne-sw-ae))
444
- )
445
- var(
446
- --_ctm-mob-dn-an-an-ne-sw-br,
447
- var(--_ctm-tab-dn-an-an-ne-sw-br, var(--_ctm-dn-an-an-ne-sw-br))
448
- )
449
- var(
450
- --_ctm-mob-dn-an-an-ne-sw-sd,
451
- var(--_ctm-tab-dn-an-an-ne-sw-sd, var(--_ctm-dn-an-an-ne-sw-sd))
452
- )
453
- var(
454
- --_ctm-mob-dn-an-an-ne-sw-cr,
455
- var(--_ctm-tab-dn-an-an-ne-sw-cr, var(--_ctm-dn-an-an-ne-sw-cr))
456
- )
457
- );
458
- white-space: nowrap;
459
-
460
- color: var(
461
- --_ctm-mob-dn-an-an-ne-cr,
462
- var(--_ctm-tab-dn-an-an-ne-cr, var(--_ctm-dn-an-an-ne-cr))
463
- );
464
- font-family: var(
465
- --_ctm-mob-dn-an-an-ne-ft-fy,
466
- var(--_ctm-tab-dn-an-an-ne-ft-fy, var(--_ctm-dn-an-an-ne-ft-fy))
467
- );
468
- font-size: var(
469
- --_ctm-mob-dn-an-an-ne-ft-se,
470
- var(--_ctm-tab-dn-an-an-ne-ft-se, var(--_ctm-dn-an-an-ne-ft-se))
471
- );
472
- font-weight: var(
473
- --_ctm-mob-dn-an-an-ne-ft-wt,
474
- var(--_ctm-tab-dn-an-an-ne-ft-wt, var(--_ctm-dn-an-an-ne-ft-wt))
475
- );
476
- font-style: var(
477
- --_ctm-mob-dn-an-an-ne-ft-se-ic,
478
- var(--_ctm-tab-dn-an-an-ne-ft-se-ic, var(--_ctm-dn-an-an-ne-ft-se-ic))
479
- );
480
- text-align: var(
481
- --_ctm-mob-dn-an-an-ne-tt-an,
482
- var(--_ctm-tab-dn-an-an-ne-tt-an, var(--_ctm-dn-an-an-ne-tt-an))
483
- );
484
- letter-spacing: var(
485
- --_ctm-mob-dn-an-an-ne-lr-sg,
486
- var(--_ctm-tab-dn-an-an-ne-lr-sg, var(--_ctm-dn-an-an-ne-lr-sg))
487
- );
488
- line-height: var(
489
- --_ctm-mob-dn-an-an-ne-le-ht,
490
- var(--_ctm-tab-dn-an-an-ne-le-ht, var(--_ctm-dn-an-an-ne-le-ht))
491
- );
492
- text-decoration: var(
493
- --_ctm-mob-dn-an-an-ne-ue,
494
- var(--_ctm-tab-dn-an-an-ne-ue, var(--_ctm-dn-an-an-ne-ue))
495
- );
496
- padding: prepareMediaVariable(--_ctm-dn-an-an-ne-pg);
497
- }
498
- }
499
-
500
- .main__header {
501
- display: flex;
502
- justify-content: space-between;
503
- align-items: center;
504
- // padding: 16px 0;
505
- // margin-bottom: 16px;
506
- // border-bottom: var(--Gray-500, #eaecf0) 1px solid;
507
-
508
- .section__title {
509
- color: var(--Gray-900, #101828);
510
-
511
- font-size: 20px;
512
- font-style: normal;
513
- font-weight: 700;
514
- line-height: 30px;
515
- margin: 0px;
516
- h3 {
517
- display: flex;
518
- align-items: center;
519
- font-size: 20px;
520
- .text__secondary {
521
- color: var(--Gray-iron-500, #70707b);
522
- font-size: 16px;
523
-
524
- font-size: 16px;
525
- font-style: normal;
526
- font-weight: 400;
527
- line-height: 18px;
528
- padding-left: 8px;
529
- .text__primary {
530
- color: #243dc6;
531
- font-size: 16px;
532
- }
533
- }
534
- }
535
- .section__desc {
536
- color: var(--Gray-iron-500, #70707b);
537
-
538
- font-size: 16px;
539
- font-style: normal;
540
- font-weight: 400;
541
- line-height: 18px;
542
- margin: 0px;
543
- span {
544
- color: var(--Gray-900, #101828);
545
-
546
- font-size: 16px;
547
- font-style: normal;
548
- font-weight: 600;
549
- line-height: 24px;
550
- }
551
- }
552
- }
553
- .button__group {
554
- display: flex;
555
- gap: 12px;
556
- }
557
- .product__views {
558
- display: flex;
559
- background-color: #fff;
560
- border: 1px solid var(--_gray-300);
561
- border-radius: 6px;
562
- height: 40px;
563
- overflow: hidden;
564
-
565
- .btn {
566
- display: inline-block;
567
- padding: 8px;
568
- display: flex;
569
- align-items: center;
570
- justify-content: center;
571
- cursor: pointer;
572
- button {
573
- display: flex;
574
- }
575
- &:hover {
576
- background-color: var(--_gray-100);
577
- }
578
- &.active {
579
- background-color: #ced4f6;
580
- button {
581
- svg {
582
- path {
583
- stroke: var(--_primary-500);
584
- }
585
- }
586
- }
587
- }
588
- &:first-child {
589
- border-right: 1px solid var(--_gray-200);
590
- }
591
- }
592
- }
593
- }
594
- // products header styles
595
- .showcase__header {
596
- display: flex;
597
- justify-content: space-between;
598
- padding: 16px 0;
599
- margin-bottom: 16px;
600
- border-bottom: var(--Gray-200, #eaecf0) 1px solid;
601
- .quota__details {
602
- display: flex;
603
- align-items: center;
604
- gap: 8px;
605
- }
606
-
607
- .button__group {
608
- display: flex;
609
- gap: 12px;
610
- }
611
- .product__views {
612
- display: flex;
613
- background-color: #fff;
614
- border: 1px solid var(--_gray-300);
615
- border-radius: 6px;
616
- height: 40px;
617
- overflow: hidden;
618
-
619
- .btn {
620
- display: inline-block;
621
- padding: 8px;
622
- display: flex;
623
- align-items: center;
624
- justify-content: center;
625
- cursor: pointer;
626
- button {
627
- display: flex;
628
- }
629
- &:hover {
630
- background-color: var(--_gray-100);
631
- }
632
- &.active {
633
- background-color: #ced4f6;
634
- button {
635
- svg {
636
- path {
637
- stroke: var(--_primary-500);
638
- }
639
- }
640
- }
641
- }
642
- &:first-child {
643
- border-right: 1px solid var(--_gray-200);
644
- }
645
- }
646
- }
647
- }
648
-
649
- // add to cart button styles
650
- .primary__btn {
651
- display: flex;
652
- gap: 8px;
653
- height: 44px;
654
- padding: 8px 14px;
655
- background-color: var(--_primary-500);
656
- border-radius: 6px;
657
- color: #fff;
658
- font-weight: 600;
659
- height: 40px;
660
- display: inline-flex;
661
- cursor: pointer;
662
- &:hover {
663
- background-color: var(--_primary-500);
664
- }
665
- &.disable__btn {
666
- cursor: not-allowed;
667
- opacity: 0.5;
668
- }
669
- }
670
-
671
- // product list styles
672
- .showcase__product__list {
673
- .product__card {
674
- .category__image {
675
- width: 100%;
676
- height: 100%;
677
- object-fit: cover;
678
- }
679
- }
680
- &[data-list-view="grid"] {
681
- // grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
682
- grid-template-columns: repeat(
683
- var(
684
- --_ctm-mob-dn-an-an-im-is-pr-rw,
685
- var(--_ctm-tab-dn-an-an-im-is-pr-rw, var(--_ctm-dn-an-an-im-is-pr-rw))
686
- ),
687
- 1fr
688
- );
689
- // gap: 24px;
690
- .product__card {
691
- flex-direction: column;
692
- .card__img__container {
693
- width: 100%;
694
- }
695
- }
696
- }
697
-
698
- &[data-list-view="list"] {
699
- grid-template-columns: auto;
700
- .product__card {
701
- flex-direction: row;
702
- align-items: center;
703
- // gap: 24px;
704
- .card__img__container {
705
- width: 250px;
706
- }
707
- }
708
- }
709
- display: grid;
710
- gap: var(
711
- --_ctm-mob-dn-an-an-im-im-gp,
712
- var(--_ctm-tab-dn-an-an-im-im-gp, var(--_ctm-dn-an-an-im-im-gp))
713
- );
714
-
715
- .product__card {
716
- // product card styles
717
- display: flex;
718
- gap: 12px;
719
-
720
- background-color: var(
721
- --_ctm-mob-dn-im-cd-bd-cr,
722
- var(--_ctm-tab-dn-im-cd-bd-cr, var(--_ctm-dn-im-cd-bd-cr))
723
- );
724
-
725
- border-color: var(
726
- --_ctm-mob-dn-im-cd-br-cr,
727
- var(--_ctm-tab-dn-im-cd-br-cr, var(--_ctm-dn-im-cd-br-cr))
728
- );
729
-
730
- border-style: var(
731
- --_ctm-mob-dn-im-cd-br-se,
732
- var(--_ctm-tab-dn-im-cd-br-se, var(--_ctm-dn-im-cd-br-se))
733
- );
734
-
735
- border-width: var(
736
- --_ctm-mob-dn-im-cd-br-wh,
737
- var(--_ctm-tab-dn-im-cd-br-wh, var(--_ctm-dn-im-cd-br-wh))
738
- );
739
-
740
- border-radius: var(
741
- --_ctm-mob-dn-im-cd-br-rs,
742
- var(--_ctm-tab-dn-im-cd-br-rs, var(--_ctm-dn-im-cd-br-rs))
743
- );
744
-
745
- box-shadow: var(
746
- --_show-shadow,
747
- var(
748
- --_ctm-mob-dn-im-cd-sw-ae,
749
- var(--_ctm-tab-dn-im-cd-sw-ae, var(--_ctm-dn-im-cd-sw-ae))
750
- )
751
- var(
752
- --_ctm-mob-dn-im-cd-sw-br,
753
- var(--_ctm-tab-dn-im-cd-sw-br, var(--_ctm-dn-im-cd-sw-br))
754
- )
755
- var(
756
- --_ctm-mob-dn-im-cd-sw-sd,
757
- var(--_ctm-tab-dn-im-cd-sw-sd, var(--_ctm-dn-im-cd-sw-sd))
758
- )
759
- var(
760
- --_ctm-mob-dn-im-cd-sw-cr,
761
- var(--_ctm-tab-dn-im-cd-sw-cr, var(--_ctm-dn-im-cd-sw-cr))
762
- )
763
- );
764
- padding: var(
765
- --_ctm-mob-dn-im-cd-pg,
766
- var(--_ctm-tab-dn-im-cd-pg, var(--_ctm-dn-im-cd-pg))
767
- );
768
- .card__img__container {
769
- height: 300px;
770
- background-color: #fff;
771
- display: flex;
772
- align-items: flex-start;
773
- justify-content: center;
774
- border-radius: 6px;
775
- .placeholder__image {
776
- width: 100%;
777
- height: 100%;
778
- object-fit: cover;
779
- }
780
- }
781
- .price_details {
782
- display: flex;
783
- flex-direction: column;
784
- gap: 8px;
785
-
786
- .product__name {
787
- background-color: var(
788
- --_ctm-mob-dn-ne-bd-cr,
789
- var(--_ctm-tab-dn-ne-bd-cr, var(--_ctm-dn-ne-bd-cr))
790
- );
791
-
792
- border-color: var(
793
- --_ctm-mob-dn-ne-br-cr,
794
- var(--_ctm-tab-dn-ne-br-cr, var(--_ctm-dn-ne-br-cr))
795
- );
796
-
797
- border-style: var(
798
- --_ctm-mob-dn-ne-br-se,
799
- var(--_ctm-tab-dn-ne-br-se, var(--_ctm-dn-ne-br-se))
800
- );
801
-
802
- border-width: var(
803
- --_ctm-mob-dn-ne-br-wh,
804
- var(--_ctm-tab-dn-ne-br-wh, var(--_ctm-dn-ne-br-wh))
805
- );
806
-
807
- border-radius: var(
808
- --_ctm-mob-dn-ne-br-rs,
809
- var(--_ctm-tab-dn-ne-br-rs, var(--_ctm-dn-ne-br-rs))
810
- );
811
-
812
- box-shadow: var(
813
- --_show-shadow,
814
- var(--_ctm-mob-dn-ne-sw-ae, var(--_ctm-tab-dn-ne-sw-ae, var(--_ctm-dn-ne-sw-ae)))
815
- var(
816
- --_ctm-mob-dn-ne-sw-br,
817
- var(--_ctm-tab-dn-ne-sw-br, var(--_ctm-dn-ne-sw-br))
818
- )
819
- var(
820
- --_ctm-mob-dn-ne-sw-sd,
821
- var(--_ctm-tab-dn-ne-sw-sd, var(--_ctm-dn-ne-sw-sd))
822
- )
823
- var(
824
- --_ctm-mob-dn-ne-sw-cr,
825
- var(--_ctm-tab-dn-ne-sw-cr, var(--_ctm-dn-ne-sw-cr))
826
- )
827
- );
828
- white-space: nowrap;
829
-
830
- height: 100%;
831
-
832
- color: var(--_ctm-mob-dn-ne-cr, var(--_ctm-tab-dn-ne-cr, var(--_ctm-dn-ne-cr)));
833
- font-family: var(
834
- --_ctm-mob-dn-ne-ft-fy,
835
- var(--_ctm-tab-dn-ne-ft-fy, var(--_ctm-dn-ne-ft-fy))
836
- );
837
- font-size: var(
838
- --_ctm-mob-dn-ne-ft-se,
839
- var(--_ctm-tab-dn-ne-ft-se, var(--_ctm-dn-ne-ft-se))
840
- );
841
- font-weight: var(
842
- --_ctm-mob-dn-ne-ft-wt,
843
- var(--_ctm-tab-dn-ne-ft-wt, var(--_ctm-dn-ne-ft-wt))
844
- );
845
- font-style: var(
846
- --_ctm-mob-dn-ne-ft-se-ic,
847
- var(--_ctm-tab-dn-ne-ft-se-ic, var(--_ctm-dn-ne-ft-se-ic))
848
- );
849
- text-align: var(
850
- --_ctm-mob-dn-ne-tt-an,
851
- var(--_ctm-tab-dn-ne-tt-an, var(--_ctm-dn-ne-tt-an))
852
- );
853
- letter-spacing: var(
854
- --_ctm-mob-dn-ne-lr-sg,
855
- var(--_ctm-tab-dn-ne-lr-sg, var(--_ctm-dn-ne-lr-sg))
856
- );
857
- line-height: var(
858
- --_ctm-mob-dn-ne-le-ht,
859
- var(--_ctm-tab-dn-ne-le-ht, var(--_ctm-dn-ne-le-ht))
860
- );
861
- text-decoration: var(
862
- --_ctm-mob-dn-ne-ue,
863
- var(--_ctm-tab-dn-ne-ue, var(--_ctm-dn-ne-ue))
864
- );
865
- padding: prepareMediaVariable(--_ctm-dn-ne-pg);
866
- &[data-has-link="true"] {
867
- cursor: pointer;
868
- &:hover {
869
- color: var(--_primary-500);
870
- }
871
- }
872
- }
873
- .brand__container {
874
- display: flex;
875
- align-items: center;
876
- gap: 8px;
877
- color: var(--_gray-600);
878
- font-weight: 500;
879
- }
880
- }
881
-
882
- .brand {
883
- display: flex;
884
- align-items: center;
885
- gap: 6px;
886
-
887
- .value {
888
- // padding-block-end: var(--_sf-dc-pd-bt);
889
-
890
- color: var(
891
- --_ctm-mob-dn-bd-cr-dc,
892
- var(--_ctm-tab-dn-bd-cr-dc, var(--_ctm-dn-bd-cr-dc))
893
- );
894
- font-family: var(
895
- --_ctm-mob-dn-bd-ft-fy-dc,
896
- var(--_ctm-tab-dn-bd-ft-fy-dc, var(--_ctm-dn-bd-ft-fy-dc))
897
- );
898
- font-size: var(
899
- --_ctm-mob-dn-bd-ft-se-dc,
900
- var(--_ctm-tab-dn-bd-ft-se-dc, var(--_ctm-dn-bd-ft-se-dc))
901
- );
902
- font-weight: var(
903
- --_ctm-mob-dn-bd-ft-wt-dc,
904
- var(--_ctm-tab-dn-bd-ft-wt-dc, var(--_ctm-dn-bd-ft-wt-dc))
905
- );
906
- font-style: var(
907
- --_ctm-mob-dn-bd-ft-se-ic-dc,
908
- var(--_ctm-tab-dn-bd-ft-se-ic-dc, var(--_ctm-dn-bd-ft-se-ic-dc))
909
- );
910
- text-align: var(
911
- --_ctm-mob-dn-bd-tt-an-dc,
912
- var(--_ctm-tab-dn-bd-tt-an-dc, var(--_ctm-dn-bd-tt-an-dc))
913
- );
914
- letter-spacing: var(
915
- --_ctm-mob-dn-bd-lr-sg-dc,
916
- var(--_ctm-tab-dn-bd-lr-sg-dc, var(--_ctm-dn-bd-lr-sg-dc))
917
- );
918
- line-height: var(
919
- --_ctm-mob-dn-bd-le-ht-dc,
920
- var(--_ctm-tab-dn-bd-le-ht-dc, var(--_ctm-dn-bd-le-ht-dc))
921
- );
922
- text-decoration: var(
923
- --_ctm-mob-dn-bd-ue-dc,
924
- var(--_ctm-tab-dn-bd-ue-dc, var(--_ctm-dn-bd-ue-dc))
925
- );
926
- }
927
- .label {
928
- color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
929
- font-family: var(
930
- --_ctm-mob-dn-bd-ft-fy,
931
- var(--_ctm-tab-dn-bd-ft-fy, var(--_ctm-dn-bd-ft-fy))
932
- );
933
- font-size: var(
934
- --_ctm-mob-dn-bd-ft-se,
935
- var(--_ctm-tab-dn-bd-ft-se, var(--_ctm-dn-bd-ft-se))
936
- );
937
- font-weight: var(
938
- --_ctm-mob-dn-bd-ft-wt,
939
- var(--_ctm-tab-dn-bd-ft-wt, var(--_ctm-dn-bd-ft-wt))
940
- );
941
- font-style: var(
942
- --_ctm-mob-dn-bd-ft-se-ic,
943
- var(--_ctm-tab-dn-bd-ft-se-ic, var(--_ctm-dn-bd-ft-se-ic))
944
- );
945
- text-align: var(
946
- --_ctm-mob-dn-bd-tt-an,
947
- var(--_ctm-tab-dn-bd-tt-an, var(--_ctm-dn-bd-tt-an))
948
- );
949
- letter-spacing: var(
950
- --_ctm-mob-dn-bd-lr-sg,
951
- var(--_ctm-tab-dn-bd-lr-sg, var(--_ctm-dn-bd-lr-sg))
952
- );
953
- line-height: var(
954
- --_ctm-mob-dn-bd-le-ht,
955
- var(--_ctm-tab-dn-bd-le-ht, var(--_ctm-dn-bd-le-ht))
956
- );
957
- text-decoration: var(
958
- --_ctm-mob-dn-bd-ue,
959
- var(--_ctm-tab-dn-bd-ue, var(--_ctm-dn-bd-ue))
960
- );
961
- }
962
- }
963
- .code {
964
- display: flex;
965
- align-items: center;
966
- gap: 6px;
967
-
968
- .value {
969
- // padding-block-end: var(--_sf-dc-pd-bt);
970
-
971
- color: var(
972
- --_ctm-mob-dn-ce-cr-dc,
973
- var(--_ctm-tab-dn-ce-cr-dc, var(--_ctm-dn-ce-cr-dc))
974
- );
975
- font-family: var(
976
- --_ctm-mob-dn-ce-ft-fy-dc,
977
- var(--_ctm-tab-dn-ce-ft-fy-dc, var(--_ctm-dn-ce-ft-fy-dc))
978
- );
979
- font-size: var(
980
- --_ctm-mob-dn-ce-ft-se-dc,
981
- var(--_ctm-tab-dn-ce-ft-se-dc, var(--_ctm-dn-ce-ft-se-dc))
982
- );
983
- font-weight: var(
984
- --_ctm-mob-dn-ce-ft-wt-dc,
985
- var(--_ctm-tab-dn-ce-ft-wt-dc, var(--_ctm-dn-ce-ft-wt-dc))
986
- );
987
- font-style: var(
988
- --_ctm-mob-dn-ce-ft-se-ic-dc,
989
- var(--_ctm-tab-dn-ce-ft-se-ic-dc, var(--_ctm-dn-ce-ft-se-ic-dc))
990
- );
991
- text-align: var(
992
- --_ctm-mob-dn-ce-tt-an-dc,
993
- var(--_ctm-tab-dn-ce-tt-an-dc, var(--_ctm-dn-ce-tt-an-dc))
994
- );
995
- letter-spacing: var(
996
- --_ctm-mob-dn-ce-lr-sg-dc,
997
- var(--_ctm-tab-dn-ce-lr-sg-dc, var(--_ctm-dn-ce-lr-sg-dc))
998
- );
999
- line-height: var(
1000
- --_ctm-mob-dn-ce-le-ht-dc,
1001
- var(--_ctm-tab-dn-ce-le-ht-dc, var(--_ctm-dn-ce-le-ht-dc))
1002
- );
1003
- text-decoration: var(
1004
- --_ctm-mob-dn-ce-ue-dc,
1005
- var(--_ctm-tab-dn-ce-ue-dc, var(--_ctm-dn-ce-ue-dc))
1006
- );
1007
- }
1008
- .label {
1009
- color: var(--_ctm-mob-dn-ce-cr, var(--_ctm-tab-dn-ce-cr, var(--_ctm-dn-ce-cr)));
1010
- font-family: var(
1011
- --_ctm-mob-dn-ce-ft-fy,
1012
- var(--_ctm-tab-dn-ce-ft-fy, var(--_ctm-dn-ce-ft-fy))
1013
- );
1014
- font-size: var(
1015
- --_ctm-mob-dn-ce-ft-se,
1016
- var(--_ctm-tab-dn-ce-ft-se, var(--_ctm-dn-ce-ft-se))
1017
- );
1018
- font-weight: var(
1019
- --_ctm-mob-dn-ce-ft-wt,
1020
- var(--_ctm-tab-dn-ce-ft-wt, var(--_ctm-dn-ce-ft-wt))
1021
- );
1022
- font-style: var(
1023
- --_ctm-mob-dn-ce-ft-se-ic,
1024
- var(--_ctm-tab-dn-ce-ft-se-ic, var(--_ctm-dn-ce-ft-se-ic))
1025
- );
1026
- text-align: var(
1027
- --_ctm-mob-dn-ce-tt-an,
1028
- var(--_ctm-tab-dn-ce-tt-an, var(--_ctm-dn-ce-tt-an))
1029
- );
1030
- letter-spacing: var(
1031
- --_ctm-mob-dn-ce-lr-sg,
1032
- var(--_ctm-tab-dn-ce-lr-sg, var(--_ctm-dn-ce-lr-sg))
1033
- );
1034
- line-height: var(
1035
- --_ctm-mob-dn-ce-le-ht,
1036
- var(--_ctm-tab-dn-ce-le-ht, var(--_ctm-dn-ce-le-ht))
1037
- );
1038
- text-decoration: var(
1039
- --_ctm-mob-dn-ce-ue,
1040
- var(--_ctm-tab-dn-ce-ue, var(--_ctm-dn-ce-ue))
1041
- );
1042
- }
1043
- }
1044
- .price {
1045
- background-color: var(
1046
- --_ctm-mob-dn-pe-bd-cr,
1047
- var(--_ctm-tab-dn-pe-bd-cr, var(--_ctm-dn-pe-bd-cr))
1048
- );
1049
-
1050
- border-color: var(
1051
- --_ctm-mob-dn-pe-br-cr,
1052
- var(--_ctm-tab-dn-pe-br-cr, var(--_ctm-dn-pe-br-cr))
1053
- );
1054
-
1055
- border-style: var(
1056
- --_ctm-mob-dn-pe-br-se,
1057
- var(--_ctm-tab-dn-pe-br-se, var(--_ctm-dn-pe-br-se))
1058
- );
1059
-
1060
- border-width: var(
1061
- --_ctm-mob-dn-pe-br-wh,
1062
- var(--_ctm-tab-dn-pe-br-wh, var(--_ctm-dn-pe-br-wh))
1063
- );
1064
-
1065
- border-radius: var(
1066
- --_ctm-mob-dn-pe-br-rs,
1067
- var(--_ctm-tab-dn-pe-br-rs, var(--_ctm-dn-pe-br-rs))
1068
- );
1069
-
1070
- box-shadow: var(
1071
- --_show-shadow,
1072
- var(--_ctm-mob-dn-pe-sw-ae, var(--_ctm-tab-dn-pe-sw-ae, var(--_ctm-dn-pe-sw-ae)))
1073
- var(--_ctm-mob-dn-pe-sw-br, var(--_ctm-tab-dn-pe-sw-br, var(--_ctm-dn-pe-sw-br)))
1074
- var(--_ctm-mob-dn-pe-sw-sd, var(--_ctm-tab-dn-pe-sw-sd, var(--_ctm-dn-pe-sw-sd)))
1075
- var(--_ctm-mob-dn-pe-sw-cr, var(--_ctm-tab-dn-pe-sw-cr, var(--_ctm-dn-pe-sw-cr)))
1076
- );
1077
- white-space: nowrap;
1078
-
1079
- height: 100%;
1080
-
1081
- color: var(--_ctm-mob-dn-pe-cr, var(--_ctm-tab-dn-pe-cr, var(--_ctm-dn-pe-cr)));
1082
- font-family: var(
1083
- --_ctm-mob-dn-pe-ft-fy,
1084
- var(--_ctm-tab-dn-pe-ft-fy, var(--_ctm-dn-pe-ft-fy))
1085
- );
1086
- font-size: var(
1087
- --_ctm-mob-dn-pe-ft-se,
1088
- var(--_ctm-tab-dn-pe-ft-se, var(--_ctm-dn-pe-ft-se))
1089
- );
1090
- font-weight: var(
1091
- --_ctm-mob-dn-pe-ft-wt,
1092
- var(--_ctm-tab-dn-pe-ft-wt, var(--_ctm-dn-pe-ft-wt))
1093
- );
1094
- font-style: var(
1095
- --_ctm-mob-dn-pe-ft-se-ic,
1096
- var(--_ctm-tab-dn-pe-ft-se-ic, var(--_ctm-dn-pe-ft-se-ic))
1097
- );
1098
- text-align: var(
1099
- --_ctm-mob-dn-pe-tt-an,
1100
- var(--_ctm-tab-dn-pe-tt-an, var(--_ctm-dn-pe-tt-an))
1101
- );
1102
- letter-spacing: var(
1103
- --_ctm-mob-dn-pe-lr-sg,
1104
- var(--_ctm-tab-dn-pe-lr-sg, var(--_ctm-dn-pe-lr-sg))
1105
- );
1106
- line-height: var(
1107
- --_ctm-mob-dn-pe-le-ht,
1108
- var(--_ctm-tab-dn-pe-le-ht, var(--_ctm-dn-pe-le-ht))
1109
- );
1110
- text-decoration: var(
1111
- --_ctm-mob-dn-pe-ue,
1112
- var(--_ctm-tab-dn-pe-ue, var(--_ctm-dn-pe-ue))
1113
- );
1114
- padding: prepareMediaVariable(--_ctm-dn-pe-pg);
1115
- }
1116
- }
1117
-
1118
- .quota__details__element {
1119
- background-color: var(
1120
- --_ctm-mob-dn-qa-ds-wt-se-bd-cr,
1121
- var(--_ctm-tab-dn-qa-ds-wt-se-bd-cr, var(--_ctm-dn-qa-ds-wt-se-bd-cr))
1122
- );
1123
- padding: var(
1124
- --_ctm-mob-dn-qa-ds-wt-se-pg,
1125
- var(--_ctm-tab-dn-qa-ds-wt-se-pg, var(--_ctm-dn-qa-ds-wt-se-pg))
1126
- );
1127
- display: flex;
1128
- flex-direction: column;
1129
- --_sf-gp: var(
1130
- --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1131
- var(
1132
- --_ctm-tab-dn-qa-ds-wt-se-im-sg,
1133
- var(--_ctm-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg), 16px)
1134
- )
1135
- );
1136
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1137
- row-gap: var(--_sf-gp);
1138
- width: 100%;
1139
- height: 100%;
1140
- border-color: var(
1141
- --_ctm-mob-dn-qa-ds-wt-se-br-cr,
1142
- var(--_ctm-tab-dn-qa-ds-wt-se-br-cr, var(--_ctm-dn-qa-ds-wt-se-br-cr))
1143
- );
1144
- border-style: var(
1145
- --_ctm-mob-dn-qa-ds-wt-se-br-se,
1146
- var(--_ctm-tab-dn-qa-ds-wt-se-br-se, var(--_ctm-dn-qa-ds-wt-se-br-se))
1147
- );
1148
- border-width: var(
1149
- --_ctm-mob-dn-qa-ds-wt-se-br-wh,
1150
- var(--_ctm-tab-dn-qa-ds-wt-se-br-wh, var(--_ctm-dn-qa-ds-wt-se-br-wh))
1151
- );
1152
- border-radius: var(
1153
- --_ctm-mob-dn-qa-ds-wt-se-br-rs,
1154
- var(--_ctm-tab-dn-qa-ds-wt-se-br-rs, var(--_ctm-dn-qa-ds-wt-se-br-rs))
1155
- );
1156
- box-shadow: var(
1157
- --_show-shadow,
1158
- var(
1159
- --_ctm-mob-dn-qa-ds-wt-se-sw-ae,
1160
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-ae, var(--_ctm-dn-qa-ds-wt-se-sw-ae))
1161
- )
1162
- var(
1163
- --_ctm-mob-dn-qa-ds-wt-se-sw-br,
1164
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-br, var(--_ctm-dn-qa-ds-wt-se-sw-br))
1165
- )
1166
- var(
1167
- --_ctm-mob-dn-qa-ds-wt-se-sw-sd,
1168
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-sd, var(--_ctm-dn-qa-ds-wt-se-sw-sd))
1169
- )
1170
- var(
1171
- --_ctm-mob-dn-qa-ds-wt-se-sw-cr,
1172
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-cr, var(--_ctm-dn-qa-ds-wt-se-sw-cr))
1173
- )
1174
- );
1175
-
1176
- .product__hilights {
1177
- display: flex;
1178
- align-items: var(
1179
- --_ctm-mob-dn-qa-ds-wt-se-wt-at,
1180
- var(--_ctm-tab-dn-qa-ds-wt-se-wt-at, var(--_ctm-dn-qa-ds-wt-se-wt-at))
1181
- );
1182
- justify-content: var(
1183
- --_ctm-mob-dn-qa-ds-wt-se-hl-at,
1184
- var(--_ctm-tab-dn-qa-ds-wt-se-hl-at, var(--_ctm-dn-qa-ds-wt-se-hl-at))
1185
- );
1186
- gap: var(
1187
- --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1188
- var(--_ctm-tab-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg))
1189
- );
1190
- width: 100%;
1191
-
1192
- height: 100%;
1193
-
1194
- &[data-show-dividers="true"] {
1195
- .product__list__item {
1196
- position: relative;
1197
- &:not(:last-child)::after {
1198
- content: "";
1199
- width: var(
1200
- --_ctm-mob-dn-qa-ds-dr-dr-wh,
1201
- var(--_ctm-tab-dn-qa-ds-dr-dr-wh, var(--_ctm-dn-qa-ds-dr-dr-wh))
1202
- );
1203
- height: 100%;
1204
- position: absolute;
1205
- right: calc(
1206
- (
1207
- -1 *
1208
- var(
1209
- --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1210
- var(--_ctm-tab-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg))
1211
- ) /
1212
- 2
1213
- ) -
1214
- (
1215
- var(
1216
- --_ctm-mob-dn-qa-ds-dr-dr-wh,
1217
- var(--_ctm-tab-dn-qa-ds-dr-dr-wh, var(--_ctm-dn-qa-ds-dr-dr-wh))
1218
- ) /
1219
- 2
1220
- )
1221
- );
1222
- background-color: var(
1223
- --_ctm-mob-dn-qa-ds-dr-dr-cr,
1224
- var(--_ctm-tab-dn-qa-ds-dr-dr-cr, var(--_ctm-dn-qa-ds-dr-dr-cr))
1225
- );
1226
- }
1227
- }
1228
- }
1229
- .product__list__item {
1230
- display: flex;
1231
- align-items: center;
1232
- gap: 4px;
1233
-
1234
- .svg_icon {
1235
- display: flex;
1236
- }
1237
- }
1238
- .quota__left {
1239
- .count {
1240
- // padding-inline: var(--_sf-cd-gp);
1241
- color: var(
1242
- --_ctm-mob-dn-qa-ds-qa-lt-cr,
1243
- var(--_ctm-tab-dn-qa-ds-qa-lt-cr, var(--_ctm-dn-qa-ds-qa-lt-cr))
1244
- );
1245
- font-family: var(
1246
- --_ctm-mob-dn-qa-ds-qa-lt-ft-fy,
1247
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-fy, var(--_ctm-dn-qa-ds-qa-lt-ft-fy))
1248
- );
1249
- font-size: var(
1250
- --_ctm-mob-dn-qa-ds-qa-lt-ft-se,
1251
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-se, var(--_ctm-dn-qa-ds-qa-lt-ft-se))
1252
- );
1253
- font-weight: var(
1254
- --_ctm-mob-dn-qa-ds-qa-lt-ft-wt,
1255
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-wt, var(--_ctm-dn-qa-ds-qa-lt-ft-wt))
1256
- );
1257
- font-style: var(
1258
- --_ctm-mob-dn-qa-ds-qa-lt-ft-se-ic,
1259
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-se-ic, var(--_ctm-dn-qa-ds-qa-lt-ft-se-ic))
1260
- );
1261
- text-align: var(
1262
- --_ctm-mob-dn-qa-ds-qa-lt-tt-an,
1263
- var(--_ctm-tab-dn-qa-ds-qa-lt-tt-an, var(--_ctm-dn-qa-ds-qa-lt-tt-an))
1264
- );
1265
- letter-spacing: var(
1266
- --_ctm-mob-dn-qa-ds-qa-lt-lr-sg,
1267
- var(--_ctm-tab-dn-qa-ds-qa-lt-lr-sg, var(--_ctm-dn-qa-ds-qa-lt-lr-sg))
1268
- );
1269
- line-height: var(
1270
- --_ctm-mob-dn-qa-ds-qa-lt-le-ht,
1271
- var(--_ctm-tab-dn-qa-ds-qa-lt-le-ht, var(--_ctm-dn-qa-ds-qa-lt-le-ht-dc))
1272
- );
1273
- text-decoration: var(
1274
- --_ctm-mob-dn-qa-ds-qa-lt-ue,
1275
- var(--_ctm-tab-dn-qa-ds-qa-lt-ue, var(--_ctm-dn-qa-ds-qa-lt-ue))
1276
- );
1277
- }
1278
- .icon {
1279
- display: var(--_sf-show-icon-ff, flex);
1280
- svg {
1281
- width: var(
1282
- --_ctm-mab-dn-qa-lt-in-se,
1283
- var(--_ctm-tab-dn-qa-ds-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-lt-in-se))
1284
- );
1285
- height: var(
1286
- --_ctm-mob-dn-qa-ds-qa-lt-in-se,
1287
- var(--_ctm-tab-dn-qa-ds-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-lt-in-se))
1288
- );
1289
- path {
1290
- stroke: var(
1291
- --_ctm-mob-dn-qa-ds-qa-lt-in-c1,
1292
- var(--_ctm-tab-dn-qa-ds-qa-lt-in-c1, var(--_ctm-dn-qa-ds-qa-lt-in-c1))
1293
- );
1294
- }
1295
- }
1296
- }
1297
- }
1298
- .days__left {
1299
- .count {
1300
- // padding-inline: var(--_sf-cd-gp);
1301
- color: var(
1302
- --_ctm-mob-dn-qa-ds-ds-lt-cr,
1303
- var(--_ctm-tab-dn-qa-ds-ds-lt-cr, var(--_ctm-dn-qa-ds-ds-lt-cr))
1304
- );
1305
- font-family: var(
1306
- --_ctm-mob-dn-qa-ds-ds-lt-ft-fy,
1307
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-fy, var(--_ctm-dn-qa-ds-ds-lt-ft-fy))
1308
- );
1309
- font-size: var(
1310
- --_ctm-mob-dn-qa-ds-ds-lt-ft-se,
1311
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-se, var(--_ctm-dn-qa-ds-ds-lt-ft-se))
1312
- );
1313
- font-weight: var(
1314
- --_ctm-mob-dn-qa-ds-ds-lt-ft-wt,
1315
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-wt, var(--_ctm-dn-qa-ds-ds-lt-ft-wt))
1316
- );
1317
- font-style: var(
1318
- --_ctm-mob-dn-qa-ds-ds-lt-ft-se-ic,
1319
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-se-ic, var(--_ctm-dn-qa-ds-ds-lt-ft-se-ic))
1320
- );
1321
- text-align: var(
1322
- --_ctm-mob-dn-qa-ds-ds-lt-tt-an,
1323
- var(--_ctm-tab-dn-qa-ds-ds-lt-tt-an, var(--_ctm-dn-qa-ds-ds-lt-tt-an))
1324
- );
1325
- letter-spacing: var(
1326
- --_ctm-mob-dn-qa-ds-ds-lt-lr-sg,
1327
- var(--_ctm-tab-dn-qa-ds-ds-lt-lr-sg, var(--_ctm-dn-qa-ds-ds-lt-lr-sg))
1328
- );
1329
- line-height: var(
1330
- --_ctm-mob-dn-qa-ds-ds-lt-le-ht,
1331
- var(--_ctm-tab-dn-qa-ds-ds-lt-le-ht, var(--_ctm-dn-qa-ds-ds-lt-le-ht-dc))
1332
- );
1333
- text-decoration: var(
1334
- --_ctm-mob-dn-qa-ds-ds-lt-ue,
1335
- var(--_ctm-tab-dn-qa-ds-ds-lt-ue, var(--_ctm-dn-qa-ds-ds-lt-ue))
1336
- );
1337
- }
1338
- .icon {
1339
- display: var(--_sf-show-icon-ff, flex);
1340
- svg {
1341
- width: var(
1342
- --_ctm-mab-dn-ds-lt-in-se,
1343
- var(--_ctm-tab-dn-qa-ds-ds-lt-in-se, var(--_ctm-dn-qa-ds-ds-lt-in-se))
1344
- );
1345
- height: var(
1346
- --_ctm-mob-dn-qa-ds-ds-lt-in-se,
1347
- var(--_ctm-tab-dn-qa-ds-ds-lt-in-se, var(--_ctm-dn-qa-ds-ds-lt-in-se))
1348
- );
1349
- path {
1350
- stroke: var(
1351
- --_ctm-mob-dn-qa-ds-ds-lt-in-c1,
1352
- var(--_ctm-tab-dn-qa-ds-ds-lt-in-c1, var(--_ctm-dn-qa-ds-ds-lt-in-c1))
1353
- );
1354
- }
1355
- }
1356
- }
1357
- }
1358
- }
1359
- }
1360
- }
1361
- }
1362
-
1363
- .allocation__profile__tabs {
1364
- width: 100%;
1365
- background-color: var(
1366
- --_ctm-mob-dn-ps-sr-wt-se-bd-cr,
1367
- var(--_ctm-tab-dn-ps-sr-wt-se-bd-cr, var(--_ctm-dn-ps-sr-wt-se-bd-cr))
1368
- );
1369
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
1370
- display: flex;
1371
- flex-direction: column;
1372
- --_sf-gp: var(
1373
- --_ctm-mob-lt-im-sg,
1374
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
1375
- );
1376
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1377
- row-gap: var(--_sf-gp);
1378
- width: 100%;
1379
- height: 100%;
1380
- border-color: var(
1381
- --_ctm-mob-dn-ps-sr-wt-se-br-cr,
1382
- var(--_ctm-tab-dn-ps-sr-wt-se-br-cr, var(--_ctm-dn-ps-sr-wt-se-br-cr))
1383
- );
1384
- border-style: var(
1385
- --_ctm-mob-dn-ps-sr-wt-se-br-se,
1386
- var(--_ctm-tab-dn-ps-sr-wt-se-br-se, var(--_ctm-dn-ps-sr-wt-se-br-se))
1387
- );
1388
- border-width: var(
1389
- --_ctm-mob-dn-ps-sr-wt-se-br-wh,
1390
- var(--_ctm-tab-dn-ps-sr-wt-se-br-wh, var(--_ctm-dn-ps-sr-wt-se-br-wh))
1391
- );
1392
- border-radius: var(
1393
- --_ctm-mob-dn-ps-sr-wt-se-br-rs,
1394
- var(--_ctm-tab-dn-ps-sr-wt-se-br-rs, var(--_ctm-dn-ps-sr-wt-se-br-rs))
1395
- );
1396
- box-shadow: var(
1397
- --_show-shadow,
1398
- var(
1399
- --_ctm-mob-dn-ps-sr-wt-se-sw-ae,
1400
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-ae, var(--_ctm-dn-ps-sr-wt-se-sw-ae))
1401
- )
1402
- var(
1403
- --_ctm-mob-dn-ps-sr-wt-se-sw-br,
1404
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-br, var(--_ctm-dn-ps-sr-wt-se-sw-br))
1405
- )
1406
- var(
1407
- --_ctm-mob-dn-ps-sr-wt-se-sw-sd,
1408
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-sd, var(--_ctm-dn-ps-sr-wt-se-sw-sd))
1409
- )
1410
- var(
1411
- --_ctm-mob-dn-ps-sr-wt-se-sw-cr,
1412
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-cr, var(--_ctm-dn-ps-sr-wt-se-sw-cr))
1413
- )
1414
- );
1415
- .profile__button {
1416
- &[data-show-shadow="false"] {
1417
- --_show-shadow: none;
1418
- }
1419
- &[data-icon-position="left"] {
1420
- --_sf-fd-bn: row;
1421
- }
1422
- &[data-icon-position="right"] {
1423
- --_sf-fd-bn: row-reverse;
1424
- }
1425
- &[data-icon-position="center"] {
1426
- --_sf-fd-bn: row;
1427
- }
1428
-
1429
- &:hover {
1430
- --_sf-hr-bd-cr: var(
1431
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-bd-cr,
1432
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-bd-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-bd-cr))
1433
- );
1434
- --_sf-hr-br-cr: var(
1435
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-cr,
1436
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-cr))
1437
- );
1438
- --_sf-hr-br-se: var(
1439
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-se,
1440
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-se))
1441
- );
1442
- --_sf-hr-br-wh: var(
1443
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-wh,
1444
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-wh, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-wh))
1445
- );
1446
- --_sf-hr-br-rs: var(
1447
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-rs,
1448
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-rs, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-rs))
1449
- );
1450
- --_sf-hr-at: var(
1451
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-at,
1452
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-at, var(--_ctm-dn-ps-sr-pe-tb-hr-se-at))
1453
- );
1454
- --_sf-hr-in-ad-tt-sg: var(
1455
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg,
1456
- var(
1457
- --_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg,
1458
- var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg)
1459
- )
1460
- );
1461
-
1462
- // for shadow
1463
- --_sf-hr-sw-ae: var(
1464
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-ae,
1465
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-ae, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-ae))
1466
- );
1467
- --_sf-hr-sw-br: var(
1468
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-br,
1469
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-br, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-br))
1470
- );
1471
- --_sf-hr-sw-hr: var(
1472
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-hr,
1473
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-hr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-hr))
1474
- );
1475
- --_sf-hr-sw-cr: var(
1476
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-cr,
1477
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-cr))
1478
- );
1479
-
1480
- // for font
1481
-
1482
- --_sf-hr-cr: var(
1483
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-cr,
1484
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-cr))
1485
- );
1486
- --_sf-hr-ft-fy: var(
1487
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-fy,
1488
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-fy, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-fy))
1489
- );
1490
- --_sf-hr-ft-se: var(
1491
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-se,
1492
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-se))
1493
- );
1494
- --_sf-hr-ft-wt: var(
1495
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-wt,
1496
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-wt, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-wt))
1497
- );
1498
- --_sf-hr-ft-se-ic: var(
1499
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-se-ic,
1500
- var(
1501
- --_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-se-ic,
1502
- var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-se-ic)
1503
- )
1504
- );
1505
- --_sf-hr-tt-an: var(
1506
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-tt-an,
1507
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-tt-an, var(--_ctm-dn-ps-sr-pe-tb-hr-se-tt-an))
1508
- );
1509
- --_sf-hr-lr-sg: var(
1510
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-lr-sg,
1511
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-lr-sg, var(--_ctm-dn-ps-sr-pe-tb-hr-se-lr-sg))
1512
- );
1513
- --_sf-hr-le-ht: var(
1514
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-le-ht,
1515
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-le-ht, var(--_ctm-dn-ps-sr-pe-tb-hr-se-le-ht))
1516
- );
1517
-
1518
- --_sf-hr-in-se: var(
1519
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-se,
1520
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-se))
1521
- );
1522
- --_sf-hr-in-se: var(
1523
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-se,
1524
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-se))
1525
- );
1526
- --_sf-hr-in-c1: var(
1527
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-c1,
1528
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-c1, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-c1))
1529
- );
1530
- --_sf-hr-ue: var(
1531
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ue,
1532
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ue, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ue))
1533
- );
1534
-
1535
- // for pading and width
1536
- --_sf-hr-pg: var(
1537
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-pg,
1538
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-pg, var(--_ctm-dn-ps-sr-pe-tb-hr-se-pg))
1539
- );
1540
- --_sf-hr-wh: var(
1541
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-wh,
1542
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-wh, var(--_ctm-dn-ps-sr-pe-tb-hr-se-wh))
1543
- );
1544
-
1545
- &[data-hover-show-shadow="false"] {
1546
- --_hover-show-shadow: none;
1547
- }
1548
- &[data-hover-show-icon="false"] {
1549
- --_hover-show-icon: none;
1550
- }
1551
- }
1552
-
1553
- background-color: var(
1554
- --_sf-hr-bd-cr,
1555
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-bd-cr)
1556
- );
1557
-
1558
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-pg));
1559
- display: flex;
1560
- flex-direction: var(--_sf-fd-bn);
1561
- align-items: center;
1562
-
1563
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-at));
1564
- gap: var(
1565
- --_sf-hr-in-ad-tt-sg,
1566
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-in-ad-tt-sg)
1567
- );
1568
-
1569
- border-radius: var(
1570
- --_sf-hr-br-rs,
1571
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-rs)
1572
- );
1573
-
1574
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-ae))
1575
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-br))
1576
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-sd))
1577
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-cr));
1578
-
1579
- &[data-show-border="true"] {
1580
- border-color: var(
1581
- --_sf-hr-br-cr,
1582
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-cr)
1583
- );
1584
-
1585
- border-style: var(
1586
- --_sf-hr-br-se,
1587
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-se)
1588
- );
1589
-
1590
- border-width: var(
1591
- --_sf-hr-br-wh,
1592
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-wh)
1593
- );
1594
- }
1595
-
1596
- // text styles
1597
-
1598
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-cr));
1599
-
1600
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-fy));
1601
-
1602
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se));
1603
-
1604
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-wt));
1605
-
1606
- font-style: var(
1607
- --_sf-hr-ft-se-ic,
1608
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se-ic)
1609
- );
1610
-
1611
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-tt-an));
1612
-
1613
- letter-spacing: var(
1614
- --_sf-hr-lr-sg,
1615
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-lr-sg)
1616
- );
1617
-
1618
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-le-ht));
1619
-
1620
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1621
-
1622
- [data-element-style="Text"] {
1623
- display: inline-block;
1624
- width: 100%;
1625
- }
1626
-
1627
- &[data-is-selected="true"] {
1628
- --_sf-sd-bd-cr: var(
1629
- --_ctm-mob-dn-me-sd-se-bd-cr,
1630
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-bd-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-bd-cr))
1631
- );
1632
- --_sf-sd-br-cr: var(
1633
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-cr,
1634
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-cr))
1635
- );
1636
- --_sf-sd-br-se: var(
1637
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-se,
1638
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-se))
1639
- );
1640
- --_sf-sd-br-wh: var(
1641
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-wh,
1642
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-wh, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-wh))
1643
- );
1644
- --_sf-sd-br-rs: var(
1645
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-rs,
1646
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-rs, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-rs))
1647
- );
1648
- --_sf-sd-at: var(
1649
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-at,
1650
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-at, var(--_ctm-dn-ps-sr-pe-tb-sd-se-at))
1651
- );
1652
- --_sf-sd-in-ad-tt-sg: var(
1653
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg,
1654
- var(
1655
- --_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg,
1656
- var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg)
1657
- )
1658
- );
1659
-
1660
- // for shadow
1661
- --_sf-sd-sw-ae: var(
1662
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-ae,
1663
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-ae, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-ae))
1664
- );
1665
- --_sf-sd-sw-br: var(
1666
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-br,
1667
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-br, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-br))
1668
- );
1669
- --_sf-sd-sw-hr: var(
1670
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-hr,
1671
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-hr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-hr))
1672
- );
1673
- --_sf-sd-sw-cr: var(
1674
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-cr,
1675
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-cr))
1676
- );
1677
-
1678
- // for font
1679
-
1680
- --_sf-sd-cr: var(
1681
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-cr,
1682
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-cr))
1683
- );
1684
- --_sf-sd-ft-fy: var(
1685
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-fy,
1686
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-fy, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-fy))
1687
- );
1688
- --_sf-sd-ft-se: var(
1689
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-se,
1690
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-se))
1691
- );
1692
- --_sf-sd-ft-wt: var(
1693
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-wt,
1694
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-wt, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-wt))
1695
- );
1696
- --_sf-sd-ft-se-ic: var(
1697
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-se-ic,
1698
- var(
1699
- --_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-se-ic,
1700
- var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-se-ic)
1701
- )
1702
- );
1703
- --_sf-sd-tt-an: var(
1704
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-tt-an,
1705
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-tt-an, var(--_ctm-dn-ps-sr-pe-tb-sd-se-tt-an))
1706
- );
1707
- --_sf-sd-lr-sg: var(
1708
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-lr-sg,
1709
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-lr-sg, var(--_ctm-dn-ps-sr-pe-tb-sd-se-lr-sg))
1710
- );
1711
- --_sf-sd-le-ht: var(
1712
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-le-ht,
1713
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-le-ht, var(--_ctm-dn-ps-sr-pe-tb-sd-se-le-ht))
1714
- );
1715
-
1716
- --_sf-sd-in-se: var(
1717
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-se,
1718
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-se))
1719
- );
1720
- --_sf-sd-in-se: var(
1721
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-se,
1722
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-se))
1723
- );
1724
- --_sf-sd-in-c1: var(
1725
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-c1,
1726
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-c1, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-c1))
1727
- );
1728
- --_sf-sd-ue: var(
1729
- --_ctm-mob-dn-ps-sr-pe-tb-hr-ue,
1730
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-ue, var(--_ctm-dn-ps-sr-pe-tb-hr-ue))
1731
- );
1732
-
1733
- // for pading and width
1734
- --_sf-sd-pg: var(
1735
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-pg,
1736
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-pg, var(--_ctm-dn-ps-sr-pe-tb-sd-se-pg))
1737
- );
1738
- --_sf-sd-wh: var(
1739
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-wh,
1740
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-wh, var(--_ctm-dn-ps-sr-pe-tb-sd-se-wh))
1741
- );
1742
-
1743
- &[data-hover-show-shadow="false"] {
1744
- --_hover-show-shadow: none;
1745
- }
1746
- &[data-hover-show-icon="false"] {
1747
- --_hover-show-icon: none;
1748
- }
1749
-
1750
- background-color: var(
1751
- --_sf-sd-bd-cr,
1752
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-bd-cr)
1753
- );
1754
-
1755
- padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-pg));
1756
- display: flex;
1757
- flex-direction: var(--_sf-fd-bn);
1758
- align-items: center;
1759
-
1760
- justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-at));
1761
- gap: var(
1762
- --_sf-sd-in-ad-tt-sg,
1763
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-in-ad-tt-sg)
1764
- );
1765
-
1766
- border-radius: var(
1767
- --_sf-sd-br-rs,
1768
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-rs)
1769
- );
1770
-
1771
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-ae))
1772
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-br))
1773
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-sd))
1774
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-cr));
1775
-
1776
- &[data-show-border="true"] {
1777
- border-color: var(
1778
- --_sf-sd-br-cr,
1779
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-cr)
1780
- );
1781
-
1782
- border-style: var(
1783
- --_sf-sd-br-se,
1784
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-se)
1785
- );
1786
-
1787
- border-width: var(
1788
- --_sf-sd-br-wh,
1789
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-wh)
1790
- );
1791
- }
1792
-
1793
- // text styles
1794
-
1795
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-cr));
1796
-
1797
- font-family: var(
1798
- --_sf-sd-ft-fy,
1799
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-fy)
1800
- );
1801
-
1802
- font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se));
1803
-
1804
- font-weight: var(
1805
- --_sf-sd-ft-wt,
1806
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-wt)
1807
- );
1808
-
1809
- font-style: var(
1810
- --_sf-sd-ft-se-ic,
1811
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se-ic)
1812
- );
1813
-
1814
- text-align: var(
1815
- --_sf-sd-tt-an,
1816
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-tt-an)
1817
- );
1818
-
1819
- letter-spacing: var(
1820
- --_sf-sd-lr-sg,
1821
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-lr-sg)
1822
- );
1823
-
1824
- line-height: var(
1825
- --_sf-sd-le-ht,
1826
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-le-ht)
1827
- );
1828
-
1829
- text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1830
-
1831
- [data-element-style="Text"] {
1832
- display: inline-block;
1833
- width: 100%;
1834
- }
1835
- }
1836
- }
1837
- .embla {
1838
- height: auto;
1839
- .embla__viewport {
1840
- .embla__container {
1841
- display: flex;
1842
- gap: prepareMediaVariable(--_ctm-dn-ps-sr-wt-se-im-gp);
1843
- .embla__slide {
1844
- width: unset;
1845
- }
1846
- }
1847
- }
1848
- }
1849
- }
1850
- .embla {
1851
- width: 100%;
1852
- height: 100%;
1853
- position: relative;
1854
- display: flex;
1855
- flex-direction: column;
1856
- padding: 10px;
1857
- // overflow: hidden;
1858
-
1859
- .embla__viewport {
1860
- width: 100%;
1861
- height: 100%;
1862
- position: relative;
1863
- display: flex;
1864
- flex-direction: column;
1865
-
1866
- overflow: hidden;
1867
-
1868
- .embla__container {
1869
- width: 100%;
1870
- height: 100%;
1871
- display: grid;
1872
- grid-template-rows: 100%;
1873
-
1874
- grid-template-columns: repeat(
1875
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
1876
- calc(
1877
- 100% /
1878
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
1879
- )
1880
- );
1881
-
1882
- grid-auto-flow: column;
1883
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
1884
-
1885
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1886
- height: calc(100% - calc(50px + 10px));
1887
- }
1888
-
1889
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1890
- height: calc(100% - calc(50px + 20px));
1891
- }
1892
-
1893
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
1894
- height: calc(
1895
- 100% - calc(
1896
- var(
1897
- --_ctm-mob-dn-pn-ds-dt-se,
1898
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1899
- ) +
1900
- 20px
1901
- )
1902
- );
1903
- }
1904
-
1905
- .embla__slide {
1906
- width: 100%;
1907
- height: 100%;
1908
- & > img {
1909
- width: 100%;
1910
- height: 100%;
1911
- }
1912
- }
1913
- }
1914
- }
1915
- &:not([data-display-style="Column"]) {
1916
- .embla__container {
1917
- grid-auto-columns: calc(
1918
- 100% /
1919
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
1920
- );
1921
- }
1922
- }
1923
-
1924
- .arrow-navigation {
1925
- display: flex;
1926
- position: absolute;
1927
- top: 50%;
1928
- left: 50%;
1929
- width: 100%;
1930
- justify-content: space-between;
1931
- transform: translate(-50%, -50%);
1932
- // padding-left: 20px;
1933
-
1934
- &[data-control-type="Bottom-Overflow"] {
1935
- transform: translateX(-50%);
1936
- width: 100%;
1937
- justify-content: center;
1938
- gap: 12px;
1939
- top: unset;
1940
- bottom: 6px;
1941
- }
1942
- &[data-control-type="Bottom"] {
1943
- transform: unset;
1944
- position: static;
1945
- width: 100%;
1946
- justify-content: center;
1947
- gap: 12px;
1948
- margin-top: 10px;
1949
- }
1950
- }
1951
- &[data-control-type="Side"] {
1952
- .left-button,
1953
- .right-button {
1954
- background-color: transparent;
1955
- }
1956
- }
1957
- &[data-background-shape="Round"] {
1958
- .left-button,
1959
- .right-button {
1960
- background-color: #f2f5f5;
1961
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1962
- }
1963
- }
1964
- .left-button {
1965
- padding: 10px;
1966
- border-radius: 50%;
1967
- border: none;
1968
- width: var(
1969
- --_ctm-mob-dn-pn-as-aw-se,
1970
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1971
- );
1972
- height: var(
1973
- --_ctm-mob-dn-pn-as-aw-se,
1974
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1975
- );
1976
-
1977
- display: flex;
1978
- align-items: center;
1979
- justify-content: center;
1980
- cursor: pointer;
1981
- outline: none;
1982
- margin-left: 12px;
1983
- &:disabled {
1984
- & svg {
1985
- path {
1986
- stroke: #c3b7b7;
1987
- }
1988
- }
1989
- }
1990
- }
1991
- .right-button {
1992
- border-radius: 50%;
1993
- border: none;
1994
- width: var(
1995
- --_ctm-mob-dn-pn-as-aw-se,
1996
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1997
- );
1998
- height: var(
1999
- --_ctm-mob-dn-pn-as-aw-se,
2000
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2001
- );
2002
-
2003
- display: flex;
2004
- align-items: center;
2005
- justify-content: center;
2006
- cursor: pointer;
2007
- outline: none;
2008
- margin-right: 12px;
2009
- padding: 10px;
2010
-
2011
- &:disabled {
2012
- & svg {
2013
- path {
2014
- stroke: #c3b7b7;
2015
- }
2016
- }
2017
- }
2018
- }
2019
- .icon {
2020
- display: flex;
2021
-
2022
- svg {
2023
- width: calc(
2024
- var(
2025
- --_ctm-mob-dn-pn-as-aw-se,
2026
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2027
- ) *
2028
- 0.5
2029
- );
2030
- height: calc(
2031
- var(
2032
- --_ctm-mob-dn-pn-as-aw-se,
2033
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2034
- ) *
2035
- 0.5
2036
- );
2037
-
2038
- path {
2039
- stroke: #514949;
2040
- }
2041
- }
2042
- }
2043
-
2044
- &[data-control-type="Side"] {
2045
- .embla__viewport {
2046
- width: calc(100% - 85px);
2047
- margin-inline: auto;
2048
- }
2049
- .left-button {
2050
- position: absolute;
2051
- left: 0;
2052
- top: 50%;
2053
- transform: translateY(-50%);
2054
- }
2055
- .right-button {
2056
- position: absolute;
2057
-
2058
- right: 0;
2059
- top: 50%;
2060
- transform: translateY(-50%);
2061
- }
2062
- }
2063
-
2064
- &[data-thumbnail-placement="top"] {
2065
- flex-direction: column-reverse;
2066
- }
2067
- &[data-thumbnail-placement="bottom"] {
2068
- flex-direction: column;
2069
- }
2070
- &[data-thumbnail-placement="left"] {
2071
- flex-direction: row-reverse;
2072
-
2073
- .embla__thumbs {
2074
- width: var(--_ctm-lt-tl-se);
2075
- height: 100%;
2076
-
2077
- & .embla__thumbs__container {
2078
- flex-direction: column;
2079
- height: 100%;
2080
- }
2081
- }
2082
- }
2083
- &[data-thumbnail-placement="right"] {
2084
- flex-direction: row;
2085
- .embla__thumbs {
2086
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2087
-
2088
- height: 100%;
2089
-
2090
- & .embla__thumbs__container {
2091
- flex-direction: column;
2092
- height: 100%;
2093
- }
2094
- }
2095
- }
2096
- .embla__dots {
2097
- display: flex;
2098
- flex-wrap: wrap;
2099
- justify-content: center;
2100
- align-items: center;
2101
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2102
- gap: 6px;
2103
-
2104
- &[data-control-type="Bottom-Overflow"] {
2105
- position: absolute;
2106
- bottom: 10px;
2107
- left: 50%;
2108
- transform: translateX(-50%);
2109
- width: 75%;
2110
- }
2111
- .embla__dot {
2112
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2113
- -webkit-appearance: none;
2114
- appearance: none;
2115
- background-color: var(
2116
- --_ctm-mob-dn-pn-ds-or-dt-cr,
2117
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
2118
- );
2119
-
2120
- touch-action: manipulation;
2121
- display: inline-flex;
2122
- text-decoration: none;
2123
- cursor: pointer;
2124
- border: 0;
2125
- padding: 0;
2126
- margin: 0;
2127
- // width: 0.6rem;
2128
- // height: 0.6rem;
2129
- width: var(
2130
- --_ctm-mob-dn-pn-ds-dt-se,
2131
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2132
- );
2133
- height: var(
2134
- --_ctm-mob-dn-pn-ds-dt-se,
2135
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2136
- );
2137
-
2138
- display: flex;
2139
- align-items: center;
2140
- justify-content: center;
2141
- border-radius: 50%;
2142
- }
2143
- .embla__dot:after {
2144
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2145
- width: var(
2146
- --_ctm-mob-dn-pn-ds-dt-se,
2147
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2148
- );
2149
- height: var(
2150
- --_ctm-mob-dn-pn-ds-dt-se,
2151
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2152
- );
2153
-
2154
- border-radius: 50%;
2155
- display: flex;
2156
- align-items: center;
2157
- content: "";
2158
- }
2159
- .embla__dot--selected:after {
2160
- box-shadow: inset 0 0 0 1px var(--text-body);
2161
- background-color: var(
2162
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
2163
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
2164
- );
2165
- }
2166
- &[data-slider-control="Pagination Line"] {
2167
- .embla__dot {
2168
- width: var(
2169
- --_ctm-mob-dn-pn-le-le-wh,
2170
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2171
- );
2172
- height: var(
2173
- --_ctm-mob-dn-pn-le-le-ht,
2174
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2175
- );
2176
- background-color: var(
2177
- --_ctm-mob-dn-pn-le-or-le-cr,
2178
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
2179
- );
2180
- border-radius: 6px;
2181
- }
2182
-
2183
- .embla__dot--selected:after {
2184
- box-shadow: inset 0 0 0 1px var(--text-body);
2185
- border-radius: 6px;
2186
- width: var(
2187
- --_ctm-mob-dn-pn-le-le-wh,
2188
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2189
- );
2190
- height: var(
2191
- --_ctm-mob-dn-pn-le-le-ht,
2192
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2193
- );
2194
- background-color: var(
2195
- --_ctm-mob-dn-pn-le-ct-le-cr,
2196
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
2197
- );
2198
- }
2199
- }
2200
- }
2201
-
2202
- .embla__thumbs {
2203
- width: 100%;
2204
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2205
-
2206
- position: relative;
2207
- display: grid;
2208
- grid-template-columns: 1fr;
2209
- overflow: hidden;
2210
- // margin: 10px;
2211
- padding: 10px;
2212
-
2213
- .embla__thumbs__viewport {
2214
- width: 100%;
2215
- height: 100%;
2216
- position: relative;
2217
- display: flex;
2218
- flex-direction: column;
2219
-
2220
- overflow: hidden;
2221
- }
2222
- .embla__thumbs__container {
2223
- display: flex;
2224
- flex-direction: row;
2225
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
2226
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
2227
-
2228
- width: 100%;
2229
- // justify-content: center;
2230
- // height: 200px;
2231
-
2232
- .embla__thumbs__slide {
2233
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2234
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2235
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2236
-
2237
- & img {
2238
- width: 100%;
2239
- height: 100%;
2240
- }
2241
- }
2242
- }
2243
- }
2244
- }
2245
- }
2246
- }
2247
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ [data-div-type="element"] {
8
+ &[data-element-type="allocationDetails"] {
9
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
+
11
+ width: var(
12
+ --_sf-el-wh-st-mx,
13
+ calc(
14
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
15
+ )
16
+ );
17
+
18
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
19
+
20
+ & > div {
21
+ &.wrapper {
22
+ width: 100%;
23
+ }
24
+ }
25
+ .loading__container {
26
+ width: 100%;
27
+ height: 25vh;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ }
32
+ .allocation_details {
33
+ background-color: var(
34
+ --_ctm-mob-dn-wt-se-bd-cr,
35
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
36
+ );
37
+
38
+ border-color: var(
39
+ --_ctm-mob-dn-wt-se-br-cr,
40
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
41
+ );
42
+
43
+ border-style: var(
44
+ --_ctm-mob-dn-wt-se-br-se,
45
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
46
+ );
47
+
48
+ border-width: var(
49
+ --_ctm-mob-dn-wt-se-br-wh,
50
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
51
+ );
52
+
53
+ border-radius: var(
54
+ --_ctm-mob-dn-wt-se-br-rs,
55
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
56
+ );
57
+
58
+ box-shadow: var(
59
+ --_show-shadow,
60
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
61
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
62
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
63
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
64
+ );
65
+
66
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
67
+ gap: var(
68
+ --_ctm-mob-lt-it-ad-mn-qy-sg,
69
+ var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
70
+ );
71
+ display: flex;
72
+ flex-direction: column;
73
+ // text css
74
+ .title__wraper {
75
+ background-color: var(
76
+ --_ctm-mob-dn-te-bd-cr,
77
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
78
+ );
79
+
80
+ border-color: var(
81
+ --_ctm-mob-dn-te-br-cr,
82
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
83
+ );
84
+
85
+ border-style: var(
86
+ --_ctm-mob-dn-te-br-se,
87
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
88
+ );
89
+
90
+ border-width: var(
91
+ --_ctm-mob-dn-te-br-wh,
92
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
93
+ );
94
+
95
+ border-radius: var(
96
+ --_ctm-mob-dn-te-br-rs,
97
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
98
+ );
99
+
100
+ box-shadow: var(
101
+ --_show-shadow,
102
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
103
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
104
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
105
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
106
+ );
107
+ white-space: nowrap;
108
+
109
+ height: 100%;
110
+ .title {
111
+ color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
112
+ font-family: var(
113
+ --_ctm-mob-dn-te-ft-fy,
114
+ var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
115
+ );
116
+ font-size: var(
117
+ --_ctm-mob-dn-te-ft-se,
118
+ var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se))
119
+ );
120
+ font-weight: var(
121
+ --_ctm-mob-dn-te-ft-wt,
122
+ var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt))
123
+ );
124
+ font-style: var(
125
+ --_ctm-mob-dn-te-ft-se-ic,
126
+ var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic))
127
+ );
128
+ text-align: var(
129
+ --_ctm-mob-dn-te-tt-an,
130
+ var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
131
+ );
132
+ letter-spacing: var(
133
+ --_ctm-mob-dn-te-lr-sg,
134
+ var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg))
135
+ );
136
+ line-height: var(
137
+ --_ctm-mob-dn-te-le-ht,
138
+ var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht))
139
+ );
140
+ text-decoration: var(--_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue)));
141
+ padding: prepareMediaVariable(--_ctm-dn-te-pg);
142
+ }
143
+ }
144
+
145
+ .product__showcase {
146
+ width: 100%;
147
+
148
+ // height: 100vh;/
149
+ // overflow-y: auto;
150
+
151
+ .allocation__item {
152
+ @import "./product-image-allocation.scss";
153
+
154
+ display: flex;
155
+ flex-direction: column;
156
+ gap: 10px;
157
+ background-color: var(
158
+ --_ctm-mob-dn-an-an-im-bd-cr,
159
+ var(--_ctm-tab-dn-an-an-im-bd-cr, var(--_ctm-dn-an-an-im-bd-cr))
160
+ );
161
+
162
+ border-color: var(
163
+ --_ctm-mob-dn-an-an-im-br-cr,
164
+ var(--_ctm-tab-dn-an-an-im-br-cr, var(--_ctm-dn-an-an-im-br-cr))
165
+ );
166
+
167
+ border-style: var(
168
+ --_ctm-mob-dn-an-an-im-br-se,
169
+ var(--_ctm-tab-dn-an-an-im-br-se, var(--_ctm-dn-an-an-im-br-se))
170
+ );
171
+
172
+ border-width: var(
173
+ --_ctm-mob-dn-an-an-im-br-wh,
174
+ var(--_ctm-tab-dn-an-an-im-br-wh, var(--_ctm-dn-an-an-im-br-wh))
175
+ );
176
+
177
+ border-radius: var(
178
+ --_ctm-mob-dn-an-an-im-br-rs,
179
+ var(--_ctm-tab-dn-an-an-im-br-rs, var(--_ctm-dn-an-an-im-br-rs))
180
+ );
181
+
182
+ box-shadow: var(
183
+ --_show-shadow,
184
+ var(
185
+ --_ctm-mob-dn-an-an-im-sw-ae,
186
+ var(--_ctm-tab-dn-an-an-im-sw-ae, var(--_ctm-dn-an-an-im-sw-ae))
187
+ )
188
+ var(
189
+ --_ctm-mob-dn-an-an-im-sw-br,
190
+ var(--_ctm-tab-dn-an-an-im-sw-br, var(--_ctm-dn-an-an-im-sw-br))
191
+ )
192
+ var(
193
+ --_ctm-mob-dn-an-an-im-sw-sd,
194
+ var(--_ctm-tab-dn-an-an-im-sw-sd, var(--_ctm-dn-an-an-im-sw-sd))
195
+ )
196
+ var(
197
+ --_ctm-mob-dn-an-an-im-sw-cr,
198
+ var(--_ctm-tab-dn-an-an-im-sw-cr, var(--_ctm-dn-an-an-im-sw-cr))
199
+ )
200
+ );
201
+ padding: var(
202
+ --_ctm-mob-dn-an-an-im-pg,
203
+ var(--_ctm-tab-dn-an-an-im-pg, var(--_ctm-dn-an-an-im-pg))
204
+ );
205
+
206
+ .quota__left {
207
+ background-color: var(
208
+ --_ctm-mob-dn-an-qa-lt-bd-cr,
209
+ var(--_ctm-tab-dn-an-qa-lt-bd-cr, var(--_ctm-dn-an-qa-lt-bd-cr))
210
+ );
211
+
212
+ border-color: var(
213
+ --_ctm-mob-dn-an-qa-lt-br-cr,
214
+ var(--_ctm-tab-dn-an-qa-lt-br-cr, var(--_ctm-dn-an-qa-lt-br-cr))
215
+ );
216
+
217
+ border-style: var(
218
+ --_ctm-mob-dn-an-qa-lt-br-se,
219
+ var(--_ctm-tab-dn-an-qa-lt-br-se, var(--_ctm-dn-an-qa-lt-br-se))
220
+ );
221
+
222
+ border-width: var(
223
+ --_ctm-mob-dn-an-qa-lt-br-wh,
224
+ var(--_ctm-tab-dn-an-qa-lt-br-wh, var(--_ctm-dn-an-qa-lt-br-wh))
225
+ );
226
+
227
+ border-radius: var(
228
+ --_ctm-mob-dn-an-qa-lt-br-rs,
229
+ var(--_ctm-tab-dn-an-qa-lt-br-rs, var(--_ctm-dn-an-qa-lt-br-rs))
230
+ );
231
+
232
+ box-shadow: var(
233
+ --_show-shadow,
234
+ var(
235
+ --_ctm-mob-dn-an-qa-lt-sw-ae,
236
+ var(--_ctm-tab-dn-an-qa-lt-sw-ae, var(--_ctm-dn-an-qa-lt-sw-ae))
237
+ )
238
+ var(
239
+ --_ctm-mob-dn-an-qa-lt-sw-br,
240
+ var(--_ctm-tab-dn-an-qa-lt-sw-br, var(--_ctm-dn-an-qa-lt-sw-br))
241
+ )
242
+ var(
243
+ --_ctm-mob-dn-an-qa-lt-sw-sd,
244
+ var(--_ctm-tab-dn-an-qa-lt-sw-sd, var(--_ctm-dn-an-qa-lt-sw-sd))
245
+ )
246
+ var(
247
+ --_ctm-mob-dn-an-qa-lt-sw-cr,
248
+ var(--_ctm-tab-dn-an-qa-lt-sw-cr, var(--_ctm-dn-an-qa-lt-sw-cr))
249
+ )
250
+ );
251
+ white-space: nowrap;
252
+
253
+ height: 100%;
254
+
255
+ padding: prepareMediaVariable(--_ctm-dn-an-qa-lt-pg);
256
+ .label {
257
+ color: var(
258
+ --_ctm-mob-dn-an-qa-lt-cr,
259
+ var(--_ctm-tab-dn-an-qa-lt-cr, var(--_ctm-dn-an-qa-lt-cr))
260
+ );
261
+ font-family: var(
262
+ --_ctm-mob-dn-an-qa-lt-ft-fy,
263
+ var(--_ctm-tab-dn-an-qa-lt-ft-fy, var(--_ctm-dn-an-qa-lt-ft-fy))
264
+ );
265
+ font-size: var(
266
+ --_ctm-mob-dn-an-qa-lt-ft-se,
267
+ var(--_ctm-tab-dn-an-qa-lt-ft-se, var(--_ctm-dn-an-qa-lt-ft-se))
268
+ );
269
+ font-weight: var(
270
+ --_ctm-mob-dn-an-qa-lt-ft-wt,
271
+ var(--_ctm-tab-dn-an-qa-lt-ft-wt, var(--_ctm-dn-an-qa-lt-ft-wt))
272
+ );
273
+ font-style: var(
274
+ --_ctm-mob-dn-an-qa-lt-ft-se-ic,
275
+ var(--_ctm-tab-dn-an-qa-lt-ft-se-ic, var(--_ctm-dn-an-qa-lt-ft-se-ic))
276
+ );
277
+ text-align: var(
278
+ --_ctm-mob-dn-an-qa-lt-tt-an,
279
+ var(--_ctm-tab-dn-an-qa-lt-tt-an, var(--_ctm-dn-an-qa-lt-tt-an))
280
+ );
281
+ letter-spacing: var(
282
+ --_ctm-mob-dn-an-qa-lt-lr-sg,
283
+ var(--_ctm-tab-dn-an-qa-lt-lr-sg, var(--_ctm-dn-an-qa-lt-lr-sg))
284
+ );
285
+ line-height: var(
286
+ --_ctm-mob-dn-an-qa-lt-le-ht,
287
+ var(--_ctm-tab-dn-an-qa-lt-le-ht, var(--_ctm-dn-an-qa-lt-le-ht))
288
+ );
289
+ text-decoration: var(
290
+ --_ctm-mob-dn-an-qa-lt-ue,
291
+ var(--_ctm-tab-dn-an-qa-lt-ue, var(--_ctm-dn-an-qa-lt-ue))
292
+ );
293
+ }
294
+ .value {
295
+ // padding-block-end: var(--_sf-dc-pd-bt);
296
+
297
+ color: var(
298
+ --_ctm-mob-dn-an-qa-lt-cr-dc,
299
+ var(--_ctm-tab-dn-an-qa-lt-cr-dc, var(--_ctm-dn-an-qa-lt-cr-dc))
300
+ );
301
+ font-family: var(
302
+ --_ctm-mob-dn-an-qa-lt-ft-fy-dc,
303
+ var(--_ctm-tab-dn-an-qa-lt-ft-fy-dc, var(--_ctm-dn-an-qa-lt-ft-fy-dc))
304
+ );
305
+ font-size: var(
306
+ --_ctm-mob-dn-an-qa-lt-ft-se-dc,
307
+ var(--_ctm-tab-dn-an-qa-lt-ft-se-dc, var(--_ctm-dn-an-qa-lt-ft-se-dc))
308
+ );
309
+ font-weight: var(
310
+ --_ctm-mob-dn-an-qa-lt-ft-wt-dc,
311
+ var(--_ctm-tab-dn-an-qa-lt-ft-wt-dc, var(--_ctm-dn-an-qa-lt-ft-wt-dc))
312
+ );
313
+ font-style: var(
314
+ --_ctm-mob-dn-an-qa-lt-ft-se-ic-dc,
315
+ var(--_ctm-tab-dn-an-qa-lt-ft-se-ic-dc, var(--_ctm-dn-an-qa-lt-ft-se-ic-dc))
316
+ );
317
+ text-align: var(
318
+ --_ctm-mob-dn-an-qa-lt-tt-an-dc,
319
+ var(--_ctm-tab-dn-an-qa-lt-tt-an-dc, var(--_ctm-dn-an-qa-lt-tt-an-dc))
320
+ );
321
+ letter-spacing: var(
322
+ --_ctm-mob-dn-an-qa-lt-lr-sg-dc,
323
+ var(--_ctm-tab-dn-an-qa-lt-lr-sg-dc, var(--_ctm-dn-an-qa-lt-lr-sg-dc))
324
+ );
325
+ line-height: var(
326
+ --_ctm-mob-dn-an-qa-lt-le-ht-dc,
327
+ var(--_ctm-tab-dn-an-qa-lt-le-ht-dc, var(--_ctm-dn-an-qa-lt-le-ht-dc))
328
+ );
329
+ text-decoration: var(
330
+ --_ctm-mob-dn-an-qa-lt-ue-dc,
331
+ var(--_ctm-tab-dn-an-qa-lt-ue-dc, var(--_ctm-dn-an-qa-lt-ue-dc))
332
+ );
333
+ }
334
+ }
335
+ .days__left {
336
+ .label {
337
+ color: var(
338
+ --_ctm-mob-dn-an-es-in-cr,
339
+ var(--_ctm-tab-dn-an-es-in-cr, var(--_ctm-dn-an-es-in-cr))
340
+ );
341
+ font-family: var(
342
+ --_ctm-mob-dn-an-es-in-ft-fy,
343
+ var(--_ctm-tab-dn-an-es-in-ft-fy, var(--_ctm-dn-an-es-in-ft-fy))
344
+ );
345
+ font-size: var(
346
+ --_ctm-mob-dn-an-es-in-ft-se,
347
+ var(--_ctm-tab-dn-an-es-in-ft-se, var(--_ctm-dn-an-es-in-ft-se))
348
+ );
349
+ font-weight: var(
350
+ --_ctm-mob-dn-an-es-in-ft-wt,
351
+ var(--_ctm-tab-dn-an-es-in-ft-wt, var(--_ctm-dn-an-es-in-ft-wt))
352
+ );
353
+ font-style: var(
354
+ --_ctm-mob-dn-an-es-in-ft-se-ic,
355
+ var(--_ctm-tab-dn-an-es-in-ft-se-ic, var(--_ctm-dn-an-es-in-ft-se-ic))
356
+ );
357
+ text-align: var(
358
+ --_ctm-mob-dn-an-es-in-tt-an,
359
+ var(--_ctm-tab-dn-an-es-in-tt-an, var(--_ctm-dn-an-es-in-tt-an))
360
+ );
361
+ letter-spacing: var(
362
+ --_ctm-mob-dn-an-es-in-lr-sg,
363
+ var(--_ctm-tab-dn-an-es-in-lr-sg, var(--_ctm-dn-an-es-in-lr-sg))
364
+ );
365
+ line-height: var(
366
+ --_ctm-mob-dn-an-es-in-le-ht,
367
+ var(--_ctm-tab-dn-an-es-in-le-ht, var(--_ctm-dn-an-es-in-le-ht))
368
+ );
369
+ text-decoration: var(
370
+ --_ctm-mob-dn-an-es-in-ue,
371
+ var(--_ctm-tab-dn-an-es-in-ue, var(--_ctm-dn-an-es-in-ue))
372
+ );
373
+ }
374
+ .value {
375
+ // padding-block-end: var(--_sf-dc-pd-bt);
376
+
377
+ color: var(
378
+ --_ctm-mob-dn-an-es-in-cr-dc,
379
+ var(--_ctm-tab-dn-an-es-in-cr-dc, var(--_ctm-dn-an-es-in-cr-dc))
380
+ );
381
+ font-family: var(
382
+ --_ctm-mob-dn-an-es-in-ft-fy-dc,
383
+ var(--_ctm-tab-dn-an-es-in-ft-fy-dc, var(--_ctm-dn-an-es-in-ft-fy-dc))
384
+ );
385
+ font-size: var(
386
+ --_ctm-mob-dn-an-es-in-ft-se-dc,
387
+ var(--_ctm-tab-dn-an-es-in-ft-se-dc, var(--_ctm-dn-an-es-in-ft-se-dc))
388
+ );
389
+ font-weight: var(
390
+ --_ctm-mob-dn-an-es-in-ft-wt-dc,
391
+ var(--_ctm-tab-dn-an-es-in-ft-wt-dc, var(--_ctm-dn-an-es-in-ft-wt-dc))
392
+ );
393
+ font-style: var(
394
+ --_ctm-mob-dn-an-es-in-ft-se-ic-dc,
395
+ var(--_ctm-tab-dn-an-es-in-ft-se-ic-dc, var(--_ctm-dn-an-es-in-ft-se-ic-dc))
396
+ );
397
+ text-align: var(
398
+ --_ctm-mob-dn-an-es-in-tt-an-dc,
399
+ var(--_ctm-tab-dn-an-es-in-tt-an-dc, var(--_ctm-dn-an-es-in-tt-an-dc))
400
+ );
401
+ letter-spacing: var(
402
+ --_ctm-mob-dn-an-es-in-lr-sg-dc,
403
+ var(--_ctm-tab-dn-an-es-in-lr-sg-dc, var(--_ctm-dn-an-es-in-lr-sg-dc))
404
+ );
405
+ line-height: var(
406
+ --_ctm-mob-dn-an-es-in-le-ht-dc,
407
+ var(--_ctm-tab-dn-an-es-in-le-ht-dc, var(--_ctm-dn-an-es-in-le-ht-dc))
408
+ );
409
+ text-decoration: var(
410
+ --_ctm-mob-dn-an-es-in-ue-dc,
411
+ var(--_ctm-tab-dn-an-es-in-ue-dc, var(--_ctm-dn-an-es-in-ue-dc))
412
+ );
413
+ }
414
+ }
415
+
416
+ .allocation__name {
417
+ background-color: var(
418
+ --_ctm-mob-dn-an-an-ne-bd-cr,
419
+ var(--_ctm-tab-dn-an-an-ne-bd-cr, var(--_ctm-dn-an-an-ne-bd-cr))
420
+ );
421
+
422
+ border-color: var(
423
+ --_ctm-mob-dn-an-an-ne-br-cr,
424
+ var(--_ctm-tab-dn-an-an-ne-br-cr, var(--_ctm-dn-an-an-ne-br-cr))
425
+ );
426
+
427
+ border-style: var(
428
+ --_ctm-mob-dn-an-an-ne-br-se,
429
+ var(--_ctm-tab-dn-an-an-ne-br-se, var(--_ctm-dn-an-an-ne-br-se))
430
+ );
431
+
432
+ border-width: var(
433
+ --_ctm-mob-dn-an-an-ne-br-wh,
434
+ var(--_ctm-tab-dn-an-an-ne-br-wh, var(--_ctm-dn-an-an-ne-br-wh))
435
+ );
436
+
437
+ border-radius: var(
438
+ --_ctm-mob-dn-an-an-ne-br-rs,
439
+ var(--_ctm-tab-dn-an-an-ne-br-rs, var(--_ctm-dn-an-an-ne-br-rs))
440
+ );
441
+
442
+ box-shadow: var(
443
+ --_show-shadow,
444
+ var(
445
+ --_ctm-mob-dn-an-an-ne-sw-ae,
446
+ var(--_ctm-tab-dn-an-an-ne-sw-ae, var(--_ctm-dn-an-an-ne-sw-ae))
447
+ )
448
+ var(
449
+ --_ctm-mob-dn-an-an-ne-sw-br,
450
+ var(--_ctm-tab-dn-an-an-ne-sw-br, var(--_ctm-dn-an-an-ne-sw-br))
451
+ )
452
+ var(
453
+ --_ctm-mob-dn-an-an-ne-sw-sd,
454
+ var(--_ctm-tab-dn-an-an-ne-sw-sd, var(--_ctm-dn-an-an-ne-sw-sd))
455
+ )
456
+ var(
457
+ --_ctm-mob-dn-an-an-ne-sw-cr,
458
+ var(--_ctm-tab-dn-an-an-ne-sw-cr, var(--_ctm-dn-an-an-ne-sw-cr))
459
+ )
460
+ );
461
+ white-space: nowrap;
462
+
463
+ color: var(
464
+ --_ctm-mob-dn-an-an-ne-cr,
465
+ var(--_ctm-tab-dn-an-an-ne-cr, var(--_ctm-dn-an-an-ne-cr))
466
+ );
467
+ font-family: var(
468
+ --_ctm-mob-dn-an-an-ne-ft-fy,
469
+ var(--_ctm-tab-dn-an-an-ne-ft-fy, var(--_ctm-dn-an-an-ne-ft-fy))
470
+ );
471
+ font-size: var(
472
+ --_ctm-mob-dn-an-an-ne-ft-se,
473
+ var(--_ctm-tab-dn-an-an-ne-ft-se, var(--_ctm-dn-an-an-ne-ft-se))
474
+ );
475
+ font-weight: var(
476
+ --_ctm-mob-dn-an-an-ne-ft-wt,
477
+ var(--_ctm-tab-dn-an-an-ne-ft-wt, var(--_ctm-dn-an-an-ne-ft-wt))
478
+ );
479
+ font-style: var(
480
+ --_ctm-mob-dn-an-an-ne-ft-se-ic,
481
+ var(--_ctm-tab-dn-an-an-ne-ft-se-ic, var(--_ctm-dn-an-an-ne-ft-se-ic))
482
+ );
483
+ text-align: var(
484
+ --_ctm-mob-dn-an-an-ne-tt-an,
485
+ var(--_ctm-tab-dn-an-an-ne-tt-an, var(--_ctm-dn-an-an-ne-tt-an))
486
+ );
487
+ letter-spacing: var(
488
+ --_ctm-mob-dn-an-an-ne-lr-sg,
489
+ var(--_ctm-tab-dn-an-an-ne-lr-sg, var(--_ctm-dn-an-an-ne-lr-sg))
490
+ );
491
+ line-height: var(
492
+ --_ctm-mob-dn-an-an-ne-le-ht,
493
+ var(--_ctm-tab-dn-an-an-ne-le-ht, var(--_ctm-dn-an-an-ne-le-ht))
494
+ );
495
+ text-decoration: var(
496
+ --_ctm-mob-dn-an-an-ne-ue,
497
+ var(--_ctm-tab-dn-an-an-ne-ue, var(--_ctm-dn-an-an-ne-ue))
498
+ );
499
+ padding: prepareMediaVariable(--_ctm-dn-an-an-ne-pg);
500
+ }
501
+ }
502
+
503
+ .main__header {
504
+ display: flex;
505
+ justify-content: space-between;
506
+ align-items: center;
507
+ // padding: 16px 0;
508
+ // margin-bottom: 16px;
509
+ // border-bottom: var(--Gray-500, #eaecf0) 1px solid;
510
+
511
+ .section__title {
512
+ color: var(--Gray-900, #101828);
513
+
514
+ font-size: 20px;
515
+ font-style: normal;
516
+ font-weight: 700;
517
+ line-height: 30px;
518
+ margin: 0px;
519
+ h3 {
520
+ display: flex;
521
+ align-items: center;
522
+ font-size: 20px;
523
+ .text__secondary {
524
+ color: var(--Gray-iron-500, #70707b);
525
+ font-size: 16px;
526
+
527
+ font-size: 16px;
528
+ font-style: normal;
529
+ font-weight: 400;
530
+ line-height: 18px;
531
+ padding-left: 8px;
532
+ .text__primary {
533
+ color: #243dc6;
534
+ font-size: 16px;
535
+ }
536
+ }
537
+ }
538
+ .section__desc {
539
+ color: var(--Gray-iron-500, #70707b);
540
+
541
+ font-size: 16px;
542
+ font-style: normal;
543
+ font-weight: 400;
544
+ line-height: 18px;
545
+ margin: 0px;
546
+ span {
547
+ color: var(--Gray-900, #101828);
548
+
549
+ font-size: 16px;
550
+ font-style: normal;
551
+ font-weight: 600;
552
+ line-height: 24px;
553
+ }
554
+ }
555
+ }
556
+ .button__group {
557
+ display: flex;
558
+ gap: 12px;
559
+ margin-left: auto;
560
+ }
561
+ .product__views {
562
+ display: flex;
563
+ background-color: #fff;
564
+ border: 1px solid var(--_gray-300);
565
+ border-radius: 6px;
566
+ height: 40px;
567
+ overflow: hidden;
568
+
569
+ .btn {
570
+ display: inline-block;
571
+ padding: 8px;
572
+ display: flex;
573
+ align-items: center;
574
+ justify-content: center;
575
+ cursor: pointer;
576
+ button {
577
+ display: flex;
578
+ }
579
+ &:hover {
580
+ background-color: var(--_gray-100);
581
+ }
582
+ &.active {
583
+ background-color: #ced4f6;
584
+ button {
585
+ svg {
586
+ path {
587
+ stroke: var(--_primary-500);
588
+ }
589
+ }
590
+ }
591
+ }
592
+ &:first-child {
593
+ border-right: 1px solid var(--_gray-200);
594
+ }
595
+ }
596
+ }
597
+ }
598
+ // products header styles
599
+ .showcase__header {
600
+ display: flex;
601
+ justify-content: space-between;
602
+ padding: 16px 0;
603
+ margin-bottom: 16px;
604
+ border-bottom: var(--Gray-200, #eaecf0) 1px solid;
605
+ .quota__details {
606
+ display: flex;
607
+ align-items: center;
608
+ gap: 8px;
609
+ }
610
+
611
+ .button__group {
612
+ display: flex;
613
+ gap: 12px;
614
+ }
615
+ .product__views {
616
+ display: flex;
617
+ background-color: #fff;
618
+ border: 1px solid var(--_gray-300);
619
+ border-radius: 6px;
620
+ height: 40px;
621
+ overflow: hidden;
622
+
623
+ .btn {
624
+ display: inline-block;
625
+ padding: 8px;
626
+ display: flex;
627
+ align-items: center;
628
+ justify-content: center;
629
+ cursor: pointer;
630
+ button {
631
+ display: flex;
632
+ }
633
+ &:hover {
634
+ background-color: var(--_gray-100);
635
+ }
636
+ &.active {
637
+ background-color: #ced4f6;
638
+ button {
639
+ svg {
640
+ path {
641
+ stroke: var(--_primary-500);
642
+ }
643
+ }
644
+ }
645
+ }
646
+ &:first-child {
647
+ border-right: 1px solid var(--_gray-200);
648
+ }
649
+ }
650
+ }
651
+ }
652
+
653
+ // add to cart button styles
654
+ .primary__btn {
655
+ display: flex;
656
+ gap: 8px;
657
+ height: 44px;
658
+ padding: 8px 14px;
659
+ background-color: var(--_primary-500);
660
+ border-radius: 6px;
661
+ color: #fff;
662
+ font-weight: 600;
663
+ height: 40px;
664
+ display: inline-flex;
665
+ cursor: pointer;
666
+ &:hover {
667
+ background-color: var(--_primary-500);
668
+ }
669
+ &.disable__btn {
670
+ cursor: not-allowed;
671
+ opacity: 0.5;
672
+ }
673
+ }
674
+
675
+ // product list styles
676
+ .showcase__product__list {
677
+ .product__card {
678
+ .category__image {
679
+ width: 100%;
680
+ height: 100%;
681
+ object-fit: cover;
682
+ }
683
+ }
684
+ &[data-list-view="grid"] {
685
+ // grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
686
+ grid-template-columns: repeat(
687
+ var(
688
+ --_ctm-mob-dn-an-an-im-is-pr-rw,
689
+ var(--_ctm-tab-dn-an-an-im-is-pr-rw, var(--_ctm-dn-an-an-im-is-pr-rw))
690
+ ),
691
+ 1fr
692
+ );
693
+ // gap: 24px;
694
+ .product__card {
695
+ flex-direction: column;
696
+ .card__img__container {
697
+ width: 100%;
698
+ }
699
+ }
700
+ }
701
+
702
+ &[data-list-view="list"] {
703
+ grid-template-columns: auto;
704
+ .product__card {
705
+ flex-direction: row;
706
+ align-items: center;
707
+ // gap: 24px;
708
+ .card__img__container {
709
+ width: 250px;
710
+ }
711
+ }
712
+ }
713
+ display: grid;
714
+ gap: var(
715
+ --_ctm-mob-dn-an-an-im-im-gp,
716
+ var(--_ctm-tab-dn-an-an-im-im-gp, var(--_ctm-dn-an-an-im-im-gp))
717
+ );
718
+
719
+ .product__card {
720
+ // product card styles
721
+ display: flex;
722
+ gap: 12px;
723
+
724
+ background-color: var(
725
+ --_ctm-mob-dn-im-cd-bd-cr,
726
+ var(--_ctm-tab-dn-im-cd-bd-cr, var(--_ctm-dn-im-cd-bd-cr))
727
+ );
728
+
729
+ border-color: var(
730
+ --_ctm-mob-dn-im-cd-br-cr,
731
+ var(--_ctm-tab-dn-im-cd-br-cr, var(--_ctm-dn-im-cd-br-cr))
732
+ );
733
+
734
+ border-style: var(
735
+ --_ctm-mob-dn-im-cd-br-se,
736
+ var(--_ctm-tab-dn-im-cd-br-se, var(--_ctm-dn-im-cd-br-se))
737
+ );
738
+
739
+ border-width: var(
740
+ --_ctm-mob-dn-im-cd-br-wh,
741
+ var(--_ctm-tab-dn-im-cd-br-wh, var(--_ctm-dn-im-cd-br-wh))
742
+ );
743
+
744
+ border-radius: var(
745
+ --_ctm-mob-dn-im-cd-br-rs,
746
+ var(--_ctm-tab-dn-im-cd-br-rs, var(--_ctm-dn-im-cd-br-rs))
747
+ );
748
+
749
+ box-shadow: var(
750
+ --_show-shadow,
751
+ var(
752
+ --_ctm-mob-dn-im-cd-sw-ae,
753
+ var(--_ctm-tab-dn-im-cd-sw-ae, var(--_ctm-dn-im-cd-sw-ae))
754
+ )
755
+ var(
756
+ --_ctm-mob-dn-im-cd-sw-br,
757
+ var(--_ctm-tab-dn-im-cd-sw-br, var(--_ctm-dn-im-cd-sw-br))
758
+ )
759
+ var(
760
+ --_ctm-mob-dn-im-cd-sw-sd,
761
+ var(--_ctm-tab-dn-im-cd-sw-sd, var(--_ctm-dn-im-cd-sw-sd))
762
+ )
763
+ var(
764
+ --_ctm-mob-dn-im-cd-sw-cr,
765
+ var(--_ctm-tab-dn-im-cd-sw-cr, var(--_ctm-dn-im-cd-sw-cr))
766
+ )
767
+ );
768
+ padding: var(
769
+ --_ctm-mob-dn-im-cd-pg,
770
+ var(--_ctm-tab-dn-im-cd-pg, var(--_ctm-dn-im-cd-pg))
771
+ );
772
+ .card__img__container {
773
+ height: 300px;
774
+ background-color: #fff;
775
+ display: flex;
776
+ align-items: flex-start;
777
+ justify-content: center;
778
+ border-radius: 6px;
779
+ .placeholder__image {
780
+ width: 100%;
781
+ height: 100%;
782
+ object-fit: cover;
783
+ }
784
+ }
785
+ .price_details {
786
+ display: flex;
787
+ flex-direction: column;
788
+ gap: 8px;
789
+
790
+ .product__name {
791
+ background-color: var(
792
+ --_ctm-mob-dn-ne-bd-cr,
793
+ var(--_ctm-tab-dn-ne-bd-cr, var(--_ctm-dn-ne-bd-cr))
794
+ );
795
+
796
+ border-color: var(
797
+ --_ctm-mob-dn-ne-br-cr,
798
+ var(--_ctm-tab-dn-ne-br-cr, var(--_ctm-dn-ne-br-cr))
799
+ );
800
+
801
+ border-style: var(
802
+ --_ctm-mob-dn-ne-br-se,
803
+ var(--_ctm-tab-dn-ne-br-se, var(--_ctm-dn-ne-br-se))
804
+ );
805
+
806
+ border-width: var(
807
+ --_ctm-mob-dn-ne-br-wh,
808
+ var(--_ctm-tab-dn-ne-br-wh, var(--_ctm-dn-ne-br-wh))
809
+ );
810
+
811
+ border-radius: var(
812
+ --_ctm-mob-dn-ne-br-rs,
813
+ var(--_ctm-tab-dn-ne-br-rs, var(--_ctm-dn-ne-br-rs))
814
+ );
815
+
816
+ box-shadow: var(
817
+ --_show-shadow,
818
+ var(--_ctm-mob-dn-ne-sw-ae, var(--_ctm-tab-dn-ne-sw-ae, var(--_ctm-dn-ne-sw-ae)))
819
+ var(
820
+ --_ctm-mob-dn-ne-sw-br,
821
+ var(--_ctm-tab-dn-ne-sw-br, var(--_ctm-dn-ne-sw-br))
822
+ )
823
+ var(
824
+ --_ctm-mob-dn-ne-sw-sd,
825
+ var(--_ctm-tab-dn-ne-sw-sd, var(--_ctm-dn-ne-sw-sd))
826
+ )
827
+ var(
828
+ --_ctm-mob-dn-ne-sw-cr,
829
+ var(--_ctm-tab-dn-ne-sw-cr, var(--_ctm-dn-ne-sw-cr))
830
+ )
831
+ );
832
+ white-space: nowrap;
833
+
834
+ height: 100%;
835
+
836
+ color: var(--_ctm-mob-dn-ne-cr, var(--_ctm-tab-dn-ne-cr, var(--_ctm-dn-ne-cr)));
837
+ font-family: var(
838
+ --_ctm-mob-dn-ne-ft-fy,
839
+ var(--_ctm-tab-dn-ne-ft-fy, var(--_ctm-dn-ne-ft-fy))
840
+ );
841
+ font-size: var(
842
+ --_ctm-mob-dn-ne-ft-se,
843
+ var(--_ctm-tab-dn-ne-ft-se, var(--_ctm-dn-ne-ft-se))
844
+ );
845
+ font-weight: var(
846
+ --_ctm-mob-dn-ne-ft-wt,
847
+ var(--_ctm-tab-dn-ne-ft-wt, var(--_ctm-dn-ne-ft-wt))
848
+ );
849
+ font-style: var(
850
+ --_ctm-mob-dn-ne-ft-se-ic,
851
+ var(--_ctm-tab-dn-ne-ft-se-ic, var(--_ctm-dn-ne-ft-se-ic))
852
+ );
853
+ text-align: var(
854
+ --_ctm-mob-dn-ne-tt-an,
855
+ var(--_ctm-tab-dn-ne-tt-an, var(--_ctm-dn-ne-tt-an))
856
+ );
857
+ letter-spacing: var(
858
+ --_ctm-mob-dn-ne-lr-sg,
859
+ var(--_ctm-tab-dn-ne-lr-sg, var(--_ctm-dn-ne-lr-sg))
860
+ );
861
+ line-height: var(
862
+ --_ctm-mob-dn-ne-le-ht,
863
+ var(--_ctm-tab-dn-ne-le-ht, var(--_ctm-dn-ne-le-ht))
864
+ );
865
+ text-decoration: var(
866
+ --_ctm-mob-dn-ne-ue,
867
+ var(--_ctm-tab-dn-ne-ue, var(--_ctm-dn-ne-ue))
868
+ );
869
+ padding: prepareMediaVariable(--_ctm-dn-ne-pg);
870
+ &[data-has-link="true"] {
871
+ cursor: pointer;
872
+ &:hover {
873
+ color: var(--_primary-500);
874
+ }
875
+ }
876
+ }
877
+ .brand__container {
878
+ display: flex;
879
+ align-items: center;
880
+ gap: 8px;
881
+ color: var(--_gray-600);
882
+ font-weight: 500;
883
+ }
884
+ }
885
+
886
+ .brand {
887
+ display: flex;
888
+ align-items: center;
889
+ gap: 6px;
890
+
891
+ .value {
892
+ // padding-block-end: var(--_sf-dc-pd-bt);
893
+
894
+ color: var(
895
+ --_ctm-mob-dn-bd-cr-dc,
896
+ var(--_ctm-tab-dn-bd-cr-dc, var(--_ctm-dn-bd-cr-dc))
897
+ );
898
+ font-family: var(
899
+ --_ctm-mob-dn-bd-ft-fy-dc,
900
+ var(--_ctm-tab-dn-bd-ft-fy-dc, var(--_ctm-dn-bd-ft-fy-dc))
901
+ );
902
+ font-size: var(
903
+ --_ctm-mob-dn-bd-ft-se-dc,
904
+ var(--_ctm-tab-dn-bd-ft-se-dc, var(--_ctm-dn-bd-ft-se-dc))
905
+ );
906
+ font-weight: var(
907
+ --_ctm-mob-dn-bd-ft-wt-dc,
908
+ var(--_ctm-tab-dn-bd-ft-wt-dc, var(--_ctm-dn-bd-ft-wt-dc))
909
+ );
910
+ font-style: var(
911
+ --_ctm-mob-dn-bd-ft-se-ic-dc,
912
+ var(--_ctm-tab-dn-bd-ft-se-ic-dc, var(--_ctm-dn-bd-ft-se-ic-dc))
913
+ );
914
+ text-align: var(
915
+ --_ctm-mob-dn-bd-tt-an-dc,
916
+ var(--_ctm-tab-dn-bd-tt-an-dc, var(--_ctm-dn-bd-tt-an-dc))
917
+ );
918
+ letter-spacing: var(
919
+ --_ctm-mob-dn-bd-lr-sg-dc,
920
+ var(--_ctm-tab-dn-bd-lr-sg-dc, var(--_ctm-dn-bd-lr-sg-dc))
921
+ );
922
+ line-height: var(
923
+ --_ctm-mob-dn-bd-le-ht-dc,
924
+ var(--_ctm-tab-dn-bd-le-ht-dc, var(--_ctm-dn-bd-le-ht-dc))
925
+ );
926
+ text-decoration: var(
927
+ --_ctm-mob-dn-bd-ue-dc,
928
+ var(--_ctm-tab-dn-bd-ue-dc, var(--_ctm-dn-bd-ue-dc))
929
+ );
930
+ }
931
+ .label {
932
+ color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
933
+ font-family: var(
934
+ --_ctm-mob-dn-bd-ft-fy,
935
+ var(--_ctm-tab-dn-bd-ft-fy, var(--_ctm-dn-bd-ft-fy))
936
+ );
937
+ font-size: var(
938
+ --_ctm-mob-dn-bd-ft-se,
939
+ var(--_ctm-tab-dn-bd-ft-se, var(--_ctm-dn-bd-ft-se))
940
+ );
941
+ font-weight: var(
942
+ --_ctm-mob-dn-bd-ft-wt,
943
+ var(--_ctm-tab-dn-bd-ft-wt, var(--_ctm-dn-bd-ft-wt))
944
+ );
945
+ font-style: var(
946
+ --_ctm-mob-dn-bd-ft-se-ic,
947
+ var(--_ctm-tab-dn-bd-ft-se-ic, var(--_ctm-dn-bd-ft-se-ic))
948
+ );
949
+ text-align: var(
950
+ --_ctm-mob-dn-bd-tt-an,
951
+ var(--_ctm-tab-dn-bd-tt-an, var(--_ctm-dn-bd-tt-an))
952
+ );
953
+ letter-spacing: var(
954
+ --_ctm-mob-dn-bd-lr-sg,
955
+ var(--_ctm-tab-dn-bd-lr-sg, var(--_ctm-dn-bd-lr-sg))
956
+ );
957
+ line-height: var(
958
+ --_ctm-mob-dn-bd-le-ht,
959
+ var(--_ctm-tab-dn-bd-le-ht, var(--_ctm-dn-bd-le-ht))
960
+ );
961
+ text-decoration: var(
962
+ --_ctm-mob-dn-bd-ue,
963
+ var(--_ctm-tab-dn-bd-ue, var(--_ctm-dn-bd-ue))
964
+ );
965
+ }
966
+ }
967
+ .code {
968
+ display: flex;
969
+ align-items: center;
970
+ gap: 6px;
971
+
972
+ .value {
973
+ // padding-block-end: var(--_sf-dc-pd-bt);
974
+
975
+ color: var(
976
+ --_ctm-mob-dn-ce-cr-dc,
977
+ var(--_ctm-tab-dn-ce-cr-dc, var(--_ctm-dn-ce-cr-dc))
978
+ );
979
+ font-family: var(
980
+ --_ctm-mob-dn-ce-ft-fy-dc,
981
+ var(--_ctm-tab-dn-ce-ft-fy-dc, var(--_ctm-dn-ce-ft-fy-dc))
982
+ );
983
+ font-size: var(
984
+ --_ctm-mob-dn-ce-ft-se-dc,
985
+ var(--_ctm-tab-dn-ce-ft-se-dc, var(--_ctm-dn-ce-ft-se-dc))
986
+ );
987
+ font-weight: var(
988
+ --_ctm-mob-dn-ce-ft-wt-dc,
989
+ var(--_ctm-tab-dn-ce-ft-wt-dc, var(--_ctm-dn-ce-ft-wt-dc))
990
+ );
991
+ font-style: var(
992
+ --_ctm-mob-dn-ce-ft-se-ic-dc,
993
+ var(--_ctm-tab-dn-ce-ft-se-ic-dc, var(--_ctm-dn-ce-ft-se-ic-dc))
994
+ );
995
+ text-align: var(
996
+ --_ctm-mob-dn-ce-tt-an-dc,
997
+ var(--_ctm-tab-dn-ce-tt-an-dc, var(--_ctm-dn-ce-tt-an-dc))
998
+ );
999
+ letter-spacing: var(
1000
+ --_ctm-mob-dn-ce-lr-sg-dc,
1001
+ var(--_ctm-tab-dn-ce-lr-sg-dc, var(--_ctm-dn-ce-lr-sg-dc))
1002
+ );
1003
+ line-height: var(
1004
+ --_ctm-mob-dn-ce-le-ht-dc,
1005
+ var(--_ctm-tab-dn-ce-le-ht-dc, var(--_ctm-dn-ce-le-ht-dc))
1006
+ );
1007
+ text-decoration: var(
1008
+ --_ctm-mob-dn-ce-ue-dc,
1009
+ var(--_ctm-tab-dn-ce-ue-dc, var(--_ctm-dn-ce-ue-dc))
1010
+ );
1011
+ }
1012
+ .label {
1013
+ color: var(--_ctm-mob-dn-ce-cr, var(--_ctm-tab-dn-ce-cr, var(--_ctm-dn-ce-cr)));
1014
+ font-family: var(
1015
+ --_ctm-mob-dn-ce-ft-fy,
1016
+ var(--_ctm-tab-dn-ce-ft-fy, var(--_ctm-dn-ce-ft-fy))
1017
+ );
1018
+ font-size: var(
1019
+ --_ctm-mob-dn-ce-ft-se,
1020
+ var(--_ctm-tab-dn-ce-ft-se, var(--_ctm-dn-ce-ft-se))
1021
+ );
1022
+ font-weight: var(
1023
+ --_ctm-mob-dn-ce-ft-wt,
1024
+ var(--_ctm-tab-dn-ce-ft-wt, var(--_ctm-dn-ce-ft-wt))
1025
+ );
1026
+ font-style: var(
1027
+ --_ctm-mob-dn-ce-ft-se-ic,
1028
+ var(--_ctm-tab-dn-ce-ft-se-ic, var(--_ctm-dn-ce-ft-se-ic))
1029
+ );
1030
+ text-align: var(
1031
+ --_ctm-mob-dn-ce-tt-an,
1032
+ var(--_ctm-tab-dn-ce-tt-an, var(--_ctm-dn-ce-tt-an))
1033
+ );
1034
+ letter-spacing: var(
1035
+ --_ctm-mob-dn-ce-lr-sg,
1036
+ var(--_ctm-tab-dn-ce-lr-sg, var(--_ctm-dn-ce-lr-sg))
1037
+ );
1038
+ line-height: var(
1039
+ --_ctm-mob-dn-ce-le-ht,
1040
+ var(--_ctm-tab-dn-ce-le-ht, var(--_ctm-dn-ce-le-ht))
1041
+ );
1042
+ text-decoration: var(
1043
+ --_ctm-mob-dn-ce-ue,
1044
+ var(--_ctm-tab-dn-ce-ue, var(--_ctm-dn-ce-ue))
1045
+ );
1046
+ }
1047
+ }
1048
+ .price {
1049
+ background-color: var(
1050
+ --_ctm-mob-dn-pe-bd-cr,
1051
+ var(--_ctm-tab-dn-pe-bd-cr, var(--_ctm-dn-pe-bd-cr))
1052
+ );
1053
+
1054
+ border-color: var(
1055
+ --_ctm-mob-dn-pe-br-cr,
1056
+ var(--_ctm-tab-dn-pe-br-cr, var(--_ctm-dn-pe-br-cr))
1057
+ );
1058
+
1059
+ border-style: var(
1060
+ --_ctm-mob-dn-pe-br-se,
1061
+ var(--_ctm-tab-dn-pe-br-se, var(--_ctm-dn-pe-br-se))
1062
+ );
1063
+
1064
+ border-width: var(
1065
+ --_ctm-mob-dn-pe-br-wh,
1066
+ var(--_ctm-tab-dn-pe-br-wh, var(--_ctm-dn-pe-br-wh))
1067
+ );
1068
+
1069
+ border-radius: var(
1070
+ --_ctm-mob-dn-pe-br-rs,
1071
+ var(--_ctm-tab-dn-pe-br-rs, var(--_ctm-dn-pe-br-rs))
1072
+ );
1073
+
1074
+ box-shadow: var(
1075
+ --_show-shadow,
1076
+ var(--_ctm-mob-dn-pe-sw-ae, var(--_ctm-tab-dn-pe-sw-ae, var(--_ctm-dn-pe-sw-ae)))
1077
+ var(--_ctm-mob-dn-pe-sw-br, var(--_ctm-tab-dn-pe-sw-br, var(--_ctm-dn-pe-sw-br)))
1078
+ var(--_ctm-mob-dn-pe-sw-sd, var(--_ctm-tab-dn-pe-sw-sd, var(--_ctm-dn-pe-sw-sd)))
1079
+ var(--_ctm-mob-dn-pe-sw-cr, var(--_ctm-tab-dn-pe-sw-cr, var(--_ctm-dn-pe-sw-cr)))
1080
+ );
1081
+ white-space: nowrap;
1082
+
1083
+ height: 100%;
1084
+
1085
+ color: var(--_ctm-mob-dn-pe-cr, var(--_ctm-tab-dn-pe-cr, var(--_ctm-dn-pe-cr)));
1086
+ font-family: var(
1087
+ --_ctm-mob-dn-pe-ft-fy,
1088
+ var(--_ctm-tab-dn-pe-ft-fy, var(--_ctm-dn-pe-ft-fy))
1089
+ );
1090
+ font-size: var(
1091
+ --_ctm-mob-dn-pe-ft-se,
1092
+ var(--_ctm-tab-dn-pe-ft-se, var(--_ctm-dn-pe-ft-se))
1093
+ );
1094
+ font-weight: var(
1095
+ --_ctm-mob-dn-pe-ft-wt,
1096
+ var(--_ctm-tab-dn-pe-ft-wt, var(--_ctm-dn-pe-ft-wt))
1097
+ );
1098
+ font-style: var(
1099
+ --_ctm-mob-dn-pe-ft-se-ic,
1100
+ var(--_ctm-tab-dn-pe-ft-se-ic, var(--_ctm-dn-pe-ft-se-ic))
1101
+ );
1102
+ text-align: var(
1103
+ --_ctm-mob-dn-pe-tt-an,
1104
+ var(--_ctm-tab-dn-pe-tt-an, var(--_ctm-dn-pe-tt-an))
1105
+ );
1106
+ letter-spacing: var(
1107
+ --_ctm-mob-dn-pe-lr-sg,
1108
+ var(--_ctm-tab-dn-pe-lr-sg, var(--_ctm-dn-pe-lr-sg))
1109
+ );
1110
+ line-height: var(
1111
+ --_ctm-mob-dn-pe-le-ht,
1112
+ var(--_ctm-tab-dn-pe-le-ht, var(--_ctm-dn-pe-le-ht))
1113
+ );
1114
+ text-decoration: var(
1115
+ --_ctm-mob-dn-pe-ue,
1116
+ var(--_ctm-tab-dn-pe-ue, var(--_ctm-dn-pe-ue))
1117
+ );
1118
+ padding: prepareMediaVariable(--_ctm-dn-pe-pg);
1119
+ }
1120
+ }
1121
+
1122
+ .quota__details__element {
1123
+ background-color: var(
1124
+ --_ctm-mob-dn-qa-ds-wt-se-bd-cr,
1125
+ var(--_ctm-tab-dn-qa-ds-wt-se-bd-cr, var(--_ctm-dn-qa-ds-wt-se-bd-cr))
1126
+ );
1127
+ padding: var(
1128
+ --_ctm-mob-dn-qa-ds-wt-se-pg,
1129
+ var(--_ctm-tab-dn-qa-ds-wt-se-pg, var(--_ctm-dn-qa-ds-wt-se-pg))
1130
+ );
1131
+ display: flex;
1132
+ flex-direction: column;
1133
+ --_sf-gp: var(
1134
+ --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1135
+ var(
1136
+ --_ctm-tab-dn-qa-ds-wt-se-im-sg,
1137
+ var(--_ctm-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg), 16px)
1138
+ )
1139
+ );
1140
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1141
+ row-gap: var(--_sf-gp);
1142
+ width: 100%;
1143
+ height: 100%;
1144
+ border-color: var(
1145
+ --_ctm-mob-dn-qa-ds-wt-se-br-cr,
1146
+ var(--_ctm-tab-dn-qa-ds-wt-se-br-cr, var(--_ctm-dn-qa-ds-wt-se-br-cr))
1147
+ );
1148
+ border-style: var(
1149
+ --_ctm-mob-dn-qa-ds-wt-se-br-se,
1150
+ var(--_ctm-tab-dn-qa-ds-wt-se-br-se, var(--_ctm-dn-qa-ds-wt-se-br-se))
1151
+ );
1152
+ border-width: var(
1153
+ --_ctm-mob-dn-qa-ds-wt-se-br-wh,
1154
+ var(--_ctm-tab-dn-qa-ds-wt-se-br-wh, var(--_ctm-dn-qa-ds-wt-se-br-wh))
1155
+ );
1156
+ border-radius: var(
1157
+ --_ctm-mob-dn-qa-ds-wt-se-br-rs,
1158
+ var(--_ctm-tab-dn-qa-ds-wt-se-br-rs, var(--_ctm-dn-qa-ds-wt-se-br-rs))
1159
+ );
1160
+ box-shadow: var(
1161
+ --_show-shadow,
1162
+ var(
1163
+ --_ctm-mob-dn-qa-ds-wt-se-sw-ae,
1164
+ var(--_ctm-tab-dn-qa-ds-wt-se-sw-ae, var(--_ctm-dn-qa-ds-wt-se-sw-ae))
1165
+ )
1166
+ var(
1167
+ --_ctm-mob-dn-qa-ds-wt-se-sw-br,
1168
+ var(--_ctm-tab-dn-qa-ds-wt-se-sw-br, var(--_ctm-dn-qa-ds-wt-se-sw-br))
1169
+ )
1170
+ var(
1171
+ --_ctm-mob-dn-qa-ds-wt-se-sw-sd,
1172
+ var(--_ctm-tab-dn-qa-ds-wt-se-sw-sd, var(--_ctm-dn-qa-ds-wt-se-sw-sd))
1173
+ )
1174
+ var(
1175
+ --_ctm-mob-dn-qa-ds-wt-se-sw-cr,
1176
+ var(--_ctm-tab-dn-qa-ds-wt-se-sw-cr, var(--_ctm-dn-qa-ds-wt-se-sw-cr))
1177
+ )
1178
+ );
1179
+
1180
+ .product__hilights {
1181
+ display: flex;
1182
+ align-items: var(
1183
+ --_ctm-mob-dn-qa-ds-wt-se-wt-at,
1184
+ var(--_ctm-tab-dn-qa-ds-wt-se-wt-at, var(--_ctm-dn-qa-ds-wt-se-wt-at))
1185
+ );
1186
+ justify-content: var(
1187
+ --_ctm-mob-dn-qa-ds-wt-se-hl-at,
1188
+ var(--_ctm-tab-dn-qa-ds-wt-se-hl-at, var(--_ctm-dn-qa-ds-wt-se-hl-at))
1189
+ );
1190
+ gap: var(
1191
+ --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1192
+ var(--_ctm-tab-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg))
1193
+ );
1194
+ width: 100%;
1195
+
1196
+ height: 100%;
1197
+
1198
+ &[data-show-dividers="true"] {
1199
+ .product__list__item {
1200
+ position: relative;
1201
+ &:not(:last-child)::after {
1202
+ content: "";
1203
+ width: var(
1204
+ --_ctm-mob-dn-qa-ds-dr-dr-wh,
1205
+ var(--_ctm-tab-dn-qa-ds-dr-dr-wh, var(--_ctm-dn-qa-ds-dr-dr-wh))
1206
+ );
1207
+ height: 100%;
1208
+ position: absolute;
1209
+ right: calc(
1210
+ (
1211
+ -1 *
1212
+ var(
1213
+ --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1214
+ var(--_ctm-tab-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg))
1215
+ ) /
1216
+ 2
1217
+ ) -
1218
+ (
1219
+ var(
1220
+ --_ctm-mob-dn-qa-ds-dr-dr-wh,
1221
+ var(--_ctm-tab-dn-qa-ds-dr-dr-wh, var(--_ctm-dn-qa-ds-dr-dr-wh))
1222
+ ) /
1223
+ 2
1224
+ )
1225
+ );
1226
+ background-color: var(
1227
+ --_ctm-mob-dn-qa-ds-dr-dr-cr,
1228
+ var(--_ctm-tab-dn-qa-ds-dr-dr-cr, var(--_ctm-dn-qa-ds-dr-dr-cr))
1229
+ );
1230
+ }
1231
+ }
1232
+ }
1233
+ .product__list__item {
1234
+ display: flex;
1235
+ align-items: center;
1236
+ gap: 4px;
1237
+
1238
+ .svg_icon {
1239
+ display: flex;
1240
+ }
1241
+ }
1242
+ .quota__left {
1243
+ .count {
1244
+ // padding-inline: var(--_sf-cd-gp);
1245
+ color: var(
1246
+ --_ctm-mob-dn-qa-ds-qa-lt-cr,
1247
+ var(--_ctm-tab-dn-qa-ds-qa-lt-cr, var(--_ctm-dn-qa-ds-qa-lt-cr))
1248
+ );
1249
+ font-family: var(
1250
+ --_ctm-mob-dn-qa-ds-qa-lt-ft-fy,
1251
+ var(--_ctm-tab-dn-qa-ds-qa-lt-ft-fy, var(--_ctm-dn-qa-ds-qa-lt-ft-fy))
1252
+ );
1253
+ font-size: var(
1254
+ --_ctm-mob-dn-qa-ds-qa-lt-ft-se,
1255
+ var(--_ctm-tab-dn-qa-ds-qa-lt-ft-se, var(--_ctm-dn-qa-ds-qa-lt-ft-se))
1256
+ );
1257
+ font-weight: var(
1258
+ --_ctm-mob-dn-qa-ds-qa-lt-ft-wt,
1259
+ var(--_ctm-tab-dn-qa-ds-qa-lt-ft-wt, var(--_ctm-dn-qa-ds-qa-lt-ft-wt))
1260
+ );
1261
+ font-style: var(
1262
+ --_ctm-mob-dn-qa-ds-qa-lt-ft-se-ic,
1263
+ var(--_ctm-tab-dn-qa-ds-qa-lt-ft-se-ic, var(--_ctm-dn-qa-ds-qa-lt-ft-se-ic))
1264
+ );
1265
+ text-align: var(
1266
+ --_ctm-mob-dn-qa-ds-qa-lt-tt-an,
1267
+ var(--_ctm-tab-dn-qa-ds-qa-lt-tt-an, var(--_ctm-dn-qa-ds-qa-lt-tt-an))
1268
+ );
1269
+ letter-spacing: var(
1270
+ --_ctm-mob-dn-qa-ds-qa-lt-lr-sg,
1271
+ var(--_ctm-tab-dn-qa-ds-qa-lt-lr-sg, var(--_ctm-dn-qa-ds-qa-lt-lr-sg))
1272
+ );
1273
+ line-height: var(
1274
+ --_ctm-mob-dn-qa-ds-qa-lt-le-ht,
1275
+ var(--_ctm-tab-dn-qa-ds-qa-lt-le-ht, var(--_ctm-dn-qa-ds-qa-lt-le-ht-dc))
1276
+ );
1277
+ text-decoration: var(
1278
+ --_ctm-mob-dn-qa-ds-qa-lt-ue,
1279
+ var(--_ctm-tab-dn-qa-ds-qa-lt-ue, var(--_ctm-dn-qa-ds-qa-lt-ue))
1280
+ );
1281
+ }
1282
+ .icon {
1283
+ display: var(--_sf-show-icon-ff, flex);
1284
+ svg {
1285
+ width: var(
1286
+ --_ctm-mab-dn-qa-lt-in-se,
1287
+ var(--_ctm-tab-dn-qa-ds-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-lt-in-se))
1288
+ );
1289
+ height: var(
1290
+ --_ctm-mob-dn-qa-ds-qa-lt-in-se,
1291
+ var(--_ctm-tab-dn-qa-ds-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-lt-in-se))
1292
+ );
1293
+ path {
1294
+ stroke: var(
1295
+ --_ctm-mob-dn-qa-ds-qa-lt-in-c1,
1296
+ var(--_ctm-tab-dn-qa-ds-qa-lt-in-c1, var(--_ctm-dn-qa-ds-qa-lt-in-c1))
1297
+ );
1298
+ }
1299
+ }
1300
+ }
1301
+ }
1302
+ .days__left {
1303
+ .count {
1304
+ // padding-inline: var(--_sf-cd-gp);
1305
+ color: var(
1306
+ --_ctm-mob-dn-qa-ds-ds-lt-cr,
1307
+ var(--_ctm-tab-dn-qa-ds-ds-lt-cr, var(--_ctm-dn-qa-ds-ds-lt-cr))
1308
+ );
1309
+ font-family: var(
1310
+ --_ctm-mob-dn-qa-ds-ds-lt-ft-fy,
1311
+ var(--_ctm-tab-dn-qa-ds-ds-lt-ft-fy, var(--_ctm-dn-qa-ds-ds-lt-ft-fy))
1312
+ );
1313
+ font-size: var(
1314
+ --_ctm-mob-dn-qa-ds-ds-lt-ft-se,
1315
+ var(--_ctm-tab-dn-qa-ds-ds-lt-ft-se, var(--_ctm-dn-qa-ds-ds-lt-ft-se))
1316
+ );
1317
+ font-weight: var(
1318
+ --_ctm-mob-dn-qa-ds-ds-lt-ft-wt,
1319
+ var(--_ctm-tab-dn-qa-ds-ds-lt-ft-wt, var(--_ctm-dn-qa-ds-ds-lt-ft-wt))
1320
+ );
1321
+ font-style: var(
1322
+ --_ctm-mob-dn-qa-ds-ds-lt-ft-se-ic,
1323
+ var(--_ctm-tab-dn-qa-ds-ds-lt-ft-se-ic, var(--_ctm-dn-qa-ds-ds-lt-ft-se-ic))
1324
+ );
1325
+ text-align: var(
1326
+ --_ctm-mob-dn-qa-ds-ds-lt-tt-an,
1327
+ var(--_ctm-tab-dn-qa-ds-ds-lt-tt-an, var(--_ctm-dn-qa-ds-ds-lt-tt-an))
1328
+ );
1329
+ letter-spacing: var(
1330
+ --_ctm-mob-dn-qa-ds-ds-lt-lr-sg,
1331
+ var(--_ctm-tab-dn-qa-ds-ds-lt-lr-sg, var(--_ctm-dn-qa-ds-ds-lt-lr-sg))
1332
+ );
1333
+ line-height: var(
1334
+ --_ctm-mob-dn-qa-ds-ds-lt-le-ht,
1335
+ var(--_ctm-tab-dn-qa-ds-ds-lt-le-ht, var(--_ctm-dn-qa-ds-ds-lt-le-ht-dc))
1336
+ );
1337
+ text-decoration: var(
1338
+ --_ctm-mob-dn-qa-ds-ds-lt-ue,
1339
+ var(--_ctm-tab-dn-qa-ds-ds-lt-ue, var(--_ctm-dn-qa-ds-ds-lt-ue))
1340
+ );
1341
+ }
1342
+ .icon {
1343
+ display: var(--_sf-show-icon-ff, flex);
1344
+ svg {
1345
+ width: var(
1346
+ --_ctm-mab-dn-ds-lt-in-se,
1347
+ var(--_ctm-tab-dn-qa-ds-ds-lt-in-se, var(--_ctm-dn-qa-ds-ds-lt-in-se))
1348
+ );
1349
+ height: var(
1350
+ --_ctm-mob-dn-qa-ds-ds-lt-in-se,
1351
+ var(--_ctm-tab-dn-qa-ds-ds-lt-in-se, var(--_ctm-dn-qa-ds-ds-lt-in-se))
1352
+ );
1353
+ path {
1354
+ stroke: var(
1355
+ --_ctm-mob-dn-qa-ds-ds-lt-in-c1,
1356
+ var(--_ctm-tab-dn-qa-ds-ds-lt-in-c1, var(--_ctm-dn-qa-ds-ds-lt-in-c1))
1357
+ );
1358
+ }
1359
+ }
1360
+ }
1361
+ }
1362
+ }
1363
+ }
1364
+ }
1365
+ }
1366
+
1367
+ .allocation__profile__tabs {
1368
+ width: 100%;
1369
+ background-color: var(
1370
+ --_ctm-mob-dn-ps-sr-wt-se-bd-cr,
1371
+ var(--_ctm-tab-dn-ps-sr-wt-se-bd-cr, var(--_ctm-dn-ps-sr-wt-se-bd-cr))
1372
+ );
1373
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
1374
+ display: flex;
1375
+ flex-direction: column;
1376
+ --_sf-gp: var(
1377
+ --_ctm-mob-lt-im-sg,
1378
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
1379
+ );
1380
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1381
+ row-gap: var(--_sf-gp);
1382
+ width: 100%;
1383
+ height: 100%;
1384
+ border-color: var(
1385
+ --_ctm-mob-dn-ps-sr-wt-se-br-cr,
1386
+ var(--_ctm-tab-dn-ps-sr-wt-se-br-cr, var(--_ctm-dn-ps-sr-wt-se-br-cr))
1387
+ );
1388
+ border-style: var(
1389
+ --_ctm-mob-dn-ps-sr-wt-se-br-se,
1390
+ var(--_ctm-tab-dn-ps-sr-wt-se-br-se, var(--_ctm-dn-ps-sr-wt-se-br-se))
1391
+ );
1392
+ border-width: var(
1393
+ --_ctm-mob-dn-ps-sr-wt-se-br-wh,
1394
+ var(--_ctm-tab-dn-ps-sr-wt-se-br-wh, var(--_ctm-dn-ps-sr-wt-se-br-wh))
1395
+ );
1396
+ border-radius: var(
1397
+ --_ctm-mob-dn-ps-sr-wt-se-br-rs,
1398
+ var(--_ctm-tab-dn-ps-sr-wt-se-br-rs, var(--_ctm-dn-ps-sr-wt-se-br-rs))
1399
+ );
1400
+ box-shadow: var(
1401
+ --_show-shadow,
1402
+ var(
1403
+ --_ctm-mob-dn-ps-sr-wt-se-sw-ae,
1404
+ var(--_ctm-tab-dn-ps-sr-wt-se-sw-ae, var(--_ctm-dn-ps-sr-wt-se-sw-ae))
1405
+ )
1406
+ var(
1407
+ --_ctm-mob-dn-ps-sr-wt-se-sw-br,
1408
+ var(--_ctm-tab-dn-ps-sr-wt-se-sw-br, var(--_ctm-dn-ps-sr-wt-se-sw-br))
1409
+ )
1410
+ var(
1411
+ --_ctm-mob-dn-ps-sr-wt-se-sw-sd,
1412
+ var(--_ctm-tab-dn-ps-sr-wt-se-sw-sd, var(--_ctm-dn-ps-sr-wt-se-sw-sd))
1413
+ )
1414
+ var(
1415
+ --_ctm-mob-dn-ps-sr-wt-se-sw-cr,
1416
+ var(--_ctm-tab-dn-ps-sr-wt-se-sw-cr, var(--_ctm-dn-ps-sr-wt-se-sw-cr))
1417
+ )
1418
+ );
1419
+ .profile__button {
1420
+ &[data-show-shadow="false"] {
1421
+ --_show-shadow: none;
1422
+ }
1423
+ &[data-icon-position="left"] {
1424
+ --_sf-fd-bn: row;
1425
+ }
1426
+ &[data-icon-position="right"] {
1427
+ --_sf-fd-bn: row-reverse;
1428
+ }
1429
+ &[data-icon-position="center"] {
1430
+ --_sf-fd-bn: row;
1431
+ }
1432
+
1433
+ &:hover {
1434
+ --_sf-hr-bd-cr: var(
1435
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-bd-cr,
1436
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-bd-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-bd-cr))
1437
+ );
1438
+ --_sf-hr-br-cr: var(
1439
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-cr,
1440
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-cr))
1441
+ );
1442
+ --_sf-hr-br-se: var(
1443
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-se,
1444
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-se))
1445
+ );
1446
+ --_sf-hr-br-wh: var(
1447
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-wh,
1448
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-wh, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-wh))
1449
+ );
1450
+ --_sf-hr-br-rs: var(
1451
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-rs,
1452
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-rs, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-rs))
1453
+ );
1454
+ --_sf-hr-at: var(
1455
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-at,
1456
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-at, var(--_ctm-dn-ps-sr-pe-tb-hr-se-at))
1457
+ );
1458
+ --_sf-hr-in-ad-tt-sg: var(
1459
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg,
1460
+ var(
1461
+ --_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg,
1462
+ var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg)
1463
+ )
1464
+ );
1465
+
1466
+ // for shadow
1467
+ --_sf-hr-sw-ae: var(
1468
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-ae,
1469
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-ae, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-ae))
1470
+ );
1471
+ --_sf-hr-sw-br: var(
1472
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-br,
1473
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-br, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-br))
1474
+ );
1475
+ --_sf-hr-sw-hr: var(
1476
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-hr,
1477
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-hr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-hr))
1478
+ );
1479
+ --_sf-hr-sw-cr: var(
1480
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-cr,
1481
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-cr))
1482
+ );
1483
+
1484
+ // for font
1485
+
1486
+ --_sf-hr-cr: var(
1487
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-cr,
1488
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-cr))
1489
+ );
1490
+ --_sf-hr-ft-fy: var(
1491
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-fy,
1492
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-fy, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-fy))
1493
+ );
1494
+ --_sf-hr-ft-se: var(
1495
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-se,
1496
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-se))
1497
+ );
1498
+ --_sf-hr-ft-wt: var(
1499
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-wt,
1500
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-wt, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-wt))
1501
+ );
1502
+ --_sf-hr-ft-se-ic: var(
1503
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-se-ic,
1504
+ var(
1505
+ --_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-se-ic,
1506
+ var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-se-ic)
1507
+ )
1508
+ );
1509
+ --_sf-hr-tt-an: var(
1510
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-tt-an,
1511
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-tt-an, var(--_ctm-dn-ps-sr-pe-tb-hr-se-tt-an))
1512
+ );
1513
+ --_sf-hr-lr-sg: var(
1514
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-lr-sg,
1515
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-lr-sg, var(--_ctm-dn-ps-sr-pe-tb-hr-se-lr-sg))
1516
+ );
1517
+ --_sf-hr-le-ht: var(
1518
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-le-ht,
1519
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-le-ht, var(--_ctm-dn-ps-sr-pe-tb-hr-se-le-ht))
1520
+ );
1521
+
1522
+ --_sf-hr-in-se: var(
1523
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-se,
1524
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-se))
1525
+ );
1526
+ --_sf-hr-in-se: var(
1527
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-se,
1528
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-se))
1529
+ );
1530
+ --_sf-hr-in-c1: var(
1531
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-c1,
1532
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-c1, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-c1))
1533
+ );
1534
+ --_sf-hr-ue: var(
1535
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ue,
1536
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ue, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ue))
1537
+ );
1538
+
1539
+ // for pading and width
1540
+ --_sf-hr-pg: var(
1541
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-pg,
1542
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-pg, var(--_ctm-dn-ps-sr-pe-tb-hr-se-pg))
1543
+ );
1544
+ --_sf-hr-wh: var(
1545
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-se-wh,
1546
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-wh, var(--_ctm-dn-ps-sr-pe-tb-hr-se-wh))
1547
+ );
1548
+
1549
+ &[data-hover-show-shadow="false"] {
1550
+ --_hover-show-shadow: none;
1551
+ }
1552
+ &[data-hover-show-icon="false"] {
1553
+ --_hover-show-icon: none;
1554
+ }
1555
+ }
1556
+
1557
+ background-color: var(
1558
+ --_sf-hr-bd-cr,
1559
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-bd-cr)
1560
+ );
1561
+
1562
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-pg));
1563
+ display: flex;
1564
+ flex-direction: var(--_sf-fd-bn);
1565
+ align-items: center;
1566
+
1567
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-at));
1568
+ gap: var(
1569
+ --_sf-hr-in-ad-tt-sg,
1570
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-in-ad-tt-sg)
1571
+ );
1572
+
1573
+ border-radius: var(
1574
+ --_sf-hr-br-rs,
1575
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-rs)
1576
+ );
1577
+
1578
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-ae))
1579
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-br))
1580
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-sd))
1581
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-cr));
1582
+
1583
+ &[data-show-border="true"] {
1584
+ border-color: var(
1585
+ --_sf-hr-br-cr,
1586
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-cr)
1587
+ );
1588
+
1589
+ border-style: var(
1590
+ --_sf-hr-br-se,
1591
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-se)
1592
+ );
1593
+
1594
+ border-width: var(
1595
+ --_sf-hr-br-wh,
1596
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-wh)
1597
+ );
1598
+ }
1599
+
1600
+ // text styles
1601
+
1602
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-cr));
1603
+
1604
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-fy));
1605
+
1606
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se));
1607
+
1608
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-wt));
1609
+
1610
+ font-style: var(
1611
+ --_sf-hr-ft-se-ic,
1612
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se-ic)
1613
+ );
1614
+
1615
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-tt-an));
1616
+
1617
+ letter-spacing: var(
1618
+ --_sf-hr-lr-sg,
1619
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-lr-sg)
1620
+ );
1621
+
1622
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-le-ht));
1623
+
1624
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1625
+
1626
+ [data-element-style="Text"] {
1627
+ display: inline-block;
1628
+ width: 100%;
1629
+ }
1630
+
1631
+ &[data-is-selected="true"] {
1632
+ --_sf-sd-bd-cr: var(
1633
+ --_ctm-mob-dn-me-sd-se-bd-cr,
1634
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-bd-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-bd-cr))
1635
+ );
1636
+ --_sf-sd-br-cr: var(
1637
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-cr,
1638
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-cr))
1639
+ );
1640
+ --_sf-sd-br-se: var(
1641
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-se,
1642
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-se))
1643
+ );
1644
+ --_sf-sd-br-wh: var(
1645
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-wh,
1646
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-wh, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-wh))
1647
+ );
1648
+ --_sf-sd-br-rs: var(
1649
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-rs,
1650
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-rs, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-rs))
1651
+ );
1652
+ --_sf-sd-at: var(
1653
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-at,
1654
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-at, var(--_ctm-dn-ps-sr-pe-tb-sd-se-at))
1655
+ );
1656
+ --_sf-sd-in-ad-tt-sg: var(
1657
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg,
1658
+ var(
1659
+ --_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg,
1660
+ var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg)
1661
+ )
1662
+ );
1663
+
1664
+ // for shadow
1665
+ --_sf-sd-sw-ae: var(
1666
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-ae,
1667
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-ae, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-ae))
1668
+ );
1669
+ --_sf-sd-sw-br: var(
1670
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-br,
1671
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-br, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-br))
1672
+ );
1673
+ --_sf-sd-sw-hr: var(
1674
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-hr,
1675
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-hr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-hr))
1676
+ );
1677
+ --_sf-sd-sw-cr: var(
1678
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-cr,
1679
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-cr))
1680
+ );
1681
+
1682
+ // for font
1683
+
1684
+ --_sf-sd-cr: var(
1685
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-cr,
1686
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-cr))
1687
+ );
1688
+ --_sf-sd-ft-fy: var(
1689
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-fy,
1690
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-fy, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-fy))
1691
+ );
1692
+ --_sf-sd-ft-se: var(
1693
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-se,
1694
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-se))
1695
+ );
1696
+ --_sf-sd-ft-wt: var(
1697
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-wt,
1698
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-wt, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-wt))
1699
+ );
1700
+ --_sf-sd-ft-se-ic: var(
1701
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-se-ic,
1702
+ var(
1703
+ --_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-se-ic,
1704
+ var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-se-ic)
1705
+ )
1706
+ );
1707
+ --_sf-sd-tt-an: var(
1708
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-tt-an,
1709
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-tt-an, var(--_ctm-dn-ps-sr-pe-tb-sd-se-tt-an))
1710
+ );
1711
+ --_sf-sd-lr-sg: var(
1712
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-lr-sg,
1713
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-lr-sg, var(--_ctm-dn-ps-sr-pe-tb-sd-se-lr-sg))
1714
+ );
1715
+ --_sf-sd-le-ht: var(
1716
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-le-ht,
1717
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-le-ht, var(--_ctm-dn-ps-sr-pe-tb-sd-se-le-ht))
1718
+ );
1719
+
1720
+ --_sf-sd-in-se: var(
1721
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-se,
1722
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-se))
1723
+ );
1724
+ --_sf-sd-in-se: var(
1725
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-se,
1726
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-se))
1727
+ );
1728
+ --_sf-sd-in-c1: var(
1729
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-c1,
1730
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-c1, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-c1))
1731
+ );
1732
+ --_sf-sd-ue: var(
1733
+ --_ctm-mob-dn-ps-sr-pe-tb-hr-ue,
1734
+ var(--_ctm-tab-dn-ps-sr-pe-tb-hr-ue, var(--_ctm-dn-ps-sr-pe-tb-hr-ue))
1735
+ );
1736
+
1737
+ // for pading and width
1738
+ --_sf-sd-pg: var(
1739
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-pg,
1740
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-pg, var(--_ctm-dn-ps-sr-pe-tb-sd-se-pg))
1741
+ );
1742
+ --_sf-sd-wh: var(
1743
+ --_ctm-mob-dn-ps-sr-pe-tb-sd-se-wh,
1744
+ var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-wh, var(--_ctm-dn-ps-sr-pe-tb-sd-se-wh))
1745
+ );
1746
+
1747
+ &[data-hover-show-shadow="false"] {
1748
+ --_hover-show-shadow: none;
1749
+ }
1750
+ &[data-hover-show-icon="false"] {
1751
+ --_hover-show-icon: none;
1752
+ }
1753
+
1754
+ background-color: var(
1755
+ --_sf-sd-bd-cr,
1756
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-bd-cr)
1757
+ );
1758
+
1759
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-pg));
1760
+ display: flex;
1761
+ flex-direction: var(--_sf-fd-bn);
1762
+ align-items: center;
1763
+
1764
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-at));
1765
+ gap: var(
1766
+ --_sf-sd-in-ad-tt-sg,
1767
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-in-ad-tt-sg)
1768
+ );
1769
+
1770
+ border-radius: var(
1771
+ --_sf-sd-br-rs,
1772
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-rs)
1773
+ );
1774
+
1775
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-ae))
1776
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-br))
1777
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-sd))
1778
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-cr));
1779
+
1780
+ &[data-show-border="true"] {
1781
+ border-color: var(
1782
+ --_sf-sd-br-cr,
1783
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-cr)
1784
+ );
1785
+
1786
+ border-style: var(
1787
+ --_sf-sd-br-se,
1788
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-se)
1789
+ );
1790
+
1791
+ border-width: var(
1792
+ --_sf-sd-br-wh,
1793
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-wh)
1794
+ );
1795
+ }
1796
+
1797
+ // text styles
1798
+
1799
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-cr));
1800
+
1801
+ font-family: var(
1802
+ --_sf-sd-ft-fy,
1803
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-fy)
1804
+ );
1805
+
1806
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se));
1807
+
1808
+ font-weight: var(
1809
+ --_sf-sd-ft-wt,
1810
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-wt)
1811
+ );
1812
+
1813
+ font-style: var(
1814
+ --_sf-sd-ft-se-ic,
1815
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se-ic)
1816
+ );
1817
+
1818
+ text-align: var(
1819
+ --_sf-sd-tt-an,
1820
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-tt-an)
1821
+ );
1822
+
1823
+ letter-spacing: var(
1824
+ --_sf-sd-lr-sg,
1825
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-lr-sg)
1826
+ );
1827
+
1828
+ line-height: var(
1829
+ --_sf-sd-le-ht,
1830
+ prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-le-ht)
1831
+ );
1832
+
1833
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1834
+
1835
+ [data-element-style="Text"] {
1836
+ display: inline-block;
1837
+ width: 100%;
1838
+ }
1839
+ }
1840
+ }
1841
+ .embla {
1842
+ height: auto;
1843
+ padding: 10px;
1844
+
1845
+ .embla__viewport {
1846
+ .embla__container {
1847
+ display: flex;
1848
+ gap: prepareMediaVariable(--_ctm-dn-ps-sr-wt-se-im-gp);
1849
+ .embla__slide {
1850
+ width: unset;
1851
+ }
1852
+ }
1853
+ }
1854
+ }
1855
+ }
1856
+ .embla {
1857
+ width: 100%;
1858
+ height: 100%;
1859
+ position: relative;
1860
+ display: flex;
1861
+ flex-direction: column;
1862
+ // padding: 10px;
1863
+ // overflow: hidden;
1864
+
1865
+ .embla__viewport {
1866
+ width: 100%;
1867
+ height: 100%;
1868
+ position: relative;
1869
+ display: flex;
1870
+ flex-direction: column;
1871
+
1872
+ overflow: hidden;
1873
+
1874
+ .embla__container {
1875
+ width: 100%;
1876
+ height: 100%;
1877
+ display: grid;
1878
+ grid-template-rows: 100%;
1879
+
1880
+ grid-template-columns: repeat(
1881
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
1882
+ calc(
1883
+ 100% /
1884
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
1885
+ )
1886
+ );
1887
+
1888
+ grid-auto-flow: column;
1889
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
1890
+
1891
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1892
+ height: calc(100% - calc(50px + 10px));
1893
+ }
1894
+
1895
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1896
+ height: calc(100% - calc(50px + 20px));
1897
+ }
1898
+
1899
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
1900
+ height: calc(
1901
+ 100% - calc(
1902
+ var(
1903
+ --_ctm-mob-dn-pn-ds-dt-se,
1904
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1905
+ ) +
1906
+ 20px
1907
+ )
1908
+ );
1909
+ }
1910
+
1911
+ .embla__slide {
1912
+ width: 100%;
1913
+ height: 100%;
1914
+ & > img {
1915
+ width: 100%;
1916
+ height: 100%;
1917
+ }
1918
+ }
1919
+ }
1920
+ }
1921
+ &:not([data-display-style="Column"]) {
1922
+ .embla__container {
1923
+ grid-auto-columns: calc(
1924
+ 100% /
1925
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
1926
+ );
1927
+ }
1928
+ }
1929
+
1930
+ .arrow-navigation {
1931
+ display: flex;
1932
+ position: absolute;
1933
+ top: 50%;
1934
+ left: 50%;
1935
+ width: 100%;
1936
+ justify-content: space-between;
1937
+ transform: translate(-50%, -50%);
1938
+ // padding-left: 20px;
1939
+
1940
+ &[data-control-type="Bottom-Overflow"] {
1941
+ transform: translateX(-50%);
1942
+ width: 100%;
1943
+ justify-content: center;
1944
+ gap: 12px;
1945
+ top: unset;
1946
+ bottom: 6px;
1947
+ }
1948
+ &[data-control-type="Bottom"] {
1949
+ transform: unset;
1950
+ position: static;
1951
+ width: 100%;
1952
+ justify-content: center;
1953
+ gap: 12px;
1954
+ margin-top: 10px;
1955
+ }
1956
+ }
1957
+ &[data-control-type="Side"] {
1958
+ .left-button,
1959
+ .right-button {
1960
+ background-color: transparent;
1961
+ }
1962
+ }
1963
+ &[data-background-shape="Round"] {
1964
+ .left-button,
1965
+ .right-button {
1966
+ background-color: #f2f5f5;
1967
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1968
+ }
1969
+ }
1970
+ .left-button {
1971
+ padding: 10px;
1972
+ border-radius: 50%;
1973
+ border: none;
1974
+ width: var(
1975
+ --_ctm-mob-dn-pn-as-aw-se,
1976
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1977
+ );
1978
+ height: var(
1979
+ --_ctm-mob-dn-pn-as-aw-se,
1980
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1981
+ );
1982
+
1983
+ display: flex;
1984
+ align-items: center;
1985
+ justify-content: center;
1986
+ cursor: pointer;
1987
+ outline: none;
1988
+ margin-left: 12px;
1989
+ &:disabled {
1990
+ & svg {
1991
+ path {
1992
+ stroke: #c3b7b7;
1993
+ }
1994
+ }
1995
+ }
1996
+ }
1997
+ .right-button {
1998
+ border-radius: 50%;
1999
+ border: none;
2000
+ width: var(
2001
+ --_ctm-mob-dn-pn-as-aw-se,
2002
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2003
+ );
2004
+ height: var(
2005
+ --_ctm-mob-dn-pn-as-aw-se,
2006
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2007
+ );
2008
+
2009
+ display: flex;
2010
+ align-items: center;
2011
+ justify-content: center;
2012
+ cursor: pointer;
2013
+ outline: none;
2014
+ margin-right: 12px;
2015
+ padding: 10px;
2016
+
2017
+ &:disabled {
2018
+ & svg {
2019
+ path {
2020
+ stroke: #c3b7b7;
2021
+ }
2022
+ }
2023
+ }
2024
+ }
2025
+ .icon {
2026
+ display: flex;
2027
+
2028
+ svg {
2029
+ width: calc(
2030
+ var(
2031
+ --_ctm-mob-dn-pn-as-aw-se,
2032
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2033
+ ) *
2034
+ 0.5
2035
+ );
2036
+ height: calc(
2037
+ var(
2038
+ --_ctm-mob-dn-pn-as-aw-se,
2039
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2040
+ ) *
2041
+ 0.5
2042
+ );
2043
+
2044
+ path {
2045
+ stroke: #514949;
2046
+ }
2047
+ }
2048
+ }
2049
+
2050
+ &[data-control-type="Side"] {
2051
+ .embla__viewport {
2052
+ width: calc(100% - 85px);
2053
+ margin-inline: auto;
2054
+ }
2055
+ .left-button {
2056
+ position: absolute;
2057
+ left: 0;
2058
+ top: 50%;
2059
+ transform: translateY(-50%);
2060
+ }
2061
+ .right-button {
2062
+ position: absolute;
2063
+
2064
+ right: 0;
2065
+ top: 50%;
2066
+ transform: translateY(-50%);
2067
+ }
2068
+ }
2069
+
2070
+ &[data-thumbnail-placement="top"] {
2071
+ flex-direction: column-reverse;
2072
+ }
2073
+ &[data-thumbnail-placement="bottom"] {
2074
+ flex-direction: column;
2075
+ }
2076
+ &[data-thumbnail-placement="left"] {
2077
+ flex-direction: row-reverse;
2078
+
2079
+ .embla__thumbs {
2080
+ width: var(--_ctm-lt-tl-se);
2081
+ height: 100%;
2082
+
2083
+ & .embla__thumbs__container {
2084
+ flex-direction: column;
2085
+ height: 100%;
2086
+ }
2087
+ }
2088
+ }
2089
+ &[data-thumbnail-placement="right"] {
2090
+ flex-direction: row;
2091
+ .embla__thumbs {
2092
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2093
+
2094
+ height: 100%;
2095
+
2096
+ & .embla__thumbs__container {
2097
+ flex-direction: column;
2098
+ height: 100%;
2099
+ }
2100
+ }
2101
+ }
2102
+ .embla__dots {
2103
+ display: flex;
2104
+ flex-wrap: wrap;
2105
+ justify-content: center;
2106
+ align-items: center;
2107
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2108
+ gap: 6px;
2109
+
2110
+ &[data-control-type="Bottom-Overflow"] {
2111
+ position: absolute;
2112
+ bottom: 10px;
2113
+ left: 50%;
2114
+ transform: translateX(-50%);
2115
+ width: 75%;
2116
+ }
2117
+ .embla__dot {
2118
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2119
+ -webkit-appearance: none;
2120
+ appearance: none;
2121
+ background-color: var(
2122
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
2123
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
2124
+ );
2125
+
2126
+ touch-action: manipulation;
2127
+ display: inline-flex;
2128
+ text-decoration: none;
2129
+ cursor: pointer;
2130
+ border: 0;
2131
+ padding: 0;
2132
+ margin: 0;
2133
+ // width: 0.6rem;
2134
+ // height: 0.6rem;
2135
+ width: var(
2136
+ --_ctm-mob-dn-pn-ds-dt-se,
2137
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2138
+ );
2139
+ height: var(
2140
+ --_ctm-mob-dn-pn-ds-dt-se,
2141
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2142
+ );
2143
+
2144
+ display: flex;
2145
+ align-items: center;
2146
+ justify-content: center;
2147
+ border-radius: 50%;
2148
+ }
2149
+ .embla__dot:after {
2150
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2151
+ width: var(
2152
+ --_ctm-mob-dn-pn-ds-dt-se,
2153
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2154
+ );
2155
+ height: var(
2156
+ --_ctm-mob-dn-pn-ds-dt-se,
2157
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2158
+ );
2159
+
2160
+ border-radius: 50%;
2161
+ display: flex;
2162
+ align-items: center;
2163
+ content: "";
2164
+ }
2165
+ .embla__dot--selected:after {
2166
+ box-shadow: inset 0 0 0 1px var(--text-body);
2167
+ background-color: var(
2168
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
2169
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
2170
+ );
2171
+ }
2172
+ &[data-slider-control="Pagination Line"] {
2173
+ .embla__dot {
2174
+ width: var(
2175
+ --_ctm-mob-dn-pn-le-le-wh,
2176
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2177
+ );
2178
+ height: var(
2179
+ --_ctm-mob-dn-pn-le-le-ht,
2180
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2181
+ );
2182
+ background-color: var(
2183
+ --_ctm-mob-dn-pn-le-or-le-cr,
2184
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
2185
+ );
2186
+ border-radius: 6px;
2187
+ }
2188
+
2189
+ .embla__dot--selected:after {
2190
+ box-shadow: inset 0 0 0 1px var(--text-body);
2191
+ border-radius: 6px;
2192
+ width: var(
2193
+ --_ctm-mob-dn-pn-le-le-wh,
2194
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2195
+ );
2196
+ height: var(
2197
+ --_ctm-mob-dn-pn-le-le-ht,
2198
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2199
+ );
2200
+ background-color: var(
2201
+ --_ctm-mob-dn-pn-le-ct-le-cr,
2202
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
2203
+ );
2204
+ }
2205
+ }
2206
+ }
2207
+
2208
+ .embla__thumbs {
2209
+ width: 100%;
2210
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2211
+
2212
+ position: relative;
2213
+ display: grid;
2214
+ grid-template-columns: 1fr;
2215
+ overflow: hidden;
2216
+ // margin: 10px;
2217
+ padding: 10px;
2218
+
2219
+ .embla__thumbs__viewport {
2220
+ width: 100%;
2221
+ height: 100%;
2222
+ position: relative;
2223
+ display: flex;
2224
+ flex-direction: column;
2225
+
2226
+ overflow: hidden;
2227
+ }
2228
+ .embla__thumbs__container {
2229
+ display: flex;
2230
+ flex-direction: row;
2231
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
2232
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
2233
+
2234
+ width: 100%;
2235
+ // justify-content: center;
2236
+ // height: 200px;
2237
+
2238
+ .embla__thumbs__slide {
2239
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2240
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2241
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2242
+
2243
+ & img {
2244
+ width: 100%;
2245
+ height: 100%;
2246
+ }
2247
+ }
2248
+ }
2249
+ }
2250
+ }
2251
+ }
2252
+ }
2253
+ }