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

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 (132) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2155 -1671
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +2027 -1128
  16. package/dist/bundle.scss +1489 -841
  17. package/dist/bundleCategories.scss +301 -0
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +113 -78
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1025 -485
  23. package/dist/cart-summary.scss +1234 -569
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +647 -367
  27. package/dist/cartDropdownOverlay.scss +10 -1
  28. package/dist/category-groups-element.scss +108 -127
  29. package/dist/category-groups-product-grid.scss +147 -120
  30. package/dist/category-groups-product-image.scss +1457 -1162
  31. package/dist/category-groups-product-options.scss +685 -590
  32. package/dist/category-groups-product-price.scss +3244 -1966
  33. package/dist/category-groups-quota-details.scss +464 -210
  34. package/dist/category.scss +50 -26
  35. package/dist/checkout.scss +16 -24
  36. package/dist/confirm-modal.scss +2 -22
  37. package/dist/container.scss +54 -32
  38. package/dist/countdown.scss +443 -256
  39. package/dist/coupon.scss +16 -19
  40. package/dist/default-dropdown.scss +1 -12
  41. package/dist/embroider-template-1-v2.scss +172 -123
  42. package/dist/embroider-template-1.scss +104 -68
  43. package/dist/embroidery.scss +31 -30
  44. package/dist/employee-bulk-order.scss +142 -418
  45. package/dist/faq.scss +408 -228
  46. package/dist/filter-results.scss +265 -125
  47. package/dist/filters.scss +1682 -831
  48. package/dist/gallery-slider-temp.scss +811 -445
  49. package/dist/global-styles.scss +7 -23
  50. package/dist/grid.scss +33 -25
  51. package/dist/hotspot.scss +115 -68
  52. package/dist/image-temp.scss +38 -24
  53. package/dist/item-stock.scss +16 -9
  54. package/dist/kitDetails.scss +4301 -2721
  55. package/dist/kits.scss +19 -24
  56. package/dist/language-selector.scss +361 -211
  57. package/dist/last-x-orders.scss +174 -95
  58. package/dist/layouter-item.scss +106 -76
  59. package/dist/layouter-pro-item.scss +95 -89
  60. package/dist/layouter-pro.scss +92 -87
  61. package/dist/layouter.scss +264 -79
  62. package/dist/light-box-v2.scss +104 -89
  63. package/dist/login.scss +600 -311
  64. package/dist/map.scss +391 -228
  65. package/dist/marchandiserSets.scss +104 -95
  66. package/dist/mega-menu-container.scss +109 -96
  67. package/dist/mega-menu.scss +731 -624
  68. package/dist/menu-item.scss +2 -2
  69. package/dist/menu-v2.scss +619 -507
  70. package/dist/multi-select-dropdown.scss +3 -27
  71. package/dist/my-templates.scss +9 -38
  72. package/dist/option-bar.scss +375 -215
  73. package/dist/order-status.scss +1117 -643
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +1778 -1228
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +176 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +659 -316
  87. package/dist/product-price.scss +2562 -1284
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +451 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +137 -56
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +121 -82
  99. package/dist/repeater-embla-controls.scss +26 -37
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +817 -554
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +198 -90
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +198 -61
  111. package/dist/social.scss +145 -80
  112. package/dist/stack.scss +34 -23
  113. package/dist/static-global.scss +26 -44
  114. package/dist/stockStatus.scss +19 -11
  115. package/dist/store-locations.scss +1105 -577
  116. package/dist/tab-container.scss +108 -81
  117. package/dist/table-common.scss +408 -217
  118. package/dist/table.scss +511 -269
  119. package/dist/text-temp.scss +7 -8
  120. package/dist/theme-classes.scss +13 -17
  121. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  122. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  123. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  125. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  126. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  127. package/dist/uom-selector.scss +949 -489
  128. package/dist/user-elements.scss +892 -574
  129. package/dist/variant-picker.scss +2555 -1281
  130. package/dist/volume-pricing.scss +1037 -541
  131. package/dist/widget.scss +1 -0
  132. package/package.json +1 -1
@@ -41,16 +41,24 @@ $imagePositions: (
41
41
  // )
42
42
  // )
43
43
  // );
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)))));
44
+ width: var(
45
+ --_sf-el-wh-st-mx,
46
+ calc(
47
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
48
+ )
49
+ );
46
50
 
47
51
  height: auto;
48
52
 
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))))));
53
+ margin: var(
54
+ --_ctm-mob-bun-lt-mn,
55
+ var(
56
+ --_ctm-tab-bun-lt-mn,
57
+ var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
58
+ )
59
+ );
52
60
 
53
- &>div {
61
+ & > div {
54
62
  &.wrapper {
55
63
  width: 100%;
56
64
  }
@@ -94,18 +102,39 @@ $imagePositions: (
94
102
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
95
103
 
96
104
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
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));
105
+ height: calc(
106
+ 100% - calc(
107
+ var(
108
+ --_ctm-mob-dn-pn-as-aw-se,
109
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
110
+ ) +
111
+ 10px
112
+ )
113
+ );
99
114
  }
100
115
 
101
116
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
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));
117
+ height: calc(
118
+ 100% - calc(
119
+ var(
120
+ --_ctm-mob-dn-pn-le-le-ht,
121
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
122
+ ) +
123
+ 20px
124
+ )
125
+ );
104
126
  }
105
127
 
106
128
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
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));
129
+ height: calc(
130
+ 100% - calc(
131
+ var(
132
+ --_ctm-mob-dn-pn-ds-dt-se,
133
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
134
+ ) +
135
+ 20px
136
+ )
137
+ );
109
138
  }
110
139
 
111
140
  .embla__slide {
@@ -116,10 +145,11 @@ $imagePositions: (
116
145
  }
117
146
  }
118
147
  }
119
-
120
148
  &:not([data-display-style="Column"]) {
121
149
  .embla__container {
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))));
150
+ grid-auto-columns: calc(
151
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
152
+ );
123
153
  }
124
154
  }
125
155
 
@@ -131,25 +161,20 @@ $imagePositions: (
131
161
  width: 100%;
132
162
  justify-content: space-between;
133
163
  transform: translate(-50%, -50%);
134
-
135
164
  // padding-left: 20px;
136
165
  &[data-control-type="Side"] {
137
-
138
166
  .left-button,
139
167
  .right-button {
140
168
  background-color: transparent;
141
169
  }
142
170
  }
143
-
144
171
  &[data-background-shape="Round"] {
145
-
146
172
  .left-button,
147
173
  .right-button {
148
174
  background-color: #f2f5f5;
149
175
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
150
176
  }
151
177
  }
152
-
153
178
  &[data-control-type="Bottom-Overflow"] {
154
179
  transform: translateX(-50%);
155
180
  width: 100%;
@@ -158,7 +183,6 @@ $imagePositions: (
158
183
  top: unset;
159
184
  bottom: 6px;
160
185
  }
161
-
162
186
  &[data-control-type="Bottom"] {
163
187
  transform: unset;
164
188
  position: static;
@@ -167,15 +191,18 @@ $imagePositions: (
167
191
  gap: 12px;
168
192
  margin-top: 10px;
169
193
  }
170
-
171
194
  .left-button {
172
195
  padding: 10px;
173
196
  border-radius: 50%;
174
197
  border: none;
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)));
198
+ width: var(
199
+ --_ctm-mob-dn-pn-as-aw-se,
200
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
201
+ );
202
+ height: var(
203
+ --_ctm-mob-dn-pn-as-aw-se,
204
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
205
+ );
179
206
 
180
207
  display: flex;
181
208
  align-items: center;
@@ -183,7 +210,6 @@ $imagePositions: (
183
210
  cursor: pointer;
184
211
  outline: none;
185
212
  margin-left: 12px;
186
-
187
213
  &:disabled {
188
214
  & svg {
189
215
  path {
@@ -192,14 +218,17 @@ $imagePositions: (
192
218
  }
193
219
  }
194
220
  }
195
-
196
221
  .right-button {
197
222
  border-radius: 50%;
198
223
  border: none;
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)));
224
+ width: var(
225
+ --_ctm-mob-dn-pn-as-aw-se,
226
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
227
+ );
228
+ height: var(
229
+ --_ctm-mob-dn-pn-as-aw-se,
230
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
231
+ );
203
232
 
204
233
  display: flex;
205
234
  align-items: center;
@@ -217,19 +246,30 @@ $imagePositions: (
217
246
  }
218
247
  }
219
248
  }
