@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

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 (211) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +141 -210
  3. package/dist/add-products-tab-details.scss +1121 -1920
  4. package/dist/add-products-tab-uom-details.scss +105 -0
  5. package/dist/add-products-tab.scss +682 -994
  6. package/dist/allocation-header-quota-details.scss +198 -327
  7. package/dist/allocationDetails.scss +1645 -2022
  8. package/dist/allocations-quota-details.scss +168 -261
  9. package/dist/allocations.scss +504 -715
  10. package/dist/amount-estimator.scss +414 -648
  11. package/dist/animation-control.scss +23 -23
  12. package/dist/badge.scss +55 -18
  13. package/dist/brand-basic-elements.scss +93 -124
  14. package/dist/brand.scss +28 -55
  15. package/dist/breadcrumbs.scss +372 -718
  16. package/dist/builder.js +1 -1
  17. package/dist/bulk-variant-picker.scss +1161 -1816
  18. package/dist/bundle copy.scss +235 -0
  19. package/dist/bundle.scss +2142 -2584
  20. package/dist/bundleDetails.scss +3808 -4802
  21. package/dist/button copy.scss +28 -0
  22. package/dist/button.scss +89 -102
  23. package/dist/buy-for-tab-container.scss +77 -106
  24. package/dist/buy-for-tab.scss +54 -0
  25. package/dist/buy-for-tabs-container-item.scss +80 -80
  26. package/dist/buyForHeaders.scss +1823 -2457
  27. package/dist/cart-details.scss +514 -718
  28. package/dist/cart-products-sidebar.scss +211 -211
  29. package/dist/cart-summary.scss +611 -1015
  30. package/dist/cart-wrapper.scss +85 -127
  31. package/dist/cart.scss +119 -211
  32. package/dist/cartAttributes.scss +377 -539
  33. package/dist/cartDropdownOverlay.scss +21 -0
  34. package/dist/cartGrouping.scss +89 -89
  35. package/dist/category-groups-element.scss +130 -96
  36. package/dist/category-groups-product-grid.scss +40 -79
  37. package/dist/category-groups-product-image.scss +457 -1306
  38. package/dist/category-groups-product-options.scss +224 -606
  39. package/dist/category-groups-product-price.scss +1366 -4199
  40. package/dist/category-groups-quota-details.scss +217 -382
  41. package/dist/category.scss +26 -50
  42. package/dist/categoryDetails.scss +61 -61
  43. package/dist/categoryWidget.scss +34 -34
  44. package/dist/checkbox-radio.scss +124 -124
  45. package/dist/checkout.scss +1915 -3309
  46. package/dist/common-element.scss +35 -35
  47. package/dist/confirm-modal.scss +22 -2
  48. package/dist/confirmationModal.scss +139 -139
  49. package/dist/container.scss +32 -54
  50. package/dist/countdown.scss +264 -371
  51. package/dist/coupon.scss +379 -600
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/default-dropdown.scss +12 -1
  54. package/dist/embroider-preview-element.scss +94 -94
  55. package/dist/embroider-template-1-v2.scss +157 -172
  56. package/dist/embroider-template-1.scss +465 -482
  57. package/dist/embroidery.scss +37 -31
  58. package/dist/employee-bulk-order.scss +418 -142
  59. package/dist/emtpy-templates.scss +165 -165
  60. package/dist/faq.scss +239 -395
  61. package/dist/filter-results.scss +221 -323
  62. package/dist/filters.scss +843 -1406
  63. package/dist/flex-text-editor.scss +271 -271
  64. package/dist/functions.scss +36 -0
  65. package/dist/gallery-slider-temp.scss +428 -727
  66. package/dist/global-styles.scss +45 -6
  67. package/dist/grid.scss +25 -33
  68. package/dist/hotspot.scss +75 -115
  69. package/dist/icon-list.scss +33 -59
  70. package/dist/image-for-product.scss +21 -21
  71. package/dist/image-temp.scss +21 -20
  72. package/dist/item-stock.scss +15 -16
  73. package/dist/kitDetails.scss +2786 -4008
  74. package/dist/kits.scss +28 -19
  75. package/dist/language-selector.scss +241 -375
  76. package/dist/last-x-orders.scss +101 -163
  77. package/dist/layouter-item.scss +75 -103
  78. package/dist/layouter-pro-item.scss +89 -95
  79. package/dist/layouter-pro.scss +87 -92
  80. package/dist/layouter.scss +67 -117
  81. package/dist/light-box-v2.scss +89 -104
  82. package/dist/lightbox.scss +78 -78
  83. package/dist/line.scss +29 -70
  84. package/dist/loader.scss +37 -37
  85. package/dist/login.scss +316 -489
  86. package/dist/map.scss +233 -336
  87. package/dist/marchandiserSets.scss +95 -104
  88. package/dist/mega-menu-container.scss +96 -109
  89. package/dist/mega-menu.scss +627 -670
  90. package/dist/menu-item.scss +19 -19
  91. package/dist/menu-v2.scss +538 -528
  92. package/dist/menu.scss +12 -0
  93. package/dist/multi-select-dropdown.scss +27 -3
  94. package/dist/my-templates.scss +41 -9
  95. package/dist/myTemplates.scss +3 -0
  96. package/dist/option-bar.scss +229 -351
  97. package/dist/order-processing.scss +61 -61
  98. package/dist/order-status.scss +666 -1096
  99. package/dist/overflow-module.scss +62 -63
  100. package/dist/past-orders.scss +168 -149
  101. package/dist/payment-methods.scss +323 -289
  102. package/dist/pickup-locations.scss +568 -941
  103. package/dist/position-module.scss +98 -95
  104. package/dist/prefix-list.scss +97 -86
  105. package/dist/product-actions.scss +1262 -1620
  106. package/dist/product-basic-elements.scss +116 -169
  107. package/dist/product-customizations.scss +155 -149
  108. package/dist/product-highlights.scss +116 -145
  109. package/dist/product-image-allocation.scss +38 -0
  110. package/dist/product-image-bundles.scss +359 -638
  111. package/dist/product-image.scss +341 -676
  112. package/dist/product-inventory.scss +673 -1117
  113. package/dist/product-labels.scss +94 -101
  114. package/dist/product-options.scss +298 -438
  115. package/dist/product-price.scss +1325 -2182
  116. package/dist/product-promotions.scss +1388 -2374
  117. package/dist/product-sizechart.scss +523 -821
  118. package/dist/product.scss +28 -61
  119. package/dist/productDetails.scss +19 -38
  120. package/dist/profile.scss +242 -406
  121. package/dist/quantity-selector.scss +327 -502
  122. package/dist/quick-inventory-check.scss +101 -163
  123. package/dist/quick-links.scss +72 -133
  124. package/dist/quick-order-pad.scss +224 -206
  125. package/dist/quota-details.scss +163 -297
  126. package/dist/quotes.scss +727 -737
  127. package/dist/repeater copy.scss +24 -0
  128. package/dist/repeater-embla-controls.scss +34 -14
  129. package/dist/repeater-grid-toggle.scss +156 -166
  130. package/dist/repeater-item.scss +41 -64
  131. package/dist/repeater.scss +579 -669
  132. package/dist/request-for-quotes.scss +66 -16
  133. package/dist/responsive-behaviour.scss +31 -29
  134. package/dist/rfqs.scss +147 -181
  135. package/dist/scroll.scss +93 -167
  136. package/dist/search-results-heading.scss +36 -0
  137. package/dist/search.scss +186 -290
  138. package/dist/section.scss +27 -51
  139. package/dist/shareCartSideBar.scss +254 -254
  140. package/dist/shipping-estimator.scss +41 -41
  141. package/dist/shipping-payments.scss +246 -58
  142. package/dist/simple-list.scss +65 -123
  143. package/dist/social.scss +78 -131
  144. package/dist/sort.scss +89 -89
  145. package/dist/spotlight.scss +48 -0
  146. package/dist/stack.scss +23 -34
  147. package/dist/static-global.scss +44 -26
  148. package/dist/static-text.scss +52 -52
  149. package/dist/stockStatus.scss +14 -19
  150. package/dist/store-locations.scss +595 -933
  151. package/dist/sub-category.scss +74 -74
  152. package/dist/submit-quote.scss +275 -275
  153. package/dist/tab-container-item.scss +80 -80
  154. package/dist/tab-container.scss +81 -108
  155. package/dist/tab-v2.scss +277 -580
  156. package/dist/table-common.scss +218 -331
  157. package/dist/table.scss +273 -434
  158. package/dist/tabs.scss +440 -395
  159. package/dist/text-temp-v2.scss +12 -23
  160. package/dist/text-temp.scss +110 -109
  161. package/dist/theme-classes.scss +66 -13
  162. package/dist/toaster.scss +392 -350
  163. package/dist/toggle-button.scss +32 -32
  164. package/dist/transform-properties-module.scss +20 -20
  165. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  166. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  167. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  168. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  169. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  170. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  171. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  172. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  173. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  174. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  175. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  176. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  177. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  179. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  180. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  181. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  182. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  183. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  184. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  185. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  186. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  187. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  189. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  190. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  191. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  192. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  193. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  194. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  195. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  196. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  197. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  198. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  199. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  200. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  201. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  202. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  203. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  204. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  205. package/dist/uom-selector.scss +499 -841
  206. package/dist/user-elements.scss +653 -774
  207. package/dist/variant-picker.scss +1298 -2358
  208. package/dist/video.scss +147 -325
  209. package/dist/volume-pricing.scss +545 -849
  210. package/dist/wishlist-overlay.scss +48 -48
  211. package/package.json +131 -131
