@sc-360-v2/storefront-cms-library 0.5.51 → 0.5.53

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 (50) hide show
  1. package/dist/add-order.scss +62 -13
  2. package/dist/allocationDetails.scss +438 -224
  3. package/dist/allocations.scss +172 -13
  4. package/dist/breadcrumbs.scss +13 -0
  5. package/dist/builder.js +1 -1
  6. package/dist/cart-details.scss +214 -0
  7. package/dist/cart-summary.scss +237 -854
  8. package/dist/cart.scss +57 -55
  9. package/dist/category-groups-product-image.scss +72 -21
  10. package/dist/faq.scss +48 -5
  11. package/dist/hotspot.scss +141 -74
  12. package/dist/icon-library.scss +78 -74
  13. package/dist/icon-list.scss +19 -1
  14. package/dist/image-temp.scss +17 -3
  15. package/dist/language-selector.scss +260 -76
  16. package/dist/light-box-v2.scss +4 -3
  17. package/dist/menu-v2.scss +51 -3
  18. package/dist/modal.scss +251 -28
  19. package/dist/my-templates.scss +11 -2
  20. package/dist/my-wishlist.scss +27 -17
  21. package/dist/product-basic-elements.scss +0 -246
  22. package/dist/product-image-allocation.scss +51 -15
  23. package/dist/product-image-bundles.scss +72 -15
  24. package/dist/product-image.scss +178 -19
  25. package/dist/profile.scss +44 -19
  26. package/dist/quota-details.scss +111 -11
  27. package/dist/repeater-embla-controls.scss +9 -1
  28. package/dist/repeater-grid-toggle.scss +42 -18
  29. package/dist/repeater-item.scss +34 -22
  30. package/dist/repeater.scss +69 -102
  31. package/dist/request-for-quotes.scss +15 -1
  32. package/dist/scroll.scss +52 -11
  33. package/dist/search.scss +1 -1
  34. package/dist/skeleton.scss +24 -35
  35. package/dist/tab-container.scss +14 -12
  36. package/dist/tab-v2.scss +178 -68
  37. package/dist/text-temp-v2.scss +11 -0
  38. package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +17 -1
  39. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +0 -5
  40. package/dist/types/builder/tools/element-edit/iconLibrary.d.ts +7 -1
  41. package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +0 -1
  42. package/dist/types/builder/tools/element-edit/language-menu.d.ts +0 -14
  43. package/dist/types/builder/tools/element-edit/product-image.d.ts +1 -0
  44. package/dist/types/builder/tools/element-edit/repeater.d.ts +1 -1
  45. package/dist/types/builder/tools/element-edit/tabsV2.d.ts +55 -1
  46. package/dist/types/builder/tools/element-edit/userElements.d.ts +5 -0
  47. package/dist/types/builder/tools/element-edit/video.d.ts +32 -0
  48. package/dist/user-elements.scss +6 -0
  49. package/dist/video.scss +548 -476
  50. package/package.json +1 -1
package/dist/cart.scss CHANGED
@@ -189,15 +189,12 @@
189
189
  width: max-content;
190
190
  min-width: 20px;
191
191
  max-width: 80px;
192
+ height: max-content;
193
+ min-height: max(20px, 1.4em);
192
194
  box-sizing: border-box;
193
- // Driven by the Cart Item Count > Padding control. The schema does declare
194
- // `padding`, so `--_ctm-*-dn-ct-is-ct-pg` is emitted for any element saved
195
- // since; the final literal fallback covers elements saved before that and
196
- // keeps the declaration valid when the variable is absent. It was hardcoded
197
- // to 12px 4px, which is why the control had no effect.
198
195
  padding: var(
199
196
  --_ctm-mob-dn-ct-is-ct-pg,
200
- var(--_ctm-tab-dn-ct-is-ct-pg, var(--_ctm-dn-ct-is-ct-pg, 12px 4px))
197
+ var(--_ctm-tab-dn-ct-is-ct-pg, var(--_ctm-dn-ct-is-ct-pg, 0px))
201
198
  );
