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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (211) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +141 -210
  3. package/dist/add-products-tab-details.scss +1121 -1920
  4. package/dist/add-products-tab-uom-details.scss +105 -0
  5. package/dist/add-products-tab.scss +682 -994
  6. package/dist/allocation-header-quota-details.scss +198 -327
  7. package/dist/allocationDetails.scss +1645 -2022
  8. package/dist/allocations-quota-details.scss +168 -261
  9. package/dist/allocations.scss +504 -715
  10. package/dist/amount-estimator.scss +414 -648
  11. package/dist/animation-control.scss +23 -23
  12. package/dist/badge.scss +55 -18
  13. package/dist/brand-basic-elements.scss +93 -124
  14. package/dist/brand.scss +28 -55
  15. package/dist/breadcrumbs.scss +372 -718
  16. package/dist/builder.js +1 -1
  17. package/dist/bulk-variant-picker.scss +1161 -1816
  18. package/dist/bundle copy.scss +235 -0
  19. package/dist/bundle.scss +2142 -2584
  20. package/dist/bundleDetails.scss +3808 -4802
  21. package/dist/button copy.scss +28 -0
  22. package/dist/button.scss +89 -102
  23. package/dist/buy-for-tab-container.scss +77 -106
  24. package/dist/buy-for-tab.scss +54 -0
  25. package/dist/buy-for-tabs-container-item.scss +80 -80
  26. package/dist/buyForHeaders.scss +1823 -2457
  27. package/dist/cart-details.scss +514 -718
  28. package/dist/cart-products-sidebar.scss +211 -211
  29. package/dist/cart-summary.scss +611 -1015
  30. package/dist/cart-wrapper.scss +85 -127
  31. package/dist/cart.scss +119 -211
  32. package/dist/cartAttributes.scss +377 -539
  33. package/dist/cartDropdownOverlay.scss +21 -0
  34. package/dist/cartGrouping.scss +89 -89
  35. package/dist/category-groups-element.scss +130 -96
  36. package/dist/category-groups-product-grid.scss +40 -79
  37. package/dist/category-groups-product-image.scss +457 -1306
  38. package/dist/category-groups-product-options.scss +224 -606
  39. package/dist/category-groups-product-price.scss +1366 -4199
  40. package/dist/category-groups-quota-details.scss +217 -382
  41. package/dist/category.scss +26 -50
  42. package/dist/categoryDetails.scss +61 -61
  43. package/dist/categoryWidget.scss +34 -34
  44. package/dist/checkbox-radio.scss +124 -124
  45. package/dist/checkout.scss +1915 -3309
  46. package/dist/common-element.scss +35 -35
  47. package/dist/confirm-modal.scss +22 -2
  48. package/dist/confirmationModal.scss +139 -139
  49. package/dist/container.scss +32 -54
  50. package/dist/countdown.scss +264 -371
  51. package/dist/coupon.scss +379 -600
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/default-dropdown.scss +12 -1
  54. package/dist/embroider-preview-element.scss +94 -94
  55. package/dist/embroider-template-1-v2.scss +157 -172
  56. package/dist/embroider-template-1.scss +465 -482
  57. package/dist/embroidery.scss +37 -31
  58. package/dist/employee-bulk-order.scss +418 -142
  59. package/dist/emtpy-templates.scss +165 -165
  60. package/dist/faq.scss +239 -395
  61. package/dist/filter-results.scss +221 -323
  62. package/dist/filters.scss +843 -1406
  63. package/dist/flex-text-editor.scss +271 -271
  64. package/dist/functions.scss +36 -0
  65. package/dist/gallery-slider-temp.scss +428 -727
  66. package/dist/global-styles.scss +45 -6
  67. package/dist/grid.scss +25 -33
  68. package/dist/hotspot.scss +75 -115
  69. package/dist/icon-list.scss +33 -59
  70. package/dist/image-for-product.scss +21 -21
  71. package/dist/image-temp.scss +21 -20
  72. package/dist/item-stock.scss +15 -16
  73. package/dist/kitDetails.scss +2786 -4008
  74. package/dist/kits.scss +28 -19
  75. package/dist/language-selector.scss +241 -375
  76. package/dist/last-x-orders.scss +101 -163
  77. package/dist/layouter-item.scss +75 -103
  78. package/dist/layouter-pro-item.scss +89 -95
  79. package/dist/layouter-pro.scss +87 -92
  80. package/dist/layouter.scss +67 -117
  81. package/dist/light-box-v2.scss +89 -104
  82. package/dist/lightbox.scss +78 -78
  83. package/dist/line.scss +29 -70
  84. package/dist/loader.scss +37 -37
  85. package/dist/login.scss +316 -489
  86. package/dist/map.scss +233 -336
  87. package/dist/marchandiserSets.scss +95 -104
  88. package/dist/mega-menu-container.scss +96 -109
  89. package/dist/mega-menu.scss +627 -670
  90. package/dist/menu-item.scss +19 -19
  91. package/dist/menu-v2.scss +538 -528
  92. package/dist/menu.scss +12 -0
  93. package/dist/multi-select-dropdown.scss +27 -3
  94. package/dist/my-templates.scss +41 -9
  95. package/dist/myTemplates.scss +3 -0
  96. package/dist/option-bar.scss +229 -351
  97. package/dist/order-processing.scss +61 -61
  98. package/dist/order-status.scss +666 -1096
  99. package/dist/overflow-module.scss +62 -63
  100. package/dist/past-orders.scss +168 -149
  101. package/dist/payment-methods.scss +323 -289
  102. package/dist/pickup-locations.scss +568 -941
  103. package/dist/position-module.scss +98 -95
  104. package/dist/prefix-list.scss +97 -86
  105. package/dist/product-actions.scss +1262 -1620
  106. package/dist/product-basic-elements.scss +116 -169
  107. package/dist/product-customizations.scss +155 -149
  108. package/dist/product-highlights.scss +116 -145
  109. package/dist/product-image-allocation.scss +38 -0
  110. package/dist/product-image-bundles.scss +359 -638
  111. package/dist/product-image.scss +341 -676
  112. package/dist/product-inventory.scss +673 -1117
  113. package/dist/product-labels.scss +94 -101
  114. package/dist/product-options.scss +298 -438
  115. package/dist/product-price.scss +1325 -2182
  116. package/dist/product-promotions.scss +1388 -2374
  117. package/dist/product-sizechart.scss +523 -821
  118. package/dist/product.scss +28 -61
  119. package/dist/productDetails.scss +19 -38
  120. package/dist/profile.scss +242 -406
  121. package/dist/quantity-selector.scss +327 -502
  122. package/dist/quick-inventory-check.scss +101 -163
  123. package/dist/quick-links.scss +72 -133
  124. package/dist/quick-order-pad.scss +224 -206
  125. package/dist/quota-details.scss +163 -297
  126. package/dist/quotes.scss +727 -737
  127. package/dist/repeater copy.scss +24 -0
  128. package/dist/repeater-embla-controls.scss +34 -14
  129. package/dist/repeater-grid-toggle.scss +156 -166
  130. package/dist/repeater-item.scss +41 -64
  131. package/dist/repeater.scss +579 -669
  132. package/dist/request-for-quotes.scss +66 -16
  133. package/dist/responsive-behaviour.scss +31 -29
  134. package/dist/rfqs.scss +147 -181
  135. package/dist/scroll.scss +93 -167
  136. package/dist/search-results-heading.scss +36 -0
  137. package/dist/search.scss +186 -290
  138. package/dist/section.scss +27 -51
  139. package/dist/shareCartSideBar.scss +254 -254
  140. package/dist/shipping-estimator.scss +41 -41
  141. package/dist/shipping-payments.scss +246 -58
  142. package/dist/simple-list.scss +65 -123
  143. package/dist/social.scss +78 -131
  144. package/dist/sort.scss +89 -89
  145. package/dist/spotlight.scss +48 -0
  146. package/dist/stack.scss +23 -34
  147. package/dist/static-global.scss +44 -26
  148. package/dist/static-text.scss +52 -52
  149. package/dist/stockStatus.scss +14 -19
  150. package/dist/store-locations.scss +595 -933
  151. package/dist/sub-category.scss +74 -74
  152. package/dist/submit-quote.scss +275 -275
  153. package/dist/tab-container-item.scss +80 -80
  154. package/dist/tab-container.scss +81 -108
  155. package/dist/tab-v2.scss +277 -580
  156. package/dist/table-common.scss +218 -331
  157. package/dist/table.scss +273 -434
  158. package/dist/tabs.scss +440 -395
  159. package/dist/text-temp-v2.scss +12 -23
  160. package/dist/text-temp.scss +110 -109
  161. package/dist/theme-classes.scss +66 -13
  162. package/dist/toaster.scss +392 -350
  163. package/dist/toggle-button.scss +32 -32
  164. package/dist/transform-properties-module.scss +20 -20
  165. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  166. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  167. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  168. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  169. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  170. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  171. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  172. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  173. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  174. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  175. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  176. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  177. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  179. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  180. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  181. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  182. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  183. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  184. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  185. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  186. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  187. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  189. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  190. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  191. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  192. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  193. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  194. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  195. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  196. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  197. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  198. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  199. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  200. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  201. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  202. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  203. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  204. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  205. package/dist/uom-selector.scss +499 -841
  206. package/dist/user-elements.scss +653 -774
  207. package/dist/variant-picker.scss +1298 -2358
  208. package/dist/video.scss +147 -325
  209. package/dist/volume-pricing.scss +545 -849
  210. package/dist/wishlist-overlay.scss +48 -48
  211. package/package.json +131 -131
@@ -20,19 +20,8 @@ $imagePositions: (
20
20
  "west": left center,
21
21
  );
22
22
 
