@sc-360-v2/storefront-cms-library 0.4.76 → 0.4.78

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 (30) hide show
  1. package/dist/allocationDetails.scss +18 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +6 -0
  4. package/dist/bulk-variant-picker.scss +402 -142
  5. package/dist/bundle.scss +190 -163
  6. package/dist/bundleDetails.scss +415 -346
  7. package/dist/cart-summary.scss +0 -1
  8. package/dist/cart.scss +5 -0
  9. package/dist/gallery-slider-temp.scss +3 -0
  10. package/dist/layouter.scss +4 -16
  11. package/dist/menu-v2.scss +4 -0
  12. package/dist/product-image.scss +3 -0
  13. package/dist/quick-order-pad.scss +596 -0
  14. package/dist/repeater.scss +4 -16
  15. package/dist/scroll.scss +224 -222
  16. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +0 -13
  17. package/dist/types/builder/tools/element-edit/bundle.d.ts +5 -0
  18. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +90 -1
  19. package/dist/types/builder/tools/element-edit/cart.d.ts +2 -1
  20. package/dist/types/builder/tools/element-edit/gallery-slider.d.ts +7 -0
  21. package/dist/types/builder/tools/element-edit/mega-menu.d.ts +4 -1
  22. package/dist/types/builder/tools/element-edit/menu_v2.d.ts +4 -1
  23. package/dist/types/builder/tools/element-edit/product-image.d.ts +7 -0
  24. package/dist/types/builder/tools/element-edit/scroll.d.ts +0 -42
  25. package/dist/types/builder/tools/element-edit/userElements.d.ts +19 -7
  26. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +0 -12
  27. package/dist/types/global/types.d.ts +1 -0
  28. package/dist/user-elements.scss +52 -31
  29. package/dist/variant-picker.scss +404 -179
  30. package/package.json +1 -1
package/dist/bundle.scss CHANGED
@@ -324,10 +324,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
324
324
  left: 0;
325
325
  top: 50%;
326
326
  transform: translateY(-50%);
327
+ z-index: 2;
327
328
  }
328
329
  .right-button {
329
330
  position: absolute;
330
-
331
+ z-index: 2;
331
332
  right: 0;
332
333
  top: 50%;
333
334
  transform: translateY(-50%);
@@ -344,7 +345,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
344
345
  flex-direction: row-reverse;
345
346
 
346
347
  .embla__thumbs {
347
- width: var(--_ctm-lt-tl-se);
348
+ width: prepareMediaVariable(--_ctm-lt-tl-se);
348
349
  height: 100%;
349
350
 
350
351
  & .embla__thumbs__container {
@@ -1394,41 +1395,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1394
1395
  justify-content: space-between;
1395
1396
 
1396
1397
  .bundle__title {
1397
- font-family: var(--_ctm-dn-hg-dn-ft-fy);
1398
- font-size: var(--_ctm-dn-hg-dn-ft-se);
1399
- color: var(--_ctm-dn-hg-dn-cr);
1400
- font-weight: var(--_ctm-dn-hg-dn-ft-wt);
1401
- font-style: var(--_ctm-dn-hg-dn-ft-se-ic);
1402
- text-decoration: var(--_ctm-dn-hg-dn-ue);
1403
- text-align: var(--_ctm-dn-hg-dn-tt-an);
1404
- letter-spacing: var(--_ctm-dn-hg-dn-lr-sg);
1405
- line-height: var(--_ctm-dn-hg-dn-le-ht);
1406
- background-color: var(--_ctm-dn-hg-dn-bd-cr);
1407
- border-width: var(--_ctm-dn-hg-dn-br-wh);
1408
- border-color: var(--_ctm-dn-hg-dn-br-cr);
1409
- border-style: var(--_ctm-dn-hg-dn-br-se);
1410
- border-radius: var(--_ctm-dn-hg-dn-br-rs);
1411
- box-shadow: var(--_ctm-dn-hg-dn-sw-ae) var(--_ctm-dn-hg-dn-sw-br)
1412
- var(--_ctm-dn-hg-dn-sw-sd) var(--_ctm-dn-hg-dn-sw-cr);
1398
+ font-family: prepareMediaVariable(--_ctm-dn-hg-dn-ft-fy);
1399
+ font-size: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se);
1400
+ color: prepareMediaVariable(--_ctm-dn-hg-dn-cr);
1401
+ font-weight: prepareMediaVariable(--_ctm-dn-hg-dn-ft-wt);
1402
+ font-style: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se-ic);
1403
+ text-decoration: prepareMediaVariable(--_ctm-dn-hg-dn-ue);
1404
+ text-align: prepareMediaVariable(--_ctm-dn-hg-dn-tt-an);
1405
+ letter-spacing: vaprepareMediaVariabler(--_ctm-dn-hg-dn-lr-sg);
1406
+ line-height: prepareMediaVariable(--_ctm-dn-hg-dn-le-ht);
1407
+ background-color: prepareMediaVariable(--_ctm-dn-hg-dn-bd-cr);
1408
+ border-width: prepareMediaVariable(--_ctm-dn-hg-dn-br-wh);
1409
+ border-color: prepareMediaVariable(--_ctm-dn-hg-dn-br-cr);
1410
+ border-style: prepareMediaVariable(--_ctm-dn-hg-dn-br-se);
1411
+ border-radius: prepareMediaVariable(--_ctm-dn-hg-dn-br-rs);
1412
+ box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae)
1413
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-br)
1414
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd)
1415
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
1413
1416
  }