202
199
  position: absolute;
203
200
  top: -3px !important;
@@ -225,59 +222,60 @@
225
222
  list-style: none;
226
223
  margin-left: 5px;
227
224
 
228
- color: var(
229
- --_ctm-mob-dn-mi-ct-tt-cr,
230
- var(--_ctm-tab-dn-mi-ct-tt-cr, var(--_ctm-dn-mi-ct-tt-cr))
231
- );
232
- font-family: var(
233
- --_ctm-mob-dn-mi-ct-tt-ft-fy,
234
- var(--_ctm-tab-dn-mi-ct-tt-ft-fy, var(--_ctm-dn-mi-ct-tt-ft-fy))
235
- );
236
- font-size: var(
237
- --_ctm-mob-dn-mi-ct-tt-ft-se,
238
- var(--_ctm-tab-dn-mi-ct-tt-ft-se, var(--_ctm-dn-mi-ct-tt-ft-se))
239
- );
240
- font-weight: var(
241
- --_ctm-mob-dn-mi-ct-tt-ft-wt,
242
- var(--_ctm-tab-dn-mi-ct-tt-ft-wt, var(--_ctm-dn-mi-ct-tt-ft-wt))
243
- );
244
- font-style: var(
245
- --_ctm-mob-dn-mi-ct-tt-ft-se-ic,
246
- var(--_ctm-tab-dn-mi-ct-tt-ft-se-ic, var(--_ctm-dn-mi-ct-tt-ft-se-ic))
247
- );
248
- text-align: var(
249
- --_ctm-mob-dn-mi-ct-tt-tt-an,
250
- var(--_ctm-tab-dn-mi-ct-tt-tt-an, var(--_ctm-dn-mi-ct-tt-tt-an))
251
- );
252
- letter-spacing: var(
253
- --_ctm-mob-dn-mi-ct-tt-lr-sg,
254
- var(--_ctm-tab-dn-mi-ct-tt-lr-sg, var(--_ctm-dn-mi-ct-tt-lr-sg))
255
- );
256
- line-height: var(
257
- --_ctm-mob-dn-mi-ct-tt-le-ht,
258
- var(--_ctm-tab-dn-mi-ct-tt-le-ht, var(--_ctm-dn-mi-ct-tt-le-ht))
259
- );
260
- text-decoration: var(
261
- --_ctm-mob-dn-mi-ct-tt-ue,
262
- var(--_ctm-tab-dn-mi-ct-tt-ue, var(--_ctm-dn-mi-ct-tt-ue))
263
- );
264
- text-transform: var(
265
- --_ctm-mob-dn-mi-ct-tt-tt-tm,
266
- var(--_ctm-tab-dn-mi-ct-tt-tt-tm, var(--_ctm-dn-mi-ct-tt-tt-tm, none))
267
- );
268
- word-wrap: var(
269
- --_ctm-mob-dn-mi-ct-tt-wd-wp,
270
- var(--_ctm-tab-dn-mi-ct-tt-wd-wp, var(--_ctm-dn-mi-ct-tt-wd-wp, normal))
271
- );
272
- word-break: var(
273
- --_ctm-mob-dn-mi-ct-tt-wd-bk,
274
- var(--_ctm-tab-dn-mi-ct-tt-wd-bk, var(--_ctm-dn-mi-ct-tt-wd-bk, normal))
275
- );
276
-
277
225
  a {
278
226
  display: flex;
279
227
  flex-direction: column;
280
228
  }