220
-
221
249
  .icon {
222
250
  display: flex;
223
251
 
224
252
  svg {
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);
253
+ width: calc(
254
+ var(
255
+ --_ctm-mob-dn-pn-as-aw-se,
256
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
257
+ ) *
258
+ 0.5
259
+ );
260
+ height: calc(
261
+ var(
262
+ --_ctm-mob-dn-pn-as-aw-se,
263
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
264
+ ) *
265
+ 0.5
266
+ );
229
267
 
230
268
  path {
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)));
269
+ stroke: var(
270
+ --_ctm-mob-dn-pn-as-aw-cr,
271
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
272
+ );
233
273
  }
234
274
  }
235
275
  }
@@ -240,14 +280,12 @@ $imagePositions: (
240
280
  width: calc(100% - 60px);
241
281
  margin-inline: auto;
242
282
  }
243
-
244
283
  .left-button {
245
284
  position: absolute;
246
285
  left: 0;
247
286
  top: 50%;
248
287
  transform: translateY(-50%);
249
288
  }
250
-
251
289
  .right-button {
252
290
  position: absolute;
253
291
 
@@ -255,7 +293,6 @@ $imagePositions: (
255
293
  top: 50%;
256
294
  transform: translateY(-50%);
257
295
  }
258
-
259
296
  @media (max-width: 1024px) {
260
297
  .embla__viewport {
261
298
  width: calc(100% - 40px);
@@ -266,11 +303,9 @@ $imagePositions: (
266
303
  &[data-thumbnail-placement="top"] {
267
304
  flex-direction: column-reverse;
268
305
  }
269
-
270
306
  &[data-thumbnail-placement="bottom"] {
271
307
  flex-direction: column;
272
308
  }
273
-
274
309
  &[data-thumbnail-placement="left"] {
275
310
  flex-direction: row-reverse;
276
311
 
@@ -284,10 +319,8 @@ $imagePositions: (
284
319
  }
285
320
  }
286
321
  }
287
-
288
322
  &[data-thumbnail-placement="right"] {
289
323
  flex-direction: row;
290
-
291
324
  .embla__thumbs {
292
325
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
293
326
 
@@ -299,7 +332,6 @@ $imagePositions: (
299
332
  }
300
333
  }
301
334
  }
302
-
303
335
  .embla__dots {
304
336
  display: flex;
305
337
  flex-wrap: wrap;
@@ -316,13 +348,14 @@ $imagePositions: (
316
348
  transform: translateX(-50%);
317
349
  width: 75%;
318
350
  }
319
-
320
351
  .embla__dot {
321
352
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
322
353
  -webkit-appearance: none;
323
354
  appearance: none;
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)));
355
+ background-color: var(
356
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
357
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
358
+ );
326
359
 
327
360
  touch-action: manipulation;
328
361
  display: inline-flex;
@@ -333,56 +366,75 @@ $imagePositions: (
333
366
  margin: 0;
334
367
  // width: 0.6rem;
335
368
  // height: 0.6rem;
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)));
369
+ width: var(
370
+ --_ctm-mob-dn-pn-ds-dt-se,
371
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
372
+ );
373
+ height: var(
374
+ --_ctm-mob-dn-pn-ds-dt-se,
375
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
376
+ );
340
377
 
341
378
  display: flex;
342
379
  align-items: center;
343
380
  justify-content: center;
344
381
  border-radius: 50%;
345
382
  }
346
-
347
383
  .embla__dot:after {
348
384
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
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)));
385
+ width: var(
386
+ --_ctm-mob-dn-pn-ds-dt-se,
387
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
388
+ );
389
+ height: var(
390
+ --_ctm-mob-dn-pn-ds-dt-se,
391
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
392
+ );
353
393
 
354
394
  border-radius: 50%;
355
395
  display: flex;
356
396
  align-items: center;
357
397
  content: "";
358
398
  }
359
-
360
399
  .embla__dot--selected:after {
361
400
  box-shadow: inset 0 0 0 1px var(--text-body);
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)));
401
+ background-color: var(
402
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
403
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
404
+ );
364
405
  }
365
-
366
406
  &[data-slider-control="Pagination Line"] {
367
407
  .embla__dot {
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)));
408
+ width: var(
409
+ --_ctm-mob-dn-pn-le-le-wh,
410
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
411
+ );
412
+ height: var(
413
+ --_ctm-mob-dn-pn-le-le-ht,
414
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
415
+ );
416
+ background-color: var(
417
+ --_ctm-mob-dn-pn-le-or-le-cr,
418
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
419
+ );
374
420
  border-radius: 6px;
375
421
  }
376
422
 
377
423
  .embla__dot--selected:after {
378
424
  box-shadow: inset 0 0 0 1px var(--text-body);
379
425
  border-radius: 6px;
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)));
426
+ width: var(
427
+ --_ctm-mob-dn-pn-le-le-wh,
428
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
429
+ );
430
+ height: var(
431
+ --_ctm-mob-dn-pn-le-le-ht,
432
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
433
+ );
434
+ background-color: var(
435
+ --_ctm-mob-dn-pn-le-ct-le-cr,
436
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
437
+ );
386
438
  }
387
439
  }
388
440
  }
@@ -407,7 +459,6 @@ $imagePositions: (
407
459
 
408
460
  overflow: hidden;
409
461
  }
410
-
411
462
  .embla__thumbs__container {
412
463
  display: flex;
413
464
  flex-direction: row;
@@ -431,33 +482,46 @@ $imagePositions: (
431
482
  }
432
483
  }
433
484
  }
434
-
435
485
  .user__element__container {
436
486
  display: flex;
437
487
  flex-direction: column;
438
488
 
439
489
  width: 100%;
440
490
  gap: prepareMediaVariable(--_ctm-lt-im-sg);
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))));
491
+ background-color: var(
492
+ --_ctm-mob-dn-wt-se-bd-cr,
493
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
494
+ );
495
+
496
+ border-color: var(
497
+ --_ctm-mob-dn-wt-se-br-cr,
498
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
499
+ );
500
+
501
+ border-style: var(
502
+ --_ctm-mob-dn-wt-se-br-se,
503
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
504
+ );
505
+
506
+ border-width: var(
507
+ --_ctm-mob-dn-wt-se-br-wh,
508
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
509
+ );
510
+
511
+ border-radius: var(
512
+ --_ctm-mob-dn-wt-se-br-rs,
513
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
514
+ );
515
+
516
+ box-shadow: var(
517
+ --_show-shadow,
518
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
519
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
520
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
521
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
522
+ );
458
523
 
459
524
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
460
-
461
525
  .user__element__item {
462
526
  position: relative;
463
527
  }