1414
1417
 
1415
1418
  .bundle__description {
1416
- font-family: var(--_ctm-dn-dn-dn-ft-fy);
1417
- font-size: var(--_ctm-dn-dn-dn-ft-se);
1418
- color: var(--_ctm-dn-dn-dn-cr);
1419
- font-weight: var(--_ctm-dn-dn-dn-ft-wt);
1420
- font-style: var(--_ctm-dn-dn-dn-ft-se-ic);
1421
- text-decoration: var(--_ctm-dn-dn-dn-ue);
1422
- text-align: var(--_ctm-dn-dn-dn-tt-an);
1423
- letter-spacing: var(--_ctm-dn-dn-dn-lr-sg);
1424
- line-height: var(--_ctm-dn-dn-dn-le-ht);
1425
- background-color: var(--_ctm-dn-dn-dn-bd-cr);
1426
- border-width: var(--_ctm-dn-dn-dn-br-wh);
1427
- border-color: var(--_ctm-dn-dn-dn-br-cr);
1428
- border-style: var(--_ctm-dn-dn-dn-br-se);
1429
- border-radius: var(--_ctm-dn-dn-dn-br-rs);
1430
- box-shadow: var(--_ctm-dn-dn-dn-sw-ae) var(--_ctm-dn-dn-dn-sw-br)
1431
- var(--_ctm-dn-dn-dn-sw-sd) var(--_ctm-dn-dn-dn-sw-cr);
1419
+ font-family: prepareMediaVariable(--_ctm-dn-dn-dn-ft-fy);
1420
+ font-size: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se);
1421
+ color: prepareMediaVariable(--_ctm-dn-dn-dn-cr);
1422
+ font-weight: prepareMediaVariable(--_ctm-dn-dn-dn-ft-wt);
1423
+ font-style: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se-ic);
1424
+ text-decoration: prepareMediaVariable(--_ctm-dn-dn-dn-ue);
1425
+ text-align: prepareMediaVariable(--_ctm-dn-dn-dn-tt-an);
1426
+ letter-spacing: prepareMediaVariable(--_ctm-dn-dn-dn-lr-sg);
1427
+ line-height: prepareMediaVariable(--_ctm-dn-dn-dn-le-ht);
1428
+ background-color: prepareMediaVariable(--_ctm-dn-dn-dn-bd-cr);
1429
+ border-width: prepareMediaVariable(--_ctm-dn-dn-dn-br-wh);
1430
+ border-color: prepareMediaVariable(--_ctm-dn-dn-dn-br-cr);
1431
+ border-style: prepareMediaVariable(--_ctm-dn-dn-dn-br-se);
1432
+ border-radius: prepareMediaVariable(--_ctm-dn-dn-dn-br-rs);
1433
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae)
1434
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-br)
1435
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd)
1436
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
1432
1437
  }