23
- // Every divider in this widget is an absolutely positioned pseudo-element, so it takes
24
- // no space of its own and a thick one used to grow back over the text beside it.
25
- // Pairing this offset with `dividerGapReserve` on the item itself keeps the whole
26
- // divider inside the gap at any weight, with half the item spacing clear either side.
27
- @function dividerGapOffset($spacing-var, $weight-var) {
28
- @return calc(
29
- -1 * (#{prepareMediaVariable($spacing-var)} / 2) - #{prepareMediaVariable($weight-var)}
30
- );
31
- }
32
-
33
- @mixin dividerGapReserve($weight-var, $side: bottom) {
34
- margin-#{$side}: prepareMediaVariable($weight-var);
35
- }
23
+ // `dividerGapOffset` / `dividerGapReserve` moved to functions.scss — every widget draws
24
+ // its dividers as absolutely positioned pseudo-elements and hit the same overlap.
36
25
 
37
26
  [data-div-type="element"] {
38
27
  &[data-element-type="userElements"] {
@@ -52,24 +41,16 @@ $imagePositions: (
52
41
  // )
53
42
  // )
54
43
  // );
55
- width: var(
56
- --_sf-el-wh-st-mx,
57
- calc(
58
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
59
- )
60
- );
44
+ width: var(--_sf-el-wh-st-mx,
45
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
61
46
 
62
47
  height: auto;
63
48
 
64
- margin: var(
65
- --_ctm-mob-bun-lt-mn,
66
- var(
67
- --_ctm-tab-bun-lt-mn,
68
- var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
69
- )
70
- );
49
+ margin: var(--_ctm-mob-bun-lt-mn,
50
+ var(--_ctm-tab-bun-lt-mn,
51
+ var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))));
71
52
 
72
- & > div {
53
+ &>div {
73
54
  &.wrapper {
74
55
  width: 100%;
75
56
  }
@@ -113,39 +94,18 @@ $imagePositions: (
113
94
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
114
95
 
115
96
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
116
- height: calc(
117
- 100% - calc(
118
- var(
119
- --_ctm-mob-dn-pn-as-aw-se,
120
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
121
- ) +
122
- 10px
123
- )
124
- );
97
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
98
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px));
125
99
  }
126
100
 
127
101
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
128
- height: calc(
129
- 100% - calc(
130
- var(
131
- --_ctm-mob-dn-pn-le-le-ht,
132
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
133
- ) +
134
- 20px
135
- )
136
- );
102
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
103
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
137
104
  }
138
105
 
139
106
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
140
- height: calc(
141
- 100% - calc(
142
- var(
143
- --_ctm-mob-dn-pn-ds-dt-se,
144
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
145
- ) +
146
- 20px
147
- )
148
- );
107
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
108
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
149
109
  }
150
110
 
151
111
  .embla__slide {
@@ -156,11 +116,10 @@ $imagePositions: (
156
116
  }
157
117
  }
158
118
  }
119
+
159
120
  &:not([data-display-style="Column"]) {
160
121
  .embla__container {
161
- grid-auto-columns: calc(
162
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
163
- );
122
+ grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
164
123
  }
165
124
  }
166
125
 