@@ -532,7 +596,6 @@ $imagePositions: (
532
596
  justify-content: space-between;
533
597
  align-items: center;
534
598
  flex-wrap: wrap;
535
-
536
599
  .user_elements_user_name_wrapper {
537
600
  width: unset;
538
601
  align-items: center;
@@ -544,7 +607,6 @@ $imagePositions: (
544
607
  width: unset;
545
608
  flex-wrap: wrap;
546
609
  }
547
-
548
610
  @media (max-width: 767px) {
549
611
  .user_elements_user_data_wrapper {
550
612
  flex-direction: column;
@@ -552,21 +614,17 @@ $imagePositions: (
552
614
  }
553
615
  }
554
616
  }
555
-
556
617
  .user_elements_quota_wrapper {
557
618
  flex-direction: row;
558
619
  align-items: center;
559
620
  flex-wrap: nowrap;
560
-
561
621
  .quota_label_wrapper {
562
622
  flex-shrink: 0;
563
623
  }
564
-
565
624
  .user_elements_user_name_wrapper {
566
625
  flex-direction: row;
567
626
  white-space: nowrap;
568
627
  }
569
-
570
628
  .quote_vertical_scroll_wrapper {
571
629
  flex-direction: row;
572
630
  flex-grow: 1;
@@ -579,7 +637,6 @@ $imagePositions: (
579
637
  width: 100%;
580
638
  }
581
639
  }
582
-
583
640
  // This row divider was drawn unconditionally, so the section's Divider
584
641
  // toggle had nothing to switch off in the maximized layout.
585
642
  &[data-show-divider="true"] {
@@ -597,30 +654,24 @@ $imagePositions: (
597
654
  width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
598
655
  }
599
656
  }
600
-
601
657
  .quota_label {
602
658
  white-space: nowrap;
603
659
  }
604
-
605
660
  .quote_info_wrapper {
606
661
  justify-content: flex-start;
607
662
  align-items: center;
608
663
  }
609
-
610
664
  .embla__container {
611
665
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
612
666
  }
613
667
  }
614
-
615
668
  .user_elements_allowance_wrapper {
616
669
  flex-direction: row;
617
670
  flex-wrap: nowrap;
618
671
  align-items: center;
619
-
620
672
  .allowance_label_wrapper {
621
673
  flex-shrink: 0;
622
674
  }
623
-
624
675
  // Same: gated on the section's own Divider toggle.
625
676
  &[data-show-divider="true"] {
626
677
  .embla__slide:not(:last-child) {
@@ -640,34 +691,28 @@ $imagePositions: (
640
691
  left: unset;
641
692
  }
642
693
  }
643
-
644
694
  .allowance_vertical_scroll_wrapper {
645
695
  width: unset;
646
696
  flex-grow: 1;
647
697
  min-width: 0;
648
698
  }
649
-
650
699
  @media (max-width: 1024px) {
651
700
  .allowance_vertical_scroll_wrapper {
652
701
  width: 100%;
653
702
  }
654
703
  }
655
-
656
704
  .embla__container {
657
705
  gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
658
706
  }
659
707
  }
660
-
661
708
  .user_elements_user_info_secondary_wrapper {
662
709
  flex-direction: row;
663
710
  justify-content: space-between;
664
711
  align-items: center;
665
-
666
712
  .order_wrapper {
667
713
  justify-content: flex-start;
668
714
  }
669
715
  }
670
-
671
716
  .secondary_vertical_scroll_wrapper {
672
717
  flex-direction: row;
673
718
  width: unset;
@@ -675,30 +720,29 @@ $imagePositions: (
675
720
  align-items: center;
676
721
  width: 100%;
677
722
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
678
-
679
723
  @media (max-width: 768px) {
680
724
  flex-wrap: wrap;
681
725
  }
682
-
683
726
  .child {
684
727
  flex-direction: column;
685
728
  justify-content: flex-start;
686
729
  width: 100%;
687
- height: 44px;
730
+ // A wrapping value (a long shipping address with Text Overflow off) used to spill
731
+ // out of this cell and past the element, because the cell was a fixed 44px. A
732
+ // floor keeps the short cells aligned and lets a tall one grow the section -
733
+ // every ancestor up to the element root is already height:auto.
734
+ min-height: 44px;
688
735
  }
689
736
  }
690
-
691
737
  @media (max-width: 1024px) {
692
738
  .user_elements_user_info_wrapper {
693
739
  flex-direction: column;
694
740
  align-items: flex-start;
695
741
  }
696
-
697
742
  .user_elements_quota_wrapper {
698
743
  flex-direction: column;
699
744
  align-items: flex-start;
700
745
  }
701
-
702
746
  .user_elements_allowance_wrapper {
703
747
  flex-direction: column;
704
748
  align-items: flex-start;
@@ -711,24 +755,20 @@ $imagePositions: (
711
755
  display: flex;
712
756
  gap: 48px;
713
757
  margin-left: 32px;
714
-
715
758
  .quota__dtls {
716
759
  display: flex;
717
760
  align-items: center;
718
761
  gap: 8px;
719
-
720
762
  .quota__name {
721
763
  display: flex;
722
764
  flex-direction: column;
723
765
  // align-items: center;
724
766
  gap: 12px;
725
767
  }
726
-
727
768
  .quota__balance {
728
769
  display: flex;
729
770
  gap: 5px;
730
771
  }
731
-
732
772
  .back_slash {
733
773
  color: var(--_gray-300);
734
774
  position: relative;
@@ -736,15 +776,12 @@ $imagePositions: (
736
776
  }
737
777
  }
738
778
  }
739
-
740
779
  &[data-display-type="Horizontal"] {
741
780
  flex-direction: row;
742
-
743
781
  .user__element__item {
744
782
  width: 100%;
745
783
  flex-grow: 1;
746
784
  }
747
-
748
785
  .user__element__item {
749
786
  min-width: 200px;
750
787
  }
@@ -778,7 +815,8 @@ $imagePositions: (
778
815
  border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
779
816
  border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
780
817
  border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
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);
818
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
819
+ var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
782
820
  gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
783
821
 
784
822
  padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg);
@@ -789,27 +827,22 @@ $imagePositions: (
789
827
  // Keeps the avatar and the trailing icon on the name's centre line instead of
790
828
  // stretching them to the row height.
791
829
  align-items: center;
792
-
793
830
  &[data-has-link="true"] {
794
831
  cursor: pointer;
795
-
796
832
  &:hover {
797
833
  color: var(--_primary-500);
798
834
  }
799
835
  }
800
-
801
836
  .user_elements_user_name {
802
837
  display: flex;
803
838
  color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
804
839
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
805
840
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-wp);
806
841
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-wd-bk);
807
-
808
842
  &.flex__overflow {
809
843
  white-space: normal;
810
844
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
811
845
  }
812
-
813
846
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
814
847
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
815
848
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
@@ -834,8 +867,10 @@ $imagePositions: (
834
867
  border-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-se);
835
868
  border-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-wh);
836
869
  border-radius: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-rs);
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
-
870
+ box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae)
871
+ prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br)
872
+ prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd)
873
+ prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr);
839
874
  // Which part of the picture survives the crop to the configured box. The
840
875
  // control stores the image element's compass values, so they are mapped to
841
876
  // their CSS equivalents here.
@@ -862,11 +897,9 @@ $imagePositions: (
862
897
 
863
898
  .icon {
864
899
  cursor: pointer;
865
-
866
900
  svg {
867
901
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
868
902
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
869
-
870
903
  path {
871
904
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
872
905
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -896,12 +929,10 @@ $imagePositions: (
896
929
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
897
930
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-wp);
898
931
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-wd-bk);
899
-
900
932
  &.flex__overflow {
901
933
  white-space: normal;
902
934
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
903
935
  }
904
-
905
936
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
906
937
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
907
938
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
@@ -913,11 +944,9 @@ $imagePositions: (
913
944
 
914
945
  .icon {
915
946
  cursor: pointer;
916
-
917
947
  svg {
918
948
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
919
949
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
920
-
921
950
  path {
922
951
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
923
952
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -936,12 +965,10 @@ $imagePositions: (
936
965
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
937
966
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-wp);
938
967
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-wd-bk);
939
-
940
968
  &.flex__overflow {
941
969
  white-space: normal;
942
970
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
943
971
  }
944
-
945
972
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
946
973
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
947
974
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
@@ -953,11 +980,9 @@ $imagePositions: (
953
980
 
954
981
  .icon {
955
982
  cursor: pointer;
956
-
957
983
  svg {
958
984
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
959
985
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
960
-
961
986
  path {
962
987
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
963
988
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -976,12 +1001,10 @@ $imagePositions: (
976
1001
  font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
977
1002
  word-wrap: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-wp);
978
1003
  word-break: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-wd-bk);
979
-
980
1004
  &.flex__overflow {
981
1005
  white-space: normal;
982
1006
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
983
1007
  }
984
-
985
1008
  font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
986
1009
  font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
987
1010
  font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
@@ -993,11 +1016,9 @@ $imagePositions: (
993
1016
 
994
1017
  .icon {
995
1018
  cursor: pointer;
996
-
997
1019
  svg {
998
1020
  width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
999
1021
  height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
1000
-
1001
1022
  path {
1002
1023
  stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
1003
1024
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -1008,11 +1029,9 @@ $imagePositions: (
1008
1029
  }
1009
1030
  }
1010
1031
  }
1011
-
1012
1032
  .child {
1013
1033
  position: relative;
1014
1034
  }
1015
-
1016
1035
  &[data-show-divider="true"] {
1017
1036
  .child:not(:last-child)::after {
1018
1037
  content: "";
@@ -1038,7 +1057,6 @@ $imagePositions: (
1038
1057
  margin-block: 0;
1039
1058
  border-radius: 0;
1040
1059
  }
1041
-
1042
1060
  // .user_elements_user_name_wrapper {
1043
1061
  // width: 100%;
1044
1062
  // position: relative;
@@ -1081,13 +1099,23 @@ $imagePositions: (
1081
1099
  border-radius: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
1082
1100
  border-style: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
1083
1101
  border-width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
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);
1102
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
1103
+ var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
1085
1104
  gap: prepareMediaVariable(--_ctm-lt-qa-dn-sg);
1086
-
1087
1105
  .quota_label_wrapper {
1088
1106
  display: flex;
1089
1107
  flex-direction: column;
1090
1108
  min-width: 109px;
1109
+
1110
+ // Heading font size must not size the dropdown.
1111
+ // This wrapper is a flex column, so its width comes from its widest child — the
1112
+ // heading — and a stretched dropdown grew with it every time the heading's font
1113
+ // size went up. Size the dropdown to its own content and cap it at the wrapper so
1114
+ // a long profile name still cannot overflow.
1115
+ .language__conatiner {
1116
+ align-self: flex-start;
1117
+ max-width: 100%;
1118
+ }
1091
1119
  gap: 4px;
1092
1120
 
1093
1121
  .quota_label {
@@ -1098,12 +1126,10 @@ $imagePositions: (
1098
1126
  text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-tm);
1099
1127
  word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-wp);
1100
1128
  word-break: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-wd-bk);
1101
-
1102
1129
  &.flex__overflow {
1103
1130
  white-space: normal;
1104
1131
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1105
1132
  }
1106
-
1107
1133
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
1108
1134
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
1109
1135
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
@@ -1112,7 +1138,6 @@ $imagePositions: (
1112
1138
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
1113
1139
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ue);
1114
1140
  }
1115
-
1116
1141
  .quota_single_profile_name {
1117
1142
  display: flex;
1118
1143
  align-items: center;
@@ -1122,12 +1147,6 @@ $imagePositions: (
1122
1147
  text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm);
1123
1148
  word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp);
1124
1149
  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
-
1131
1150
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
1132
1151
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
1133
1152
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
@@ -1139,7 +1158,6 @@ $imagePositions: (
1139
1158
  }
1140
1159
 
1141
1160
  .quote_item_wrapper {
1142
-
1143
1161
  // Set only on the storefront, where clicking a quota row selects that
1144
1162
  // allocation and its profile. Builder/preview rows are dummy data.
1145
1163
  &[data-is-clickable="true"] {
@@ -1154,10 +1172,14 @@ $imagePositions: (
1154
1172
  display: flex;
1155
1173
  gap: 12px;
1156
1174
  justify-content: space-between;
1157
-
1175
+ // Flex items default to min-width:auto and refuse to shrink below their text,
1176
+ // so a long quota name pushed the row out of the widget instead of wrapping
1177
+ // inside it.
1178
+ min-width: 0;
1158
1179
  .quota_name_wrapper {
1159
1180
  display: flex;
1160
1181
  flex-direction: column;
1182
+ min-width: 0;
1161
1183
  // gap: 6px;
1162
1184
 
1163
1185
  .quota_name {
@@ -1168,12 +1190,6 @@ $imagePositions: (
1168
1190
  text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-tm);
1169
1191
  word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-wd-wp);
1170
1192
  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
-
1177
1193
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
1178
1194
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
1179
1195
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
@@ -1191,12 +1207,6 @@ $imagePositions: (
1191
1207
  text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-tt-tm);
1192
1208
  word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-wd-wp);
1193
1209
  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
-
1200
1210
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
1201
1211
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
1202
1212
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
@@ -1209,8 +1219,8 @@ $imagePositions: (
1209
1219
 
1210
1220
  .quota_inventory_parent {
1211
1221
  display: flex;
1222
+ min-width: 0;
1212
1223
  }
1213
-
1214
1224
  .hilighted {
1215
1225
  color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-cr);
1216
1226
  font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ft-fy);
@@ -1225,7 +1235,6 @@ $imagePositions: (
1225
1235
  text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-tt-an);
1226
1236
  text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hd-dn-ue);
1227
1237
  }
1228
-
1229
1238
  .quota_inventory {
1230
1239
  display: flex;
1231
1240
  justify-content: center;
@@ -1236,12 +1245,6 @@ $imagePositions: (
1236
1245
  text-transform: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-tt-tm);
1237
1246
  word-wrap: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-wd-wp);
1238
1247
  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
-
1245
1248
  font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
1246
1249
  font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
1247
1250
  font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
@@ -1275,13 +1278,11 @@ $imagePositions: (
1275
1278
  height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1276
1279
  background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
1277
1280
  }
1278
-
1279
1281
  &[data-content-alignment="Vertical"] {
1280
1282
  .quota_label_wrapper {
1281
1283
  width: 100%;
1282
1284
  position: relative;
1283
1285
  @include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
1284
-
1285
1286
  &::after {
1286
1287
  content: "";
1287
1288
  position: absolute;
@@ -1316,7 +1317,6 @@ $imagePositions: (
1316
1317
  }
1317
1318
  }
1318
1319
  }
1319
-
1320
1320
  .quote_vertical_scroll_wrapper {
1321
1321
  overflow-y: auto;
1322
1322
  gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
@@ -1347,13 +1347,23 @@ $imagePositions: (
1347
1347
  border-radius: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1348
1348
  border-style: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1349
1349
  border-width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
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);
1350
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1351
+ var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1351
1352
  gap: prepareMediaVariable(--_ctm-lt-ae-dn-sg);
1352
-
1353
1353
  .allowance_label_wrapper {
1354
1354
  display: flex;
1355
1355
  flex-direction: column;
1356
1356
  min-width: 109px;
1357
+
1358
+ // Heading font size must not size the dropdown.
1359
+ // This wrapper is a flex column, so its width comes from its widest child — the
1360
+ // heading — and a stretched dropdown grew with it every time the heading's font
1361
+ // size went up. Size the dropdown to its own content and cap it at the wrapper so
1362
+ // a long profile name still cannot overflow.
1363
+ .language__conatiner {
1364
+ align-self: flex-start;
1365
+ max-width: 100%;
1366
+ }
1357
1367
  // align-items: center;
1358
1368
  gap: 4px;
1359
1369
 
@@ -1366,12 +1376,10 @@ $imagePositions: (
1366
1376
  text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-tt-tm);
1367
1377
  word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-wp);
1368
1378
  word-break: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-wd-bk);
1369
-
1370
1379
  &.flex__overflow {
1371
1380
  white-space: normal;
1372
1381
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1373
1382
  }
1374
-
1375
1383
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1376
1384
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1377
1385
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
@@ -1390,12 +1398,6 @@ $imagePositions: (
1390
1398
  text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm);
1391
1399
  word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp);
1392
1400
  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
-
1399
1401
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1400
1402
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1401
1403
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
@@ -1420,10 +1422,13 @@ $imagePositions: (
1420
1422
  .allowance_info_wrapper {
1421
1423
  display: flex;
1422
1424
  gap: 12px;
1423
-
1425
+ // Same as the quota rows: without this the name refuses to shrink and
1426
+ // overflows the widget.
1427
+ min-width: 0;
1424
1428
  .allowance_name_wrapper {
1425
1429
  display: flex;
1426
1430
  flex-direction: column;
1431
+ min-width: 0;
1427
1432
  gap: 6px;
1428
1433
 
1429
1434
  .allowance_name {
@@ -1434,12 +1439,6 @@ $imagePositions: (
1434
1439
  text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-tm);
1435
1440
  word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-wd-wp);
1436
1441
  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
-
1443
1442
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1444
1443
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1445
1444
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
@@ -1457,12 +1456,6 @@ $imagePositions: (
1457
1456
  text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-tt-tm);
1458
1457
  word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-wd-wp);
1459
1458
  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
-
1466
1459
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
1467
1460
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
1468
1461
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
@@ -1482,12 +1475,6 @@ $imagePositions: (
1482
1475
  text-transform: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-tt-tm);
1483
1476
  word-wrap: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-wd-wp);
1484
1477
  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
-
1491
1478
  font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
1492
1479
  font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
1493
1480
  font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
@@ -1498,7 +1485,6 @@ $imagePositions: (
1498
1485
  }
1499
1486
  }
1500
1487
  }
1501
-
1502
1488
  &[data-show-divider="true"] {
1503
1489
  .allowance_item_wrapper:not(:last-child) {
1504
1490
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
@@ -1514,14 +1500,12 @@ $imagePositions: (
1514
1500
  height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1515
1501
  background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
1516
1502
  }
1517
-
1518
1503
  &[data-content-alignment="Vertical"] {
1519
1504
  .allowance_label_wrapper {
1520
1505
  width: 100%;
1521
1506
  position: relative;
1522
1507
  gap: 10px;
1523
1508
  @include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
1524
-
1525
1509
  &::after {
1526
1510
  content: "";
1527
1511
  position: absolute;
@@ -1577,7 +1561,9 @@ $imagePositions: (
1577
1561
  border-radius: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1578
1562
  border-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1579
1563
  border-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
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);
1564
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1565
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1566
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1581
1567
  gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1582
1568
 
1583
1569
  .secondary_vertical_scroll_wrapper {
@@ -1636,7 +1622,6 @@ $imagePositions: (
1636
1622
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1637
1623
  }
1638
1624
  }
1639
-
1640
1625
  .value {
1641
1626
  color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1642
1627
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1674,7 +1659,6 @@ $imagePositions: (
1674
1659
  display: flex;
1675
1660
  gap: 6px;
1676
1661
  justify-content: right;
1677
-
1678
1662
  .remaining_order {
1679
1663
  color: #243dc6;
1680
1664
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1702,7 +1686,6 @@ $imagePositions: (
1702
1686
  .payment_wrapper {
1703
1687
  display: flex;
1704
1688
  gap: 6px;
1705
-
1706
1689
  .remaining_payment {
1707
1690
  color: #243dc6;
1708
1691
  font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
@@ -1736,24 +1719,41 @@ $imagePositions: (
1736
1719
  position: relative;
1737
1720
  display: inline-block;
1738
1721
  flex-shrink: 0;
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)));
1722
+ width: var(
1723
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1724
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1725
+ );
1726
+ height: var(
1727
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1728
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1729
+ );
1743
1730
  margin-right: 6px;
1744
-
1745
1731
  .cart__quantity {
1746
1732
  position: absolute;
1747
1733
  top: -4px;
1748
1734
  right: -6px;
1749
1735
  border-radius: 50px;
1750
1736
 
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);
1737
+ min-width: calc(
1738
+ var(
1739
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1740
+ var(
1741
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1742
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1743
+ )
1744
+ ) *
1745
+ 0.5
1746
+ );
1747
+ height: calc(
1748
+ var(
1749
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1750
+ var(
1751
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1752
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1753
+ )
1754
+ ) *
1755
+ 0.5
1756
+ );
1757
1757
  width: auto;
1758
1758
  padding-inline: 4px;
1759
1759
  box-sizing: border-box;
@@ -1763,7 +1763,6 @@ $imagePositions: (
1763
1763
  justify-content: center;
1764
1764
  white-space: nowrap;
1765
1765
  }
1766
-
1767
1766
  // .cart__quantity {
1768
1767
  // position: absolute;
1769
1768
  // top: 0;
@@ -1789,84 +1788,149 @@ $imagePositions: (
1789
1788
  // }
1790
1789
 
1791
1790
  .cart__quantity {
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))));
1791
+ background-color: var(
1792
+ --_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
+
1796
+ border-color: var(
1797
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1798
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr))
1799
+ );
1800
+
1801
+ border-style: var(
1802
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1803
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se))
1804
+ );
1805
+
1806
+ border-width: var(
1807
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1808
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh))
1809
+ );
1810
+
1811
+ border-radius: var(
1812
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1813
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs))
1814
+ );
1815
+
1816
+ box-shadow: var(
1817
+ --_show-shadow,
1818
+ var(
1819
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1820
+ var(
1821
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1822
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae)
1823
+ )
1824
+ )
1825
+ var(
1826
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1827
+ var(
1828
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1829
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br)
1830
+ )
1831
+ )
1832
+ var(
1833
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1834
+ var(
1835
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1836
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd)
1837
+ )
1838
+ )
1839
+ var(
1840
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1841
+ var(
1842
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1843
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr)
1844
+ )
1845
+ )
1846
+ );
1817
1847
  white-space: nowrap;
1818
1848
  line-height: 1;
1819
1849
  width: auto;
1820
1850
  padding-inline: 4px;
1821
1851
  box-sizing: border-box;
1822
1852
 
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);
1853
+ color: var(
1854
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1855
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr))
1856
+ );
1857
+ font-family: var(
1858
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1859
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy))
1860
+ );
1861
+ text-transform: var(
1862
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-tm,
1863
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-tm, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-tm))
1864
+ );
1865
+ word-wrap: var(
1866
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-wp,
1867
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-wp, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-wp))
1868
+ );
1869
+ word-break: var(
1870
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-wd-bk,
1871
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-wd-bk, var(--_ctm-dn-ur-sy-io-dn-ct-ct-wd-bk))
1872
+ );
1873
+ font-size: calc(
1874
+ var(
1875
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1876
+ var(
1877
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1878
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1879
+ )
1880
+ ) /
1881
+ 3
1882
+ );
1836
1883
  // font-size: var(
