@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.59

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