@@ -172,20 +131,25 @@ $imagePositions: (
172
131
  width: 100%;
173
132
  justify-content: space-between;
174
133
  transform: translate(-50%, -50%);
134
+
175
135
  // padding-left: 20px;
176
136
  &[data-control-type="Side"] {
137
+
177
138
  .left-button,
178
139
  .right-button {
179
140
  background-color: transparent;
180
141
  }
181
142
  }
143
+
182
144
  &[data-background-shape="Round"] {
145
+
183
146
  .left-button,
184
147
  .right-button {
185
148
  background-color: #f2f5f5;
186
149
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
187
150
  }
188
151
  }
152
+
189
153
  &[data-control-type="Bottom-Overflow"] {
190
154
  transform: translateX(-50%);
191
155
  width: 100%;
@@ -194,6 +158,7 @@ $imagePositions: (
194
158
  top: unset;
195
159
  bottom: 6px;
196
160
  }
161
+
197
162
  &[data-control-type="Bottom"] {
198
163
  transform: unset;
199
164
  position: static;
@@ -202,18 +167,15 @@ $imagePositions: (
202
167
  gap: 12px;
203
168
  margin-top: 10px;
204
169
  }
170
+
205
171
  .left-button {
206
172
  padding: 10px;
207
173
  border-radius: 50%;
208
174
  border: none;
209
- width: var(
210
- --_ctm-mob-dn-pn-as-aw-se,
211
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
212
- );
213
- height: var(
214
- --_ctm-mob-dn-pn-as-aw-se,
215
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
216
- );
175
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
176
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
177
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
178
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
217
179
 
218
180
  display: flex;
219
181
  align-items: center;
@@ -221,6 +183,7 @@ $imagePositions: (
221
183
  cursor: pointer;
222
184
  outline: none;
223
185
  margin-left: 12px;
186
+
224
187
  &:disabled {
225
188
  & svg {
226
189
  path {
@@ -229,17 +192,14 @@ $imagePositions: (
229
192
  }
230
193
  }
231
194
  }
195
+
232
196
  .right-button {
233
197
  border-radius: 50%;
234
198
  border: none;
235
- width: var(
236
- --_ctm-mob-dn-pn-as-aw-se,
237
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
238
- );
239
- height: var(
240
- --_ctm-mob-dn-pn-as-aw-se,
241
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
242
- );
199
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
200
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
201
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
202
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
243
203
 
244
204
  display: flex;
245
205
  align-items: center;
@@ -257,30 +217,19 @@ $imagePositions: (
257
217
  }
258
218
  }
259
219
  }
220
+
260
221
  .icon {
261
222
  display: flex;
262
223
 
263
224
  svg {
264
- width: calc(
265
- var(
266
- --_ctm-mob-dn-pn-as-aw-se,
267
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
268
- ) *
269
- 0.5
270
- );
271
- height: calc(
272
- var(
273
- --_ctm-mob-dn-pn-as-aw-se,
274
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
275
- ) *
276
- 0.5
277
- );
225
+ width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
226
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
227
+ height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
228
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
278
229
 
279
230
  path {
280
- stroke: var(
281
- --_ctm-mob-dn-pn-as-aw-cr,
282
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
283
- );
231
+ stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
232
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
284
233
  }
285
234
  }
286
235
  }
@@ -291,12 +240,14 @@ $imagePositions: (
291
240
  width: calc(100% - 60px);
292
241
  margin-inline: auto;
293
242
  }
243
+
294
244
  .left-button {
295
245
  position: absolute;
296
246
  left: 0;
297
247
  top: 50%;
298
248
  transform: translateY(-50%);
299
249
  }
250
+
300
251
  .right-button {
301
252
  position: absolute;
302
253
 
@@ -304,6 +255,7 @@ $imagePositions: (
304
255
  top: 50%;
305
256
  transform: translateY(-50%);
306
257
  }
258
+
307
259
  @media (max-width: 1024px) {
308
260
  .embla__viewport {
309
261
  width: calc(100% - 40px);
@@ -314,9 +266,11 @@ $imagePositions: (
314
266
  &[data-thumbnail-placement="top"] {
315
267
  flex-direction: column-reverse;
316
268
  }
269
+
317
270
  &[data-thumbnail-placement="bottom"] {
318
271
  flex-direction: column;
319
272
  }
273
+
320
274
  &[data-thumbnail-placement="left"] {
321
275
  flex-direction: row-reverse;
322
276
 
@@ -330,8 +284,10 @@ $imagePositions: (
330
284
  }
331
285
  }
332
286
  }
287
+
333
288
  &[data-thumbnail-placement="right"] {
334
289
  flex-direction: row;
290
+
335
291
  .embla__thumbs {
336
292
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
337
293
 
@@ -343,6 +299,7 @@ $imagePositions: (
343
299
  }
344
300
  }
345
301
  }
302
+
346
303
  .embla__dots {
347
304
  display: flex;
348
305
  flex-wrap: wrap;
@@ -359,14 +316,13 @@ $imagePositions: (
359
316
  transform: translateX(-50%);
360
317
  width: 75%;
361
318
  }
319
+
362
320
  .embla__dot {
363
321
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
364
322
  -webkit-appearance: none;
365
323
  appearance: none;
366
- background-color: var(
367
- --_ctm-mob-dn-pn-ds-or-dt-cr,
368
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
369
- );
324
+ background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
325
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)));
370
326
 
371
327
  touch-action: manipulation;
372
328
  display: inline-flex;
@@ -377,75 +333,56 @@ $imagePositions: (
377
333
  margin: 0;
378
334
  // width: 0.6rem;
379
335
  // height: 0.6rem;
380
- width: var(
381
- --_ctm-mob-dn-pn-ds-dt-se,
382
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
383
- );
384
- height: var(
385
- --_ctm-mob-dn-pn-ds-dt-se,
386
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
387
- );
336
+ width: var(--_ctm-mob-dn-pn-ds-dt-se,
337
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
338
+ height: var(--_ctm-mob-dn-pn-ds-dt-se,
339
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
388
340
 
389
341
  display: flex;
390
342
  align-items: center;
391
343
  justify-content: center;
392
344
  border-radius: 50%;
393
345
  }
346
+
394
347
  .embla__dot:after {
395
348
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
396
- width: var(
397
- --_ctm-mob-dn-pn-ds-dt-se,
398
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
399
- );
400
- height: var(
401
- --_ctm-mob-dn-pn-ds-dt-se,
402
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
403
- );
349
+ width: var(--_ctm-mob-dn-pn-ds-dt-se,
350
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
351
+ height: var(--_ctm-mob-dn-pn-ds-dt-se,
352
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
404
353
 
405
354
  border-radius: 50%;
406
355
  display: flex;
407
356
  align-items: center;
408
357
  content: "";
409
358
  }
359
+
410
360
  .embla__dot--selected:after {
411
361
  box-shadow: inset 0 0 0 1px var(--text-body);
412
- background-color: var(
413
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
414
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
415
- );
362
+ background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
363
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
416
364
  }
365
+
417
366
  &[data-slider-control="Pagination Line"] {
418
367
  .embla__dot {
419
- width: var(
420
- --_ctm-mob-dn-pn-le-le-wh,
421
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
422
- );
423
- height: var(
424
- --_ctm-mob-dn-pn-le-le-ht,
425
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
426
- );
427
- background-color: var(
428
- --_ctm-mob-dn-pn-le-or-le-cr,
429
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
430
- );
368
+ width: var(--_ctm-mob-dn-pn-le-le-wh,
369
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
370
+ height: var(--_ctm-mob-dn-pn-le-le-ht,
371
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
372
+ background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
373
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
431
374
  border-radius: 6px;
432
375
  }
433
376
 
434
377
  .embla__dot--selected:after {
435
378
  box-shadow: inset 0 0 0 1px var(--text-body);
436
379
  border-radius: 6px;
437
- width: var(
438
- --_ctm-mob-dn-pn-le-le-wh,
439
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
440
- );
441
- height: var(
442
- --_ctm-mob-dn-pn-le-le-ht,
443
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
444
- );
445
- background-color: var(
446
- --_ctm-mob-dn-pn-le-ct-le-cr,
447
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
448
- );
380
+ width: var(--_ctm-mob-dn-pn-le-le-wh,
381
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
382
+ height: var(--_ctm-mob-dn-pn-le-le-ht,
383
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
384
+ background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
385
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
449
386
  }
450
387
  }
451
388
  }
@@ -470,6 +407,7 @@ $imagePositions: (
470
407
 
471
408
  overflow: hidden;
472
409
  }
410
+
473
411
  .embla__thumbs__container {
474
412
  display: flex;
475
413
  flex-direction: row;
@@ -493,46 +431,33 @@ $imagePositions: (
493
431
  }
494
432
  }
495
433
  }
434
+
496
435
  .user__element__container {
497
436
  display: flex;
498
437
  flex-direction: column;
499
438
 
500
439
  width: 100%;
501
440
  gap: prepareMediaVariable(--_ctm-lt-im-sg);
502
- background-color: var(
503
- --_ctm-mob-dn-wt-se-bd-cr,
504
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
505
- );
506
-
507
- border-color: var(
508
- --_ctm-mob-dn-wt-se-br-cr,
509
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
510
- );
511
-
512
- border-style: var(
513
- --_ctm-mob-dn-wt-se-br-se,
514
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
515
- );
516
-
517
- border-width: var(
518
- --_ctm-mob-dn-wt-se-br-wh,
519
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
520
- );
521
-
522
- border-radius: var(
523
- --_ctm-mob-dn-wt-se-br-rs,
524
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
525
- );
526
-
527
- box-shadow: var(
528
- --_show-shadow,
529
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
530
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
531
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
532
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
533
- );
441
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
442
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
443
+
444
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
445
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
446
+
447
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
448
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
449
+
450
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
451
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
452
+
453
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
454
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
455
+
456
+ box-shadow: var(--_show-shadow,
457
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
534
458
 
535
459
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
460
+
536
461
  .user__element__item {
537
462
  position: relative;
538
463
  }
@@ -607,6 +532,7 @@ $imagePositions: (
607
532
  justify-content: space-between;
608
533
  align-items: center;
609
534
  flex-wrap: wrap;
535
+
610
536
  .user_elements_user_name_wrapper {
611
537
  width: unset;
612
538
  align-items: center;
@@ -618,6 +544,7 @@ $imagePositions: (
618
544
  width: unset;
619
545
  flex-wrap: wrap;
620
546
  }
547
+
621
548
  @media (max-width: 767px) {
622
549
  .user_elements_user_data_wrapper {
623
550
  flex-direction: column;
@@ -625,17 +552,21 @@ $imagePositions: (
625
552
  }
626
553
  }
627
554
  }
555
+
628
556
  .user_elements_quota_wrapper {
629
557
  flex-direction: row;
630
558
  align-items: center;
631
559
  flex-wrap: nowrap;
560
+
632
561
  .quota_label_wrapper {
633
562
  flex-shrink: 0;
634
563
  }
564
+
635
565
  .user_elements_user_name_wrapper {
636
566
  flex-direction: row;
637
567
  white-space: nowrap;
638
568
  }
569
+
639
570
  .quote_vertical_scroll_wrapper {
640
571
  flex-direction: row;
641
572
  flex-grow: 1;
@@ -648,6 +579,7 @@ $imagePositions: (
648
579
  width: 100%;
649
580
  }
650
581
  }
582
+
651
583
  // This row divider was drawn unconditionally, so the section's Divider
652
584
  // toggle had nothing to switch off in the maximized layout.
653
585
  &[data-show-divider="true"] {
@@ -665,24 +597,30 @@ $imagePositions: (
665
597
  width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
666
598
  }
667
599
  }
600
+
668
601
  .quota_label {
669
602
  white-space: nowrap;
670
603
  }
604
+
671
605
  .quote_info_wrapper {
672
606
  justify-content: flex-start;
673
607
  align-items: center;
674
608
  }
609
+
675
610
  .embla__container {
676
611
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
677
612
  }
678
613
  }
614
+
679
615
  .user_elements_allowance_wrapper {
680
616
  flex-direction: row;
681
617
  flex-wrap: nowrap;
682
618
  align-items: center;
619
+
683
620
  .allowance_label_wrapper {
684
621
  flex-shrink: 0;
685
622
  }
623
+
686
624
  // Same: gated on the section's own Divider toggle.
687
625
  &[data-show-divider="true"] {
688
626
  .embla__slide:not(:last-child) {
@@ -702,28 +640,34 @@ $imagePositions: (
702
640
  left: unset;
703
641
  }
704
642
  }
643
+
705
644
  .allowance_vertical_scroll_wrapper {
706
645
  width: unset;
707
646
  flex-grow: 1;
708
647
  min-width: 0;
709
648
  }
649
+
710
650
  @media (max-width: 1024px) {
711
651
  .allowance_vertical_scroll_wrapper {
712
652
  width: 100%;
713
653
  }
714
654
  }
655
+
715
656
  .embla__container {
716
657
  gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
717
658
  }
718
659
  }
660
+
719
661
  .user_elements_user_info_secondary_wrapper {
720
662
  flex-direction: row;
721
663
  justify-content: space-between;
722
664
  align-items: center;
665
+
723
666
  .order_wrapper {
724
667
  justify-content: flex-start;
725
668
  }
726
669
  }
670
+
727
671
  .secondary_vertical_scroll_wrapper {
728
672
  flex-direction: row;
729
673
  width: unset;
@@ -731,9 +675,11 @@ $imagePositions: (
731
675
  align-items: center;
732
676
  width: 100%;
733
677
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
678
+
734
679
  @media (max-width: 768px) {
735
680
  flex-wrap: wrap;
736
681
  }
682
+
737
683
  .child {
738
684
  flex-direction: column;
739
685
  justify-content: flex-start;
@@ -741,15 +687,18 @@ $imagePositions: (
741
687
  height: 44px;
742
688
  }
743
689
  }
690
+
744
691
  @media (max-width: 1024px) {
745
692
  .user_elements_user_info_wrapper {
746
693
  flex-direction: column;
747
694
  align-items: flex-start;
748
695
  }
696
+
749
697
  .user_elements_quota_wrapper {
750
698
  flex-direction: column;
751
699
  align-items: flex-start;
752
700
  }
701
+
753
702
  .user_elements_allowance_wrapper {
754
703
  flex-direction: column;
755
704
  align-items: flex-start;
@@ -762,20 +711,24 @@ $imagePositions: (
762
711
  display: flex;
763
712
  gap: 48px;
764
713
  margin-left: 32px;
714
+
765
715
  .quota__dtls {
766
716
  display: flex;
767
717
  align-items: center;
768
718
  gap: 8px;
719
+
769
720
  .quota__name {
770
721
  display: flex;
771
722
  flex-direction: column;
772
723
  // align-items: center;
773
724
  gap: 12px;
774
725
  }
726
+
775
727
  .quota__balance {
776
728
  display: flex;
777
729
  gap: 5px;
778
730
  }
731
+
779
732
  .back_slash {
780
733
  color: var(--_gray-300);
781
734
  position: relative;
@@ -783,12 +736,15 @@ $imagePositions: (
783
736
  }
784
737
  }
785
738
  }
739
+
786
740
  &[data-display-type="Horizontal"] {
787
741
  flex-direction: row;
742
+
788
743
  .user__element__item {
789
744
  width: 100%;
790
745
  flex-grow: 1;
791
746
  }
747
+
792
748
  .user__element__item {
793
749
  min-width: 200px;
794
750
  }
@@ -822,8 +778,7 @@ $imagePositions: (
822
778
  border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
823
779
  border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
824
780
  border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
825
- box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
826
- var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
781
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
827
782
  gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
828
783
 
829
784
  padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg);
@@ -834,16 +789,27 @@ $imagePositions: (
834
789
  // Keeps the avatar and the trailing icon on the name's centre line instead of
835
790
  // stretching them to the row height.
836
791
  align-items: center;
792
+
837
793
  &[data-has-link="true"] {
838
794
  cursor: pointer;
795
+
839
796
  &:hover {
840
797
  color: var(--_primary-500);
841
798
  }
842
799
  }
800
+
843
801
  .user_elements_user_name {
844
802
  display: flex;
845
803
  color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
846
804
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
805
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-wp);
806
+ word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-bk);
807
+
808
+ &.flex__overflow {
809
+ white-space: normal;
810
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
811
+ }
812
+
847
813
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
848
814
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
849
815
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
@@ -868,10 +834,8 @@ $imagePositions: (
868
834
  border-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-se);
869
835
  border-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-wh);
870
836
  border-radius: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-rs);
871
- box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae)
872
- prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br)
873
- prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd)
874
- prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr);
837
+ box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd) prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr);
838
+
875
839
  // Which part of the picture survives the crop to the configured box. The
876
840
  // control stores the image element's compass values, so they are mapped to
877
841
  // their CSS equivalents here.
@@ -898,9 +862,11 @@ $imagePositions: (
898
862
 
899
863
  .icon {
900
864
  cursor: pointer;
865
+
901
866
  svg {
902
867
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
903
868
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
869
+
904
870
  path {
905
871
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
906
872
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -928,6 +894,14 @@ $imagePositions: (
928
894
  align-items: center;
929
895
  color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-cr);
930
896
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
897
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-wp);
898
+ word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-bk);
899
+
900
+ &.flex__overflow {
901
+ white-space: normal;
902
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
903
+ }
904
+
931
905
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
932
906
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
933
907
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
@@ -939,9 +913,11 @@ $imagePositions: (
939
913
 
940
914
  .icon {
941
915
  cursor: pointer;
916
+
942
917
  svg {
943
918
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
944
919
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
920
+
945
921
  path {
946
922
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
947
923
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -958,6 +934,14 @@ $imagePositions: (
958
934
  align-items: center;
959
935
  color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-cr);
960
936
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
937
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-wp);
938
+ word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-bk);
939
+
940
+ &.flex__overflow {
941
+ white-space: normal;
942
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
943
+ }
944
+
961
945
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
962
946
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
963
947
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
@@ -969,9 +953,11 @@ $imagePositions: (
969
953
 
970
954
  .icon {
971
955
  cursor: pointer;
956
+
972
957
  svg {
973
958
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
974
959
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
960
+
975
961
  path {
976
962
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
977
963
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -988,6 +974,14 @@ $imagePositions: (
988
974
  align-items: center;
989
975
  color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-cr);
990
976
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
977
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-wp);
978
+ word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-bk);
979
+
980
+ &.flex__overflow {
981
+ white-space: normal;
982
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
983
+ }
984
+
991
985
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
992
986
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
993
987
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
@@ -999,9 +993,11 @@ $imagePositions: (
999
993
 
1000
994
  .icon {
1001
995
  cursor: pointer;
996
+
1002
997
  svg {
1003
998
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
1004
999
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
1000
+
1005
1001
  path {
1006
1002
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
1007
1003
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -1012,9 +1008,11 @@ $imagePositions: (
1012
1008
  }
1013
1009
  }
1014
1010
  }
1011
+
1015
1012
  .child {
1016
1013
  position: relative;
1017
1014
  }
1015
+
1018
1016
  &[data-show-divider="true"] {
1019
1017
  .child:not(:last-child)::after {
1020
1018
  content: "";
@@ -1040,6 +1038,7 @@ $imagePositions: (
1040
1038
  margin-block: 0;
1041
1039
  border-radius: 0;
1042
1040
  }
1041
+
1043
1042
  // .user_elements_user_name_wrapper {
1044
1043
  // width: 100%;
1045
1044
  // position: relative;
@@ -1082,9 +1081,9 @@ $imagePositions: (
1082
1081
  border-radius: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
1083
1082
  border-style: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
1084
1083
  border-width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
1085
- box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
1086
- var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
1084
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
1087
1085
  gap: prepareMediaVariable(--_ctm-lt-qa-dn-sg);
1086
+
1088
1087
  .quota_label_wrapper {
1089
1088
  display: flex;
1090
1089
  flex-direction: column;
@@ -1096,6 +1095,15 @@ $imagePositions: (
1096
1095
 
1097
1096
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-cr);
1098
1097
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy);
1098
+ text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-tm);
1099
+ word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-wp);
1100
+ word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-bk);
1101
+
1102
+ &.flex__overflow {
1103
+ white-space: normal;
1104
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1105
+ }
1106
+
1099
1107
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
1100
1108
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
1101
1109
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
@@ -1104,12 +1112,22 @@ $imagePositions: (
1104
1112
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
1105
1113
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ue);
1106
1114
  }
1115
+
1107
1116
  .quota_single_profile_name {
1108
1117
  display: flex;
1109
1118
  align-items: center;
1110
1119
 
1111
1120
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-cr);
1112
1121
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
1122
+ text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm);
1123
+ word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp);
1124
+ word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-bk);
1125
+
1126
+ &.flex__overflow {
1127
+ white-space: normal;
1128
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1129
+ }
1130
+
1113
1131
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
1114
1132
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
1115
1133
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
@@ -1121,6 +1139,7 @@ $imagePositions: (
1121
1139
  }
1122
1140
 
1123
1141
  .quote_item_wrapper {
1142
+
1124
1143
  // Set only on the storefront, where clicking a quota row selects that
1125
1144
  // allocation and its profile. Builder/preview rows are dummy data.
1126
1145
  &[data-is-clickable="true"] {
@@ -1135,6 +1154,7 @@ $imagePositions: (
1135
1154
  display: flex;
1136
1155
  gap: 12px;
1137
1156
  justify-content: space-between;
1157
+
1138
1158
  .quota_name_wrapper {
1139
1159
  display: flex;
1140
1160
  flex-direction: column;
@@ -1145,6 +1165,15 @@ $imagePositions: (
1145
1165
 
1146
1166
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-cr);
1147
1167
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
1168
+ text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm);
1169
+ word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp);
1170
+ word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-bk);
1171
+
1172
+ &.flex__overflow {
1173
+ white-space: normal;
1174
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1175
+ }
1176
+
1148
1177
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
1149
1178
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
1150
1179
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
@@ -1159,6 +1188,15 @@ $imagePositions: (
1159
1188
 
1160
1189
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-cr);
1161
1190
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy);
1191
+ text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-tt-tm);
1192
+ word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-wd-wp);
1193
+ word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-wd-bk);
1194
+
1195
+ &.flex__overflow {
1196
+ white-space: normal;
1197
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1198
+ }
1199
+
1162
1200
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
1163
1201
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
1164
1202
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
@@ -1172,9 +1210,13 @@ $imagePositions: (
1172
1210
  .quota_inventory_parent {
1173
1211
  display: flex;
1174
1212
  }
1213
+
1175
1214
  .hilighted {
1176
1215
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-cr);
1177
1216
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-fy);
1217
+ text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-tt-tm);
1218
+ word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-wd-wp);
1219
+ word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-wd-bk);
1178
1220
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-se);
1179
1221
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-se-ic);
1180
1222
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-wt);
@@ -1183,6 +1225,7 @@ $imagePositions: (
1183
1225
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-tt-an);
1184
1226
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ue);
1185
1227
  }
1228
+
1186
1229
  .quota_inventory {
1187
1230
  display: flex;
1188
1231
  justify-content: center;
@@ -1190,6 +1233,15 @@ $imagePositions: (
1190
1233
  margin-top: 6px;
1191
1234
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-cr);
1192
1235
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-fy);
1236
+ text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-tt-tm);
1237
+ word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-wd-wp);
1238
+ word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-wd-bk);
1239
+
1240
+ &.flex__overflow {
1241
+ white-space: normal;
1242
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1243
+ }
1244
+
1193
1245
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
1194
1246
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
1195
1247
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
@@ -1223,11 +1275,13 @@ $imagePositions: (
1223
1275
  height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1224
1276
  background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
1225
1277
  }
1278
+
1226
1279
  &[data-content-alignment="Vertical"] {
1227
1280
  .quota_label_wrapper {
1228
1281
  width: 100%;
1229
1282
  position: relative;
1230
1283
  @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1284
+
1231
1285
  &::after {
1232
1286
  content: "";
1233
1287
  position: absolute;
@@ -1262,6 +1316,7 @@ $imagePositions: (
1262
1316
  }
1263
1317
  }
1264
1318
  }
1319
+
1265
1320
  .quote_vertical_scroll_wrapper {
1266
1321
  overflow-y: auto;
1267
1322
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
@@ -1292,9 +1347,9 @@ $imagePositions: (
1292
1347
  border-radius: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1293
1348
  border-style: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1294
1349
  border-width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
1295
- box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1296
- var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1350
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1297
1351
  gap: prepareMediaVariable(--_ctm-lt-ae-dn-sg);
1352
+
1298
1353
  .allowance_label_wrapper {
1299
1354
  display: flex;
1300
1355
  flex-direction: column;
@@ -1308,6 +1363,15 @@ $imagePositions: (
1308
1363
  white-space: nowrap;
1309
1364
  color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-cr);
1310
1365
  font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy);
1366
+ text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-tt-tm);
1367
+ word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-wp);
1368
+ word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-bk);
1369
+
1370
+ &.flex__overflow {
1371
+ white-space: normal;
1372
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1373
+ }
1374
+
1311
1375
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1312
1376
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1313
1377
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
@@ -1323,6 +1387,15 @@ $imagePositions: (
1323
1387
 
1324
1388
  color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-cr);
1325
1389
  font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
1390
+ text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm);
1391
+ word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp);
1392
+ word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-bk);
1393
+
1394
+ &.flex__overflow {
1395
+ white-space: normal;
1396
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1397
+ }
1398
+
1326
1399
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1327
1400
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1328
1401
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
@@ -1347,6 +1420,7 @@ $imagePositions: (
1347
1420
  .allowance_info_wrapper {
1348
1421
  display: flex;
1349
1422
  gap: 12px;
1423
+
1350
1424
  .allowance_name_wrapper {
1351
1425
  display: flex;
1352
1426
  flex-direction: column;
@@ -1357,6 +1431,15 @@ $imagePositions: (
1357
1431
 
1358
1432
  color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-cr);
1359
1433
  font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
1434
+ text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm);
1435
+ word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp);
1436
+ word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-bk);
1437
+
1438
+ &.flex__overflow {
1439
+ white-space: normal;
1440
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1441
+ }
1442
+
1360
1443
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1361
1444
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1362
1445
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
@@ -1371,6 +1454,15 @@ $imagePositions: (
1371
1454
 
1372
1455
  color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1373
1456
  font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy);
1457
+ text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-tt-tm);
1458
+ word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-wd-wp);
1459
+ word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-wd-bk);
1460
+
1461
+ &.flex__overflow {
1462
+ white-space: normal;
1463
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1464
+ }
1465
+
1374
1466
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
1375
1467
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
1376
1468
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
@@ -1387,6 +1479,15 @@ $imagePositions: (
1387
1479
  align-items: center;
1388
1480
  color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-cr);