1837
1884
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se,
1838
1885
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se))
1839
1886
  // );
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)));
1887
+ font-weight: var(
1888
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1889
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt))
1890
+ );
1891
+ font-style: var(
1892
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1893
+ var(
1894
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1895
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)
1896
+ )
1897
+ );
1898
+ text-align: var(
1899
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1900
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an))
1901
+ );
1902
+ letter-spacing: var(
1903
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1904
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg))
1905
+ );
1849
1906
  // line-height: var(
1850
1907
  // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht,
1851
1908
  // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht))
1852
1909
  // );
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)));
1910
+ text-decoration: var(
1911
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1912
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue))
1913
+ );
1855
1914
  }
1856
-
1857
1915
  .cart__icon {
1858
1916
  display: var(--_sf-show-icon-ff, flex);
1859
-
1860
1917
  svg {
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
-
1918
+ width: var(
1919
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1920
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1921
+ );
1922
+ height: var(
1923
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1924
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1925
+ );
1866
1926
  path {
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)));
1927
+ stroke: var(
1928
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1929
+ var(
1930
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1931
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)
1932
+ )
1933
+ );
1870
1934
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1871
1935
  stroke-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-in-se-wh, 1.25);
1872
1936
  }
@@ -1878,91 +1942,113 @@ $imagePositions: (
1878
1942
  .child {
1879
1943
  position: relative;
1880
1944
  }
1881
-
1882
1945
  &[data-show-divider="true"] {
1883
1946
  .child:not(:last-child) {
1884
1947
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1885
1948
  }
1886
-
1887
1949
  .child:not(:last-child)::before {
1888
1950
  content: "";
1889
1951
  position: absolute;
1890
1952
  left: 0;
1891
1953
  right: 0;
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)));
1954
+ bottom: dividerGapOffset(
1955
+ --_ctm-lt-ur-io-sy-im-sg,
1956
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
1957
+ );
1958
+
1959
+ height: var(
1960
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1961
+ var(
1962
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1963
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1964
+ )
1965
+ );
1966
+ background-color: var(
1967
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1968
+ var(
1969
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1970
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1971
+ )
1972
+ );
1901
1973
  }
