@sc-360-v2/storefront-cms-library 0.3.45 → 0.3.47

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