229
+ .cart__text__span {
230
+ color: var(
231
+ --_ctm-mob-dn-mi-ct-tt-cr,
232
+ var(--_ctm-tab-dn-mi-ct-tt-cr, var(--_ctm-dn-mi-ct-tt-cr))
233
+ );
234
+ font-family: var(
235
+ --_ctm-mob-dn-mi-ct-tt-ft-fy,
236
+ var(--_ctm-tab-dn-mi-ct-tt-ft-fy, var(--_ctm-dn-mi-ct-tt-ft-fy))
237
+ );
238
+ font-size: var(
239
+ --_ctm-mob-dn-mi-ct-tt-ft-se,
240
+ var(--_ctm-tab-dn-mi-ct-tt-ft-se, var(--_ctm-dn-mi-ct-tt-ft-se))
241
+ );
242
+ font-weight: var(
243
+ --_ctm-mob-dn-mi-ct-tt-ft-wt,
244
+ var(--_ctm-tab-dn-mi-ct-tt-ft-wt, var(--_ctm-dn-mi-ct-tt-ft-wt))
245
+ );
246
+ font-style: var(
247
+ --_ctm-mob-dn-mi-ct-tt-ft-se-ic,
248
+ var(--_ctm-tab-dn-mi-ct-tt-ft-se-ic, var(--_ctm-dn-mi-ct-tt-ft-se-ic))
249
+ );
250
+ text-align: var(
251
+ --_ctm-mob-dn-mi-ct-tt-tt-an,
252
+ var(--_ctm-tab-dn-mi-ct-tt-tt-an, var(--_ctm-dn-mi-ct-tt-tt-an))
253
+ );
254
+ letter-spacing: var(
255
+ --_ctm-mob-dn-mi-ct-tt-lr-sg,
256
+ var(--_ctm-tab-dn-mi-ct-tt-lr-sg, var(--_ctm-dn-mi-ct-tt-lr-sg))
257
+ );
258
+ line-height: var(
259
+ --_ctm-mob-dn-mi-ct-tt-le-ht,
260
+ var(--_ctm-tab-dn-mi-ct-tt-le-ht, var(--_ctm-dn-mi-ct-tt-le-ht))
261
+ );
262
+ text-decoration: var(
263
+ --_ctm-mob-dn-mi-ct-tt-ue,
264
+ var(--_ctm-tab-dn-mi-ct-tt-ue, var(--_ctm-dn-mi-ct-tt-ue))
265
+ );
266
+ text-transform: var(
267
+ --_ctm-mob-dn-mi-ct-tt-tt-tm,
268
+ var(--_ctm-tab-dn-mi-ct-tt-tt-tm, var(--_ctm-dn-mi-ct-tt-tt-tm, none))
269
+ );
270
+ word-wrap: var(
271
+ --_ctm-mob-dn-mi-ct-tt-wd-wp,
272
+ var(--_ctm-tab-dn-mi-ct-tt-wd-wp, var(--_ctm-dn-mi-ct-tt-wd-wp, normal))
273
+ );
274
+ word-break: var(
275
+ --_ctm-mob-dn-mi-ct-tt-wd-bk,
276
+ var(--_ctm-tab-dn-mi-ct-tt-wd-bk, var(--_ctm-dn-mi-ct-tt-wd-bk, normal))
277
+ );
278
+ }
281
279
 
282
280
  .cart__total {
283
281
  color: var(
@@ -312,6 +310,10 @@
312
310
  --_ctm-mob-dn-mi-ct-tt-le-ht-dc,
313
311
  var(--_ctm-tab-dn-mi-ct-tt-le-ht-dc, var(--_ctm-dn-mi-ct-tt-le-ht-dc))
314
312
  );
313
+ text-decoration: var(
314
+ --_ctm-mob-dn-mi-ct-tt-ue-dc,
315
+ var(--_ctm-tab-dn-mi-ct-tt-ue-dc, var(--_ctm-dn-mi-ct-tt-ue-dc))
316
+ );
315
317
  text-transform: var(
316
318
  --_ctm-mob-dn-mi-ct-tt-tt-tm-dc,
317
319
  var(--_ctm-tab-dn-mi-ct-tt-tt-tm-dc, var(--_ctm-dn-mi-ct-tt-tt-tm-dc, none))
@@ -37,7 +37,11 @@
37
37
  )
38
38
  );
39
39
 