1902
-
1903
1974
  &[data-content-alignment="Horizontal"] {
1904
-
1905
1975
  // Side by side, so the thickness has to be reserved horizontally instead.
1906
1976
  .child:not(:last-child) {
1907
1977
  margin-bottom: 0;
1908
1978
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt, right);
1909
1979
  }
1910
-
1911
1980
  .child:not(:last-child)::before {
1912
- right: dividerGapOffset(--_ctm-lt-ur-io-sy-im-sg,
1913
- --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1981
+ right: dividerGapOffset(
1982
+ --_ctm-lt-ur-io-sy-im-sg,
1983
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
1984
+ );
1914
1985
  bottom: unset;
1915
1986
  top: 0;
1916
1987
 
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)));
1988
+ width: var(
1989
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1990
+ var(
1991
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1992
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1993
+ )
1994
+ );
1920
1995
  height: 100%;
1921
1996
  left: unset;
1922
1997
  }
1923
-
1924
1998
  @media (max-width: 768px) {
1925
-
1926
1999
  // Back to stacked below the breakpoint, so the reserve goes back under the item.
1927
2000
  .child:not(:last-child) {
1928
2001
  margin-right: 0;
1929
2002
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1930
2003
  }
1931
-
1932
2004
  .child:not(:last-child)::before {
1933
2005
  top: unset;
1934
2006
  left: 0;
1935
2007
  right: 0;
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)));
2008
+ bottom: dividerGapOffset(
2009
+ --_ctm-lt-ur-io-sy-im-sg,
2010
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
2011
+ );
2012
+ height: var(
2013
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
2014
+ var(
2015
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
2016
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
2017
+ )
2018
+ );
1941
2019
  width: unset;
1942
2020
  }
1943
2021
  }
1944
2022
  }
1945
-
1946
2023
  &[data-content-alignment="Vertical"] {
1947
2024
  .secondary_label_wrapper {
1948
2025
  width: 100%;
1949
2026
  position: relative;
1950
2027
  @include dividerGapReserve(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt);
1951
-
1952
2028
  &::after {
1953
2029
  content: "";
1954
2030
  position: absolute;
1955
2031
  left: 0;
1956
2032
  right: 0;
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)));
2033
+ bottom: dividerGapOffset(
2034
+ --_ctm-lt-ur-io-sy-im-sg,
2035
+ --_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt
2036
+ );
2037
+ height: var(
2038
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
2039
+ var(
2040
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
2041
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
2042
+ )
2043
+ );
2044
+
2045
+ background-color: var(
2046
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
2047
+ var(
2048
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
2049
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
2050
+ )
2051
+ );
1966
2052
  }
