@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

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