1389
1481
  font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-fy);
1482
+ text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-tt-tm);
1483
+ word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-wd-wp);
1484
+ word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-wd-bk);
1485
+
1486
+ &.flex__overflow {
1487
+ white-space: normal;
1488
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1489
+ }
1490
+
1390
1491
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
1391
1492
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
1392
1493
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
@@ -1397,6 +1498,7 @@ $imagePositions: (
1397
1498
  }
1398
1499
  }
1399
1500
  }
1501
+
1400
1502
  &[data-show-divider="true"] {
1401
1503
  .allowance_item_wrapper:not(:last-child) {
1402
1504
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
@@ -1412,12 +1514,14 @@ $imagePositions: (
1412
1514
  height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1413
1515
  background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
1414
1516
  }
1517
+
1415
1518
  &[data-content-alignment="Vertical"] {
1416
1519
  .allowance_label_wrapper {
1417
1520
  width: 100%;
1418
1521
  position: relative;
1419
1522
  gap: 10px;
1420
1523
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1524
+
1421
1525
  &::after {
1422
1526
  content: "";
1423
1527
  position: absolute;
@@ -1473,9 +1577,7 @@ $imagePositions: (
1473
1577
  border-radius: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1474
1578
  border-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1475
1579
  border-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
1476
- box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1477
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1478
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1580
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1479
1581
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1480
1582
 
1481
1583
  .secondary_vertical_scroll_wrapper {
@@ -1500,6 +1602,8 @@ $imagePositions: (
1500
1602
  .secondary_label {
1501
1603
  color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
1502
1604
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
1605
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-wd-wp);
1606
+ word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-wd-bk);
1503
1607
  font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
1504
1608
  font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
1505
1609
  font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
@@ -1517,6 +1621,8 @@ $imagePositions: (
1517
1621
  .label {
1518
1622
  color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1519
1623
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1624
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-wd-wp);
1625
+ word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-wd-bk);
1520
1626
  font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1521
1627
  font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1522
1628
  font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
@@ -1530,9 +1636,12 @@ $imagePositions: (
1530
1636
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1531
1637
  }
1532
1638
  }
1639
+
1533
1640
  .value {
1534
1641
  color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1535
1642
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1643
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-wp);
1644
+ word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-bk);
1536
1645
  font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1537
1646
  font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1538
1647
  font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
@@ -1565,9 +1674,13 @@ $imagePositions: (
1565
1674
  display: flex;
1566
1675
  gap: 6px;
1567
1676
  justify-content: right;
1677
+
1568
1678
  .remaining_order {
1569
1679
  color: #243dc6;
1570
1680
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1681
+ text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-tm);
1682
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-wp);
1683
+ word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-bk);
1571
1684
  font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1572
1685
  font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1573
1686
  font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
@@ -1589,9 +1702,13 @@ $imagePositions: (
1589
1702
  .payment_wrapper {
1590
1703
  display: flex;
1591
1704
  gap: 6px;
1705
+
1592
1706
  .remaining_payment {
1593
1707
  color: #243dc6;
1594
1708
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1709
+ text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-tm);
1710
+ word-wrap: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-wp);
1711
+ word-break: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-wd-bk);
1595
1712
  font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1596
1713
  font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1597
1714
  font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
@@ -1619,41 +1736,24 @@ $imagePositions: (
1619
1736
  position: relative;
1620
1737
  display: inline-block;
1621
1738
  flex-shrink: 0;
1622
- width: var(
1623
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1624
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1625
- );
1626
- height: var(
1627
- --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1628
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1629
- );
1739
+ width: var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1740
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1741
+ height: var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1742
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1630
1743
  margin-right: 6px;
1744
+
1631
1745
  .cart__quantity {
1632
1746
  position: absolute;
1633
1747
  top: -4px;
1634
1748
  right: -6px;
1635
1749
  border-radius: 50px;
1636
1750
 
1637
- min-width: calc(
1638
- var(
1639
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1640
- var(
1641
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1642
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1643
- )
1644
- ) *
1645
- 0.5
1646
- );
1647
- height: calc(
1648
- var(
1649
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1650
- var(
1651
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1652
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1653
- )
1654
- ) *
1655
- 0.5
1656
- );
1751
+ min-width: calc(var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1752
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1753
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))) * 0.5);
1754
+ height: calc(var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1755
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1756
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))) * 0.5);
1657
1757
  width: auto;