1967
2053
  }
1968
2054
  }
@@ -1978,8 +2064,7 @@ $imagePositions: (
1978
2064
  justify-content: space-between;
1979
2065
  padding-right: 16px;
1980
2066
  }
1981
-
1982
- .active_orders_wrapper>* {
2067
+ .active_orders_wrapper > * {
1983
2068
  box-sizing: border-box;
1984
2069
  width: 100%;
1985
2070
  // line-height: 125%;
@@ -1994,7 +2079,6 @@ $imagePositions: (
1994
2079
  flex-direction: row;
1995
2080
  align-items: start;
1996
2081
  }
1997
-
1998
2082
  .my_cart_container {
1999
2083
  display: flex;
2000
2084
  align-items: center;
@@ -2004,7 +2088,6 @@ $imagePositions: (
2004
2088
  .popover-container {
2005
2089
  position: relative;
2006
2090
  display: inline-block;
2007
-
2008
2091
  .popover-trigger {
2009
2092
  cursor: pointer;
2010
2093
  font-weight: 500;
@@ -2040,30 +2123,55 @@ $imagePositions: (
2040
2123
 
2041
2124
  // width: 100%;
2042
2125
  gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
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)));
2126
+ background-color: var(
2127
+ --_ctm-mob-dn-pr-se-bd-cr,
2128
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2129
+ );
2130
+
2131
+ border-color: var(
2132
+ --_ctm-mob-dn-pr-se-br-cr,
2133
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2134
+ );
2135
+
2136
+ border-style: var(
2137
+ --_ctm-mob-dn-pr-se-br-se,
2138
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2139
+ );
2140
+
2141
+ border-width: var(
2142
+ --_ctm-mob-dn-pr-se-br-wh,
2143
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2144
+ );
2145
+
2146
+ border-radius: var(
2147
+ --_ctm-mob-dn-pr-se-br-rs,
2148
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2149
+ );
2150
+
2151
+ box-shadow: var(
2152
+ --_show-shadow,
2153
+ var(
2154
+ --_ctm-mob-dn-pr-se-sw-ae,
2155
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2156
+ )
2157
+ var(
2158
+ --_ctm-mob-dn-pr-se-sw-br,
2159
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2160
+ )
2161
+ var(
2162
+ --_ctm-mob-dn-pr-se-sw-sd,
2163
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2164
+ )
2165
+ var(
2166
+ --_ctm-mob-dn-pr-se-sw-cr,
2167
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2168
+ )
2169
+ );
2170
+
2171
+ padding: var(
2172
+ --_ctm-mob-dn-pr-se-pg,
2173
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2174
+ );
2067
2175
  }
2068
2176
 
2069
2177
  .popover-box strong {
@@ -2083,36 +2191,63 @@ $imagePositions: (
2083
2191
  // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2084
2192
  // );
2085
2193
  transform: rotate(-45deg);
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)));
2194
+ box-shadow: -1px -1px 0px
2195
+ var(
2196
+ --_ctm-mob-dn-pr-se-br-cr,
2197
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2198
+ );
2088
2199
  }
2089
2200
 
2090
2201
  .popover_item {
2091
2202
  // padding-inline: var(--_sf-cd-gp);
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)));
2203
+ color: var(
2204
+ --_ctm-mob-dn-pr-se-cr,
2205
+ var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))
2206
+ );
2207
+ font-family: var(
2208
+ --_ctm-mob-dn-pr-se-ft-fy,
2209
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2210
+ );
2211
+ text-transform: var(
2212
+ --_ctm-mob-dn-pr-se-tt-tm,
2213
+ var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm))
2214
+ );
2215
+ word-wrap: var(
2216
+ --_ctm-mob-dn-pr-se-wd-wp,
2217
+ var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp))
2218
+ );
2219
+ word-break: var(
2220
+ --_ctm-mob-dn-pr-se-wd-bk,
2221
+ var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk))
2222
+ );
2223
+ font-size: var(
2224
+ --_ctm-mob-dn-pr-se-ft-se,
2225
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2226
+ );
2227
+ font-weight: var(
2228
+ --_ctm-mob-dn-pr-se-ft-wt,
2229
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2230
+ );
2231
+ font-style: var(
2232
+ --_ctm-mob-dn-pr-se-ft-se-ic,
2233
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2234
+ );
2235
+ text-align: var(
2236
+ --_ctm-mob-dn-pr-se-tt-an,
2237
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2238
+ );
2239
+ letter-spacing: var(
2240
+ --_ctm-mob-dn-pr-se-lr-sg,
2241
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2242
+ );
2243
+ line-height: var(
2244
+ --_ctm-mob-dn-pr-se-le-ht,
2245
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2246
+ );
2247
+ text-decoration: var(
2248
+ --_ctm-mob-dn-pr-se-ue,
2249
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2250
+ );
2116
2251
  // margin-left: 10px;
2117
2252
  }
2118
2253
  }
@@ -2122,14 +2257,20 @@ $imagePositions: (
2122
2257
  // for dropdown
2123
2258
 
2124
2259
  .language__conatiner {
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)));
2260
+ background-color: var(
2261
+ --_ctm-mob-dn-dn-se-wt-se-bd-cr,
2262
+ var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr))
2263
+ );
2127
2264
 
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)));
2265
+ border-color: var(
2266
+ --_ctm-mob-dn-dn-se-wt-se-br-cr,
2267
+ var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2268
+ );
2130
2269
 
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)));
2270
+ border-style: var(
2271
+ --_ctm-mob-dn-dn-se-wt-se-br-se,
2272
+ var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
2273
+ );
2133
2274
 
2134
2275
  // The tablet name carried a doubled `dn-se-`, so tablet fell through to desktop.
2135
2276
  border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh);
@@ -2140,15 +2281,30 @@ $imagePositions: (
2140
2281
  // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2141
2282
  // );
2142
2283
 
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))));
2284
+ border-radius: var(
2285
+ --_ctm-mob-dn-dn-se-wt-se-br-rs,
2286
+ var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs))
2287
+ );
2288
+
2289
+ box-shadow: var(
2290
+ --_show-shadow,
2291
+ var(
2292
+ --_ctm-mob-dn-dn-se-wt-se-sw-ae,
2293
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))
2294
+ )
2295
+ var(
2296
+ --_ctm-mob-dn-dn-se-wt-se-sw-br,
2297
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))
2298
+ )
2299
+ var(
2300
+ --_ctm-mob-dn-dn-se-wt-se-sw-sd,
2301
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))
2302
+ )
2303
+ var(
2304
+ --_ctm-mob-dn-dn-se-wt-se-sw-cr,
2305
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))
2306
+ )
2307
+ );
2152
2308
 
2153
2309
  // gap: var(
2154
2310
  // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg,
@@ -2158,110 +2314,200 @@ $imagePositions: (
2158
2314
 
2159
2315
  .option:hover {
2160
2316
  --_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm);
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)));
2317
+ --_sf-hr-bd-cr: var(
2318
+ --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
2319
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
2320
+ );
2321
+ --_sf-hr-br-cr: var(
2322
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
2323
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
2324
+ );
2325
+ --_sf-hr-br-se: var(
2326
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
2327
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
2328
+ );
2329
+ --_sf-hr-br-wh: var(
2330
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
2331
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
2332
+ );
2333
+ --_sf-hr-br-rs: var(
2334
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2335
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
2336
+ );
2337
+ --_sf-hr-pg: var(
2338
+ --_ctm-mob-dn-dn-se-im-se-hr-se-pg,
2339
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
2340
+ );
2173
2341
  // for shadow
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)));
2342
+ --_sf-hr-sw-ae: var(
2343
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2344
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
2345
+ );
2346
+ --_sf-hr-sw-br: var(
2347
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2348
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
2349
+ );
2350
+ --_sf-hr-sw-hr: var(
2351
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2352
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr))
2353
+ );
2354
+ --_sf-hr-sw-cr: var(
2355
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2356
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
2357
+ );
2182
2358
 
2183
2359
  // for font