1433
1438
  .button__items {
1434
1439
  display: flex;
@@ -1771,7 +1776,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1771
1776
  .single__bundle_slider {
1772
1777
  display: flex;
1773
1778
  flex-direction: column;
1774
- gap: var(--_ctm-lt-im-gp);
1779
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
1775
1780
  align-items: flex-start;
1776
1781
  flex: 1;
1777
1782
  min-height: 0;
@@ -1787,10 +1792,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1787
1792
  }
1788
1793
  .items__warper {
1789
1794
  display: flex;
1790
- gap: var(--_ctm-lt-im-sg);
1795
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
1791
1796
  flex-wrap: wrap;
1792
1797
  // align-items: center;
1793
- --items-per-row: var(--_ctm-lt-is-pr-rw);
1798
+ --items-per-row: #{prepareMediaVariable(--_ctm-lt-is-pr-rw)};
1794
1799
  .bundle-image-container,
1795
1800
  .tiles-grid-view {
1796
1801
  flex: 0 0 calc((100% / var(--items-per-row)) - var(--_ctm-lt-im-sg));
@@ -1799,21 +1804,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1799
1804
  }
1800
1805
  .bundle-image-container {
1801
1806
  height: 100%;
1802
- background-color: var(--_ctm-dn-pt-cd-dn-bd-cr);
1803
- border-width: var(--_ctm-dn-pt-cd-dn-br-wh);
1804
- border-style: var(--_ctm-dn-pt-cd-dn-br-se);
1805
- border-color: var(--_ctm-dn-pt-cd-dn-br-cr);
1806
- border-radius: var(--_ctm-dn-pt-cd-dn-br-rs);
1807
- box-shadow: var(--_ctm-dn-pt-cd-dn-sw-ae) var(--_ctm-dn-pt-cd-dn-sw-br)
1808
- var(--_ctm-dn-pt-cd-dn-sw-sd) var(--_ctm-dn-pt-cd-dn-sw-cr);
1807
+ background-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-bd-cr);
1808
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-wh);
1809
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-se);
1810
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-cr);
1811
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-rs);
1812
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae)
1813
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br)
1814
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd)
1815
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
1809
1816
  width: 100%;
1810
1817
  display: flex;
1811
1818
  flex-direction: column;
1812
- gap: var(--_ctm-lt-ig-tt-sg);
1819
+ gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
1813
1820
 
1814
1821
  .showcase-img {
1815
1822
  flex-grow: 1;
1816
- padding: 16px;
1823
+ // padding: 16px;
1817
1824
  align-items: center;
1818
1825
  justify-content: center;
1819
1826
  display: flex;
@@ -1821,33 +1828,37 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1821
1828
  flex: 1;
1822
1829
  min-height: 100px;
1823
1830
  width: 100%;
1831
+ max-height: prepareMediaVariable(--_ctm-lt-ie-ht);
1824
1832
  img {
1825
1833
  max-width: 100%;
1826
1834
  // max-height: 100%;
1827
1835
  // height: 100%;
1828
1836
  width: 100%;
1829
1837
  // object-fit: fill;
1830
- height: var(--_ctm-lt-ie-ht);
1838
+ height: prepareMediaVariable(--_ctm-lt-ie-ht);
1831
1839
  }
1832
1840
  }