1658
1758
  padding-inline: 4px;
1659
1759
  box-sizing: border-box;
@@ -1663,6 +1763,7 @@ $imagePositions: (
1663
1763
  justify-content: center;
1664
1764
  white-space: nowrap;
1665
1765
  }
1766
+
1666
1767
  // .cart__quantity {
1667
1768
  // position: absolute;
1668
1769
  // top: 0;
@@ -1688,137 +1789,84 @@ $imagePositions: (
1688
1789
  // }
1689
1790
 
1690
1791
  .cart__quantity {
1691
- background-color: var(
1692
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr,
1693
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr))
1694
- );
1695
-
1696
- border-color: var(
1697
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1698
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr))
1699
- );
1700
-
1701
- border-style: var(
1702
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1703
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se))
1704
- );
1705
-
1706
- border-width: var(
1707
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1708
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh))
1709
- );
1710
-
1711
- border-radius: var(
1712
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1713
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs))
1714
- );
1715
-
1716
- box-shadow: var(
1717
- --_show-shadow,
1718
- var(
1719
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1720
- var(
1721
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1722
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae)
1723
- )
1724
- )
1725
- var(
1726
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1727
- var(
1728
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1729
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br)
1730
- )
1731
- )
1732
- var(
1733
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1734
- var(
1735
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1736
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd)
1737
- )
1738
- )
1739
- var(
1740
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1741
- var(
1742
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1743
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr)
1744
- )
1745
- )
1746
- );
1792
+ background-color: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr,
1793
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr)));
1794
+
1795
+ border-color: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1796
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr)));
1797
+
1798
+ border-style: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1799
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se)));
1800
+
1801
+ border-width: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1802
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh)));
1803
+
1804
+ border-radius: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1805
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs)));
1806
+
1807
+ box-shadow: var(--_show-shadow,
1808
+ var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1809
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1810
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae))) var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1811
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1812
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br))) var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1813
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1814
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd))) var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1815
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1816
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr))));
1747
1817
  white-space: nowrap;
1748
1818
  line-height: 1;
1749
1819
  width: auto;
1750
1820
  padding-inline: 4px;
1751
1821
  box-sizing: border-box;
1752
1822
 
1753
- color: var(
1754
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1755
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr))
1756
- );
1757
- font-family: var(
1758
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1759
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy))
1760
- );
1761
- font-size: calc(
1762
- var(
1763
- --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1764
- var(
1765
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1766
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1767
- )
1768
- ) /
1769
- 3
1770
- );
1823
+ color: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1824
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr)));
1825
+ font-family: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1826
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy)));
1827
+ text-transform: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-tm,
1828
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-tm, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-tm)));
1829
+ word-wrap: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-wp,
1830
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-wp, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-wp)));
1831
+ word-break: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-bk,
1832
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-bk, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-bk)));
1833
+ font-size: calc(var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1834
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1835
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))) / 3);
1771
1836
  // font-size: var(
1772
1837
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se,
1773
1838
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se))
1774
1839
  // );
1775
- font-weight: var(
1776
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1777
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt))
1778
- );
1779
- font-style: var(
1780
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1781
- var(
1782
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1783
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)
1784
- )
1785
- );
1786
- text-align: var(
1787
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1788
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an))
1789
- );
1790
- letter-spacing: var(
1791
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1792
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg))
1793
- );
1840
+ font-weight: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1841
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt)));
1842
+ font-style: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1843
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1844
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)));
1845
+ text-align: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1846
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an)));
1847
+ letter-spacing: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1848
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg)));
1794
1849
  // line-height: var(
1795
1850
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht,
1796
1851
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht))
1797
1852
  // );
1798
- text-decoration: var(
1799
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1800
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue))
1801
- );
1853
+ text-decoration: var(--_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1854
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue)));
1802
1855
  }
1856
+
1803
1857
  .cart__icon {
1804
1858
  display: var(--_sf-show-icon-ff, flex);
1859
+
1805
1860
  svg {
1806
- width: var(
1807
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1808
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1809
- );
1810
- height: var(
1811
- --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1812
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1813
- );
1861
+ width: var(--_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1862
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1863
+ height: var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1864
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)));
1865
+
1814
1866
  path {
1815
- stroke: var(
1816
- --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1817
- var(
1818
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1819
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)
1820
- )
1821
- );
1867
+ stroke: var(--_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1868
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1869
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)));
1822
1870
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1823
1871
  stroke-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-in-se-wh, 1.25);
1824
1872
  }
@@ -1830,122 +1878,91 @@ $imagePositions: (
1830
1878
  .child {
1831
1879
  position: relative;
1832
1880
  }
1881
+
1833
1882
  &[data-show-divider="true"] {
1883
+ .child:not(:last-child) {
1884
+ @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1885
+ }
1886
+
1834
1887
  .child:not(:last-child)::before {
1835
1888
  content: "";
1836
1889
  position: absolute;
1837
1890
  left: 0;
1838
1891
  right: 0;
1839
- bottom: calc(
1840
- -1 *
1841
- (
1842
- var(
1843
- --_ctm-mob-lt-ur-io-sy-im-sg,
1844
- var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1845
- ) /
1846
- 2
1847
- )
1848
- );
1849
-
1850
- height: var(
1851
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1852
- var(
1853
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1854
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1855
- )
1856
- );
1857
- background-color: var(
1858
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1859
- var(
1860
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1861
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1862
- )
1863
- );
1892
+ bottom: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1893
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1894
+
1895
+ height: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1896
+ var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1897
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1898
+ background-color: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1899
+ var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1900
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)));
1864
1901
  }