40
- &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
40
+ // Content-sized display styles — the element grows with the number of images.
41
+ // See product-image.scss for the full reasoning.
42
+ $contentSizedGallery: '.embla[data-scroll-control="Non"]:is([data-display-style="Grid"][data-scroll-direction="Vertical"], [data-display-style="Rows"], [data-display-style="Masonry"])';
43
+
44
+ &:not(:has(#{$contentSizedGallery})) {
41
45
  height: var(
42
46
  --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
43
47
  var(
@@ -47,6 +51,16 @@
47
51
  );
48
52
  }
49
53
 
54
+ &:has(#{$contentSizedGallery}) {
55
+ min-height: var(
56
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
57
+ var(
58
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
59
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht)
60
+ )
61
+ );
62
+ }
63
+
50
64
  // &[data-view-state="full"] {
51
65
  // width: auto;
52
66
  // // height: 100%;
@@ -234,27 +248,47 @@
234
248
 
235
249
  width: 100%;
236
250
  height: 100%;
251
+
252
+ // Gallery Widget Style > Border / Shadow toggles. Distinct names from the item
253
+ // ones below, because .gallery__slide is a descendant and would otherwise
254
+ // inherit whatever is set here.
255
+ &[data-show-border="false"] {
256
+ --_show-gy-border: none;
257
+ }
258
+ &[data-show-shadow="false"] {
259
+ --_show-gy-shadow: none;
260
+ }
261
+
237
262
  border-color: var(
238
- --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
263
+ --_show-gy-border,
239
264
  var(
240
- --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
241
- var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr)
265
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
266
+ var(
267
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
268
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr)
269
+ )
242
270
  )
243
271
  );
244
272
 
245
273
  border-style: var(
246
- --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
274
+ --_show-gy-border,
247
275
  var(
248
- --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
249
- var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se)
276
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
277
+ var(
278
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
279
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se)
280
+ )
250
281
  )
251
282
  );
252
283
 
253
284
  border-width: var(
254
- --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
285
+ --_show-gy-border,
255
286
  var(
256
- --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
257
- var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh)
287
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
288
+ var(
289
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
290
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh)
291
+ )
258
292
  )
259
293
  );
260
294
 
@@ -267,7 +301,7 @@
267
301
  );
268
302
 
269
303
  box-shadow: var(
270
- --_show-shadow,
304
+ --_show-gy-shadow,
271
305
  var(
272
306
  --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-ae,
273
307
  var(
@@ -1788,25 +1822,42 @@
1788
1822
  var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-bd-cr)
1789
1823
  )
1790
1824
  );
1825
+ // Item Style > Border / Shadow toggles.
1826
+ &[data-show-border="false"] {
1827
+ --_show-im-border: none;
1828
+ }
1829
+ &[data-show-shadow="false"] {
1830
+ --_show-im-shadow: none;
1831
+ }
1832
+
1791
1833
  border-color: var(
1792
- --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
1834
+ --_show-im-border,
1793
1835
  var(
1794
- --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
1795
- var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr)
1836
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
1837
+ var(
1838
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
1839
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr)
1840
+ )
1796
1841
  )
1797
1842
  );
1798
1843
  border-style: var(
1799
- --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
1844
+ --_show-im-border,
1800
1845
  var(
1801
- --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
1802
- var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se)
1846
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
1847
+ var(
1848
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
1849
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se)
1850
+ )
1803
1851
  )
1804
1852
  );
1805
1853
  border-width: var(
1806
- --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
1854
+ --_show-im-border,
1807
1855
  var(
1808
- --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
1809
- var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh)
1856
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
1857
+ var(
1858
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
1859
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh)
1860
+ )
1810
1861
  )
1811
1862
  );
1812
1863
  border-radius: var(
@@ -1818,7 +1869,7 @@
1818
1869
  );
1819
1870
 