1833
1841
  .img-title {
1834
- padding: 12px;
1835
- font-family: var(--_ctm-dn-pt-ne-dn-ft-fy);
1836
- font-size: var(--_ctm-dn-pt-ne-dn-ft-se);
1837
- color: var(--_ctm-dn-pt-ne-dn-cr);
1838
- font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt);
1839
- font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic);
1840
- text-decoration: var(--_ctm-dn-pt-ne-dn-ue);
1841
- text-align: var(--_ctm-dn-pt-ne-dn-tt-an);
1842
- letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg);
1843
- line-height: var(--_ctm-dn-pt-ne-dn-le-ht);
1844
- background-color: var(--_ctm-dn-pt-ne-dn-bd-cr);
1845
- border-width: var(--_ctm-dn-pt-ne-dn-br-wh);
1846
- border-color: var(--_ctm-dn-pt-ne-dn-br-cr);
1847
- border-style: var(--_ctm-dn-pt-ne-dn-br-se);
1848
- border-radius: var(--_ctm-dn-pt-ne-dn-br-rs);
1849
- box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br)
1850
- var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr);
1842
+ // padding: 12px;
1843
+ font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
1844
+ font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
1845
+ color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
1846
+ font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
1847
+ font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
1848
+ text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
1849
+ text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
1850
+ letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
1851
+ line-height: prepareMediaVariablear(--_ctm-dn-pt-ne-dn-le-ht);
1852
+ background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
1853
+ border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
1854
+ border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
1855
+ border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1856
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1857
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1858
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
1859
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
1860
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
1861
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1851
1862
  &#{$overflowSelector} {
1852
1863
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1853
1864
  }
@@ -2131,29 +2142,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2131
2142
  align-items: center;
2132
2143
  gap: 12px;
2133
2144
  align-self: stretch;
2134
- font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy);
2135
- font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se);
2136
- color: var(--_ctm-dn-be-nn-bn-dn-cr);
2137
- font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt);
2138
- font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2139
- text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue);
2140
- text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an);
2141
- letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg);
2142
- line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht);
2143
- background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr);
2144
- border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh);
2145
- border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr);
2146
- border-style: var(--_ctm-dn-be-nn-bn-dn-br-se);
2147
- border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs);
2148
- box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br)
2149
- var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr);
2145
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2146
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2147
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2148
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2149
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2150
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2151
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2152
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2153
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2154
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2155
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2156
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2157
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2158
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2159
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2160
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2161
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2162
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2150
2163
 
2151
2164
  .icon {
2152
2165
  svg {
2153
- width: var(--_ctm-dn-be-nn-bn-dn-in-se);
2154
- height: var(--_ctm-dn-be-nn-bn-dn-in-se);
2166
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2167
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2155
2168
  path {
2156
- stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
2169
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2157
2170
  }
2158
2171
  }
2159
2172
  }
@@ -2164,7 +2177,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2164
2177
  .tiles-grid-view {
2165
2178
  display: flex;
2166
2179
  flex-wrap: wrap;
2167
- gap: var(--_ctm-lt-im-sg);
2180
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
2168
2181
  width: 100%;
2169
2182
  height: 100%;
2170
2183
 
@@ -2172,7 +2185,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2172
2185
  display: flex;
2173
2186
  flex-wrap: wrap;
2174
2187
  justify-content: center;
2175
- gap: var(--_ctm-lt-im-sg);
2188
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
2176
2189
  width: 100%;
2177
2190
  height: 100%;
2178
2191
 
@@ -2185,20 +2198,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2185
2198
  display: flex;
2186
2199
  flex-direction: column;
2187
2200
  align-items: flex-start;
2188
- gap: var(--_ctm-lt-im-gp);
2201
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
2189
2202
  justify-content: space-between;
2190
- background-color: var(--_ctm-dn-te-cd-dn-bd-cr);
2191
- border-width: var(--_ctm-dn-te-cd-dn-br-wh);
2192
- border-style: var(--_ctm-dn-te-cd-dn-br-se);
2193
- border-color: var(--_ctm-dn-te-cd-dn-br-cr);
2194
- border-radius: var(--_ctm-dn-te-cd-dn-br-rs);
2195
- box-shadow: var(--_ctm-dn-te-cd-dn-sw-ae) var(--_ctm-dn-te-cd-dn-sw-br)
2196
- var(--_ctm-dn-te-cd-dn-sw-sd) var(--_ctm-dn-te-cd-dn-sw-cr);
2203
+ background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
2204
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
2205
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
2206
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
2207
+ border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
2208
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae)
2209
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br)
2210
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd)
2211
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);
2197
2212
 