1902
+
1865
1903
  &[data-content-alignment="Horizontal"] {
1904
+
1905
+ // Side by side, so the thickness has to be reserved horizontally instead.
1906
+ .child:not(:last-child) {
1907
+ margin-bottom: 0;
1908
+ @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, right);
1909
+ }
1910
+
1866
1911
  .child:not(:last-child)::before {
1867
- // right: calc(
1868
- // -1 *
1869
- // (
1870
- // var(
1871
- // --_ctm-mob-lt-ur-io-sy-im-sg,
1872
- // var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1873
- // ) /
1874
- // 2
1875
- // )
1876
- // );
1912
+ right: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1913
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1914
+ bottom: unset;
1877
1915
  top: 0;
1878
1916
 
1879
- width: var(
1880
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1881
- var(
1882
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1883
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1884
- )
1885
- );
1917
+ width: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1918
+ var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1919
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1886
1920
  height: 100%;
1887
1921
  left: unset;
1888
1922
  }
1923
+
1889
1924
  @media (max-width: 768px) {
1925
+
1926
+ // Back to stacked below the breakpoint, so the reserve goes back under the item.
1927
+ .child:not(:last-child) {
1928
+ margin-right: 0;
1929
+ @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1930
+ }
1931
+
1890
1932
  .child:not(:last-child)::before {
1891
1933
  top: unset;
1892
1934
  left: 0;
1893
1935
  right: 0;
1894
- bottom: calc(
1895
- -1 *
1896
- (
1897
- var(
1898
- --_ctm-mob-lt-ur-io-sy-im-sg,
1899
- var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1900
- ) /
1901
- 2
1902
- )
1903
- );
1904
- height: var(
1905
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1906
- var(
1907
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1908
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1909
- )
1910
- );
1936
+ bottom: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1937
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1938
+ height: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1939
+ var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1940
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1911
1941
  width: unset;
1912
1942
  }
1913
1943
  }
1914
1944
  }
1945
+
1915
1946
  &[data-content-alignment="Vertical"] {
1916
1947
  .secondary_label_wrapper {
1917
1948
  width: 100%;
1918
1949
  position: relative;
1950
+ @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1951
+
1919
1952
  &::after {
1920
1953
  content: "";
1921
1954
  position: absolute;
1922
1955
  left: 0;
1923
1956
  right: 0;
1924
- bottom: calc(
1925
- -1 *
1926
- (
1927
- var(
1928
- --_ctm-mob-lt-ur-io-sy-im-sg,
1929
- var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1930
- ) /
1931
- 2
1932
- )
1933
- );
1934
- height: var(
1935
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1936
- var(
1937
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1938
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1939
- )
1940
- );
1941
-
1942
- background-color: var(
1943
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1944
- var(
1945
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1946
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1947
- )
1948
- );
1957
+ bottom: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1958
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1959
+ height: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1960
+ var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1961
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)));
1962
+
1963
+ background-color: var(--_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1964
+ var(--_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1965
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)));
1949
1966
  }
1950
1967
  }
1951
1968
  }
@@ -1961,7 +1978,8 @@ $imagePositions: (
1961
1978
  justify-content: space-between;
1962
1979
  padding-right: 16px;
1963
1980
  }
1964
- .active_orders_wrapper > * {
1981
+
1982
+ .active_orders_wrapper>* {
1965
1983
  box-sizing: border-box;
1966
1984
  width: 100%;
1967
1985
  // line-height: 125%;
@@ -1976,6 +1994,7 @@ $imagePositions: (
1976
1994
  flex-direction: row;
1977
1995
  align-items: start;
1978
1996
  }
1997
+
1979
1998
  .my_cart_container {
1980
1999
  display: flex;
1981
2000
  align-items: center;
@@ -1985,6 +2004,7 @@ $imagePositions: (
1985
2004
  .popover-container {
1986
2005
  position: relative;
1987
2006
  display: inline-block;
2007
+
1988
2008
  .popover-trigger {
1989
2009
  cursor: pointer;
1990
2010
  font-weight: 500;
@@ -2020,55 +2040,30 @@ $imagePositions: (
2020
2040
 
2021
2041
  // width: 100%;
2022
2042
  gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2023
- background-color: var(
2024
- --_ctm-mob-dn-pr-se-bd-cr,
2025
- var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2026
- );
2027
-
2028
- border-color: var(
2029
- --_ctm-mob-dn-pr-se-br-cr,
2030
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2031
- );
2032
-
2033
- border-style: var(
2034
- --_ctm-mob-dn-pr-se-br-se,
2035
- var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2036
- );
2037
-
2038
- border-width: var(
2039
- --_ctm-mob-dn-pr-se-br-wh,
2040
- var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2041
- );
2042
-
2043
- border-radius: var(
2044
- --_ctm-mob-dn-pr-se-br-rs,
2045
- var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2046
- );
2047
-
2048
- box-shadow: var(
2049
- --_show-shadow,
2050
- var(
2051
- --_ctm-mob-dn-pr-se-sw-ae,
2052
- var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2053
- )
2054
- var(
2055
- --_ctm-mob-dn-pr-se-sw-br,
2056
- var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2057
- )
2058
- var(
2059
- --_ctm-mob-dn-pr-se-sw-sd,
2060
- var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2061
- )
2062
- var(
2063
- --_ctm-mob-dn-pr-se-sw-cr,
2064
- var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2065
- )
2066
- );
2067
-
2068
- padding: var(
2069
- --_ctm-mob-dn-pr-se-pg,
2070
- var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2071
- );
2043
+ background-color: var(--_ctm-mob-dn-pr-se-bd-cr,
2044
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr)));
2045
+
2046
+ border-color: var(--_ctm-mob-dn-pr-se-br-cr,
2047
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2048
+
2049
+ border-style: var(--_ctm-mob-dn-pr-se-br-se,
2050
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se)));
2051
+
2052
+ border-width: var(--_ctm-mob-dn-pr-se-br-wh,
2053
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh)));
2054
+
2055
+ border-radius: var(--_ctm-mob-dn-pr-se-br-rs,
2056
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs)));
2057
+
2058
+ box-shadow: var(--_show-shadow,
2059
+ var(--_ctm-mob-dn-pr-se-sw-ae,
2060
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))) var(--_ctm-mob-dn-pr-se-sw-br,
2061
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))) var(--_ctm-mob-dn-pr-se-sw-sd,
2062
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))) var(--_ctm-mob-dn-pr-se-sw-cr,
2063
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))));
2064
+
2065
+ padding: var(--_ctm-mob-dn-pr-se-pg,
2066
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)));
2072
2067
  }
2073
2068
 
2074
2069
  .popover-box strong {
@@ -2088,51 +2083,36 @@ $imagePositions: (
2088
2083
  // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2089
2084
  // );
2090
2085
  transform: rotate(-45deg);
2091
- box-shadow: -1px -1px 0px
2092
- var(
2093
- --_ctm-mob-dn-pr-se-br-cr,
2094
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2095
- );
2086
+ box-shadow: -1px -1px 0px var(--_ctm-mob-dn-pr-se-br-cr,
2087
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
2096
2088
  }
2097
2089
 
2098
2090
  .popover_item {
2099
2091
  // padding-inline: var(--_sf-cd-gp);
2100
- color: var(
2101
- --_ctm-mob-dn-pr-se-cr,
2102
- var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))
2103
- );
2104
- font-family: var(
2105
- --_ctm-mob-dn-pr-se-ft-fy,
2106
- var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2107
- );
2108
- font-size: var(
2109
- --_ctm-mob-dn-pr-se-ft-se,
2110
- var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2111
- );
2112
- font-weight: var(
2113
- --_ctm-mob-dn-pr-se-ft-wt,
2114
- var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2115
- );
2116
- font-style: var(
2117
- --_ctm-mob-dn-pr-se-ft-se-ic,
2118
- var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2119
- );
2120
- text-align: var(
2121
- --_ctm-mob-dn-pr-se-tt-an,
2122
- var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2123
- );
2124
- letter-spacing: var(
2125
- --_ctm-mob-dn-pr-se-lr-sg,
2126
- var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2127
- );
2128
- line-height: var(
2129
- --_ctm-mob-dn-pr-se-le-ht,
2130
- var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2131
- );
2132
- text-decoration: var(
2133
- --_ctm-mob-dn-pr-se-ue,
2134
- var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2135
- );
2092
+ color: var(--_ctm-mob-dn-pr-se-cr,
2093
+ var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
2094
+ font-family: var(--_ctm-mob-dn-pr-se-ft-fy,
2095
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy)));
2096
+ text-transform: var(--_ctm-mob-dn-pr-se-tt-tm,
2097
+ var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm)));
2098
+ word-wrap: var(--_ctm-mob-dn-pr-se-wd-wp,
2099
+ var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp)));
2100
+ word-break: var(--_ctm-mob-dn-pr-se-wd-bk,
2101
+ var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk)));
2102
+ font-size: var(--_ctm-mob-dn-pr-se-ft-se,
2103
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se)));
2104
+ font-weight: var(--_ctm-mob-dn-pr-se-ft-wt,
2105
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt)));
2106
+ font-style: var(--_ctm-mob-dn-pr-se-ft-se-ic,
2107
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic)));
2108
+ text-align: var(--_ctm-mob-dn-pr-se-tt-an,
2109
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an)));
2110
+ letter-spacing: var(--_ctm-mob-dn-pr-se-lr-sg,
2111
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg)));
2112
+ line-height: var(--_ctm-mob-dn-pr-se-le-ht,
2113
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc)));
2114
+ text-decoration: var(--_ctm-mob-dn-pr-se-ue,
2115
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue)));
2136
2116
  // margin-left: 10px;
2137
2117
  }
2138
2118
  }