2184
2360
 
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)));
2361
+ --_sf-hr-cr: var(
2362
+ --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2363
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
2364
+ );
2365
+ --_sf-hr-ft-fy: var(
2366
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2367
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
2368
+ );
2369
+ --_sf-hr-tt-tm: var(
2370
+ --_ctm-mob-dn-dn-se-im-se-hr-se-tt-tm,
2371
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-tm, var(--_ctm-dn-dn-se-im-se-hr-se-tt-tm))
2372
+ );
2373
+ --_sf-hr-wd-wp: var(
2374
+ --_ctm-mob-dn-dn-se-im-se-hr-se-wd-wp,
2375
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-wp, var(--_ctm-dn-dn-se-im-se-hr-se-wd-wp))
2376
+ );
2377
+ --_sf-hr-wd-bk: var(
2378
+ --_ctm-mob-dn-dn-se-im-se-hr-se-wd-bk,
2379
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-wd-bk, var(--_ctm-dn-dn-se-im-se-hr-se-wd-bk))
2380
+ );
2381
+ --_sf-hr-ft-se: var(
2382
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2383
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
2384
+ );
2385
+ --_sf-hr-ft-wt: var(
2386
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2387
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
2388
+ );
2389
+ --_sf-hr-ft-se-ic: var(
2390
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2391
+ 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))
2392
+ );
2393
+ --_sf-hr-tt-an: var(
2394
+ --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2395
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
2396
+ );
2397
+ --_sf-hr-lr-sg: var(
2398
+ --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2399
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
2400
+ );
2401
+ --_sf-hr-le-ht: var(
2402
+ --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2403
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
2404
+ );
2405
+
2406
+ --_sf-hr-ue: var(
2407
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2408
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
2409
+ );
2210
2410
  }
2211
2411
 
2212
2412
  .option[data-selected="true"] {
2213
2413
  --_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm);
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)));
2414
+ --_sf-sd-bd-cr: var(
2415
+ --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2416
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
2417
+ );
2418
+ --_sf-sd-br-cr: var(
2419
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2420
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
2421
+ );
2422
+ --_sf-sd-br-se: var(
2423
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2424
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
2425
+ );
2426
+ --_sf-sd-br-rs: var(
2427
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-rs,
2428
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-dn-dn-se-im-se-sd-se-br-rs))
2429
+ );
2430
+ --_sf-sd-br-wh: var(
2431
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2432
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
2433
+ );
2224
2434
  // new
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)));
2435
+ --_sf-sd-sw-ae: var(
2436
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2437
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
2438
+ );
2439
+ --_sf-sd-sw-br: var(
2440
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2441
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
2442
+ );
2443
+ --_sf-sd-sw-sd: var(
2444
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2445
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
2446
+ );
2447
+ --_sf-sd-sw-cr: var(
2448
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2449
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
2450
+ );
2451
+ --_sf-sd-pg: var(
2452
+ --_ctm-mob-dn-dn-se-im-se-sd-se-pg,
2453
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg))
2454
+ );
2455
+ --_sf-sd-im-gp: var(
2456
+ --_ctm-mob-dn-dn-se-im-se-sd-se-im-gp,
2457
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-dn-dn-se-im-se-sd-se-im-gp))
2458
+ );
2237
2459
 
2238
2460
  // for font
2239
2461
 
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)));
2462
+ --_sf-sd-cr: var(
2463
+ --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2464
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
2465
+ );
2466
+ --_sf-sd-ft-fy: var(
2467
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2468
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
2469
+ );
2470
+ --_sf-sd-tt-tm: var(
2471
+ --_ctm-mob-dn-dn-se-im-se-sd-se-tt-tm,
2472
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-tm, var(--_ctm-dn-dn-se-im-se-sd-se-tt-tm))
2473
+ );
2474
+ --_sf-sd-wd-wp: var(
2475
+ --_ctm-mob-dn-dn-se-im-se-sd-se-wd-wp,
2476
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-wp, var(--_ctm-dn-dn-se-im-se-sd-se-wd-wp))
2477
+ );
2478
+ --_sf-sd-wd-bk: var(
2479
+ --_ctm-mob-dn-dn-se-im-se-sd-se-wd-bk,
2480
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-wd-bk, var(--_ctm-dn-dn-se-im-se-sd-se-wd-bk))
2481
+ );
2482
+ --_sf-sd-ft-se: var(
2483
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2484
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
2485
+ );
2486
+ --_sf-sd-ft-wt: var(
2487
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2488
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
2489
+ );
2490
+ --_sf-sd-ft-se-ic: var(
2491
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2492
+ 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))
2493
+ );
2494
+ --_sf-sd-tt-an: var(
2495
+ --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2496
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
2497
+ );
2498
+ --_sf-sd-lr-sg: var(
2499
+ --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2500
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
2501
+ );
2502
+ --_sf-sd-le-ht: var(
2503
+ --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2504
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
2505
+ );
2506
+
2507
+ --_sf-sd-ue: var(
2508
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2509
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
2510
+ );
2265
2511
  }
2266
2512
 
2267
2513
  .option {
@@ -2269,8 +2515,10 @@ $imagePositions: (
2269
2515
  display: flex;
2270
2516
  align-items: center;
2271
2517
  cursor: pointer;
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)));
2518
+ justify-content: var(
2519
+ --_ctm-mob-dn-dn-se-lt-ss-at,
2520
+ var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at))
2521
+ );
2274
2522
 
2275
2523
  position: relative;
2276
2524
  box-sizing: border-box;
@@ -2280,57 +2528,86 @@ $imagePositions: (
2280
2528
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
2281
2529
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2282
2530
 
2283
- background-color: var(--_sf-hr-bd-cr,
2284
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr));
2531
+ background-color: var(
2532
+ --_sf-hr-bd-cr,
2533
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2534
+ );
2285
2535
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2286
2536
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2287
2537
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2288
2538
 
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
-
2539
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2540
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2541
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2542
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2291
2543
  //
2292
2544
  &[data-selected="true"] {
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
-
2545
+ border-color: var(
2546
+ --_sf-sd-br-cr,
2547
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
2548
+ );
2549
+
2550
+ background-color: var(
2551
+ --_sf-sd-bd-cr,
2552
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2553
+ );
2554
+ border-style: var(
2555
+ --_sf-sd-br-se,
2556
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
2557
+ );
2558
+ border-width: var(
2559
+ --_sf-sd-br-wh,
2560
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
2561
+ );
2562
+ border-radius: var(
2563
+ --_sf-sd-br-rs,
2564
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
2565
+ );
2566
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2567
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2568
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2569
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2306
2570
  .language__name {
2307
2571
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2308
- font-family: var(--_sf-sd-ft-fy,
2309
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
2572
+ font-family: var(
2573
+ --_sf-sd-ft-fy,
2574
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
2575
+ );
2310
2576
  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));
2577
+ word-break: var(
2578
+ --_sf-sd-wd-bk,
2579
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk)
2580
+ );
2313
2581
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2314
2582
  font-weight: 400;
2315
2583
  // font-weight: var(
2316
2584
  // --_sf-sd-ft-wt,
2317
2585
  // prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
2318
2586
  // );
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));
2587
+ font-style: var(
2588
+ --_sf-sd-ft-se-ic,
2589
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2590
+ );
2591
+ text-align: var(
2592
+ --_sf-sd-tt-an,
2593
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
2594
+ );
2595
+ letter-spacing: var(
2596
+ --_sf-sd-lr-sg,
2597
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2598
+ );
2599
+ line-height: var(
2600
+ --_sf-sd-le-ht,
2601
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2602
+ );
2327
2603
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2328
- text-transform: var(--_sf-sd-txt-tr,
2329
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2604
+ text-transform: var(
2605
+ --_sf-sd-txt-tr,
2606
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2607
+ );
2330
2608
  }
2331
2609
  }
2332
2610
  }
2333
-
2334
2611
  &[data-flex-direction="column"] {
2335
2612
  .language__name {
2336
2613
  // white-space: unset;
@@ -2340,11 +2617,9 @@ $imagePositions: (
2340
2617
  text-overflow: ellipsis;
2341
2618
  }
2342
2619
  }
2343
-
2344
2620
  &[data-flex-direction="row"] {
2345
2621
  overflow-x: auto;
2346
2622
  }
2347
-
2348
2623
  // Both offsets used to be measured off `--_ctm-dn-dn-se-lt-ss-gp-bn-is`, which
2349
2624
  // belongs to the commented-out `dropdownStyle.layoutSettings` and is therefore
2350
2625
  // never emitted. The calc was invalid, so the divider never positioned at all.
@@ -2359,16 +2634,12 @@ $imagePositions: (
2359
2634
  content: "";
2360
2635
  position: absolute;
2361
2636
  top: 0;
2362
- bottom: 0;
2363
- /* For full height divider */
2637
+ bottom: 0; /* For full height divider */
2364
2638
  right: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
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 */
2639
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt); /* Divider thickness */
2640
+ background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr); /* Divider color */
2369
2641
  }