2198
2213
  .tile-content {
2199
2214
  display: flex;
2200
2215
  flex-direction: column;
2201
- gap: var(--_ctm-lt-ig-tt-sg);
2216
+ gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
2202
2217
  align-items: flex-start;
2203
2218
  height: 100%;
2204
2219
  width: 100%;
@@ -2207,25 +2222,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2207
2222
  align-items: flex-start;
2208
2223
  justify-content: flex-start;
2209
2224
  width: 100%;
2210
- overflow: hidden;
2211
- text-overflow: ellipsis;
2212
- white-space: nowrap;
2213
- font-family: var(--_ctm-dn-pt-ne-dn-ft-fy);
2214
- font-size: var(--_ctm-dn-pt-ne-dn-ft-se);
2215
- color: var(--_ctm-dn-pt-ne-dn-cr);
2216
- font-weight: var(--_ctm-dn-pt-ne-dn-ft-wt);
2217
- font-style: var(--_ctm-dn-pt-ne-dn-ft-se-ic);
2218
- text-decoration: var(--_ctm-dn-pt-ne-dn-ue);
2219
- text-align: var(--_ctm-dn-pt-ne-dn-tt-an);
2220
- letter-spacing: var(--_ctm-dn-pt-ne-dn-lr-sg);
2221
- line-height: var(--_ctm-dn-pt-ne-dn-le-ht);
2222
- background-color: var(--_ctm-dn-pt-ne-dn-bd-cr);
2223
- border-width: var(--_ctm-dn-pt-ne-dn-br-wh);
2224
- border-color: var(--_ctm-dn-pt-ne-dn-br-cr);
2225
- border-style: var(--_ctm-dn-pt-ne-dn-br-se);
2226
- border-radius: var(--_ctm-dn-pt-ne-dn-br-rs);
2227
- box-shadow: var(--_ctm-dn-pt-ne-dn-sw-ae) var(--_ctm-dn-pt-ne-dn-sw-br)
2228
- var(--_ctm-dn-pt-ne-dn-sw-sd) var(--_ctm-dn-pt-ne-dn-sw-cr);
2225
+ // overflow: hidden;
2226
+ // text-overflow: ellipsis;
2227
+ // white-space: nowrap;
2228
+ font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
2229
+ font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
2230
+ color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
2231
+ font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
2232
+ font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
2233
+ text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
2234
+ text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
2235
+ letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
2236
+ line-height: prepareMediaVariable(--_ctm-dn-pt-ne-dn-le-ht);
2237
+ background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
2238
+ border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
2239
+ border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
2240
+ border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
2241
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
2242
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
2243
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
2244
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
2245
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
2246
+
2247
+ &#{$overflowSelector} {
2248
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2249
+ }
2229
2250
  }
2230
2251
 