package/dist/bundle.scss CHANGED
@@ -1,2584 +1,2142 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $overflowSelector: ".flex__overflow";
5
- // --_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se
6
-
7
- $resizerId: "[data-cms-tool='cms-element-resizer']";
8
- $resizeActive: '[data-cms-element-resizer="true"]';
9
-
10
- @mixin NAVIGATION_STYLES($type: 1) {
11
- $TYPE: "cy";
12
- @if ($type == 2) {
13
- $TYPE: "pt";
14
- }
15
- $size: var(
16
- --_sf-icn-size,
17
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-se, 16px)}
18
- );
19
- $clr: var(
20
- --_sf-icn-clr,
21
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-c1, #000)}
22
- );
23
- $perc: 1.75;
24
- display: var(--_d-flex);
25
- align-items: center;
26
- justify-content: center;
27
- width: calc(#{$size} * #{$perc});
28
- height: calc(#{$size} * #{$perc});
29
- background: var(
30
- --_sf-icn-bg,
31
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)}
32
- );
33
- border-radius: var(
34
- --_sf-icn-brs,
35
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)}
36
- );
37
- // Border is only drawn when the "Show Border" toggle is on. The renderer emits
38
- // data-show-border="false" when the toggle is off; an absent/"true" value keeps
39
- // the border (so existing arrows that don't set the attribute are unaffected).
40
- &:not([data-show-border="false"]) {
41
- border-color: var(
42
- --_sf-icn-br,
43
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)}
44
- );
45
- border-width: var(
46
- --_sf-icn-bw,
47
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)}
48
- );
49
- border-style: var(
50
- --_sf-icn-bs,
51
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)}
52
- );
53
- }
54
- // Hide the arrow glyph when the "Show Icon" toggle is off.
55
- &[data-show-icon="false"] > span {
56
- display: none;
57
- }
58
- &:disabled {
59
- opacity: 0.65;
60
- cursor: no-drop;
61
- }
62
-
63
- &:hover {
64
- --_sf-icn-size: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-se)};
65
- --_sf-icn-clr: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-c1)};
66
- --_sf-icn-bg: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-bd-cr)};
67
- --_sf-icn-br: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-cr)};
68
- --_sf-icn-bw: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-wh)};
69
- --_sf-icn-bs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-se)};
70
- --_sf-icn-brs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-rs)};
71
- }
72
- & > span {
73
- display: var(--_d-flex);
74
-
75
- svg {
76
- width: #{$size};
77
- height: #{$size};
78
-
79
- path {
80
- stroke: #{$clr};
81
- }
82
- }
83
- }
84
- }
85
- [data-div-type="element"] {
86
- &[data-element-type="bundle"] {
87
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
88
-
89
- // width: var(--_sf-con-nw-wh);--_ctm-ele-nw-wh-vl
90
- // width: var(
91
- // --_sf-mob-el-wh-st-mx,
92
- // var(
93
- // --_sf-tab-el-wh-st-mx,
94
- // var(
95
- // --_sf-el-wh-st-mx,
96
- // calc(
97
- // 1% *
98
- // var(
99
- // --_ctm-mob-bun-ele-nw-wh-vl,
100
- // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
101
- // )
102
- // )
103
- // )
104
- // )
105
- // );
106
- width: var(
107
- --_sf-el-wh-st-mx,
108
- calc(
109
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
110
- )
111
- );
112
- // min-height: var();
113
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
114
-
115
- // &[data-view-state="full"] {
116
- // height: auto;
117
- // }
118
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
119
-
120
- // --_aspect-ratio: calc(
121
- // 1 *
122
- // (
123
- // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
124
- // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
125
- // )
126
- // );
127
- // &[data-view-state="full"] {
128
- // & > .wrapper {
129
- // & > div {
130
- // height: 100%;
131
- // }
132
- // }
133
- // }
134
-
135
- // height: auto;
136
-
137
- // margin: var(
138
- // --_ctm-mob-bun-lt-mn,
139
- // var(
140
- // --_ctm-tab-bun-lt-mn,
141
- // var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
142
- // )
143
- // );
144
-
145
- // &:not(:has(#{$resizerId}#{$resizeActive})) {
146
- // min-height: 100px !important;
147
- // }
148
-
149
- & > .wrapper {
150
- width: 100%;
151
- // height: 100%;
152
- }
153
- .embla {
154
- width: 100%;
155
- // height: 100%;
156
- position: relative;
157
- display: flex;
158
- flex-direction: column;
159
- overflow: var(--_ctm-lt-ow-ss);
160
-
161
- .embla__viewport {
162
- width: 100%;
163
- height: 100%;
164
- position: relative;
165
- display: flex;
166
- flex-direction: column;
167
-
168
- // overflow: hidden;
169
-
170
- .embla__container {
171
- width: 100%;
172
- height: 100%;
173
- display: grid;
174
- grid-template-rows: 100%;
175
-
176
- grid-template-columns: repeat(
177
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
178
- calc(
179
- (
180
- 100% -
181
- (
182
- var(
183
- --_ctm-mob-lt-is-pr-se,
184
- var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
185
- ) -
186
- 1
187
- ) *
188
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
189
- ) /
190
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
191
- )
192
- );
193
-
194
- grid-auto-flow: column;
195
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
196
-
197
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
198
- height: calc(
199
- 100% - calc(
200
- var(
201
- --_ctm-mob-dn-pn-as-aw-se,
202
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
203
- ) +
204
- 10px
205
- )
206
- );
207
- }
208
-
209
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
210
- height: calc(
211
- 100% - calc(
212
- var(
213
- --_ctm-mob-dn-pn-le-le-ht,
214
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
215
- ) +
216
- 20px
217
- )
218
- );
219
- }
220
-
221
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
222
- height: calc(
223
- 100% - calc(
224
- var(
225
- --_ctm-mob-dn-pn-ds-dt-se,
226
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
227
- ) +
228
- 20px
229
- )
230
- );
231
- }
232
-
233
- .embla__slide {
234
- width: 100%;
235
- height: 100%;
236
- }
237
- }
238
- }
239
- &:not([data-display-style="Column"]) {
240
- .embla__container {
241
- grid-auto-columns: calc(
242
- (
243
- 100% -
244
- (
245
- var(
246
- --_ctm-mob-lt-is-pr-se,
247
- var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
248
- ) -
249
- 1
250
- ) *
251
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
252
- ) /
253
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
254
- );
255
- }
256
- }
257
-
258
- &[data-display-style="Column"] {
259
- // overflow: unset;
260
-
261
- .embla__viewport {
262
- .embla__container {
263
- display: flex;
264
- .embla__slide {
265
- width: unset;
266
- height: 100%;
267
- aspect-ratio: 1.3 / 2;
268
- }
269
- }
270
- }
271
- }
272
-
273
- .arrow-navigation {
274
- display: flex;
275
- position: absolute;
276
- top: 50%;
277
- left: 50%;
278
- width: 100%;
279
- justify-content: space-between;
280
- transform: translate(-50%, -50%);
281
- // padding-left: 20px;
282
- &[data-control-type="Side"] {
283
- .left-button,
284
- .right-button {
285
- background-color: transparent;
286
- }
287
- }
288
- &[data-background-shape="Round"] {
289
- .left-button,
290
- .right-button {
291
- background-color: #f2f5f5;
292
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
293
- }
294
- }
295
- &[data-control-type="Bottom-Overflow"] {
296
- transform: translateX(-50%);
297
- width: 100%;
298
- justify-content: center;
299
- gap: 12px;
300
- top: unset;
301
- bottom: 6px;
302
- }
303
- &[data-control-type="Bottom"] {
304
- transform: unset;
305
- position: static;
306
- width: 100%;
307
- justify-content: center;
308
- gap: 12px;
309
- margin-top: 10px;
310
- }
311
- .left-button {
312
- padding: 10px;
313
- border-radius: 50%;
314
- border: none;
315
- width: var(
316
- --_ctm-mob-dn-pn-as-aw-se,
317
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
318
- );
319
- height: var(
320
- --_ctm-mob-dn-pn-as-aw-se,
321
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
322
- );
323
-
324
- display: flex;
325
- align-items: center;
326
- justify-content: center;
327
- cursor: pointer;
328
- outline: none;
329
- margin-left: 12px;
330
- &:disabled {
331
- & svg {
332
- path {
333
- stroke: rgb(192, 192, 192);
334
- }
335
- }
336
- }
337
- }
338
- .right-button {
339
- border-radius: 50%;
340
- border: none;
341
- width: var(
342
- --_ctm-mob-dn-pn-as-aw-se,
343
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
344
- );
345
- height: var(
346
- --_ctm-mob-dn-pn-as-aw-se,
347
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
348
- );
349
-
350
- display: flex;
351
- align-items: center;
352
- justify-content: center;
353
- cursor: pointer;
354
- outline: none;
355
- margin-right: 12px;
356
- padding: 10px;
357
-
358
- &:disabled {
359
- & svg {
360
- path {
361
- stroke: rgb(192, 192, 192);
362
- }
363
- }
364
- }
365
- }
366
- .icon {
367
- display: flex;
368
-
369
- svg {
370
- width: calc(
371
- var(
372
- --_ctm-mob-dn-pn-as-aw-se,
373
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
374
- ) *
375
- 0.5
376
- );
377
- height: calc(
378
- var(
379
- --_ctm-mob-dn-pn-as-aw-se,
380
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
381
- ) *
382
- 0.5
383
- );
384
-
385
- path {
386
- stroke: var(
387
- --_ctm-mob-dn-pn-as-aw-cr,
388
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
389
- );
390
- }
391
- }
392
- }
393
-
394
- .left-button,
395
- .right-button {
396
- @include NAVIGATION_STYLES(2);
397
- }
398
- }
399
-
400
- &[data-control-type="Side"] {
401
- .embla__viewport {
402
- width: calc(100% - 120px);
403
- margin-inline: auto;
404
- }
405
- .left-button {
406
- position: absolute;
407
- left: 0;
408
- top: 50%;
409
- transform: translateY(-50%);
410
- z-index: 2;
411
-
412
- @include NAVIGATION_STYLES(1);
413
- }
414
- .right-button {
415
- position: absolute;
416
- z-index: 2;
417
- right: 0;
418
- top: 50%;
419
- transform: translateY(-50%);
420
-
421
- @include NAVIGATION_STYLES(1);
422
- }
423
-
424
- // :is(.left-button, .right-button) {
425
- // @include NAVIGATION_STYLES(1);
426
- // }
427
- }
428
-
429
- &[data-thumbnail-placement="top"] {
430
- flex-direction: column-reverse;
431
- }
432
- &[data-thumbnail-placement="bottom"] {
433
- flex-direction: column;
434
- }
435
- &[data-thumbnail-placement="left"] {
436
- flex-direction: row-reverse;
437
-
438
- .embla__thumbs {
439
- width: prepareMediaVariable(--_ctm-lt-tl-se);
440
- height: 100%;
441
-
442
- & .embla__thumbs__container {
443
- flex-direction: column;
444
- height: 100%;
445
- }
446
- }
447
- }
448
- &[data-thumbnail-placement="right"] {
449
- flex-direction: row;
450
- .embla__thumbs {
451
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
452
-
453
- height: 100%;
454
-
455
- & .embla__thumbs__container {
456
- flex-direction: column;
457
- height: 100%;
458
- }
459
- }
460
- }
461
- }
462
- .bundle__element__container {
463
- // height: 100%;
464
- background-color: var(
465
- --_ctm-mob-dn-wt-se-bd-cr,
466
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
467
- );
468
-
469
- border-color: var(
470
- --_ctm-mob-dn-wt-se-br-cr,
471
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
472
- );
473
-
474
- border-style: var(
475
- --_ctm-mob-dn-wt-se-br-se,
476
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
477
- );
478
-
479
- border-width: var(
480
- --_ctm-mob-dn-wt-se-br-wh,
481
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
482
- );
483
-
484
- border-radius: var(
485
- --_ctm-mob-dn-wt-se-br-rs,
486
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
487
- );
488
-
489
- box-shadow: var(
490
- --_show-shadow,
491
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
492
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
493
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
494
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
495
- );
496
-
497
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
498
- display: flex;
499
- flex-direction: column;
500
- // height: 100%;
501
-
502
- .bundle__tabs {
503
- width: 100%;
504
- background-color: var(
505
- --_ctm-mob-dn-be-ts-wt-se-bd-cr,
506
- var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr))
507
- );
508
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
509
- display: flex;
510
- flex-direction: column;
511
- --_sf-gp: var(
512
- --_ctm-mob-lt-im-sg,
513
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
514
- );
515
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
516
- row-gap: var(--_sf-gp);
517
- width: 100%;
518
- // height: 100%;
519
- // Border only drawn when the widget's "Show Border" toggle is on. The
520
- // renderer emits data-show-border="true"/"" on the .bundle__tabs container.
521
- &[data-show-border="true"] {
522
- border-color: var(
523
- --_ctm-mob-dn-be-ts-wt-se-br-cr,
524
- var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr))
525
- );
526
- border-style: var(
527
- --_ctm-mob-dn-be-ts-wt-se-br-se,
528
- var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se))
529
- );
530
- border-width: var(
531
- --_ctm-mob-dn-be-ts-wt-se-br-wh,
532
- var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh))
533
- );
534
- }
535
- border-radius: var(
536
- --_ctm-mob-dn-be-ts-wt-se-br-rs,
537
- var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs))
538
- );
539
- box-shadow: var(
540
- --_show-shadow,
541
- var(
542
- --_ctm-mob-dn-be-ts-wt-se-sw-ae,
543
- var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae))
544
- )
545
- var(
546
- --_ctm-mob-dn-be-ts-wt-se-sw-br,
547
- var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br))
548
- )
549
- var(
550
- --_ctm-mob-dn-be-ts-wt-se-sw-sd,
551
- var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd))
552
- )
553
- var(
554
- --_ctm-mob-dn-be-ts-wt-se-sw-cr,
555
- var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr))
556
- )
557
- );
558
- .profile__button {
559
- &[data-show-shadow="false"] {
560
- --_show-shadow: none;
561
- }
562
- &[data-icon-position="left"] {
563
- --_sf-fd-bn: row;
564
- }
565
- &[data-icon-position="right"] {
566
- --_sf-fd-bn: row-reverse;
567
- }
568
- &[data-icon-position="center"] {
569
- --_sf-fd-bn: row;
570
- }
571
-
572
- &:hover {
573
- --_sf-hr-bd-cr: var(
574
- --_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
575
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr))
576
- );
577
- --_sf-hr-br-cr: var(
578
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr,
579
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr))
580
- );
581
- --_sf-hr-br-se: var(
582
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-se,
583
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se))
584
- );
585
- --_sf-hr-br-wh: var(
586
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh,
587
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh))
588
- );
589
- --_sf-hr-br-rs: var(
590
- --_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs,
591
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs))
592
- );
593
- --_sf-hr-at: var(
594
- --_ctm-mob-dn-be-ts-be-tb-hr-se-at,
595
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at))
596
- );
597
- --_sf-hr-in-ad-tt-sg: var(
598
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
599
- var(
600
- --_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
601
- var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg)
602
- )
603
- );
604
-
605
- // for shadow
606
- --_sf-hr-sw-ae: var(
607
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae,
608
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae))
609
- );
610
- --_sf-hr-sw-br: var(
611
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br,
612
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br))
613
- );
614
- --_sf-hr-sw-hr: var(
615
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr,
616
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr))
617
- );
618
- --_sf-hr-sw-cr: var(
619
- --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr,
620
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr))
621
- );
622
-
623
- // for font
624
-
625
- --_sf-hr-cr: var(
626
- --_ctm-mob-dn-be-ts-be-tb-hr-se-cr,
627
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr))
628
- );
629
- --_sf-hr-ft-fy: var(
630
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
631
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy))
632
- );
633
- --_sf-hr-ft-se: var(
634
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
635
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se))
636
- );
637
- --_sf-hr-ft-wt: var(
638
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt,
639
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt))
640
- );
641
- --_sf-hr-ft-se-ic: var(
642
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic,
643
- var(
644
- --_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic,
645
- var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic)
646
- )
647
- );
648
- --_sf-hr-tt-an: var(
649
- --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an,
650
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an))
651
- );
652
- --_sf-hr-lr-sg: var(
653
- --_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg,
654
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg))
655
- );
656
- --_sf-hr-le-ht: var(
657
- --_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht,
658
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht))
659
- );
660
-
661
- --_sf-hr-in-se: var(
662
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
663
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
664
- );
665
- --_sf-hr-in-se: var(
666
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
667
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
668
- );
669
- --_sf-hr-in-c1: var(
670
- --_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1,
671
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1))
672
- );
673
- --_sf-hr-ue: var(
674
- --_ctm-mob-dn-be-ts-be-tb-hr-se-ue,
675
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue))
676
- );
677
-
678
- // for pading and width
679
- --_sf-hr-pg: var(
680
- --_ctm-mob-dn-be-ts-be-tb-hr-se-pg,
681
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg))
682
- );
683
- --_sf-hr-wh: var(
684
- --_ctm-mob-dn-be-ts-be-tb-hr-se-wh,
685
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh))
686
- );
687
-
688
- &[data-hover-show-shadow="false"] {
689
- --_hover-show-shadow: none;
690
- }
691
- &[data-hover-show-icon="false"] {
692
- --_hover-show-icon: none;
693
- }
694
- }
695
-
696
- background-color: var(
697
- --_sf-hr-bd-cr,
698
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
699
- );
700
-
701
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
702
- display: flex;
703
- flex-direction: var(--_sf-fd-bn);
704
- align-items: center;
705
-
706
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
707
- gap: var(
708
- --_sf-hr-in-ad-tt-sg,
709
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
710
- );
711
-
712
- border-radius: var(
713
- --_sf-hr-br-rs,
714
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
715
- );
716
-
717
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
718
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
719
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
720
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
721
-
722
- &[data-show-border="true"] {
723
- border-color: var(
724
- --_sf-hr-br-cr,
725
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
726
- );
727
-
728
- border-style: var(
729
- --_sf-hr-br-se,
730
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
731
- );
732
-
733
- border-width: var(
734
- --_sf-hr-br-wh,
735
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
736
- );
737
- }
738
-
739
- // text styles
740
-
741
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
742
-
743
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
744
-
745
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
746
-
747
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
748
-
749
- font-style: var(
750
- --_sf-hr-ft-se-ic,
751
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
752
- );
753
-
754
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
755
-
756
- letter-spacing: var(
757
- --_sf-hr-lr-sg,
758
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
759
- );
760
-
761
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
762
-
763
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
764
-
765
- [data-element-style="Text"] {
766
- display: inline-block;
767
- width: 100%;
768
- }
769
-
770
- &[data-is-selected="true"] {
771
- --_sf-sd-bd-cr: var(
772
- --_ctm-mob-dn-me-sd-se-bd-cr,
773
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr))
774
- );
775
- --_sf-sd-br-cr: var(
776
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
777
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr))
778
- );
779
- --_sf-sd-br-se: var(
780
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
781
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se))
782
- );
783
- --_sf-sd-br-wh: var(
784
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
785
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh))
786
- );
787
- --_sf-sd-br-rs: var(
788
- --_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
789
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs))
790
- );
791
- --_sf-sd-at: var(
792
- --_ctm-mob-dn-be-ts-be-tb-sd-se-at,
793
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at))
794
- );
795
- --_sf-sd-in-ad-tt-sg: var(
796
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
797
- var(
798
- --_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
799
- var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)
800
- )
801
- );
802
-
803
- // for shadow
804
- --_sf-sd-sw-ae: var(
805
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
806
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae))
807
- );
808
- --_sf-sd-sw-br: var(
809
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
810
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br))
811
- );
812
- --_sf-sd-sw-hr: var(
813
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
814
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr))
815
- );
816
- --_sf-sd-sw-cr: var(
817
- --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
818
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr))
819
- );
820
-
821
- // for font
822
-
823
- --_sf-sd-cr: var(
824
- --_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
825
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr))
826
- );
827
- --_sf-sd-ft-fy: var(
828
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
829
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy))
830
- );
831
- --_sf-sd-ft-se: var(
832
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
833
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se))
834
- );
835
- --_sf-sd-ft-wt: var(
836
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
837
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt))
838
- );
839
- --_sf-sd-ft-se-ic: var(
840
- --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
841
- var(
842
- --_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
843
- var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)
844
- )
845
- );
846
- --_sf-sd-tt-an: var(
847
- --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
848
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an))
849
- );
850
- --_sf-sd-lr-sg: var(
851
- --_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
852
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg))
853
- );
854
- --_sf-sd-le-ht: var(
855
- --_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
856
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht))
857
- );
858
-
859
- --_sf-sd-in-se: var(
860
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
861
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
862
- );
863
- --_sf-sd-in-se: var(
864
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
865
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
866
- );
867
- --_sf-sd-in-c1: var(
868
- --_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
869
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1))
870
- );
871
- --_sf-sd-ue: var(
872
- --_ctm-mob-dn-be-ts-be-tb-hr-ue,
873
- var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue))
874
- );
875
-
876
- // for pading and width
877
- --_sf-sd-pg: var(
878
- --_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
879
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg))
880
- );
881
- --_sf-sd-wh: var(
882
- --_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
883
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh))
884
- );
885
-
886
- &[data-hover-show-shadow="false"] {
887
- --_hover-show-shadow: none;
888
- }
889
- &[data-hover-show-icon="false"] {
890
- --_hover-show-icon: none;
891
- }
892
-
893
- background-color: var(
894
- --_sf-sd-bd-cr,
895
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
896
- );
897
-
898
- padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
899
- display: flex;
900
- flex-direction: var(--_sf-fd-bn);
901
- align-items: center;
902
-
903
- justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
904
- gap: var(
905
- --_sf-sd-in-ad-tt-sg,
906
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
907
- );
908
-
909
- border-radius: var(
910
- --_sf-sd-br-rs,
911
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
912
- );
913
-
914
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
915
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
916
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
917
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
918
-
919
- &[data-show-border="true"] {
920
- border-color: var(
921
- --_sf-sd-br-cr,
922
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
923
- );
924
-
925
- border-style: var(
926
- --_sf-sd-br-se,
927
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
928
- );
929
-
930
- border-width: var(
931
- --_sf-sd-br-wh,
932
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
933
- );
934
- }
935
-
936
- // text styles
937
-
938
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
939
-
940
- font-family: var(
941
- --_sf-sd-ft-fy,
942
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)
943
- );
944
-
945
- font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
946
-
947
- font-weight: var(
948
- --_sf-sd-ft-wt,
949
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt)
950
- );
951
-
952
- font-style: var(
953
- --_sf-sd-ft-se-ic,
954
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
955
- );
956
-
957
- text-align: var(
958
- --_sf-sd-tt-an,
959
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an)
960
- );
961
-
962
- letter-spacing: var(
963
- --_sf-sd-lr-sg,
964
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
965
- );
966
-
967
- line-height: var(
968
- --_sf-sd-le-ht,
969
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht)
970
- );
971
-
972
- text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
973
-
974
- [data-element-style="Text"] {
975
- display: inline-block;
976
- width: 100%;
977
- }
978
- }
979
- }
980
- .embla {
981
- height: auto;
982
- .embla__viewport {
983
- .embla__container {
984
- display: flex;
985
- gap: prepareMediaVariable(--_ctm-dn-be-ts-wt-se-im-gp);
986
- .embla__slide {
987
- width: unset;
988
- }
989
- }
990
- }
991
- }
992
- }
993
- .category__tabs {
994
- width: 100%;
995
- background-color: var(
996
- --_ctm-mob-dn-cy-ts-wt-se-bd-cr,
997
- var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr))
998
- );
999
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
1000
- display: flex;
1001
- flex-direction: column;
1002
- --_sf-gp: var(
1003
- --_ctm-mob-lt-im-sg,
1004
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
1005
- );
1006
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1007
- row-gap: var(--_sf-gp);
1008
- width: 100%;
1009
- // height: 100%;
1010
- // Border only drawn when the widget's "Show Border" toggle is on. The
1011
- // renderer emits data-show-border="true"/"" on the .category__tabs container.
1012
- &[data-show-border="true"] {
1013
- border-color: var(
1014
- --_ctm-mob-dn-cy-ts-wt-se-br-cr,
1015
- var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr))
1016
- );
1017
- border-style: var(
1018
- --_ctm-mob-dn-cy-ts-wt-se-br-se,
1019
- var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se))
1020
- );
1021
- border-width: var(
1022
- --_ctm-mob-dn-cy-ts-wt-se-br-wh,
1023
- var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh))
1024
- );
1025
- }
1026
- border-radius: var(
1027
- --_ctm-mob-dn-cy-ts-wt-se-br-rs,
1028
- var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs))
1029
- );
1030
- box-shadow: var(
1031
- --_show-shadow,
1032
- var(
1033
- --_ctm-mob-dn-cy-ts-wt-se-sw-ae,
1034
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae))
1035
- )
1036
- var(
1037
- --_ctm-mob-dn-cy-ts-wt-se-sw-br,
1038
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br))
1039
- )
1040
- var(
1041
- --_ctm-mob-dn-cy-ts-wt-se-sw-sd,
1042
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd))
1043
- )
1044
- var(
1045
- --_ctm-mob-dn-cy-ts-wt-se-sw-cr,
1046
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr))
1047
- )
1048
- );
1049
- .profile__button {
1050
- &[data-show-shadow="false"] {
1051
- --_show-shadow: none;
1052
- }
1053
- &[data-icon-position="left"] {
1054
- --_sf-fd-bn: row;
1055
- }
1056
- &[data-icon-position="right"] {
1057
- --_sf-fd-bn: row-reverse;
1058
- }
1059
- &[data-icon-position="center"] {
1060
- --_sf-fd-bn: row;
1061
- }
1062
-
1063
- &:hover {
1064
- --_sf-hr-bd-cr: var(
1065
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
1066
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr))
1067
- );
1068
- --_sf-hr-br-cr: var(
1069
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr,
1070
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr))
1071
- );
1072
- --_sf-hr-br-se: var(
1073
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se,
1074
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se))
1075
- );
1076
- --_sf-hr-br-wh: var(
1077
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh,
1078
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh))
1079
- );
1080
- --_sf-hr-br-rs: var(
1081
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs,
1082
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs))
1083
- );
1084
- --_sf-hr-at: var(
1085
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-at,
1086
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at))
1087
- );
1088
- --_sf-hr-in-ad-tt-sg: var(
1089
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1090
- var(
1091
- --_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1092
- var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg)
1093
- )
1094
- );
1095
-
1096
- // for shadow
1097
- --_sf-hr-sw-ae: var(
1098
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae,
1099
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae))
1100
- );
1101
- --_sf-hr-sw-br: var(
1102
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br,
1103
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br))
1104
- );
1105
- --_sf-hr-sw-hr: var(
1106
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr,
1107
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr))
1108
- );
1109
- --_sf-hr-sw-cr: var(
1110
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr,
1111
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr))
1112
- );
1113
-
1114
- // for font
1115
-
1116
- --_sf-hr-cr: var(
1117
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr,
1118
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr))
1119
- );
1120
- --_sf-hr-ft-fy: var(
1121
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
1122
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy))
1123
- );
1124
- --_sf-hr-ft-se: var(
1125
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
1126
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se))
1127
- );
1128
- --_sf-hr-ft-wt: var(
1129
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt,
1130
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt))
1131
- );
1132
- --_sf-hr-ft-se-ic: var(
1133
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1134
- var(
1135
- --_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1136
- var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic)
1137
- )
1138
- );
1139
- --_sf-hr-tt-an: var(
1140
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an,
1141
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an))
1142
- );
1143
- --_sf-hr-lr-sg: var(
1144
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg,
1145
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg))
1146
- );
1147
- --_sf-hr-le-ht: var(
1148
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht,
1149
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht))
1150
- );
1151
-
1152
- --_sf-hr-in-se: var(
1153
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1154
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1155
- );
1156
- --_sf-hr-in-se: var(
1157
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1158
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1159
- );
1160
- --_sf-hr-in-c1: var(
1161
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1,
1162
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1))
1163
- );
1164
- --_sf-hr-ue: var(
1165
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue,
1166
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue))
1167
- );
1168
-
1169
- // for pading and width
1170
- --_sf-hr-pg: var(
1171
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg,
1172
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg))
1173
- );
1174
- --_sf-hr-wh: var(
1175
- --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh,
1176
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh))
1177
- );
1178
-
1179
- &[data-hover-show-shadow="false"] {
1180
- --_hover-show-shadow: none;
1181
- }
1182
- &[data-hover-show-icon="false"] {
1183
- --_hover-show-icon: none;
1184
- }
1185
- }
1186
-
1187
- background-color: var(
1188
- --_sf-hr-bd-cr,
1189
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1190
- );
1191
-
1192
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1193
- display: flex;
1194
- flex-direction: var(--_sf-fd-bn);
1195
- align-items: center;
1196
-
1197
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1198
- gap: var(
1199
- --_sf-hr-in-ad-tt-sg,
1200
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1201
- );
1202
-
1203
- border-radius: var(
1204
- --_sf-hr-br-rs,
1205
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1206
- );
1207
-
1208
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1209
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1210
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1211
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1212
-
1213
- &[data-show-border="true"] {
1214
- border-color: var(
1215
- --_sf-hr-br-cr,
1216
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1217
- );
1218
-
1219
- border-style: var(
1220
- --_sf-hr-br-se,
1221
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1222
- );
1223
-
1224
- border-width: var(
1225
- --_sf-hr-br-wh,
1226
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1227
- );
1228
- }
1229
-
1230
- // text styles
1231
-
1232
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1233
-
1234
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
1235
-
1236
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1237
-
1238
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
1239
-
1240
- font-style: var(
1241
- --_sf-hr-ft-se-ic,
1242
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1243
- );
1244
-
1245
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
1246
-
1247
- letter-spacing: var(
1248
- --_sf-hr-lr-sg,
1249
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1250
- );
1251
-
1252
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
1253
-
1254
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1255
-
1256
- [data-element-style="Text"] {
1257
- display: inline-block;
1258
- width: 100%;
1259
- }
1260
-
1261
- &[data-is-selected="true"] {
1262
- --_sf-sd-bd-cr: var(
1263
- --_ctm-mob-dn-me-sd-se-bd-cr,
1264
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr))
1265
- );
1266
- --_sf-sd-br-cr: var(
1267
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
1268
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr))
1269
- );
1270
- --_sf-sd-br-se: var(
1271
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
1272
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se))
1273
- );
1274
- --_sf-sd-br-wh: var(
1275
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
1276
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh))
1277
- );
1278
- --_sf-sd-br-rs: var(
1279
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
1280
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs))
1281
- );
1282
- --_sf-sd-at: var(
1283
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
1284
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at))
1285
- );
1286
- --_sf-sd-in-ad-tt-sg: var(
1287
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1288
- var(
1289
- --_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1290
- var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)
1291
- )
1292
- );
1293
-
1294
- // for shadow
1295
- --_sf-sd-sw-ae: var(
1296
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
1297
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae))
1298
- );
1299
- --_sf-sd-sw-br: var(
1300
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
1301
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br))
1302
- );
1303
- --_sf-sd-sw-hr: var(
1304
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
1305
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr))
1306
- );
1307
- --_sf-sd-sw-cr: var(
1308
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
1309
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr))
1310
- );
1311
-
1312
- // for font
1313
-
1314
- --_sf-sd-cr: var(
1315
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
1316
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr))
1317
- );
1318
- --_sf-sd-ft-fy: var(
1319
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
1320
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy))
1321
- );
1322
- --_sf-sd-ft-se: var(
1323
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
1324
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se))
1325
- );
1326
- --_sf-sd-ft-wt: var(
1327
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
1328
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt))
1329
- );
1330
- --_sf-sd-ft-se-ic: var(
1331
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1332
- var(
1333
- --_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1334
- var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)
1335
- )
1336
- );
1337
- --_sf-sd-tt-an: var(
1338
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
1339
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an))
1340
- );
1341
- --_sf-sd-lr-sg: var(
1342
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
1343
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg))
1344
- );
1345
- --_sf-sd-le-ht: var(
1346
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
1347
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht))
1348
- );
1349
-
1350
- --_sf-sd-in-se: var(
1351
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1352
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1353
- );
1354
- --_sf-sd-in-se: var(
1355
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1356
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1357
- );
1358
- --_sf-sd-in-c1: var(
1359
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
1360
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1))
1361
- );
1362
- --_sf-sd-ue: var(
1363
- --_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
1364
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue))
1365
- );
1366
-
1367
- // for pading and width
1368
- --_sf-sd-pg: var(
1369
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
1370
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg))
1371
- );
1372
- --_sf-sd-wh: var(
1373
- --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
1374
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh))
1375
- );
1376
-
1377
- &[data-hover-show-shadow="false"] {
1378
- --_hover-show-shadow: none;
1379
- }
1380
- &[data-hover-show-icon="false"] {
1381
- --_hover-show-icon: none;
1382
- }
1383
-
1384
- background-color: var(
1385
- --_sf-sd-bd-cr,
1386
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1387
- );
1388
-
1389
- padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1390
- display: flex;
1391
- flex-direction: var(--_sf-fd-bn);
1392
- align-items: center;
1393
-
1394
- justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1395
- gap: var(
1396
- --_sf-sd-in-ad-tt-sg,
1397
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1398
- );
1399
-
1400
- border-radius: var(
1401
- --_sf-sd-br-rs,
1402
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1403
- );
1404
-
1405
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1406
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1407
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1408
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1409
-
1410
- &[data-show-border="true"] {
1411
- border-color: var(
1412
- --_sf-sd-br-cr,
1413
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1414
- );
1415
-
1416
- border-style: var(
1417
- --_sf-sd-br-se,
1418
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1419
- );
1420
-
1421
- border-width: var(
1422
- --_sf-sd-br-wh,
1423
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1424
- );
1425
- }
1426
-
1427
- // text styles
1428
-
1429
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1430
-
1431
- font-family: var(
1432
- --_sf-sd-ft-fy,
1433
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)
1434
- );
1435
-
1436
- font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1437
-
1438
- font-weight: var(
1439
- --_sf-sd-ft-wt,
1440
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt)
1441
- );
1442
-
1443
- font-style: var(
1444
- --_sf-sd-ft-se-ic,
1445
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1446
- );
1447
-
1448
- text-align: var(
1449
- --_sf-sd-tt-an,
1450
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an)
1451
- );
1452
-
1453
- letter-spacing: var(
1454
- --_sf-sd-lr-sg,
1455
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1456
- );
1457
-
1458
- line-height: var(
1459
- --_sf-sd-le-ht,
1460
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht)
1461
- );
1462
-
1463
- text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1464
-
1465
- [data-element-style="Text"] {
1466
- display: inline-block;
1467
- width: 100%;
1468
- }
1469
- }
1470
- }
1471
- .embla {
1472
- height: auto;
1473
- .embla__viewport {
1474
- .embla__container {
1475
- display: flex;
1476
- gap: prepareMediaVariable(--_ctm-dn-cy-ts-wt-se-im-gp);
1477
- .embla__slide {
1478
- width: unset;
1479
- }
1480
- }
1481
- }
1482
- }
1483
- }
1484
- .single__bundle_container {
1485
- display: flex;
1486
- flex-direction: column;
1487
- gap: 16px;
1488
- height: 100%;
1489
-
1490
- .bundle__header {
1491
- display: flex;
1492
- flex-direction: row;
1493
- align-items: center;
1494
- justify-content: space-between;
1495
-
1496
- .bundle__title {
1497
- font-family: prepareMediaVariable(--_ctm-dn-hg-dn-ft-fy);
1498
- font-size: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se);
1499
- color: prepareMediaVariable(--_ctm-dn-hg-dn-cr);
1500
- font-weight: prepareMediaVariable(--_ctm-dn-hg-dn-ft-wt);
1501
- font-style: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se-ic);
1502
- text-decoration: prepareMediaVariable(--_ctm-dn-hg-dn-ue);
1503
- text-align: prepareMediaVariable(--_ctm-dn-hg-dn-tt-an);
1504
- letter-spacing: vaprepareMediaVariabler(--_ctm-dn-hg-dn-lr-sg);
1505
- line-height: prepareMediaVariable(--_ctm-dn-hg-dn-le-ht);
1506
- background-color: prepareMediaVariable(--_ctm-dn-hg-dn-bd-cr);
1507
- border-width: prepareMediaVariable(--_ctm-dn-hg-dn-br-wh);
1508
- border-color: prepareMediaVariable(--_ctm-dn-hg-dn-br-cr);
1509
- border-style: prepareMediaVariable(--_ctm-dn-hg-dn-br-se);
1510
- border-radius: prepareMediaVariable(--_ctm-dn-hg-dn-br-rs);
1511
- box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae)
1512
- prepareMediaVariable(--_ctm-dn-hg-dn-sw-br)
1513
- prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd)
1514
- prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
1515
- }
1516
-
1517
- .bundle__description {
1518
- font-family: prepareMediaVariable(--_ctm-dn-dn-dn-ft-fy);
1519
- font-size: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se);
1520
- color: prepareMediaVariable(--_ctm-dn-dn-dn-cr);
1521
- font-weight: prepareMediaVariable(--_ctm-dn-dn-dn-ft-wt);
1522
- font-style: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se-ic);
1523
- text-decoration: prepareMediaVariable(--_ctm-dn-dn-dn-ue);
1524
- text-align: prepareMediaVariable(--_ctm-dn-dn-dn-tt-an);
1525
- letter-spacing: prepareMediaVariable(--_ctm-dn-dn-dn-lr-sg);
1526
- line-height: prepareMediaVariable(--_ctm-dn-dn-dn-le-ht);
1527
- background-color: prepareMediaVariable(--_ctm-dn-dn-dn-bd-cr);
1528
- border-width: prepareMediaVariable(--_ctm-dn-dn-dn-br-wh);
1529
- border-color: prepareMediaVariable(--_ctm-dn-dn-dn-br-cr);
1530
- border-style: prepareMediaVariable(--_ctm-dn-dn-dn-br-se);
1531
- border-radius: prepareMediaVariable(--_ctm-dn-dn-dn-br-rs);
1532
- box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae)
1533
- prepareMediaVariable(--_ctm-dn-dn-dn-sw-br)
1534
- prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd)
1535
- prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
1536
- }
1537
- .button__items {
1538
- display: flex;
1539
- align-items: center;
1540
- }
1541
- .btn__with__text[data-btn-name="bundleDetailPageButton"] {
1542
- justify-content: center;
1543
- &[data-show-shadow="false"] {
1544
- --_show-shadow: none;
1545
- }
1546
- &[data-icon-position="left"] {
1547
- --_sf-fd-bn: row;
1548
- }
1549
- &[data-icon-position="right"] {
1550
- --_sf-fd-bn: row-reverse;
1551
- }
1552
- &[data-icon-position="center"] {
1553
- --_sf-fd-bn: row;
1554
- }
1555
-
1556
- &:hover {
1557
- --_sf-hr-bd-cr: var(
1558
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1559
- var(
1560
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1561
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)
1562
- )
1563
- );
1564
- --_sf-hr-br-cr: var(
1565
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1566
- var(
1567
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1568
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)
1569
- )
1570
- );
1571
- --_sf-hr-br-se: var(
1572
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
1573
- var(
1574
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
1575
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)
1576
- )
1577
- );
1578
- --_sf-hr-br-wh: var(
1579
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1580
- var(
1581
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1582
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)
1583
- )
1584
- );
1585
- --_sf-hr-br-rs: var(
1586
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1587
- var(
1588
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1589
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)
1590
- )
1591
- );
1592
- --_sf-hr-at: var(
1593
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
1594
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at))
1595
- );
1596
- --_sf-hr-gp: var(
1597
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
1598
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp))
1599
- );
1600
-
1601
- // for shadow
1602
- --_sf-hr-sw-ae: var(
1603
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1604
- var(
1605
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1606
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)
1607
- )
1608
- );
1609
- --_sf-hr-sw-br: var(
1610
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1611
- var(
1612
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1613
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)
1614
- )
1615
- );
1616
- --_sf-hr-sw-hr: var(
1617
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1618
- var(
1619
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1620
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)
1621
- )
1622
- );
1623
- --_sf-hr-sw-cr: var(
1624
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1625
- var(
1626
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1627
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)
1628
- )
1629
- );
1630
-
1631
- // for font
1632
-
1633
- --_sf-hr-cr: var(
1634
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
1635
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr))
1636
- );
1637
- --_sf-hr-ft-fy: var(
1638
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1639
- var(
1640
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1641
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)
1642
- )
1643
- );
1644
- --_sf-hr-ft-se: var(
1645
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1646
- var(
1647
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1648
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)
1649
- )
1650
- );
1651
- --_sf-hr-ft-wt: var(
1652
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1653
- var(
1654
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1655
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)
1656
- )
1657
- );
1658
- --_sf-hr-ft-se-ic: var(
1659
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1660
- var(
1661
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1662
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)
1663
- )
1664
- );
1665
- --_sf-hr-tt-an: var(
1666
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1667
- var(
1668
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1669
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)
1670
- )
1671
- );
1672
- --_sf-hr-lr-sg: var(
1673
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1674
- var(
1675
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1676
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)
1677
- )
1678
- );
1679
- --_sf-hr-le-ht: var(
1680
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1681
- var(
1682
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1683
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)
1684
- )
1685
- );
1686
-
1687
- --_sf-hr-in-se: var(
1688
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1689
- var(
1690
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1691
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1692
- )
1693
- );
1694
- --_sf-hr-in-se: var(
1695
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1696
- var(
1697
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1698
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1699
- )
1700
- );
1701
- --_sf-hr-in-c1: var(
1702
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1703
- var(
1704
- --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1705
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)
1706
- )
1707
- );
1708
- --_sf-hr-ue: var(
1709
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
1710
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue))
1711
- );
1712
-
1713
- // for pading and width
1714
- --_sf-hr-pg: var(
1715
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
1716
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg))
1717
- );
1718
- --_sf-hr-wh: var(
1719
- --_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
1720
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh))
1721
- );
1722
-
1723
- &[data-hover-show-shadow="false"] {
1724
- --_hover-show-shadow: none;
1725
- }
1726
- &[data-hover-show-icon="false"] {
1727
- --_hover-show-icon: none;
1728
- }
1729
- }
1730
- background-color: var(
1731
- --_sf-hr-bd-cr,
1732
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr)
1733
- );
1734
-
1735
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-pg));
1736
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wh));
1737
- display: flex;
1738
- flex-direction: var(--_sf-fd-bn);
1739
- align-items: center;
1740
-
1741
- justify-content: var(
1742
- --_sf-hr-at,
1743
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at)
1744
- );
1745
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-gp));
1746
-
1747
- border-radius: var(
1748
- --_sf-hr-br-rs,
1749
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs)
1750
- );
1751
-
1752
- box-shadow: var(
1753
- --_sf-hr-sw-ae,
1754
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)
1755
- )
1756
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br))
1757
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd))
1758
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));
1759
-
1760
- &[data-show-border="true"] {
1761
- border-color: var(
1762
- --_sf-hr-br-cr,
1763
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr)
1764
- );
1765
-
1766
- border-style: var(
1767
- --_sf-hr-br-se,
1768
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se)
1769
- );
1770
-
1771
- border-width: var(
1772
- --_sf-hr-br-wh,
1773
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh)
1774
- );
1775
- }
1776
-
1777
- .txt {
1778
- display: flex;
1779
-
1780
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-cr));
1781
-
1782
- font-family: var(
1783
- --_sf-hr-ft-fy,
1784
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy)
1785
- );
1786
-
1787
- font-size: var(
1788
- --_sf-hr-ft-se,
1789
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se)
1790
- );
1791
-
1792
- font-weight: var(
1793
- --_sf-hr-ft-wt,
1794
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt)
1795
- );
1796
-
1797
- font-style: var(
1798
- --_sf-hr-ft-se-ic,
1799
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic)
1800
- );
1801
-
1802
- text-align: var(
1803
- --_sf-hr-tt-an,
1804
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an)
1805
- );
1806
-
1807
- letter-spacing: var(
1808
- --_sf-hr-lr-sg,
1809
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg)
1810
- );
1811
-
1812
- line-height: var(
1813
- --_sf-hr-le-ht,
1814
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht)
1815
- );
1816
-
1817
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1818
- }
1819
-
1820
- .icon {
1821
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1822
- svg {
1823
- width: var(
1824
- --_sf-hr-in-se,
1825
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1826
- );
1827
- height: var(
1828
- --_sf-hr-in-se,
1829
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1830
- );
1831
-
1832
- path {
1833
- stroke: var(
1834
- --_sf-hr-in-c1,
1835
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1)
1836
- );
1837
- // Overrides the stroke-width presentation attribute baked into the icon markup.
1838
- stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-se-wh, 1.25);
1839
- }
1840
- }
1841
- }
1842
- [data-element-style="Text"] {
1843
- display: inline-block;
1844
- width: 100%;
1845
- }
1846
-
1847
- .icon--hover {
1848
- // position: absolute;
1849
- // inset: 0;
1850
- // opacity: 0;
1851
- display: none;
1852
- transition: opacity 0.2s ease;
1853
- }
1854
-
1855
- &:hover .icon--hover {
1856
- // opacity: 1;
1857
- display: flex;
1858
- }
1859
-
1860
- &:hover .icon--default {
1861
- // opacity: 0;
1862
- display: none;
1863
- }
1864
- }
1865
- }
1866
- .divider {
1867
- border: none;
1868
- height: var(
1869
- --_ctm-mob-dr-dr-wt,
1870
- var(--_ctm-tab-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
1871
- ); /* Set thickness */
1872
- background-color: var(
1873
- --_ctm-mob-dr-dr-cr,
1874
- var(--_ctm-tab-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
1875
- );
1876
- }
1877
- .single__bundle_slider {
1878
- display: flex;
1879
- flex-direction: column;
1880
- gap: prepareMediaVariable(--_ctm-lt-im-gp);
1881
- align-items: flex-start;
1882
- flex: 1;
1883
- min-height: 0;
1884
- // height: 100%;
1885
- // & > div {
1886
- // height: 100%;
1887
- // }
1888
- .embla__warper {
1889
- // height: 80%;
1890
- flex: 1;
1891
- min-height: 0;
1892
- width: 100%;
1893
- }
1894
- .items__warper {
1895
- display: flex;
1896
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
1897
- flex-wrap: wrap;
1898
- // align-items: center;
1899
- --items-per-row: #{prepareMediaVariable(--_ctm-lt-is-pr-rw)};
1900
- .bundle-image-container,
1901
- .tiles-grid-view {
1902
- flex: 0 0 calc((100% / var(--items-per-row)) - var(--_ctm-lt-im-sg));
1903
- height: unset;
1904
- }
1905
- }
1906
- .bundle-image-container {
1907
- height: 100%;
1908
- background-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-bd-cr);
1909
- border-width: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-wh);
1910
- border-style: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-se);
1911
- border-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-cr);
1912
- border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-rs);
1913
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae)
1914
- prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br)
1915
- prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd)
1916
- prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
1917
- width: 100%;
1918
- display: flex;
1919
- flex-direction: column;
1920
- gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
1921
-
1922
- .showcase-img {
1923
- flex-grow: 1;
1924
- // padding: 16px;
1925
- align-items: center;
1926
- justify-content: center;
1927
- display: flex;
1928
- // height: 100%;
1929
- flex: 1;
1930
- min-height: 100px;
1931
- width: 100%;
1932
- max-height: prepareMediaVariable(--_ctm-lt-ie-ht);
1933
- img {
1934
- max-width: 100%;
1935
- // max-height: 100%;
1936
- // height: 100%;
1937
- width: 100%;
1938
- // object-fit: fill;
1939
- height: prepareMediaVariable(--_ctm-lt-ie-ht);
1940
- }
1941
- }
1942
- .img-title {
1943
- // padding: 12px;
1944
- font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
1945
- font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
1946
- color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
1947
- font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
1948
- font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
1949
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
1950
- text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
1951
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
1952
- line-height: prepareMediaVariablear(--_ctm-dn-pt-ne-dn-le-ht);
1953
- background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
1954
- border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
1955
- border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
1956
- border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1957
- border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1958
- text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1959
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
1960
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
1961
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
1962
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1963
- &#{$overflowSelector} {
1964
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1965
- }
1966
- }
1967
- }
1968
- .bundle__navigation_btn_wrapper {
1969
- display: flex;
1970
- width: 100%;
1971
- justify-content: center;
1972
- }
1973
- .btn__with__text[data-btn-name="bundle_navigation_button"] {
1974
- justify-content: center;
1975
- &[data-show-shadow="false"] {
1976
- --_show-shadow: none;
1977
- }
1978
- &[data-icon-position="left"] {
1979
- --_sf-fd-bn: row;
1980
- }
1981
- &[data-icon-position="right"] {
1982
- --_sf-fd-bn: row-reverse;
1983
- }
1984
- &[data-icon-position="center"] {
1985
- --_sf-fd-bn: row;
1986
- }
1987
-
1988
- &:hover {
1989
- --_sf-hr-bd-cr: var(
1990
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
1991
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr))
1992
- );
1993
- --_sf-hr-br-cr: var(
1994
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
1995
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr))
1996
- );
1997
- --_sf-hr-br-se: var(
1998
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
1999
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se))
2000
- );
2001
- --_sf-hr-br-wh: var(
2002
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
2003
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh))
2004
- );
2005
- --_sf-hr-br-rs: var(
2006
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
2007
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs))
2008
- );
2009
- --_sf-hr-at: var(
2010
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
2011
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at))
2012
- );
2013
- --_sf-hr-gp: var(
2014
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
2015
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp))
2016
- );
2017
-
2018
- // for shadow
2019
- --_sf-hr-sw-ae: var(
2020
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
2021
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae))
2022
- );
2023
- --_sf-hr-sw-br: var(
2024
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
2025
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br))
2026
- );
2027
- --_sf-hr-sw-hr: var(
2028
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
2029
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr))
2030
- );
2031
- --_sf-hr-sw-cr: var(
2032
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
2033
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr))
2034
- );
2035
-
2036
- // for font
2037
-
2038
- --_sf-hr-cr: var(
2039
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
2040
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr))
2041
- );
2042
- --_sf-hr-ft-fy: var(
2043
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
2044
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy))
2045
- );
2046
- --_sf-hr-ft-se: var(
2047
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
2048
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se))
2049
- );
2050
- --_sf-hr-ft-wt: var(
2051
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
2052
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt))
2053
- );
2054
- --_sf-hr-ft-se-ic: var(
2055
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2056
- var(
2057
- --_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2058
- var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)
2059
- )
2060
- );
2061
- --_sf-hr-tt-an: var(
2062
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
2063
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an))
2064
- );
2065
- --_sf-hr-lr-sg: var(
2066
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
2067
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg))
2068
- );
2069
- --_sf-hr-le-ht: var(
2070
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
2071
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht))
2072
- );
2073
-
2074
- --_sf-hr-in-se: var(
2075
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2076
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2077
- );
2078
- --_sf-hr-in-se: var(
2079
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2080
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2081
- );
2082
- --_sf-hr-in-c1: var(
2083
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
2084
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1))
2085
- );
2086
- --_sf-hr-ue: var(
2087
- --_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
2088
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue))
2089
- );
2090
-
2091
- // for pading and width
2092
- --_sf-hr-pg: var(
2093
- --_ctm-mob-dn-be-nn-bn-dn-hr-pg,
2094
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg))
2095
- );
2096
- --_sf-hr-wh: var(
2097
- --_ctm-mob-dn-be-nn-bn-dn-hr-wh,
2098
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh))
2099
- );
2100
-
2101
- &[data-hover-show-shadow="false"] {
2102
- --_hover-show-shadow: none;
2103
- }
2104
- &[data-hover-show-icon="false"] {
2105
- --_hover-show-icon: none;
2106
- }
2107
- }
2108
- background-color: var(
2109
- --_sf-hr-bd-cr,
2110
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr)
2111
- );
2112
-
2113
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-pg));
2114
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wh));
2115
- display: flex;
2116
- flex-direction: var(--_sf-fd-bn);
2117
- align-items: center;
2118
-
2119
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-at));
2120
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-gp));
2121
-
2122
- border-radius: var(
2123
- --_sf-hr-br-rs,
2124
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs)
2125
- );
2126
-
2127
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae))
2128
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br))
2129
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd))
2130
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));
2131
-
2132
- &[data-show-border="true"] {
2133
- border-color: var(
2134
- --_sf-hr-br-cr,
2135
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr)
2136
- );
2137
-
2138
- border-style: var(
2139
- --_sf-hr-br-se,
2140
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se)
2141
- );
2142
-
2143
- border-width: var(
2144
- --_sf-hr-br-wh,
2145
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh)
2146
- );
2147
- }
2148
-
2149
- .txt {
2150
- display: flex;
2151
-
2152
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-cr));
2153
-
2154
- font-family: var(
2155
- --_sf-hr-ft-fy,
2156
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy)
2157
- );
2158
-
2159
- font-size: var(
2160
- --_sf-hr-ft-se,
2161
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se)
2162
- );
2163
-
2164
- font-weight: var(
2165
- --_sf-hr-ft-wt,
2166
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt)
2167
- );
2168
-
2169
- font-style: var(
2170
- --_sf-hr-ft-se-ic,
2171
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic)
2172
- );
2173
-
2174
- text-align: var(
2175
- --_sf-hr-tt-an,
2176
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an)
2177
- );
2178
-
2179
- letter-spacing: var(
2180
- --_sf-hr-lr-sg,
2181
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg)
2182
- );
2183
-
2184
- line-height: var(
2185
- --_sf-hr-le-ht,
2186
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht)
2187
- );
2188
-
2189
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2190
- }
2191
-
2192
- .icon {
2193
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2194
- svg {
2195
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
2196
- height: var(
2197
- --_sf-hr-in-se,
2198
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se)
2199
- );
2200
-
2201
- path {
2202
- stroke: var(
2203
- --_sf-hr-in-c1,
2204
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1)
2205
- );
2206
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2207
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-se-wh, 1.25);
2208
- }
2209
- }
2210
- }
2211
- [data-element-style="Text"] {
2212
- display: inline-block;
2213
- width: 100%;
2214
- }
2215
-
2216
- .icon--hover {
2217
- // position: absolute;
2218
- // inset: 0;
2219
- // opacity: 0;
2220
- display: none;
2221
- transition: opacity 0.2s ease;
2222
- }
2223
-
2224
- &:hover .icon--hover {
2225
- // opacity: 1;
2226
- display: flex;
2227
- }
2228
-
2229
- &:hover .icon--default {
2230
- // opacity: 0;
2231
- display: none;
2232
- }
2233
- }
2234
-
2235
- a {
2236
- width: 100%;
2237
- display: flex;
2238
- align-items: center;
2239
-
2240
- .bundle_navigation_button {
2241
- display: flex;
2242
- width: 100%;
2243
- padding: 16px 24px;
2244
- justify-content: center;
2245
- align-items: center;
2246
- gap: 12px;
2247
- align-self: stretch;
2248
- font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2249
- font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2250
- color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2251
- font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2252
- font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2253
- text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2254
- text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2255
- letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2256
- line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2257
- background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2258
- border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2259
- border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2260
- border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2261
- border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2262
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2263
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2264
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2265
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2266
-
2267
- .icon {
2268
- svg {
2269
- width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2270
- height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2271
- path {
2272
- stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2273
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2274
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2275
- }
2276
- }
2277
- }
2278
- }
2279
- }
2280
- }
2281
-
2282
- .tiles-grid-view {
2283
- display: flex;
2284
- flex-wrap: wrap;
2285
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
2286
- width: 100%;
2287
- height: 100%;
2288
-
2289
- .tiles-container {
2290
- display: flex;
2291
- flex-wrap: wrap;
2292
- justify-content: center;
2293
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
2294
- width: 100%;
2295
- height: 100%;
2296
-
2297
- .tile {
2298
- // width: 350px !important;
2299
- width: 100%;
2300
- height: 100%;
2301
- overflow: hidden;
2302
- padding: 16px;
2303
- display: flex;
2304
- flex-direction: column;
2305
- align-items: flex-start;
2306
- gap: prepareMediaVariable(--_ctm-lt-im-gp);
2307
- justify-content: space-between;
2308
- background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
2309
- // Border only drawn when the tile card's "Show Border" toggle is on.
2310
- &[data-show-border="true"] {
2311
- border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
2312
- border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
2313
- border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
2314
- }
2315
- border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
2316
- box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae)
2317
- prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br)
2318
- prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd)
2319
- prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);
2320
-
2321
- .tile-content {
2322
- display: flex;
2323
- flex-direction: column;
2324
- gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
2325
- align-items: flex-start;
2326
- height: 100%;
2327
- width: 100%;
2328
- .tile_bundle_name {
2329
- display: flex;
2330
- align-items: flex-start;
2331
- justify-content: flex-start;
2332
- width: 100%;
2333
- // overflow: hidden;
2334
- // text-overflow: ellipsis;
2335
- // white-space: nowrap;
2336
- font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
2337
- font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
2338
- color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
2339
- font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
2340
- font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
2341
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
2342
- text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
2343
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
2344
- line-height: prepareMediaVariable(--_ctm-dn-pt-ne-dn-le-ht);
2345
- background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
2346
- border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
2347
- border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
2348
- border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
2349
- border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
2350
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
2351
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
2352
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
2353
- prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
2354
-
2355
- &#{$overflowSelector} {
2356
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2357
- }
2358
- }
2359
-
2360
- // Category name + slider arrows of a category bundle. Tiles in the
2361
- // same row whose bundle has no category render this row empty, so
2362
- // every tile's image grid starts at the same height instead of
2363
- // riding up under the bundle name.
2364
- .tile_category_row {
2365
- display: flex;
2366
- align-items: center;
2367
- justify-content: space-between;
2368
- width: 100%;
2369
-
2370
- // An empty name still has to occupy its line box.
2371
- .tile_category_name:empty::before {
2372
- content: "\00a0";
2373
- }
2374
-
2375
- // Rows next to a category slider also reserve the arrow button
2376
- // box — same sizing NAVIGATION_STYLES gives those buttons.
2377
- &[data-reserve-nav-height="true"] {
2378
- min-height: calc(
2379
- var(
2380
- --_sf-icn-size,
2381
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se, 16px)}
2382
- ) *
2383
- 1.75
2384
- );
2385
- }
2386
- }
2387
-
2388
- .brand-tile {
2389
- display: flex;
2390
- justify-content: center;
2391
- align-items: center;
2392
- height: -webkit-fill-available;
2393
-
2394
- img {
2395
- width: 100%;
2396
- height: 100%;
2397
- // object-fit: fill;
2398
- }
2399
- }
2400
-
2401
- .product-tile {
2402
- // `--_sf-tile-columns` / `--_sf-tile-rows` are set inline by
2403
- // TilesGridView from the Tile Columns / Tile Rows layout
2404
- // settings — the same numbers it uses to decide how many image
2405
- // cells to mount, so the template never holds cells the
2406
- // renderer did not fill. The 2x2 fallback covers elements
2407
- // rendered before those settings existed.
2408
- display: grid;
2409
- flex: 1 1 auto;
2410
- row-gap: prepareMediaVariable(--_ctm-lt-te-rw-gp);
2411
- column-gap: prepareMediaVariable(--_ctm-lt-te-cn-gp);
2412
- // padding: 10px;
2413
- box-sizing: border-box;
2414
- width: 100%;
2415
- grid-template-columns: repeat(var(--_sf-tile-columns, 2), 1fr);
2416
- grid-template-rows: repeat(var(--_sf-tile-rows, 2), 1fr);
2417
-
2418
- // One image height per row.
2419
- height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * var(--_sf-tile-rows, 2));
2420
-
2421
- // A bundle with no products at all shows a single placeholder
2422
- // image, which keeps the whole grid area to itself.
2423
- &.images-0 .product-image-wrapper {
2424
- grid-column: 1 / -1;
2425
- grid-row: 1 / -1;
2426
- }
2427
-
2428
- &.animate-flip {
2429
- // Padding cells hold no image, so they sit the animation out.
2430
- .product-image-wrapper:not(.empty-image-slot) {
2431
- animation: flip 0.6s ease-in-out;
2432
- }
2433
-
2434
- @keyframes flip {
2435
- 0% {
2436
- transform: rotateY(0deg);
2437
- }
2438
- 100% {
2439
- transform: rotateY(180deg);
2440
- }
2441
- }
2442
- }
2443
-
2444
- .product-image-wrapper {
2445
- width: 100%;
2446
- height: 100%;
2447
- overflow: hidden;
2448
- display: flex;
2449
- justify-content: center;
2450
- align-items: center;
2451
- background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
2452
- // Border only drawn when the tile card image's "Show Border" toggle is on.
2453
- &[data-show-border="true"] {
2454
- border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2455
- border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2456
- border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2457
- }
2458
- border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
2459
- box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae)
2460
- prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br)
2461
- prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd)
2462
- prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);
2463
-
2464
- img {
2465
- // max-height: 135px;
2466
- height: 100%;
2467
- width: 100%;
2468
- // object-fit: fill;
2469
- }
2470
- }
2471
- }
2472
- }
2473
-
2474
- .bundle_navigation_button {
2475
- width: 100%;
2476
- display: flex;
2477
- padding: 16px 24px;
2478
- justify-content: center;
2479
- align-items: center;
2480
- gap: 12px;
2481
- align-self: stretch;
2482
- font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2483
- font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2484
- color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2485
- font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2486
- font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2487
- text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2488
- text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2489
- letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2490
- line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2491
- background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2492
- border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2493
- border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2494
- border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2495
- border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2496
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2497
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2498
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2499
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2500
-
2501
- .icon {
2502
- svg {
2503
- width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2504
- height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2505
- path {
2506
- stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2507
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2508
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2509
- }
2510
- }
2511
- }
2512
- }
2513
-
2514
- a {
2515
- display: flex;
2516
- align-items: center;
2517
- width: 100%;
2518
-
2519
- .bundle_navigation_button {
2520
- width: 100%;
2521
- display: flex;
2522
- padding: 16px 24px;
2523
- justify-content: center;
2524
- align-items: center;
2525
- gap: 12px;
2526
- align-self: stretch;
2527
- text-transform: uppercase;
2528
- font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2529
- font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2530
- color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2531
- font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2532
- font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2533
- text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2534
- text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2535
- letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2536
- line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2537
- background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2538
- border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2539
- border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2540
- border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2541
- border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2542
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2543
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2544
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2545
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2546
-
2547
- .icon {
2548
- svg {
2549
- width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2550
- height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2551
- path {
2552
- stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2553
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2554
- stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2555
- }
2556
- }
2557
- }
2558
- }
2559
- }
2560
- }
2561
- }
2562
- }
2563
- .embla__container {
2564
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
2565
- }
2566
- }
2567
- .arrow-navigation-categories {
2568
- display: flex;
2569
- flex-direction: row;
2570
- align-items: center;
2571
- justify-content: space-between;
2572
- gap: 4px;
2573
-
2574
- & > button {
2575
- // display: var(--_d-flex);
2576
- // align-items: center;
2577
- // justify-content: center;
2578
-
2579
- @include NAVIGATION_STYLES();
2580
- }
2581
- }
2582
- }
2583
- }
2584
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $overflowSelector: ".flex__overflow";
5
+ // --_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se
6
+
7
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
8
+ $resizeActive: '[data-cms-element-resizer="true"]';
9
+
10
+ @mixin NAVIGATION_STYLES($type: 1) {
11
+ $TYPE: "cy";
12
+
13
+ @if ($type ==2) {
14
+ $TYPE: "pt";
15
+ }
16
+
17
+ $size: var(--_sf-icn-size,
18
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-se, 16px)
19
+ });
20
+ $clr: var(--_sf-icn-clr,
21
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-c1, #000)
22
+ });
23
+ $perc: 1.75;
24
+ display: var(--_d-flex);
25
+ align-items: center;
26
+ justify-content: center;
27
+ width: calc(#{$size} * #{$perc});
28
+ height: calc(#{$size} * #{$perc});
29
+ background: var(--_sf-icn-bg,
30
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)
31
+ });
32
+ border-radius: var(--_sf-icn-brs,
33
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)
34
+ });
35
+
36
+ // Border is only drawn when the "Show Border" toggle is on. The renderer emits
37
+ // data-show-border="false" when the toggle is off; an absent/"true" value keeps
38
+ // the border (so existing arrows that don't set the attribute are unaffected).
39
+ &:not([data-show-border="false"]) {
40
+ border-color: var(--_sf-icn-br,
41
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)
42
+ });
43
+ border-width: var(--_sf-icn-bw,
44
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)
45
+ });
46
+ border-style: var(--_sf-icn-bs,
47
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)
48
+ });
49
+ }
50
+
51
+ // Hide the arrow glyph when the "Show Icon" toggle is off.
52
+ &[data-show-icon="false"]>span {
53
+ display: none;
54
+ }
55
+
56
+ &:disabled {
57
+ opacity: 0.65;
58
+ cursor: no-drop;
59
+ }
60
+
61
+ &:hover {
62
+ --_sf-icn-size: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-se)
63
+ }
64
+
65
+ ;
66
+ --_sf-icn-clr: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-c1)
67
+ }
68
+
69
+ ;
70
+ --_sf-icn-bg: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-bd-cr)
71
+ }
72
+
73
+ ;
74
+ --_sf-icn-br: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-cr)
75
+ }
76
+
77
+ ;
78
+ --_sf-icn-bw: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-wh)
79
+ }
80
+
81
+ ;
82
+ --_sf-icn-bs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-se)
83
+ }
84
+
85
+ ;
86
+ --_sf-icn-brs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-rs)
87
+ }
88
+
89
+ ;
90
+ }
91
+
92
+ &>span {
93
+ display: var(--_d-flex);
94
+
95
+ svg {
96
+ width: #{$size};
97
+ height: #{$size};
98
+
99
+ path {
100
+ stroke: #{$clr};
101
+ }
102
+ }
103
+ }
104
+ }
105
+
106
+ [data-div-type="element"] {
107
+ &[data-element-type="bundle"] {
108
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
109
+
110
+ // width: var(--_sf-con-nw-wh);--_ctm-ele-nw-wh-vl
111
+ // width: var(
112
+ // --_sf-mob-el-wh-st-mx,
113
+ // var(
114
+ // --_sf-tab-el-wh-st-mx,
115
+ // var(
116
+ // --_sf-el-wh-st-mx,
117
+ // calc(
118
+ // 1% *
119
+ // var(
120
+ // --_ctm-mob-bun-ele-nw-wh-vl,
121
+ // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
122
+ // )
123
+ // )
124
+ // )
125
+ // )
126
+ // );
127
+ width: var(--_sf-el-wh-st-mx,
128
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
129
+ // min-height: var();
130
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
131
+
132
+ // &[data-view-state="full"] {
133
+ // height: auto;
134
+ // }
135
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
136
+
137
+ // --_aspect-ratio: calc(
138
+ // 1 *
139
+ // (
140
+ // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
141
+ // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
142
+ // )
143
+ // );
144
+ // &[data-view-state="full"] {
145
+ // & > .wrapper {
146
+ // & > div {
147
+ // height: 100%;
148
+ // }
149
+ // }
150
+ // }
151
+
152
+ // height: auto;
153
+
154
+ // margin: var(
155
+ // --_ctm-mob-bun-lt-mn,
156
+ // var(
157
+ // --_ctm-tab-bun-lt-mn,
158
+ // var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
159
+ // )
160
+ // );
161
+
162
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
163
+ // min-height: 100px !important;
164
+ // }
165
+
166
+ &>.wrapper {
167
+ width: 100%;
168
+ // height: 100%;
169
+ }
170
+
171
+ .embla {
172
+ width: 100%;
173
+ // height: 100%;
174
+ position: relative;
175
+ display: flex;
176
+ flex-direction: column;
177
+ overflow: var(--_ctm-lt-ow-ss);
178
+
179
+ .embla__viewport {
180
+ width: 100%;
181
+ height: 100%;
182
+ position: relative;
183
+ display: flex;
184
+ flex-direction: column;
185
+
186
+ // overflow: hidden;
187
+
188
+ .embla__container {
189
+ width: 100%;
190
+ height: 100%;
191
+ display: grid;
192
+ grid-template-rows: 100%;
193
+
194
+ grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
195
+ calc((100% - (var(--_ctm-mob-lt-is-pr-se,
196
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) - 1) * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))) / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
197
+
198
+ grid-auto-flow: column;
199
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
200
+
201
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
202
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
203
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px));
204
+ }
205
+
206
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
207
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
208
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
209
+ }
210
+
211
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
212
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
213
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
214
+ }
215
+
216
+ .embla__slide {
217
+ width: 100%;
218
+ height: 100%;
219
+ }
220
+ }
221
+ }
222
+
223
+ &:not([data-display-style="Column"]) {
224
+ .embla__container {
225
+ grid-auto-columns: calc((100% - (var(--_ctm-mob-lt-is-pr-se,
226
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) - 1) * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))) / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
227
+ }
228
+ }
229
+
230
+ &[data-display-style="Column"] {
231
+ // overflow: unset;
232
+
233
+ .embla__viewport {
234
+ .embla__container {
235
+ display: flex;
236
+
237
+ .embla__slide {
238
+ width: unset;
239
+ height: 100%;
240
+ aspect-ratio: 1.3 / 2;
241
+ }
242
+ }
243
+ }
244
+ }
245
+
246
+ .arrow-navigation {
247
+ display: flex;
248
+ position: absolute;
249
+ top: 50%;
250
+ left: 50%;
251
+ width: 100%;
252
+ justify-content: space-between;
253
+ transform: translate(-50%, -50%);
254
+
255
+ // padding-left: 20px;
256
+ &[data-control-type="Side"] {
257
+
258
+ .left-button,
259
+ .right-button {
260
+ background-color: transparent;
261
+ }
262
+ }
263
+
264
+ &[data-background-shape="Round"] {
265
+
266
+ .left-button,
267
+ .right-button {
268
+ background-color: #f2f5f5;
269
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
270
+ }
271
+ }
272
+
273
+ &[data-control-type="Bottom-Overflow"] {
274
+ transform: translateX(-50%);
275
+ width: 100%;
276
+ justify-content: center;
277
+ gap: 12px;
278
+ top: unset;
279
+ bottom: 6px;
280
+ }
281
+
282
+ &[data-control-type="Bottom"] {
283
+ transform: unset;
284
+ position: static;
285
+ width: 100%;
286
+ justify-content: center;
287
+ gap: 12px;
288
+ margin-top: 10px;
289
+ }
290
+
291
+ .left-button {
292
+ padding: 10px;
293
+ border-radius: 50%;
294
+ border: none;
295
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
296
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
297
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
298
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
299
+
300
+ display: flex;
301
+ align-items: center;
302
+ justify-content: center;
303
+ cursor: pointer;
304
+ outline: none;
305
+ margin-left: 12px;
306
+
307
+ &:disabled {
308
+ & svg {
309
+ path {
310
+ stroke: rgb(192, 192, 192);
311
+ }
312
+ }
313
+ }
314
+ }
315
+
316
+ .right-button {
317
+ border-radius: 50%;
318
+ border: none;
319
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
320
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
321
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
322
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
323
+
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ cursor: pointer;
328
+ outline: none;
329
+ margin-right: 12px;
330
+ padding: 10px;
331
+
332
+ &:disabled {
333
+ & svg {
334
+ path {
335
+ stroke: rgb(192, 192, 192);
336
+ }
337
+ }
338
+ }
339
+ }
340
+
341
+ .icon {
342
+ display: flex;
343
+
344
+ svg {
345
+ width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
346
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
347
+ height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
348
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
349
+
350
+ path {
351
+ stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
352
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
353
+ }
354
+ }
355
+ }
356
+
357
+ .left-button,
358
+ .right-button {
359
+ @include NAVIGATION_STYLES(2);
360
+ }
361
+ }
362
+
363
+ &[data-control-type="Side"] {
364
+ .embla__viewport {
365
+ width: calc(100% - 120px);
366
+ margin-inline: auto;
367
+ }
368
+
369
+ .left-button {
370
+ position: absolute;
371
+ left: 0;
372
+ top: 50%;
373
+ transform: translateY(-50%);
374
+ z-index: 2;
375
+
376
+ @include NAVIGATION_STYLES(1);
377
+ }
378
+
379
+ .right-button {
380
+ position: absolute;
381
+ z-index: 2;
382
+ right: 0;
383
+ top: 50%;
384
+ transform: translateY(-50%);
385
+
386
+ @include NAVIGATION_STYLES(1);
387
+ }
388
+
389
+ // :is(.left-button, .right-button) {
390
+ // @include NAVIGATION_STYLES(1);
391
+ // }
392
+ }
393
+
394
+ &[data-thumbnail-placement="top"] {
395
+ flex-direction: column-reverse;
396
+ }
397
+
398
+ &[data-thumbnail-placement="bottom"] {
399
+ flex-direction: column;
400
+ }
401
+
402
+ &[data-thumbnail-placement="left"] {
403
+ flex-direction: row-reverse;
404
+
405
+ .embla__thumbs {
406
+ width: prepareMediaVariable(--_ctm-lt-tl-se);
407
+ height: 100%;
408
+
409
+ & .embla__thumbs__container {
410
+ flex-direction: column;
411
+ height: 100%;
412
+ }
413
+ }
414
+ }
415
+
416
+ &[data-thumbnail-placement="right"] {
417
+ flex-direction: row;
418
+
419
+ .embla__thumbs {
420
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
421
+
422
+ height: 100%;
423
+
424
+ & .embla__thumbs__container {
425
+ flex-direction: column;
426
+ height: 100%;
427
+ }
428
+ }
429
+ }
430
+ }
431
+
432
+ .bundle__element__container {
433
+ // height: 100%;
434
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
435
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
436
+
437
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
438
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
439
+
440
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
441
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
442
+
443
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
444
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
445
+
446
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
447
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
448
+
449
+ box-shadow: var(--_show-shadow,
450
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
451
+
452
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
453
+ display: flex;
454
+ flex-direction: column;
455
+ // height: 100%;
456
+
457
+ .bundle__tabs {
458
+ width: 100%;
459
+ background-color: var(--_ctm-mob-dn-be-ts-wt-se-bd-cr,
460
+ var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr)));
461
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
462
+ display: flex;
463
+ flex-direction: column;
464
+ --_sf-gp: var(--_ctm-mob-lt-im-sg,
465
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
466
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
467
+ row-gap: var(--_sf-gp);
468
+ width: 100%;
469
+
470
+ // height: 100%;
471
+ // Border only drawn when the widget's "Show Border" toggle is on. The
472
+ // renderer emits data-show-border="true"/"" on the .bundle__tabs container.
473
+ &[data-show-border="true"] {
474
+ border-color: var(--_ctm-mob-dn-be-ts-wt-se-br-cr,
475
+ var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr)));
476
+ border-style: var(--_ctm-mob-dn-be-ts-wt-se-br-se,
477
+ var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se)));
478
+ border-width: var(--_ctm-mob-dn-be-ts-wt-se-br-wh,
479
+ var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh)));
480
+ }
481
+
482
+ border-radius: var(--_ctm-mob-dn-be-ts-wt-se-br-rs,
483
+ var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs)));
484
+ box-shadow: var(--_show-shadow,
485
+ var(--_ctm-mob-dn-be-ts-wt-se-sw-ae,
486
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae))) var(--_ctm-mob-dn-be-ts-wt-se-sw-br,
487
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br))) var(--_ctm-mob-dn-be-ts-wt-se-sw-sd,
488
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd))) var(--_ctm-mob-dn-be-ts-wt-se-sw-cr,
489
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr))));
490
+
491
+ .profile__button {
492
+ &[data-show-shadow="false"] {
493
+ --_show-shadow: none;
494
+ }
495
+
496
+ &[data-icon-position="left"] {
497
+ --_sf-fd-bn: row;
498
+ }
499
+
500
+ &[data-icon-position="right"] {
501
+ --_sf-fd-bn: row-reverse;
502
+ }
503
+
504
+ &[data-icon-position="center"] {
505
+ --_sf-fd-bn: row;
506
+ }
507
+
508
+ &:hover {
509
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
510
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr)));
511
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr,
512
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr)));
513
+ --_sf-hr-br-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-se,
514
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se)));
515
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh,
516
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh)));
517
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs,
518
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs)));
519
+ --_sf-hr-at: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-at,
520
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at)));
521
+ --_sf-hr-in-ad-tt-sg: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
522
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
523
+ var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg)));
524
+
525
+ // for shadow
526
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae,
527
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae)));
528
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br,
529
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br)));
530
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr,
531
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr)));
532
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr,
533
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr)));
534
+
535
+ // for font
536
+
537
+ --_sf-hr-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-cr,
538
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr)));
539
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
540
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy)));
541
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-tt-tm,
542
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-tm)));
543
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-wd-wp,
544
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-wp)));
545
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-wd-bk,
546
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-bk)));
547
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
548
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se)));
549
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt,
550
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt)));
551
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic,
552
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic,
553
+ var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic)));
554
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an,
555
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an)));
556
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg,
557
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg)));
558
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht,
559
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht)));
560
+
561
+ --_sf-hr-in-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
562
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se)));
563
+ --_sf-hr-in-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
564
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se)));
565
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1,
566
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1)));
567
+ --_sf-hr-ue: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ue,
568
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue)));
569
+
570
+ // for pading and width
571
+ --_sf-hr-pg: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-pg,
572
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg)));
573
+ --_sf-hr-wh: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-wh,
574
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh)));
575
+
576
+ &[data-hover-show-shadow="false"] {
577
+ --_hover-show-shadow: none;
578
+ }
579
+
580
+ &[data-hover-show-icon="false"] {
581
+ --_hover-show-icon: none;
582
+ }
583
+ }
584
+
585
+ background-color: var(--_sf-hr-bd-cr,
586
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr));
587
+
588
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
589
+ display: flex;
590
+ flex-direction: var(--_sf-fd-bn);
591
+ align-items: center;
592
+
593
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
594
+ gap: var(--_sf-hr-in-ad-tt-sg,
595
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg));
596
+
597
+ border-radius: var(--_sf-hr-br-rs,
598
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs));
599
+
600
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
601
+
602
+ &[data-show-border="true"] {
603
+ border-color: var(--_sf-hr-br-cr,
604
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr));
605
+
606
+ border-style: var(--_sf-hr-br-se,
607
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se));
608
+
609
+ border-width: var(--_sf-hr-br-wh,
610
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh));
611
+ }
612
+
613
+ // text styles
614
+
615
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
616
+
617
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
618
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm));
619
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp));
620
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk));
621
+
622
+ &.flex__overflow {
623
+ white-space: normal;
624
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
625
+ }
626
+
627
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
628
+
629
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
630
+
631
+ font-style: var(--_sf-hr-ft-se-ic,
632
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic));
633
+
634
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
635
+
636
+ letter-spacing: var(--_sf-hr-lr-sg,
637
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg));
638
+
639
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
640
+
641
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
642
+
643
+ [data-element-style="Text"] {
644
+ display: inline-block;
645
+ width: 100%;
646
+ }
647
+
648
+ &[data-is-selected="true"] {
649
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-me-sd-se-bd-cr,
650
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr)));
651
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
652
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr)));
653
+ --_sf-sd-br-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
654
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se)));
655
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
656
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh)));
657
+ --_sf-sd-br-rs: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
658
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs)));
659
+ --_sf-sd-at: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-at,
660
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at)));
661
+ --_sf-sd-in-ad-tt-sg: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
662
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
663
+ var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)));
664
+
665
+ // for shadow
666
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
667
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae)));
668
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
669
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br)));
670
+ --_sf-sd-sw-hr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
671
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr)));
672
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
673
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr)));
674
+
675
+ // for font
676
+
677
+ --_sf-sd-cr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
678
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr)));
679
+ --_sf-sd-ft-fy: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
680
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy)));
681
+ --_sf-sd-tt-tm: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-tt-tm,
682
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-tm)));
683
+ --_sf-sd-wd-wp: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-wd-wp,
684
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-wp)));
685
+ --_sf-sd-wd-bk: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-wd-bk,
686
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-bk)));
687
+ --_sf-sd-ft-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
688
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se)));
689
+ --_sf-sd-ft-wt: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
690
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt)));
691
+ --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
692
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
693
+ var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)));
694
+ --_sf-sd-tt-an: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
695
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an)));
696
+ --_sf-sd-lr-sg: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
697
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg)));
698
+ --_sf-sd-le-ht: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
699
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht)));
700
+
701
+ --_sf-sd-in-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
702
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se)));
703
+ --_sf-sd-in-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
704
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se)));
705
+ --_sf-sd-in-c1: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
706
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1)));
707
+ --_sf-sd-ue: var(--_ctm-mob-dn-be-ts-be-tb-hr-ue,
708
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue)));
709
+
710
+ // for pading and width
711
+ --_sf-sd-pg: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
712
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg)));
713
+ --_sf-sd-wh: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
714
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh)));
715
+
716
+ &[data-hover-show-shadow="false"] {
717
+ --_hover-show-shadow: none;
718
+ }
719
+
720
+ &[data-hover-show-icon="false"] {
721
+ --_hover-show-icon: none;
722
+ }
723
+
724
+ background-color: var(--_sf-sd-bd-cr,
725
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr));
726
+
727
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
728
+ display: flex;
729
+ flex-direction: var(--_sf-fd-bn);
730
+ align-items: center;
731
+
732
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
733
+ gap: var(--_sf-sd-in-ad-tt-sg,
734
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg));
735
+
736
+ border-radius: var(--_sf-sd-br-rs,
737
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs));
738
+
739
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
740
+
741
+ &[data-show-border="true"] {
742
+ border-color: var(--_sf-sd-br-cr,
743
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr));
744
+
745
+ border-style: var(--_sf-sd-br-se,
746
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se));
747
+
748
+ border-width: var(--_sf-sd-br-wh,
749
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh));
750
+ }
751
+
752
+ // text styles
753
+
754
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
755
+
756
+ font-family: var(--_sf-sd-ft-fy,
757
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
758
+ text-transform: var(--_sf-sd-tt-tm,
759
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm));
760
+ word-wrap: var(--_sf-sd-wd-wp,
761
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp));
762
+ word-break: var(--_sf-sd-wd-bk,
763
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk));
764
+
765
+ &.flex__overflow {
766
+ white-space: normal;
767
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
768
+ }
769
+
770
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
771
+
772
+ font-weight: var(--_sf-sd-ft-wt,
773
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
774
+
775
+ font-style: var(--_sf-sd-ft-se-ic,
776
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic));
777
+
778
+ text-align: var(--_sf-sd-tt-an,
779
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
780
+
781
+ letter-spacing: var(--_sf-sd-lr-sg,
782
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg));
783
+
784
+ line-height: var(--_sf-sd-le-ht,
785
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
786
+
787
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
788
+
789
+ [data-element-style="Text"] {
790
+ display: inline-block;
791
+ width: 100%;
792
+ }
793
+ }
794
+ }
795
+
796
+ .embla {
797
+ height: auto;
798
+
799
+ .embla__viewport {
800
+ .embla__container {
801
+ display: flex;
802
+ gap: prepareMediaVariable(--_ctm-dn-be-ts-wt-se-im-gp);
803
+
804
+ .embla__slide {
805
+ width: unset;
806
+ }
807
+ }
808
+ }
809
+ }
810
+ }
811
+
812
+ .category__tabs {
813
+ width: 100%;
814
+ background-color: var(--_ctm-mob-dn-cy-ts-wt-se-bd-cr,
815
+ var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr)));
816
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
817
+ display: flex;
818
+ flex-direction: column;
819
+ --_sf-gp: var(--_ctm-mob-lt-im-sg,
820
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
821
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
822
+ row-gap: var(--_sf-gp);
823
+ width: 100%;
824
+
825
+ // height: 100%;
826
+ // Border only drawn when the widget's "Show Border" toggle is on. The
827
+ // renderer emits data-show-border="true"/"" on the .category__tabs container.
828
+ &[data-show-border="true"] {
829
+ border-color: var(--_ctm-mob-dn-cy-ts-wt-se-br-cr,
830
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr)));
831
+ border-style: var(--_ctm-mob-dn-cy-ts-wt-se-br-se,
832
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se)));
833
+ border-width: var(--_ctm-mob-dn-cy-ts-wt-se-br-wh,
834
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh)));
835
+ }
836
+
837
+ border-radius: var(--_ctm-mob-dn-cy-ts-wt-se-br-rs,
838
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs)));
839
+ box-shadow: var(--_show-shadow,
840
+ var(--_ctm-mob-dn-cy-ts-wt-se-sw-ae,
841
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae))) var(--_ctm-mob-dn-cy-ts-wt-se-sw-br,
842
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br))) var(--_ctm-mob-dn-cy-ts-wt-se-sw-sd,
843
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd))) var(--_ctm-mob-dn-cy-ts-wt-se-sw-cr,
844
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr))));
845
+
846
+ .profile__button {
847
+ &[data-show-shadow="false"] {
848
+ --_show-shadow: none;
849
+ }
850
+
851
+ &[data-icon-position="left"] {
852
+ --_sf-fd-bn: row;
853
+ }
854
+
855
+ &[data-icon-position="right"] {
856
+ --_sf-fd-bn: row-reverse;
857
+ }
858
+
859
+ &[data-icon-position="center"] {
860
+ --_sf-fd-bn: row;
861
+ }
862
+
863
+ &:hover {
864
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
865
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr)));
866
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr,
867
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr)));
868
+ --_sf-hr-br-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se,
869
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se)));
870
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh,
871
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh)));
872
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs,
873
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs)));
874
+ --_sf-hr-at: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-at,
875
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at)));
876
+ --_sf-hr-in-ad-tt-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
877
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
878
+ var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg)));
879
+
880
+ // for shadow
881
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae,
882
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae)));
883
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br,
884
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br)));
885
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr,
886
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr)));
887
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr,
888
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr)));
889
+
890
+ // for font
891
+
892
+ --_sf-hr-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr,
893
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr)));
894
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
895
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy)));
896
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-tm,
897
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-tm)));
898
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-wp,
899
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-wp)));
900
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-bk,
901
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-bk)));
902
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
903
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se)));
904
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt,
905
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt)));
906
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
907
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
908
+ var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic)));
909
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an,
910
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an)));
911
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg,
912
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg)));
913
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht,
914
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht)));
915
+
916
+ --_sf-hr-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
917
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se)));
918
+ --_sf-hr-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
919
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se)));
920
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1,
921
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1)));
922
+ --_sf-hr-ue: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue,
923
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue)));
924
+
925
+ // for pading and width
926
+ --_sf-hr-pg: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg,
927
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg)));
928
+ --_sf-hr-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh,
929
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh)));
930
+
931
+ &[data-hover-show-shadow="false"] {
932
+ --_hover-show-shadow: none;
933
+ }
934
+
935
+ &[data-hover-show-icon="false"] {
936
+ --_hover-show-icon: none;
937
+ }
938
+ }
939
+
940
+ background-color: var(--_sf-hr-bd-cr,
941
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr));
942
+
943
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
944
+ display: flex;
945
+ flex-direction: var(--_sf-fd-bn);
946
+ align-items: center;
947
+
948
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
949
+ gap: var(--_sf-hr-in-ad-tt-sg,
950
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg));
951
+
952
+ border-radius: var(--_sf-hr-br-rs,
953
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs));
954
+
955
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
956
+
957
+ &[data-show-border="true"] {
958
+ border-color: var(--_sf-hr-br-cr,
959
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr));
960
+
961
+ border-style: var(--_sf-hr-br-se,
962
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se));
963
+
964
+ border-width: var(--_sf-hr-br-wh,
965
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh));
966
+ }
967
+
968
+ // text styles
969
+
970
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
971
+
972
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
973
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm));
974
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp));
975
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk));
976
+
977
+ &.flex__overflow {
978
+ white-space: normal;
979
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
980
+ }
981
+
982
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
983
+
984
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
985
+
986
+ font-style: var(--_sf-hr-ft-se-ic,
987
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic));
988
+
989
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
990
+
991
+ letter-spacing: var(--_sf-hr-lr-sg,
992
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg));
993
+
994
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
995
+
996
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
997
+
998
+ [data-element-style="Text"] {
999
+ display: inline-block;
1000
+ width: 100%;
1001
+ }
1002
+
1003
+ &[data-is-selected="true"] {
1004
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-me-sd-se-bd-cr,
1005
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr)));
1006
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
1007
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr)));
1008
+ --_sf-sd-br-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
1009
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se)));
1010
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
1011
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh)));
1012
+ --_sf-sd-br-rs: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
1013
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs)));
1014
+ --_sf-sd-at: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
1015
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at)));
1016
+ --_sf-sd-in-ad-tt-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1017
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1018
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)));
1019
+
1020
+ // for shadow
1021
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
1022
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae)));
1023
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
1024
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br)));
1025
+ --_sf-sd-sw-hr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
1026
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr)));
1027
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
1028
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr)));
1029
+
1030
+ // for font
1031
+
1032
+ --_sf-sd-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
1033
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr)));
1034
+ --_sf-sd-ft-fy: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
1035
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy)));
1036
+ --_sf-sd-tt-tm: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-tm,
1037
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-tm)));
1038
+ --_sf-sd-wd-wp: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-wp,
1039
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-wp)));
1040
+ --_sf-sd-wd-bk: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-bk,
1041
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-bk)));
1042
+ --_sf-sd-ft-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
1043
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se)));
1044
+ --_sf-sd-ft-wt: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
1045
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt)));
1046
+ --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1047
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1048
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)));
1049
+ --_sf-sd-tt-an: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
1050
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an)));
1051
+ --_sf-sd-lr-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
1052
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg)));
1053
+ --_sf-sd-le-ht: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
1054
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht)));
1055
+
1056
+ --_sf-sd-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1057
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se)));
1058
+ --_sf-sd-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1059
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se)));
1060
+ --_sf-sd-in-c1: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
1061
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1)));
1062
+ --_sf-sd-ue: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
1063
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue)));
1064
+
1065
+ // for pading and width
1066
+ --_sf-sd-pg: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
1067
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg)));
1068
+ --_sf-sd-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
1069
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh)));
1070
+
1071
+ &[data-hover-show-shadow="false"] {
1072
+ --_hover-show-shadow: none;
1073
+ }
1074
+
1075
+ &[data-hover-show-icon="false"] {
1076
+ --_hover-show-icon: none;
1077
+ }
1078
+
1079
+ background-color: var(--_sf-sd-bd-cr,
1080
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr));
1081
+
1082
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1083
+ display: flex;
1084
+ flex-direction: var(--_sf-fd-bn);
1085
+ align-items: center;
1086
+
1087
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1088
+ gap: var(--_sf-sd-in-ad-tt-sg,
1089
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg));
1090
+
1091
+ border-radius: var(--_sf-sd-br-rs,
1092
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs));
1093
+
1094
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1095
+
1096
+ &[data-show-border="true"] {
1097
+ border-color: var(--_sf-sd-br-cr,
1098
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr));
1099
+
1100
+ border-style: var(--_sf-sd-br-se,
1101
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se));
1102
+
1103
+ border-width: var(--_sf-sd-br-wh,
1104
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh));
1105
+ }
1106
+
1107
+ // text styles
1108
+
1109
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1110
+
1111
+ font-family: var(--_sf-sd-ft-fy,
1112
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
1113
+ text-transform: var(--_sf-sd-tt-tm,
1114
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm));
1115
+ word-wrap: var(--_sf-sd-wd-wp,
1116
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp));
1117
+ word-break: var(--_sf-sd-wd-bk,
1118
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk));
1119
+
1120
+ &.flex__overflow {
1121
+ white-space: normal;
1122
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1123
+ }
1124
+
1125
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1126
+
1127
+ font-weight: var(--_sf-sd-ft-wt,
1128
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
1129
+
1130
+ font-style: var(--_sf-sd-ft-se-ic,
1131
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic));
1132
+
1133
+ text-align: var(--_sf-sd-tt-an,
1134
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
1135
+
1136
+ letter-spacing: var(--_sf-sd-lr-sg,
1137
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg));
1138
+
1139
+ line-height: var(--_sf-sd-le-ht,
1140
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
1141
+
1142
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1143
+
1144
+ [data-element-style="Text"] {
1145
+ display: inline-block;
1146
+ width: 100%;
1147
+ }
1148
+ }
1149
+ }
1150
+
1151
+ .embla {
1152
+ height: auto;
1153
+
1154
+ .embla__viewport {
1155
+ .embla__container {
1156
+ display: flex;
1157
+ gap: prepareMediaVariable(--_ctm-dn-cy-ts-wt-se-im-gp);
1158
+
1159
+ .embla__slide {
1160
+ width: unset;
1161
+ }
1162
+ }
1163
+ }
1164
+ }
1165
+ }
1166
+
1167
+ .single__bundle_container {
1168
+ display: flex;
1169
+ flex-direction: column;
1170
+ gap: 16px;
1171
+ height: 100%;
1172
+
1173
+ .bundle__header {
1174
+ display: flex;
1175
+ flex-direction: row;
1176
+ align-items: center;
1177
+ justify-content: space-between;
1178
+
1179
+ .bundle__title {
1180
+ font-family: prepareMediaVariable(--_ctm-dn-hg-dn-ft-fy);
1181
+ text-transform: prepareMediaVariable(--_ctm-dn-hg-dn-tt-tm);
1182
+ word-wrap: prepareMediaVariable(--_ctm-dn-hg-dn-wd-wp);
1183
+ word-break: prepareMediaVariable(--_ctm-dn-hg-dn-wd-bk);
1184
+ font-size: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se);
1185
+ color: prepareMediaVariable(--_ctm-dn-hg-dn-cr);
1186
+ font-weight: prepareMediaVariable(--_ctm-dn-hg-dn-ft-wt);
1187
+ font-style: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se-ic);
1188
+ text-decoration: prepareMediaVariable(--_ctm-dn-hg-dn-ue);
1189
+ text-align: prepareMediaVariable(--_ctm-dn-hg-dn-tt-an);
1190
+ letter-spacing: vaprepareMediaVariabler(--_ctm-dn-hg-dn-lr-sg);
1191
+ line-height: prepareMediaVariable(--_ctm-dn-hg-dn-le-ht);
1192
+ background-color: prepareMediaVariable(--_ctm-dn-hg-dn-bd-cr);
1193
+ border-width: prepareMediaVariable(--_ctm-dn-hg-dn-br-wh);
1194
+ border-color: prepareMediaVariable(--_ctm-dn-hg-dn-br-cr);
1195
+ border-style: prepareMediaVariable(--_ctm-dn-hg-dn-br-se);
1196
+ border-radius: prepareMediaVariable(--_ctm-dn-hg-dn-br-rs);
1197
+ box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae) prepareMediaVariable(--_ctm-dn-hg-dn-sw-br) prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd) prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
1198
+ }
1199
+
1200
+ .bundle__description {
1201
+ font-family: prepareMediaVariable(--_ctm-dn-dn-dn-ft-fy);
1202
+ text-transform: prepareMediaVariable(--_ctm-dn-dn-dn-tt-tm);
1203
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-dn-wd-wp);
1204
+ word-break: prepareMediaVariable(--_ctm-dn-dn-dn-wd-bk);
1205
+ font-size: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se);
1206
+ color: prepareMediaVariable(--_ctm-dn-dn-dn-cr);
1207
+ font-weight: prepareMediaVariable(--_ctm-dn-dn-dn-ft-wt);
1208
+ font-style: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se-ic);
1209
+ text-decoration: prepareMediaVariable(--_ctm-dn-dn-dn-ue);
1210
+ text-align: prepareMediaVariable(--_ctm-dn-dn-dn-tt-an);
1211
+ letter-spacing: prepareMediaVariable(--_ctm-dn-dn-dn-lr-sg);
1212
+ line-height: prepareMediaVariable(--_ctm-dn-dn-dn-le-ht);
1213
+ background-color: prepareMediaVariable(--_ctm-dn-dn-dn-bd-cr);
1214
+ border-width: prepareMediaVariable(--_ctm-dn-dn-dn-br-wh);
1215
+ border-color: prepareMediaVariable(--_ctm-dn-dn-dn-br-cr);
1216
+ border-style: prepareMediaVariable(--_ctm-dn-dn-dn-br-se);
1217
+ border-radius: prepareMediaVariable(--_ctm-dn-dn-dn-br-rs);
1218
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-dn-dn-sw-br) prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
1219
+ }
1220
+
1221
+ .button__items {
1222
+ display: flex;
1223
+ align-items: center;
1224
+ }
1225
+
1226
+ .btn__with__text[data-btn-name="bundleDetailPageButton"] {
1227
+ justify-content: center;
1228
+
1229
+ &[data-show-shadow="false"] {
1230
+ --_show-shadow: none;
1231
+ }
1232
+
1233
+ &[data-icon-position="left"] {
1234
+ --_sf-fd-bn: row;
1235
+ }
1236
+
1237
+ &[data-icon-position="right"] {
1238
+ --_sf-fd-bn: row-reverse;
1239
+ }
1240
+
1241
+ &[data-icon-position="center"] {
1242
+ --_sf-fd-bn: row;
1243
+ }
1244
+
1245
+ &:hover {
1246
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1247
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1248
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)));
1249
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1250
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1251
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)));
1252
+ --_sf-hr-br-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
1253
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
1254
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)));
1255
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1256
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1257
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)));
1258
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1259
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1260
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)));
1261
+ --_sf-hr-at: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
1262
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at)));
1263
+ --_sf-hr-gp: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
1264
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp)));
1265
+
1266
+ // for shadow
1267
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1268
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1269
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)));
1270
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1271
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1272
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)));
1273
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1274
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1275
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)));
1276
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1277
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1278
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)));
1279
+
1280
+ // for font
1281
+
1282
+ --_sf-hr-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
1283
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr)));
1284
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1285
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1286
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)));
1287
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
1288
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
1289
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-tm)));
1290
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
1291
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
1292
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-wp)));
1293
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
1294
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
1295
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-bk)));
1296
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1297
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1298
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)));
1299
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1300
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1301
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)));
1302
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1303
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1304
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)));
1305
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1306
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1307
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)));
1308
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1309
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1310
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)));
1311
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1312
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1313
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)));
1314
+
1315
+ --_sf-hr-in-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1316
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1317
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)));
1318
+ --_sf-hr-in-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1319
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1320
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)));
1321
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1322
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1323
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)));
1324
+ --_sf-hr-ue: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
1325
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue)));
1326
+
1327
+ // for pading and width
1328
+ --_sf-hr-pg: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
1329
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg)));
1330
+ --_sf-hr-wh: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
1331
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh)));
1332
+
1333
+ &[data-hover-show-shadow="false"] {
1334
+ --_hover-show-shadow: none;
1335
+ }
1336
+
1337
+ &[data-hover-show-icon="false"] {
1338
+ --_hover-show-icon: none;
1339
+ }
1340
+ }
1341
+
1342
+ background-color: var(--_sf-hr-bd-cr,
1343
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr));
1344
+
1345
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-pg));
1346
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wh));
1347
+ display: flex;
1348
+ flex-direction: var(--_sf-fd-bn);
1349
+ align-items: center;
1350
+
1351
+ justify-content: var(--_sf-hr-at,
1352
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at));
1353
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-gp));
1354
+
1355
+ border-radius: var(--_sf-hr-br-rs,
1356
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs));
1357
+
1358
+ box-shadow: var(--_sf-hr-sw-ae,
1359
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));
1360
+
1361
+ &[data-show-border="true"] {
1362
+ border-color: var(--_sf-hr-br-cr,
1363
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr));
1364
+
1365
+ border-style: var(--_sf-hr-br-se,
1366
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se));
1367
+
1368
+ border-width: var(--_sf-hr-br-wh,
1369
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh));
1370
+ }
1371
+
1372
+ .txt {
1373
+ display: flex;
1374
+
1375
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-cr));
1376
+
1377
+ font-family: var(--_sf-hr-ft-fy,
1378
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy));
1379
+ text-transform: var(--_sf-hr-tt-tm,
1380
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-tm));
1381
+ word-wrap: var(--_sf-hr-wd-wp,
1382
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-wp));
1383
+ word-break: var(--_sf-hr-wd-bk,
1384
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-bk));
1385
+
1386
+ &.flex__overflow {
1387
+ white-space: normal;
1388
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1389
+ }
1390
+
1391
+ font-size: var(--_sf-hr-ft-se,
1392
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se));
1393
+
1394
+ font-weight: var(--_sf-hr-ft-wt,
1395
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt));
1396
+
1397
+ font-style: var(--_sf-hr-ft-se-ic,
1398
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic));
1399
+
1400
+ text-align: var(--_sf-hr-tt-an,
1401
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an));
1402
+
1403
+ letter-spacing: var(--_sf-hr-lr-sg,
1404
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg));
1405
+
1406
+ line-height: var(--_sf-hr-le-ht,
1407
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht));
1408
+
1409
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1410
+ }
1411
+
1412
+ .icon {
1413
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1414
+
1415
+ svg {
1416
+ width: var(--_sf-hr-in-se,
1417
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se));
1418
+ height: var(--_sf-hr-in-se,
1419
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se));
1420
+
1421
+ path {
1422
+ stroke: var(--_sf-hr-in-c1,
1423
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1));
1424
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
1425
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-se-wh, 1.25);
1426
+ }
1427
+ }
1428
+ }
1429
+
1430
+ [data-element-style="Text"] {
1431
+ display: inline-block;
1432
+ width: 100%;
1433
+ }
1434
+
1435
+ .icon--hover {
1436
+ // position: absolute;
1437
+ // inset: 0;
1438
+ // opacity: 0;
1439
+ display: none;
1440
+ transition: opacity 0.2s ease;
1441
+ }
1442
+
1443
+ &:hover .icon--hover {
1444
+ // opacity: 1;
1445
+ display: flex;
1446
+ }
1447
+
1448
+ &:hover .icon--default {
1449
+ // opacity: 0;
1450
+ display: none;
1451
+ }
1452
+ }
1453
+ }
1454
+
1455
+ .divider {
1456
+ border: none;
1457
+ height: var(--_ctm-mob-dr-dr-wt,
1458
+ var(--_ctm-tab-dr-dr-wt, var(--_ctm-dn-dr-dr-wt)));
1459
+ /* Set thickness */
1460
+ background-color: var(--_ctm-mob-dr-dr-cr,
1461
+ var(--_ctm-tab-dr-dr-cr, var(--_ctm-dn-dr-dr-cr)));
1462
+ }
1463
+
1464
+ .single__bundle_slider {
1465
+ display: flex;
1466
+ flex-direction: column;
1467
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
1468
+ align-items: flex-start;
1469
+ flex: 1;
1470
+ min-height: 0;
1471
+
1472
+ // height: 100%;
1473
+ // & > div {
1474
+ // height: 100%;
1475
+ // }
1476
+ .embla__warper {
1477
+ // height: 80%;
1478
+ flex: 1;
1479
+ min-height: 0;
1480
+ width: 100%;
1481
+ }
1482
+
1483
+ .items__warper {
1484
+ display: flex;
1485
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
1486
+ flex-wrap: wrap;
1487
+ // align-items: center;
1488
+ --items-per-row: #{prepareMediaVariable(--_ctm-lt-is-pr-rw)};
1489
+
1490
+ .bundle-image-container,
1491
+ .tiles-grid-view {
1492
+ flex: 0 0 calc((100% / var(--items-per-row)) - var(--_ctm-lt-im-sg));
1493
+ height: unset;
1494
+ }
1495
+ }
1496
+
1497
+ .bundle-image-container {
1498
+ height: 100%;
1499
+ background-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-bd-cr);
1500
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-wh);
1501
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-se);
1502
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-cr);
1503
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-rs);
1504
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br) prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
1505
+ width: 100%;
1506
+ display: flex;
1507
+ flex-direction: column;
1508
+ gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
1509
+
1510
+ .showcase-img {
1511
+ flex-grow: 1;
1512
+ // padding: 16px;
1513
+ align-items: center;
1514
+ justify-content: center;
1515
+ display: flex;
1516
+ // height: 100%;
1517
+ flex: 1;
1518
+ min-height: 100px;
1519
+ width: 100%;
1520
+ max-height: prepareMediaVariable(--_ctm-lt-ie-ht);
1521
+
1522
+ img {
1523
+ max-width: 100%;
1524
+ // max-height: 100%;
1525
+ // height: 100%;
1526
+ width: 100%;
1527
+ // object-fit: fill;
1528
+ height: prepareMediaVariable(--_ctm-lt-ie-ht);
1529
+ }
1530
+ }
1531
+
1532
+ .img-title {
1533
+ // padding: 12px;
1534
+ font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
1535
+ word-wrap: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-wp);
1536
+ word-break: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-bk);
1537
+ font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
1538
+ color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
1539
+ font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
1540
+ font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
1541
+ text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
1542
+ text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
1543
+ letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
1544
+ line-height: prepareMediaVariablear(--_ctm-dn-pt-ne-dn-le-ht);
1545
+ background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
1546
+ border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
1547
+ border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
1548
+ border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1549
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1550
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1551
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1552
+
1553
+ &#{$overflowSelector} {
1554
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1555
+ }
1556
+ }
1557
+ }
1558
+
1559
+ .bundle__navigation_btn_wrapper {
1560
+ display: flex;
1561
+ width: 100%;
1562
+ justify-content: center;
1563
+ }
1564
+
1565
+ .btn__with__text[data-btn-name="bundle_navigation_button"] {
1566
+ justify-content: center;
1567
+
1568
+ &[data-show-shadow="false"] {
1569
+ --_show-shadow: none;
1570
+ }
1571
+
1572
+ &[data-icon-position="left"] {
1573
+ --_sf-fd-bn: row;
1574
+ }
1575
+
1576
+ &[data-icon-position="right"] {
1577
+ --_sf-fd-bn: row-reverse;
1578
+ }
1579
+
1580
+ &[data-icon-position="center"] {
1581
+ --_sf-fd-bn: row;
1582
+ }
1583
+
1584
+ &:hover {
1585
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
1586
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr)));
1587
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
1588
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr)));
1589
+ --_sf-hr-br-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
1590
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se)));
1591
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
1592
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh)));
1593
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
1594
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs)));
1595
+ --_sf-hr-at: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
1596
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at)));
1597
+ --_sf-hr-gp: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
1598
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp)));
1599
+
1600
+ // for shadow
1601
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
1602
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae)));
1603
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
1604
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br)));
1605
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
1606
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr)));
1607
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
1608
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr)));
1609
+
1610
+ // for font
1611
+
1612
+ --_sf-hr-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
1613
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr)));
1614
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
1615
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy)));
1616
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-tm,
1617
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-tm, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-tm)));
1618
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-wp,
1619
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-wp, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-wp)));
1620
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-bk,
1621
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-bk, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-bk)));
1622
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
1623
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se)));
1624
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
1625
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt)));
1626
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
1627
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
1628
+ var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)));
1629
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
1630
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an)));
1631
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
1632
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg)));
1633
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
1634
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht)));
1635
+
1636
+ --_sf-hr-in-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
1637
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se)));
1638
+ --_sf-hr-in-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
1639
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se)));
1640
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
1641
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1)));
1642
+ --_sf-hr-ue: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
1643
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue)));
1644
+
1645
+ // for pading and width
1646
+ --_sf-hr-pg: var(--_ctm-mob-dn-be-nn-bn-dn-hr-pg,
1647
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg)));
1648
+ --_sf-hr-wh: var(--_ctm-mob-dn-be-nn-bn-dn-hr-wh,
1649
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh)));
1650
+
1651
+ &[data-hover-show-shadow="false"] {
1652
+ --_hover-show-shadow: none;
1653
+ }
1654
+
1655
+ &[data-hover-show-icon="false"] {
1656
+ --_hover-show-icon: none;
1657
+ }
1658
+ }
1659
+
1660
+ background-color: var(--_sf-hr-bd-cr,
1661
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr));
1662
+
1663
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-pg));
1664
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wh));
1665
+ display: flex;
1666
+ flex-direction: var(--_sf-fd-bn);
1667
+ align-items: center;
1668
+
1669
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-at));
1670
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-gp));
1671
+
1672
+ border-radius: var(--_sf-hr-br-rs,
1673
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs));
1674
+
1675
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));
1676
+
1677
+ &[data-show-border="true"] {
1678
+ border-color: var(--_sf-hr-br-cr,
1679
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr));
1680
+
1681
+ border-style: var(--_sf-hr-br-se,
1682
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se));
1683
+
1684
+ border-width: var(--_sf-hr-br-wh,
1685
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh));
1686
+ }
1687
+
1688
+ .txt {
1689
+ display: flex;
1690
+
1691
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-cr));
1692
+
1693
+ font-family: var(--_sf-hr-ft-fy,
1694
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy));
1695
+ text-transform: var(--_sf-hr-tt-tm,
1696
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-tm));
1697
+ word-wrap: var(--_sf-hr-wd-wp,
1698
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-wp));
1699
+ word-break: var(--_sf-hr-wd-bk,
1700
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-bk));
1701
+
1702
+ &.flex__overflow {
1703
+ white-space: normal;
1704
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1705
+ }
1706
+
1707
+ font-size: var(--_sf-hr-ft-se,
1708
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se));
1709
+
1710
+ font-weight: var(--_sf-hr-ft-wt,
1711
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt));
1712
+
1713
+ font-style: var(--_sf-hr-ft-se-ic,
1714
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic));
1715
+
1716
+ text-align: var(--_sf-hr-tt-an,
1717
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an));
1718
+
1719
+ letter-spacing: var(--_sf-hr-lr-sg,
1720
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg));
1721
+
1722
+ line-height: var(--_sf-hr-le-ht,
1723
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht));
1724
+
1725
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1726
+ }
1727
+
1728
+ .icon {
1729
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1730
+
1731
+ svg {
1732
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
1733
+ height: var(--_sf-hr-in-se,
1734
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
1735
+
1736
+ path {
1737
+ stroke: var(--_sf-hr-in-c1,
1738
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1));
1739
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
1740
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-se-wh, 1.25);
1741
+ }
1742
+ }
1743
+ }
1744
+
1745
+ [data-element-style="Text"] {
1746
+ display: inline-block;
1747
+ width: 100%;
1748
+ }
1749
+
1750
+ .icon--hover {
1751
+ // position: absolute;
1752
+ // inset: 0;
1753
+ // opacity: 0;
1754
+ display: none;
1755
+ transition: opacity 0.2s ease;
1756
+ }
1757
+
1758
+ &:hover .icon--hover {
1759
+ // opacity: 1;
1760
+ display: flex;
1761
+ }
1762
+
1763
+ &:hover .icon--default {
1764
+ // opacity: 0;
1765
+ display: none;
1766
+ }
1767
+ }
1768
+
1769
+ a {
1770
+ width: 100%;
1771
+ display: flex;
1772
+ align-items: center;
1773
+
1774
+ .bundle_navigation_button {
1775
+ display: flex;
1776
+ width: 100%;
1777
+ padding: 16px 24px;
1778
+ justify-content: center;
1779
+ align-items: center;
1780
+ gap: 12px;
1781
+ align-self: stretch;
1782
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
1783
+ text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
1784
+ word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
1785
+ word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
1786
+
1787
+ &.flex__overflow {
1788
+ white-space: normal;
1789
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1790
+ }
1791
+
1792
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
1793
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
1794
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
1795
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
1796
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
1797
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
1798
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
1799
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
1800
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
1801
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
1802
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
1803
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
1804
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
1805
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
1806
+
1807
+ .icon {
1808
+ svg {
1809
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
1810
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
1811
+
1812
+ path {
1813
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
1814
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
1815
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
1816
+ }
1817
+ }
1818
+ }
1819
+ }
1820
+ }
1821
+ }
1822
+
1823
+ .tiles-grid-view {
1824
+ display: flex;
1825
+ flex-wrap: wrap;
1826
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
1827
+ width: 100%;
1828
+ height: 100%;
1829
+
1830
+ .tiles-container {
1831
+ display: flex;
1832
+ flex-wrap: wrap;
1833
+ justify-content: center;
1834
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
1835
+ width: 100%;
1836
+ height: 100%;
1837
+
1838
+ .tile {
1839
+ // width: 350px !important;
1840
+ width: 100%;
1841
+ height: 100%;
1842
+ overflow: hidden;
1843
+ padding: 16px;
1844
+ display: flex;
1845
+ flex-direction: column;
1846
+ align-items: flex-start;
1847
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
1848
+ justify-content: space-between;
1849
+ background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
1850
+
1851
+ // Border only drawn when the tile card's "Show Border" toggle is on.
1852
+ &[data-show-border="true"] {
1853
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
1854
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
1855
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
1856
+ }
1857
+
1858
+ border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
1859
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae) prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br) prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd) prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);
1860
+
1861
+ .tile-content {
1862
+ display: flex;
1863
+ flex-direction: column;
1864
+ gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
1865
+ align-items: flex-start;
1866
+ height: 100%;
1867
+ width: 100%;
1868
+
1869
+ .tile_bundle_name {
1870
+ display: flex;
1871
+ align-items: flex-start;
1872
+ justify-content: flex-start;
1873
+ width: 100%;
1874
+ // overflow: hidden;
1875
+ // text-overflow: ellipsis;
1876
+ // white-space: nowrap;
1877
+ font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
1878
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1879
+ word-wrap: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-wp);
1880
+ word-break: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-bk);
1881
+
1882
+ &.flex__overflow {
1883
+ white-space: normal;
1884
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1885
+ }
1886
+
1887
+ font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
1888
+ color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
1889
+ font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
1890
+ font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
1891
+ text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
1892
+ text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
1893
+ letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
1894
+ line-height: prepareMediaVariable(--_ctm-dn-pt-ne-dn-le-ht);
1895
+ background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
1896
+ border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
1897
+ border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
1898
+ border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1899
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1900
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1901
+
1902
+ &#{$overflowSelector} {
1903
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1904
+ }
1905
+ }
1906
+
1907
+ // Category name + slider arrows of a category bundle. Tiles in the
1908
+ // same row whose bundle has no category render this row empty, so
1909
+ // every tile's image grid starts at the same height instead of
1910
+ // riding up under the bundle name.
1911
+ .tile_category_row {
1912
+ display: flex;
1913
+ align-items: center;
1914
+ justify-content: space-between;
1915
+ width: 100%;
1916
+
1917
+ // An empty name still has to occupy its line box.
1918
+ .tile_category_name:empty::before {
1919
+ content: "\00a0";
1920
+ }
1921
+
1922
+ // Rows next to a category slider also reserve the arrow button
1923
+ // box — same sizing NAVIGATION_STYLES gives those buttons.
1924
+ &[data-reserve-nav-height="true"] {
1925
+ min-height: calc(var(--_sf-icn-size,
1926
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se, 16px)}) * 1.75);
1927
+ }
1928
+ }
1929
+
1930
+ .brand-tile {
1931
+ display: flex;
1932
+ justify-content: center;
1933
+ align-items: center;
1934
+ height: -webkit-fill-available;
1935
+
1936
+ img {
1937
+ width: 100%;
1938
+ height: 100%;
1939
+ // object-fit: fill;
1940
+ }
1941
+ }
1942
+
1943
+ .product-tile {
1944
+ // `--_sf-tile-columns` / `--_sf-tile-rows` are set inline by
1945
+ // TilesGridView from the Tile Columns / Tile Rows layout
1946
+ // settings — the same numbers it uses to decide how many image
1947
+ // cells to mount, so the template never holds cells the
1948
+ // renderer did not fill. The 2x2 fallback covers elements
1949
+ // rendered before those settings existed.
1950
+ display: grid;
1951
+ flex: 1 1 auto;
1952
+ row-gap: prepareMediaVariable(--_ctm-lt-te-rw-gp);
1953
+ column-gap: prepareMediaVariable(--_ctm-lt-te-cn-gp);
1954
+ // padding: 10px;
1955
+ box-sizing: border-box;
1956
+ width: 100%;
1957
+ grid-template-columns: repeat(var(--_sf-tile-columns, 2), 1fr);
1958
+ grid-template-rows: repeat(var(--_sf-tile-rows, 2), 1fr);
1959
+
1960
+ // One image height per row.
1961
+ height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * var(--_sf-tile-rows, 2));
1962
+
1963
+ // A bundle with no products at all shows a single placeholder
1964
+ // image, which keeps the whole grid area to itself.
1965
+ &.images-0 .product-image-wrapper {
1966
+ grid-column: 1 / -1;
1967
+ grid-row: 1 / -1;
1968
+ }
1969
+
1970
+ &.animate-flip {
1971
+
1972
+ // Padding cells hold no image, so they sit the animation out.
1973
+ .product-image-wrapper:not(.empty-image-slot) {
1974
+ animation: flip 0.6s ease-in-out;
1975
+ }
1976
+
1977
+ @keyframes flip {
1978
+ 0% {
1979
+ transform: rotateY(0deg);
1980
+ }
1981
+
1982
+ 100% {
1983
+ transform: rotateY(180deg);
1984
+ }
1985
+ }
1986
+ }
1987
+
1988
+ .product-image-wrapper {
1989
+ width: 100%;
1990
+ height: 100%;
1991
+ overflow: hidden;
1992
+ display: flex;
1993
+ justify-content: center;
1994
+ align-items: center;
1995
+ background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
1996
+
1997
+ // Border only drawn when the tile card image's "Show Border" toggle is on.
1998
+ &[data-show-border="true"] {
1999
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2000
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2001
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2002
+ }
2003
+
2004
+ border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
2005
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae) prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br) prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd) prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);
2006
+
2007
+ img {
2008
+ // max-height: 135px;
2009
+ height: 100%;
2010
+ width: 100%;
2011
+ // object-fit: fill;
2012
+ }
2013
+ }
2014
+ }
2015
+ }
2016
+
2017
+ .bundle_navigation_button {
2018
+ width: 100%;
2019
+ display: flex;
2020
+ padding: 16px 24px;
2021
+ justify-content: center;
2022
+ align-items: center;
2023
+ gap: 12px;
2024
+ align-self: stretch;
2025
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2026
+ text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
2027
+ word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
2028
+ word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
2029
+
2030
+ &.flex__overflow {
2031
+ white-space: normal;
2032
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2033
+ }
2034
+
2035
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2036
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2037
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2038
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2039
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2040
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2041
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2042
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2043
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2044
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2045
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2046
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2047
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2048
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2049
+
2050
+ .icon {
2051
+ svg {
2052
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2053
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2054
+
2055
+ path {
2056
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2057
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
2058
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2059
+ }
2060
+ }
2061
+ }
2062
+ }
2063
+
2064
+ a {
2065
+ display: flex;
2066
+ align-items: center;
2067
+ width: 100%;
2068
+
2069
+ .bundle_navigation_button {
2070
+ width: 100%;
2071
+ display: flex;
2072
+ padding: 16px 24px;
2073
+ justify-content: center;
2074
+ align-items: center;
2075
+ gap: 12px;
2076
+ align-self: stretch;
2077
+ text-transform: uppercase;
2078
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2079
+ word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
2080
+ word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
2081
+
2082
+ &.flex__overflow {
2083
+ white-space: normal;
2084
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2085
+ }
2086
+
2087
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2088
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2089
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2090
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2091
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2092
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2093
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2094
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2095
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2096
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2097
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2098
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2099
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2100
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2101
+
2102
+ .icon {
2103
+ svg {
2104
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2105
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2106
+
2107
+ path {
2108
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2109
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
2110
+ stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
2111
+ }
2112
+ }
2113
+ }
2114
+ }
2115
+ }
2116
+ }
2117
+ }
2118
+ }
2119
+
2120
+ .embla__container {
2121
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
2122
+ }
2123
+ }
2124
+
2125
+ .arrow-navigation-categories {
2126
+ display: flex;
2127
+ flex-direction: row;
2128
+ align-items: center;
2129
+ justify-content: space-between;
2130
+ gap: 4px;
2131
+
2132
+ &>button {
2133
+ // display: var(--_d-flex);
2134
+ // align-items: center;
2135
+ // justify-content: center;
2136
+
2137
+ @include NAVIGATION_STYLES();
2138
+ }
2139
+ }
2140
+ }
2141
+ }
2142
+ }