2370
2642
  }
2371
-
2372
2643
  &[data-flex-direction="column"] {
2373
2644
  .option:not(:last-child) {
2374
2645
  @include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt);
@@ -2391,12 +2662,9 @@ $imagePositions: (
2391
2662
  display: flex;
2392
2663
  align-items: center;
2393
2664
  position: relative;
2394
-
2395
2665
  .language__name {
2396
- // Clearance for the absolutely positioned caret. It was `padding-right`,
2397
- // which the section's own padding would have had to fight with; as a margin
2398
- // the Padding control owns all four sides cleanly.
2399
- margin-right: 20px;
2666
+ // No caret clearance needed anymore: the caret is an in-flow sibling, spaced
2667
+ // by Widget Style > Item Gap.
2400
2668
  font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
2401
2669
  word-wrap: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-wp);
2402
2670
  word-break: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-wd-bk);
@@ -2425,15 +2693,21 @@ $imagePositions: (
2425
2693
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-wd-bk));
2426
2694
  font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2427
2695
  font-weight: 400;
2428
- font-style: var(--_sf-hr-ft-se-ic,
2429
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic));
2696
+ font-style: var(
2697
+ --_sf-hr-ft-se-ic,
2698
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2699
+ );
2430
2700
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2431
- letter-spacing: var(--_sf-hr-lr-sg,
2432
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg));
2701
+ letter-spacing: var(
2702
+ --_sf-hr-lr-sg,
2703
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2704
+ );
2433
2705
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
2434
2706
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2435
- text-transform: var(--_sf-hr-txt-tr,
2436
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm));
2707
+ text-transform: var(
2708
+ --_sf-hr-txt-tr,
2709
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
2710
+ );
2437
2711
  white-space: nowrap;
2438
2712
 
2439
2713
  // Item Style clamps the option label. `white-space: nowrap` above would stop
@@ -2445,35 +2719,73 @@ $imagePositions: (
2445
2719
  }
2446
2720
 
2447
2721
  //Dropdown
2448
- // The placeholder shown while nothing is selected. Widget Style's typography tab
2449
- // is labelled "Placeholder Text" and drives it none of it was read before.
2722
+ // The placeholder shown while nothing is selected. It reads the Widget Placeholder
2723
+ // Text section, the same one that styles the selected value in `.option_select
2724
+ // .language__name` — the two swap in the markup on first selection, so they have to
2725
+ // resolve identically or the text would jump. Widget Style's own typography is kept
2726
+ // only as the fallback: its Text tab has been removed from the panel, so the values
2727
+ // exist solely on pages saved while that tab was still there.
2450
2728
  .value__selected__new {
2451
2729
  width: 100%;
2452
2730
  // padding: 8px 12px;
2453
2731
  text-align: left;
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);
2457
- font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se);
2458
- color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr);
2459
- font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt);
2460
- font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic);
2461
- text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue);
2462
- text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an);
2463
- letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg);
2464
- line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht);
2465
- text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm);
2732
+ font-family: prepareMediaVariable(
2733
+ --_ctm-dn-dn-se-wt-pr-tt-ft-fy,
2734
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy)
2735
+ );
2736
+ word-wrap: prepareMediaVariable(
2737
+ --_ctm-dn-dn-se-wt-pr-tt-wd-wp,
2738
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-wp)
2739
+ );
2740
+ word-break: prepareMediaVariable(
2741
+ --_ctm-dn-dn-se-wt-pr-tt-wd-bk,
2742
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wd-bk)
2743
+ );
2744
+ font-size: prepareMediaVariable(
2745
+ --_ctm-dn-dn-se-wt-pr-tt-ft-se,
2746
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se)
2747
+ );
2748
+ color: prepareMediaVariable(
2749
+ --_ctm-dn-dn-se-wt-pr-tt-cr,
2750
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr)
2751
+ );
2752
+ font-weight: prepareMediaVariable(
2753
+ --_ctm-dn-dn-se-wt-pr-tt-ft-wt,
2754
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt)
2755
+ );
2756
+ font-style: prepareMediaVariable(
2757
+ --_ctm-dn-dn-se-wt-pr-tt-ft-se-ic,
2758
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic)
2759
+ );
2760
+ text-decoration: prepareMediaVariable(
2761
+ --_ctm-dn-dn-se-wt-pr-tt-ue,
2762
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue)
2763
+ );
2764
+ text-align: prepareMediaVariable(
2765
+ --_ctm-dn-dn-se-wt-pr-tt-tt-an,
2766
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an)
2767
+ );
2768
+ letter-spacing: prepareMediaVariable(
2769
+ --_ctm-dn-dn-se-wt-pr-tt-lr-sg,
2770
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg)
2771
+ );
2772
+ line-height: prepareMediaVariable(
2773
+ --_ctm-dn-dn-se-wt-pr-tt-le-ht,
2774
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht)
2775
+ );
2776
+ text-transform: prepareMediaVariable(
2777
+ --_ctm-dn-dn-se-wt-pr-tt-tt-tm,
2778
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm)
2779
+ );
2466
2780
 
2467
2781
  &#{$overflowSelector} {
2468
2782
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2469
2783
  }
2470
2784
  }
2471
-
2472
2785
  .est__dropdown__main {
2473
2786
  position: relative;
2474
2787
  width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wh);
2475
2788
  margin-top: 0px;
2476
-
2477
2789
  label {
2478
2790
  font-size: 14px;
2479
2791
  color: var(--_gray-700);
@@ -2498,7 +2810,6 @@ $imagePositions: (
2498
2810
  &.open .list {
2499
2811
  display: flex;
2500
2812
  }
2501
-
2502
2813
  .est__dropdown__button {
2503
2814
  display: flex;
2504
2815
  align-items: center;
@@ -2508,19 +2819,26 @@ $imagePositions: (
2508
2819
  // child, so it spaced nothing. The button is where the widget's own items
2509
2820
  // (icon and label) sit — same place the variant picker applies it.
2510
2821
  gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
2822
+ // The caret is the button's second item, so it has to stay in flow for the
2823
+ // gap above to have anything to space; `space-between` keeps it at the far
2824
+ // end, where the old `position: absolute` used to pin it.
2825
+ justify-content: space-between;
2826
+
2827
+ .option_select,
2828
+ .value__selected__new {
2829
+ flex: 1 1 auto;
2830
+ min-width: 0;
2831
+ }
2511
2832
  }
2512
2833
 
2513
2834
  .est__dropdown__icon {
2514
- position: absolute;
2515
- // top: 10px;
2516
- right: 10px;
2835
+ display: flex;
2836
+ flex: 0 0 auto;
2517
2837
  transition: all 200ms ease-in;
2518
-
2519
2838
  &.open {
2520
2839
  transform: rotate(180deg);
2521
2840
  transform: all 200ms ease-in;
2522
2841
  }
2523
-
2524
2842
  &.close {
2525
2843
  transform: rotate(0deg);
2526
2844
  transform: all 200ms ease-in;
@@ -2553,7 +2871,10 @@ $imagePositions: (
2553
2871
  // padding: 2px;
2554
2872
  // border-radius: 4px;
2555
2873
  // border: 1px solid var(--_gray-300);
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);
2874
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae)
2875
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br)
2876
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd)
2877
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
2557
2878
 
2558
2879
  &.top {
2559
2880
  bottom: 100%;
@@ -2563,7 +2884,6 @@ $imagePositions: (
2563
2884
  .option {
2564
2885
  cursor: pointer;
2565
2886
  }
2566
-
2567
2887
  &.show__panel {
2568
2888
  animation: slideUp 0.4s ease-in-out;
2569
2889
  }
@@ -2572,14 +2892,12 @@ $imagePositions: (
2572
2892
  animation: slideDown 0.4s ease-in-out;
2573
2893
  pointer-events: none;
2574
2894
  }
2575
-
2576
2895
  &:has(.no__records__found) {
2577
2896
  padding: 0px;
2578
2897
  }
2579
2898
  }
2580
2899
  }
2581
2900
  }
2582
-
2583
2901
  .no__records__found {
2584
2902
  padding: 12px;
2585
2903
  color: var(--_gray-700);
@@ -2590,4 +2908,4 @@ $imagePositions: (
2590
2908
  }
2591
2909
  }
2592
2910
  }
2593
- }
2911
+ }