1820
1871
  box-shadow: var(
1821
- --_show-shadow,
1872
+ --_show-im-shadow,
1822
1873
  var(
1823
1874
  --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-ae,
1824
1875
  var(
package/dist/faq.scss CHANGED
@@ -169,9 +169,13 @@
169
169
  --_ctm-mob-dn-cd-an-im-sw-sd,
170
170
  var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
171
171
  )
172
- var(
173
- --_ctm-mob-dn-cd-an-im-sw-sd,
174
- var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
172
+ // The colour slot repeated `sw-sd` (spread) instead of `sw-cr`. Angle
173
+ // resolves to two lengths, so the value came out as five lengths and no
174
+ // colour — invalid, and the whole declaration was dropped. That is why no
175
+ // shadow appeared here however the panel was set.
176
+ var(
177
+ --_ctm-mob-dn-cd-an-im-sw-cr,
178
+ var(--_ctm-tab-dn-cd-an-im-sw-cr, var(--_ctm-dn-cd-an-im-sw-cr))
175
179
  )
176
180
  );
177
181
 
@@ -279,6 +283,20 @@
279
283
  --_ctm-mob-dn-cd-an-im-ue,
280
284
  var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
281
285
  );
286
+ // Collapsed item > title > Text Transform, and the word wrap/break pair the
287
+ // typography panel renders alongside it.
288
+ text-transform: var(
289
+ --_ctm-mob-dn-cd-an-im-tt-tm,
290
+ var(--_ctm-tab-dn-cd-an-im-tt-tm, var(--_ctm-dn-cd-an-im-tt-tm, none))
291
+ );
292
+ word-wrap: var(
293
+ --_ctm-mob-dn-cd-an-im-wd-wp,
294
+ var(--_ctm-tab-dn-cd-an-im-wd-wp, var(--_ctm-dn-cd-an-im-wd-wp, normal))
295
+ );
296
+ word-break: var(
297
+ --_ctm-mob-dn-cd-an-im-wd-bk,
298
+ var(--_ctm-tab-dn-cd-an-im-wd-bk, var(--_ctm-dn-cd-an-im-wd-bk, normal))
299
+ );
282
300
  }
283
301
  .icon {
284
302
  display: var(--_sf-show-icon-ff, flex);
@@ -301,7 +319,13 @@
301
319
  }
302
320
  .accordion-items {
303
321
  display: flex;
304
- gap: 8px;
322
+ align-items: center;
323
+ // Info Icon > Icon Gap. Was a hardcoded 8px, so there was no way to space
324
+ // the info icon away from the title.
325
+ gap: var(
326
+ --_ctm-mob-dn-io-in-in-gp,
327
+ var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
328
+ );
305
329
  .icon {
306
330
  display: var(--_hover-show-icon, var(--_show-icon, flex));
307
331
  svg {
@@ -464,6 +488,19 @@
464
488
  --_ctm-mob-dn-ed-an-im-ue,
465
489
  var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
466
490
  );
491
+ // Expanded item > title > Text Transform and the word wrap/break pair.
492
+ text-transform: var(
493
+ --_ctm-mob-dn-ed-an-im-tt-tm,
494
+ var(--_ctm-tab-dn-ed-an-im-tt-tm, var(--_ctm-dn-ed-an-im-tt-tm, none))
495
+ );
496
+ word-wrap: var(
497
+ --_ctm-mob-dn-ed-an-im-wd-wp,
498
+ var(--_ctm-tab-dn-ed-an-im-wd-wp, var(--_ctm-dn-ed-an-im-wd-wp, normal))
499
+ );
500
+ word-break: var(
501
+ --_ctm-mob-dn-ed-an-im-wd-bk,
502
+ var(--_ctm-tab-dn-ed-an-im-wd-bk, var(--_ctm-dn-ed-an-im-wd-bk, normal))
503
+ );
467
504
  }
468
505
  .icon {
469
506
  display: var(--_sf-show-icon-ff, flex);
@@ -486,7 +523,13 @@
486
523
  }
487
524
  .accordion-items {
488
525
  display: flex;
489
- gap: 8px;
526
+ align-items: center;
527
+ // The expanded item has its own copy of this rule, so the Info Icon gap has
528
+ // to be read here too — changing it only moved the collapsed items.
529
+ gap: var(
530
+ --_ctm-mob-dn-io-in-in-gp,
531
+ var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
532
+ );
490
533
  .icon {
491
534
  display: var(--_hover-show-icon, var(--_show-icon, flex));
492
535
  svg {