@@ -2142,20 +2122,14 @@ $imagePositions: (
2142
2122
  // for dropdown
2143
2123
 
2144
2124
  .language__conatiner {
2145
- background-color: var(
2146
- --_ctm-mob-dn-dn-se-wt-se-bd-cr,
2147
- var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr))
2148
- );
2125
+ background-color: var(--_ctm-mob-dn-dn-se-wt-se-bd-cr,
2126
+ var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr)));
2149
2127
 
2150
- border-color: var(
2151
- --_ctm-mob-dn-dn-se-wt-se-br-cr,
2152
- var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2153
- );
2128
+ border-color: var(--_ctm-mob-dn-dn-se-wt-se-br-cr,
2129
+ var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr)));
2154
2130
 
2155
- border-style: var(
2156
- --_ctm-mob-dn-dn-se-wt-se-br-se,
2157
- var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
2158
- );
2131
+ border-style: var(--_ctm-mob-dn-dn-se-wt-se-br-se,
2132
+ var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se)));
2159
2133
 
2160
2134
  // The tablet name carried a doubled `dn-se-`, so tablet fell through to desktop.
2161
2135
  border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh);
@@ -2166,30 +2140,15 @@ $imagePositions: (
2166
2140
  // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2167
2141
  // );
2168
2142
 
2169
- border-radius: var(
2170
- --_ctm-mob-dn-dn-se-wt-se-br-rs,
2171
- var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs))
2172
- );
2173
-
2174
- box-shadow: var(
2175
- --_show-shadow,
2176
- var(
2177
- --_ctm-mob-dn-dn-se-wt-se-sw-ae,
2178
- var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))
2179
- )
2180
- var(
2181
- --_ctm-mob-dn-dn-se-wt-se-sw-br,
2182
- var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))
2183
- )
2184
- var(
2185
- --_ctm-mob-dn-dn-se-wt-se-sw-sd,
2186
- var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))
2187
- )
2188
- var(
2189
- --_ctm-mob-dn-dn-se-wt-se-sw-cr,
2190
- var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))
2191
- )
2192
- );
2143
+ border-radius: var(--_ctm-mob-dn-dn-se-wt-se-br-rs,
2144
+ var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs)));
2145
+
2146
+ box-shadow: var(--_show-shadow,
2147
+ var(--_ctm-mob-dn-dn-se-wt-se-sw-ae,
2148
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))) var(--_ctm-mob-dn-dn-se-wt-se-sw-br,
2149
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))) var(--_ctm-mob-dn-dn-se-wt-se-sw-sd,
2150
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))) var(--_ctm-mob-dn-dn-se-wt-se-sw-cr,
2151
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))));
2193
2152
 
2194
2153
  // gap: var(
2195
2154
  // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg,
@@ -2199,176 +2158,110 @@ $imagePositions: (
2199
2158
 
2200
2159
  .option:hover {
2201
2160
  --_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm);
2202
- --_sf-hr-bd-cr: var(
2203
- --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
2204
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
2205
- );
2206
- --_sf-hr-br-cr: var(
2207
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
2208
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
2209
- );
2210
- --_sf-hr-br-se: var(
2211
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
2212
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
2213
- );
2214
- --_sf-hr-br-wh: var(
2215
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
2216
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
2217
- );
2218
- --_sf-hr-br-rs: var(
2219
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2220
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
2221
- );
2222
- --_sf-hr-pg: var(
2223
- --_ctm-mob-dn-dn-se-im-se-hr-se-pg,
2224
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
2225
- );
2161
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
2162
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr)));
2163
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
2164
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr)));
2165
+ --_sf-hr-br-se: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
2166
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se)));
2167
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
2168
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh)));
2169
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2170
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs)));
2171
+ --_sf-hr-pg: var(--_ctm-mob-dn-dn-se-im-se-hr-se-pg,
2172
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg)));
2226
2173
  // for shadow
2227
- --_sf-hr-sw-ae: var(
2228
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2229
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
2230
- );
2231
- --_sf-hr-sw-br: var(
2232
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2233
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
2234
- );
2235
- --_sf-hr-sw-hr: var(
2236
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2237
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr))
2238
- );
2239
- --_sf-hr-sw-cr: var(
2240
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2241
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
2242
- );
2174
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2175
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae)));
2176
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2177
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br)));
2178
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2179
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr)));
2180
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2181
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr)));
2243
2182
 
2244
2183
  // for font
2245
2184
 
2246
- --_sf-hr-cr: var(
2247
- --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2248
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
2249
- );
2250
- --_sf-hr-ft-fy: var(
2251
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2252
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
2253
- );
2254
- --_sf-hr-ft-se: var(
2255
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2256
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
2257
- );
2258
- --_sf-hr-ft-wt: var(
2259
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2260
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
2261
- );
2262
- --_sf-hr-ft-se-ic: var(
2263
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2264
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic))
2265
- );
2266
- --_sf-hr-tt-an: var(
2267
- --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2268
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
2269
- );
2270
- --_sf-hr-lr-sg: var(
2271
- --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2272
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
2273
- );
2274
- --_sf-hr-le-ht: var(
2275
- --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2276
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
2277
- );
2278
-
2279
- --_sf-hr-ue: var(
2280
- --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2281
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
2282
- );
2185
+ --_sf-hr-cr: var(--_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2186
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr)));
2187
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2188
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy)));
2189
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-dn-se-im-se-hr-se-tt-tm,
2190
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-tm, var(--_ctm-dn-dn-se-im-se-hr-se-tt-tm)));
2191
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-dn-se-im-se-hr-se-wd-wp,
2192
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-wp, var(--_ctm-dn-dn-se-im-se-hr-se-wd-wp)));
2193
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-dn-se-im-se-hr-se-wd-bk,
2194
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-bk, var(--_ctm-dn-dn-se-im-se-hr-se-wd-bk)));
2195
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2196
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se)));
2197
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2198
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt)));
2199
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2200
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic)));
2201
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2202
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an)));
2203
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2204
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg)));
2205
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2206
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht)));
2207
+
2208
+ --_sf-hr-ue: var(--_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2209
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue)));
2283
2210
  }
2284
2211
 
2285
2212
  .option[data-selected="true"] {
2286
2213
  --_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm);
2287
- --_sf-sd-bd-cr: var(
2288
- --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2289
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
2290
- );
2291
- --_sf-sd-br-cr: var(
2292
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2293
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
2294
- );
2295
- --_sf-sd-br-se: var(
2296
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2297
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
2298
- );
2299
- --_sf-sd-br-rs: var(
2300
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-rs,
2301
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-dn-dn-se-im-se-sd-se-br-rs))
2302
- );
2303
- --_sf-sd-br-wh: var(
2304
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2305
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
2306
- );
2214
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2215
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr)));
2216
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2217
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr)));
2218
+ --_sf-sd-br-se: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2219
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se)));
2220
+ --_sf-sd-br-rs: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-rs,
2221
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-dn-dn-se-im-se-sd-se-br-rs)));
2222
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2223
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh)));
2307
2224
  // new
2308
- --_sf-sd-sw-ae: var(
2309
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2310
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
2311
- );
2312
- --_sf-sd-sw-br: var(
2313
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2314
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
2315
- );
2316
- --_sf-sd-sw-sd: var(
2317
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2318
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
2319
- );
2320
- --_sf-sd-sw-cr: var(
2321
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2322
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
2323
- );
2324
- --_sf-sd-pg: var(
2325
- --_ctm-mob-dn-dn-se-im-se-sd-se-pg,
2326
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg))
2327
- );
2328
- --_sf-sd-im-gp: var(
2329
- --_ctm-mob-dn-dn-se-im-se-sd-se-im-gp,
2330
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-dn-dn-se-im-se-sd-se-im-gp))
2331
- );
2225
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2226
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae)));
2227
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2228
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br)));
2229
+ --_sf-sd-sw-sd: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2230
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd)));
2231
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2232
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr)));
2233
+ --_sf-sd-pg: var(--_ctm-mob-dn-dn-se-im-se-sd-se-pg,
2234
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg)));
2235
+ --_sf-sd-im-gp: var(--_ctm-mob-dn-dn-se-im-se-sd-se-im-gp,
2236
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-dn-dn-se-im-se-sd-se-im-gp)));
2332
2237
 
2333
2238
  // for font
2334
2239
 
2335
- --_sf-sd-cr: var(
2336
- --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2337
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
2338
- );
2339
- --_sf-sd-ft-fy: var(
2340
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2341
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
2342
- );
2343
- --_sf-sd-ft-se: var(
2344
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2345
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
2346
- );
2347
- --_sf-sd-ft-wt: var(
2348
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2349
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
2350
- );
2351
- --_sf-sd-ft-se-ic: var(
2352
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2353
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic))
2354
- );
2355
- --_sf-sd-tt-an: var(
2356
- --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2357
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
2358
- );
2359
- --_sf-sd-lr-sg: var(
2360
- --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2361
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
2362
- );
2363
- --_sf-sd-le-ht: var(
2364
- --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2365
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
2366
- );
2367
-
2368
- --_sf-sd-ue: var(
2369
- --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2370
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
2371
- );
2240
+ --_sf-sd-cr: var(--_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2241
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr)));
2242
+ --_sf-sd-ft-fy: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2243
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy)));
2244
+ --_sf-sd-tt-tm: var(--_ctm-mob-dn-dn-se-im-se-sd-se-tt-tm,
2245
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-tm, var(--_ctm-dn-dn-se-im-se-sd-se-tt-tm)));
2246
+ --_sf-sd-wd-wp: var(--_ctm-mob-dn-dn-se-im-se-sd-se-wd-wp,
2247
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-wp, var(--_ctm-dn-dn-se-im-se-sd-se-wd-wp)));
2248
+ --_sf-sd-wd-bk: var(--_ctm-mob-dn-dn-se-im-se-sd-se-wd-bk,
2249
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-bk, var(--_ctm-dn-dn-se-im-se-sd-se-wd-bk)));
2250
+ --_sf-sd-ft-se: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2251
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se)));
2252
+ --_sf-sd-ft-wt: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2253
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt)));
2254
+ --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2255
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic)));
2256
+ --_sf-sd-tt-an: var(--_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2257
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an)));
2258
+ --_sf-sd-lr-sg: var(--_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2259
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg)));
2260
+ --_sf-sd-le-ht: var(--_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2261
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht)));
2262
+
2263
+ --_sf-sd-ue: var(--_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2264
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue)));
2372
2265
  }