2231
2252
  .brand-tile {
@@ -2244,14 +2265,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2244
2265
  .product-tile {
2245
2266
  display: grid;
2246
2267
  flex: 1 1 auto;
2247
- row-gap: var(--_ctm-lt-te-rw-gp);
2248
- column-gap: var(--_ctm-lt-te-cn-gp);
2249
- padding: 10px;
2268
+ row-gap: prepareMediaVariable(--_ctm-lt-te-rw-gp);
2269
+ column-gap: prepareMediaVariable(--_ctm-lt-te-cn-gp);
2270
+ // padding: 10px;
2250
2271
  box-sizing: border-box;
2251
2272
  width: 100%;
2252
2273
  // i want height to be mutiple of 2 with --_ctm-lt-ie-ht\
2253
2274
 
2254
- height: calc(var(--_ctm-lt-ie-ht) * 2);
2275
+ height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * 2);
2255
2276
 
2256
2277
  &.images-1 {
2257
2278
  grid-template-columns: 1fr;
@@ -2299,13 +2320,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2299
2320
  display: flex;
2300
2321
  justify-content: center;
2301
2322
  align-items: center;
2302
- background-color: var(--_ctm-dn-te-cd-ie-dn-bd-cr);
2303
- border-width: var(--_ctm-dn-te-cd-ie-dn-br-wh);
2304
- border-color: var(--_ctm-dn-te-cd-ie-dn-br-cr);
2305
- border-style: var(--_ctm-dn-te-cd-ie-dn-br-se);
2306
- border-radius: var(--_ctm-dn-te-cd-ie-dn-br-rs);
2307
- box-shadow: var(--_ctm-dn-te-cd-ie-dn-sw-ae) var(--_ctm-dn-te-cd-ie-dn-sw-br)
2308
- var(--_ctm-dn-te-cd-ie-dn-sw-sd) var(--_ctm-dn-te-cd-ie-dn-sw-cr);
2323
+ background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
2324
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2325
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2326
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2327
+ border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
2328
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae)
2329
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br)
2330
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd)
2331
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);
2309
2332
 
2310
2333
  img {
2311
2334
  // max-height: 135px;
@@ -2325,29 +2348,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2325
2348
  align-items: center;
2326
2349
  gap: 12px;
2327
2350
  align-self: stretch;
2328
- font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy);
2329
- font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se);
2330
- color: var(--_ctm-dn-be-nn-bn-dn-cr);
2331
- font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt);
2332
- font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2333
- text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue);
2334
- text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an);
2335
- letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg);
2336
- line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht);
2337
- background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr);
2338
- border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh);
2339
- border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr);
2340
- border-style: var(--_ctm-dn-be-nn-bn-dn-br-se);
2341
- border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs);
2342
- box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br)
2343
- var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr);
2351
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2352
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2353
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2354
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2355
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2356
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2357
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2358
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2359
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2360
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2361
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2362
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2363
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2364
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2365
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2366
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2367
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2368
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2344
2369
 
2345
2370
  .icon {
2346
2371
  svg {
2347
- width: var(--_ctm-dn-be-nn-bn-dn-in-se);
2348
- height: var(--_ctm-dn-be-nn-bn-dn-in-se);
2372
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2373
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2349
2374
  path {
2350
- stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
2375
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2351
2376
  }
2352
2377
  }
2353
2378
  }
@@ -2367,29 +2392,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2367
2392
  gap: 12px;
2368
2393
  align-self: stretch;
2369
2394
  text-transform: uppercase;
2370
- font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy);
2371
- font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se);
2372
- color: var(--_ctm-dn-be-nn-bn-dn-cr);
2373
- font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt);
2374
- font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2375
- text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue);
2376
- text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an);
2377
- letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg);
2378
- line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht);
2379
- background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr);
2380
- border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh);
2381
- border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr);
2382
- border-style: var(--_ctm-dn-be-nn-bn-dn-br-se);
2383
- border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs);
2384
- box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br)
2385
- var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr);
2395
+ font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2396
+ font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2397
+ color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2398
+ font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
2399
+ font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
2400
+ text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
2401
+ text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
2402
+ letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
2403
+ line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
2404
+ background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
2405
+ border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
2406
+ border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2407
+ border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2408
+ border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2409
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2410
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2411
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2412
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2386
2413
 
2387
2414
  .icon {
2388
2415
  svg {
2389
- width: var(--_ctm-dn-be-nn-bn-dn-in-se);
2390
- height: var(--_ctm-dn-be-nn-bn-dn-in-se);
2416
+ width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2417
+ height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2391
2418
  path {
2392
- stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
2419
+ stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2393
2420
  }
2394
2421
  }
2395
2422
  }
@@ -2399,7 +2426,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2399
2426
  }
2400
2427
  }
2401
2428
  .embla__container {
2402
- gap: var(--_ctm-lt-im-sg);
2429
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
2403
2430
  }
2404
2431
  }
2405
2432
  .arrow-navigation-categories {