2373
2266
 
2374
2267
  .option {
@@ -2376,10 +2269,8 @@ $imagePositions: (
2376
2269
  display: flex;
2377
2270
  align-items: center;
2378
2271
  cursor: pointer;
2379
- justify-content: var(
2380
- --_ctm-mob-dn-dn-se-lt-ss-at,
2381
- var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at))
2382
- );
2272
+ justify-content: var(--_ctm-mob-dn-dn-se-lt-ss-at,
2273
+ var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at)));
2383
2274
 
2384
2275
  position: relative;
2385
2276
  box-sizing: border-box;
@@ -2389,81 +2280,57 @@ $imagePositions: (
2389
2280
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
2390
2281
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2391
2282
 
2392
- background-color: var(
2393
- --_sf-hr-bd-cr,
2394
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2395
- );
2283
+ background-color: var(--_sf-hr-bd-cr,
2284
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
2396
2285
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2397
2286
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2398
2287
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2399
2288
 
2400
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2401
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2402
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2403
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2289
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2290
+
2404
2291
  //
2405
2292
  &[data-selected="true"] {
2406
- border-color: var(
2407
- --_sf-sd-br-cr,
2408
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
2409
- );
2410
-
2411
- background-color: var(
2412
- --_sf-sd-bd-cr,
2413
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2414
- );
2415
- border-style: var(
2416
- --_sf-sd-br-se,
2417
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
2418
- );
2419
- border-width: var(
2420
- --_sf-sd-br-wh,
2421
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
2422
- );
2423
- border-radius: var(
2424
- --_sf-sd-br-rs,
2425
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
2426
- );
2427
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2428
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2429
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2430
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2293
+ border-color: var(--_sf-sd-br-cr,
2294
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2295
+
2296
+ background-color: var(--_sf-sd-bd-cr,
2297
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
2298
+ border-style: var(--_sf-sd-br-se,
2299
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2300
+ border-width: var(--_sf-sd-br-wh,
2301
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2302
+ border-radius: var(--_sf-sd-br-rs,
2303
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2304
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2305
+
2431
2306
  .language__name {
2432
2307
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2433
- font-family: var(
2434
- --_sf-sd-ft-fy,
2435
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
2436
- );
2308
+ font-family: var(--_sf-sd-ft-fy,
2309
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
2310
+ word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp));
2311
+ word-break: var(--_sf-sd-wd-bk,
2312
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
2437
2313
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2438
2314
  font-weight: 400;
2439
2315
  // font-weight: var(
2440
2316
  // --_sf-sd-ft-wt,
2441
2317
  // prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
2442
2318
  // );
2443
- font-style: var(
2444
- --_sf-sd-ft-se-ic,
2445
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2446
- );
2447
- text-align: var(
2448
- --_sf-sd-tt-an,
2449
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
2450
- );
2451
- letter-spacing: var(
2452
- --_sf-sd-lr-sg,
2453
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2454
- );
2455
- line-height: var(
2456
- --_sf-sd-le-ht,
2457
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2458
- );
2319
+ font-style: var(--_sf-sd-ft-se-ic,
2320
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
2321
+ text-align: var(--_sf-sd-tt-an,
2322
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2323
+ letter-spacing: var(--_sf-sd-lr-sg,
2324
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
2325
+ line-height: var(--_sf-sd-le-ht,
2326
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc));
2459
2327
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2460
- text-transform: var(
2461
- --_sf-sd-txt-tr,
2462
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2463
- );
2328
+ text-transform: var(--_sf-sd-txt-tr,
2329
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2464
2330
  }
2465
2331
  }
2466
2332
  }
2333
+
2467
2334
  &[data-flex-direction="column"] {
2468
2335
  .language__name {
2469
2336
  // white-space: unset;
@@ -2473,9 +2340,11 @@ $imagePositions: (
2473
2340
  text-overflow: ellipsis;
2474
2341
  }
2475
2342
  }
2343
+
2476
2344
  &[data-flex-direction="row"] {
2477
2345
  overflow-x: auto;
2478
2346
  }
2347
+
2479
2348
  // Both offsets used to be measured off `--_ctm-dn-dn-se-lt-ss-gp-bn-is`, which
2480
2349
  // belongs to the commented-out `dropdownStyle.layoutSettings` and is therefore
2481
2350
  // never emitted. The calc was invalid, so the divider never positioned at all.
@@ -2490,12 +2359,16 @@ $imagePositions: (
2490
2359
  content: "";
2491
2360
  position: absolute;
2492
2361
  top: 0;
2493
- bottom: 0; /* For full height divider */
2362
+ bottom: 0;
2363
+ /* For full height divider */
2494
2364
  right: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
2495
- width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt); /* Divider thickness */
2496
- background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr); /* Divider color */
2365
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt);
2366
+ /* Divider thickness */
2367
+ background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr);
2368
+ /* Divider color */
2497
2369
  }
2498
2370
  }
2371
+
2499
2372
  &[data-flex-direction="column"] {
2500
2373
  .option:not(:last-child) {
2501
2374
  @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt);
@@ -2518,12 +2391,15 @@ $imagePositions: (
2518
2391
  display: flex;
2519
2392
  align-items: center;
2520
2393
  position: relative;
2394
+
2521
2395
  .language__name {
2522
2396
  // Clearance for the absolutely positioned caret. It was `padding-right`,
2523
2397
  // which the section's own padding would have had to fight with; as a margin
2524
2398
  // the Padding control owns all four sides cleanly.
2525
2399
  margin-right: 20px;
2526
2400
  font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
2401
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-wp);
2402
+ word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-bk);
2527
2403
  font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se);
2528
2404
  color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr);
2529
2405
  font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-wt);
@@ -2545,23 +2421,19 @@ $imagePositions: (
2545
2421
  .language__name {
2546
2422
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2547
2423
  font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
2424
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-wp));
2425
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
2548
2426
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2549
2427
  font-weight: 400;
2550
- font-style: var(
2551
- --_sf-hr-ft-se-ic,
2552
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2553
- );
2428
+ font-style: var(--_sf-hr-ft-se-ic,
2429
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
2554
2430
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2555
- letter-spacing: var(
2556
- --_sf-hr-lr-sg,
2557
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2558
- );
2431
+ letter-spacing: var(--_sf-hr-lr-sg,
2432
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
2559
2433
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
2560
2434
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2561
- text-transform: var(
2562
- --_sf-hr-txt-tr,
2563
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2564
- );
2435
+ text-transform: var(--_sf-hr-txt-tr,
2436
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2565
2437
  white-space: nowrap;
2566
2438
 
2567
2439
  // Item Style clamps the option label. `white-space: nowrap` above would stop
@@ -2580,6 +2452,8 @@ $imagePositions: (
2580
2452
  // padding: 8px 12px;
2581
2453
  text-align: left;
2582
2454
  font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy);
2455
+ word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp);
2456
+ word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk);
2583
2457
  font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se);
2584
2458
  color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr);
2585
2459
  font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt);
@@ -2594,10 +2468,12 @@ $imagePositions: (
2594
2468
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2595
2469
  }
2596
2470
  }
2471
+
2597
2472
  .est__dropdown__main {
2598
2473
  position: relative;
2599
2474
  width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wh);
2600
2475
  margin-top: 0px;
2476
+
2601
2477
  label {
2602
2478
  font-size: 14px;
2603
2479
  color: var(--_gray-700);
@@ -2622,6 +2498,7 @@ $imagePositions: (
2622
2498
  &.open .list {
2623
2499
  display: flex;
2624
2500
  }
2501
+
2625
2502
  .est__dropdown__button {
2626
2503
  display: flex;
2627
2504
  align-items: center;
@@ -2638,10 +2515,12 @@ $imagePositions: (
2638
2515
  // top: 10px;
2639
2516
  right: 10px;
2640
2517
  transition: all 200ms ease-in;
2518
+
2641
2519
  &.open {
2642
2520
  transform: rotate(180deg);
2643
2521
  transform: all 200ms ease-in;
2644
2522
  }
2523
+
2645
2524
  &.close {
2646
2525
  transform: rotate(0deg);
2647
2526
  transform: all 200ms ease-in;
@@ -2674,10 +2553,7 @@ $imagePositions: (
2674
2553
  // padding: 2px;
2675
2554
  // border-radius: 4px;
2676
2555
  // border: 1px solid var(--_gray-300);
2677
- box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae)
2678
- prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br)
2679
- prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd)
2680
- prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
2556
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd) prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
2681
2557
 
2682
2558
  &.top {
2683
2559
  bottom: 100%;
@@ -2687,6 +2563,7 @@ $imagePositions: (
2687
2563
  .option {
2688
2564
  cursor: pointer;
2689
2565
  }
2566
+
2690
2567
  &.show__panel {
2691
2568
  animation: slideUp 0.4s ease-in-out;
2692
2569
  }
@@ -2695,12 +2572,14 @@ $imagePositions: (
2695
2572
  animation: slideDown 0.4s ease-in-out;
2696
2573
  pointer-events: none;
2697
2574
  }
2575
+
2698
2576
  &:has(.no__records__found) {
2699
2577
  padding: 0px;
2700
2578
  }
2701
2579
  }
2702
2580
  }
2703
2581
  }
2582
+
2704
2583
  .no__records__found {
2705
2584
  padding: 12px;
2706
2585
  color: var(--_gray-700);
@@ -2711,4 +2590,4 @@ $imagePositions: (
2711
2590
  }
2712
2591
  }
2713
2592
  }
2714
- }
2593
+ }