@sc-360-v2/storefront-cms-library 0.3.37 → 0.3.39

package/dist/allocationDetails.scss

@@ -278,43 +278,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             align-items: flex-start;
             justify-content: center;
             border-radius: 6px;
-            img {
-              max-height: 100%;
-              max-width: 100%;
-            }
           }
           .price_details {
-            .prod_price_info {
-              .product__title {
-                font-size: 16px;
-                color: var(--_gray-700);
-                margin-bottom: 4px;
-                word-break: break-word;
-              }
-
-              .product__desc {
-                font-size: 14px;
-                color: var(--_gray-500);
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: clip;
-              }
-              .product__price {
-                position: relative;
-                margin-block: 20px;
-                .discounted__price {
-                  font-size: 20px;
-                  color: var(--_gray-900);
-                  font-weight: 600;
-                }
-                .offer__price {
-                  position: absolute;
-                  font-size: 16px;
-                  color: #797583;
-                  margin-left: 4px;
-                }
-              }
-            }
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
             .product__hilights {
               display: flex;
               align-items: center;
@@ -341,6 +309,408 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
               }
             }
+            .product__name {
+              font-weight: 6000;
+            }
+            .brand__container {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              color: #696464;
+            }
+          }
+        }
+      }
+    }
+
+    .embla {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      // overflow: hidden;
+
+      .embla__viewport {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+
+        .embla__container {
+          width: 100%;
+          height: 100%;
+          display: grid;
+          grid-template-rows: 100%;
+
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+            calc(
+              100% /
+                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
+            )
+          );
+
+          grid-auto-flow: column;
+          gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+            height: calc(100% - calc(50px + 10px));
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+            height: calc(100% - calc(50px + 20px));
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Dots"] {
+            height: calc(
+              100% - calc(
+                  var(
+                      --_ctm-mob-dn-pn-ds-dt-se,
+                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+                    ) +
+                    20px
+                )
+            );
+          }
+
+          .embla__slide {
+            width: 100%;
+            height: 100%;
+            & > img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+      &:not([data-display-style="Column"]) {
+        .embla__container {
+          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)))
+          );
+        }
+      }
+
+      .arrow-navigation {
+        display: flex;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        justify-content: space-between;
+        transform: translate(-50%, -50%);
+        //   padding-left: 20px;
+        &[data-control-type="Side"] {
+          .left-button,
+          .right-button {
+            background-color: transparent;
+          }
+        }
+        &[data-background-shape="Round"] {
+          .left-button,
+          .right-button {
+            background-color: #f2f5f5;
+            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+          }
+        }
+        &[data-control-type="Bottom-Overflow"] {
+          transform: translateX(-50%);
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          top: unset;
+          bottom: 6px;
+        }
+        &[data-control-type="Bottom"] {
+          transform: unset;
+          position: static;
+          width: 100%;
+          justify-content: center;
+          gap: 12px;
+          margin-top: 10px;
+        }
+        .left-button {
+          padding: 10px;
+          border-radius: 50%;
+          border: none;
+          width: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-left: 12px;
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(157, 153, 153);
+              }
+            }
+          }
+        }
+        .right-button {
+          border-radius: 50%;
+          border: none;
+          width: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-right: 12px;
+          padding: 10px;
+
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(157, 153, 153);
+              }
+            }
+          }
+        }
+        .icon {
+          display: flex;
+
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+
+            path {
+              stroke: rgb(56, 55, 55);
+            }
+          }
+        }
+      }
+
+      &[data-control-type="Side"] {
+        .embla__viewport {
+          width: calc(100% - 120px);
+          margin-inline: auto;
+        }
+        .left-button {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+        .right-button {
+          position: absolute;
+
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      &[data-thumbnail-placement="top"] {
+        flex-direction: column-reverse;
+      }
+      &[data-thumbnail-placement="bottom"] {
+        flex-direction: column;
+      }
+      &[data-thumbnail-placement="left"] {
+        flex-direction: row-reverse;
+
+        .embla__thumbs {
+          width: var(--_ctm-lt-tl-se);
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      &[data-thumbnail-placement="right"] {
+        flex-direction: row;
+        .embla__thumbs {
+          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      .embla__dots {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+        gap: 6px;
+
+        &[data-control-type="Bottom-Overflow"] {
+          position: absolute;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 75%;
+        }
+        .embla__dot {
+          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-or-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
+          );
+
+          touch-action: manipulation;
+          display: inline-flex;
+          text-decoration: none;
+          cursor: pointer;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          // width: 0.6rem;
+          // height: 0.6rem;
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+        }
+        .embla__dot:after {
+          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          content: "";
+        }
+        .embla__dot--selected:after {
+          box-shadow: inset 0 0 0 1px var(--text-body);
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-ct-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
+          );
+        }
+        &[data-slider-control="Pagination Line"] {
+          .embla__dot {
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-or-le-cr,
+              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
+            );
+            border-radius: 6px;
+          }
+
+          .embla__dot--selected:after {
+            box-shadow: inset 0 0 0 1px var(--text-body);
+            border-radius: 6px;
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-ct-le-cr,
+              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
+            );
+          }
+        }
+      }
+
+      .embla__thumbs {
+        width: 100%;
+        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
+        overflow: hidden;
+        // margin: 10px;
+        padding: 10px;
+
+        .embla__thumbs__viewport {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+        .embla__thumbs__container {
+          display: flex;
+          flex-direction: row;
+          margin-left: calc(var(--thumbs-slide-spacing) * -1);
+          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
+
+          width: 100%;
+          // justify-content: center;
+          // height: 200px;
+
+          .embla__thumbs__slide {
+            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+            & img {
+              width: 100%;
+              height: 100%;
+            }
           }
         }
       }

package/dist/badge.scss

@@ -1,8 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@function ctm-var($base) {
-  @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
-}
+@use "./functions.scss" as *;
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
@@ -121,15 +119,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       display: flex;
       align-items: center;
       align-self: stretch;
-      justify-content: var(--_sf-hr-at, ctm-var(dn-be-ct-dt-se-at));
-      gap: ctm-var(lt-im-gp);
+      justify-content: var(--_sf-hr-at, prepareMediaVariable(dn-be-ct-dt-se-at));
+      gap: prepareMediaVariable(lt-im-gp);
       // width: 100%;
       // height: 100%;
 
       .status_badge {
         display: flex;
         align-items: center;
-        gap: ctm-var(lt-sg-bn-is);
+        gap: prepareMediaVariable(lt-sg-bn-is);
         width: 100%;
         height: 100%;
         mix-blend-mode: multiply;
@@ -146,83 +144,87 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         // }
 
         &[data-producttag="New"] {
-          background-color: ctm-var(dn-be-nw-se-bd-cr);
-          border-width: ctm-var(dn-be-nw-se-br-wh);
-          border-color: ctm-var(dn-be-nw-se-br-cr);
-          border-style: ctm-var(dn-be-nw-se-br-se);
-          border-radius: ctm-var(dn-be-nw-se-br-rs);
-          box-shadow: ctm-var(dn-be-nw-se-sw-ae) ctm-var(dn-be-nw-se-sw-br)
-            ctm-var(dn-be-nw-se-sw-sd) ctm-var(dn-be-nw-se-sw-cr);
+          background-color: prepareMediaVariable(dn-be-nw-se-bd-cr);
+          border-width: prepareMediaVariable(dn-be-nw-se-br-wh);
+          border-color: prepareMediaVariable(dn-be-nw-se-br-cr);
+          border-style: prepareMediaVariable(dn-be-nw-se-br-se);
+          border-radius: prepareMediaVariable(dn-be-nw-se-br-rs);
+          box-shadow: prepareMediaVariable(dn-be-nw-se-sw-ae)
+            prepareMediaVariable(dn-be-nw-se-sw-br) prepareMediaVariable(dn-be-nw-se-sw-sd)
+            prepareMediaVariable(dn-be-nw-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
             svg {
-              width: ctm-var(dn-be-nw-se-in-se);
-              height: ctm-var(dn-be-nw-se-in-se);
+              width: prepareMediaVariable(dn-be-nw-se-in-se);
+              height: prepareMediaVariable(dn-be-nw-se-in-se);
               path {
-                stroke: ctm-var(dn-be-nw-se-in-c1);
+                stroke: prepareMediaVariable(dn-be-nw-se-in-c1);
               }
             }
           }
         }
         &[data-producttag="Bestseller"] {
           //background-color: #f57c00;
-          background-color: ctm-var(dn-be-br-se-bd-cr);
-          border-width: ctm-var(dn-be-br-se-br-wh);
-          border-color: ctm-var(dn-be-br-se-br-cr);
-          border-style: ctm-var(dn-be-br-se-br-se);
-          border-radius: ctm-var(dn-be-br-se-br-rs);
-          box-shadow: ctm-var(dn-be-br-se-sw-ae) ctm-var(dn-be-br-se-sw-br)
-            ctm-var(dn-be-br-se-sw-sd) ctm-var(dn-be-br-se-sw-cr);
+          background-color: prepareMediaVariable(dn-be-br-se-bd-cr);
+          border-width: prepareMediaVariable(dn-be-br-se-br-wh);
+          border-color: prepareMediaVariable(dn-be-br-se-br-cr);
+          border-style: prepareMediaVariable(dn-be-br-se-br-se);
+          border-radius: prepareMediaVariable(dn-be-br-se-br-rs);
+          box-shadow: prepareMediaVariable(dn-be-br-se-sw-ae)
+            prepareMediaVariable(dn-be-br-se-sw-br) prepareMediaVariable(dn-be-br-se-sw-sd)
+            prepareMediaVariable(dn-be-br-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
             svg {
-              width: ctm-var(dn-be-br-se-in-se);
-              height: ctm-var(dn-be-br-se-in-se);
+              width: prepareMediaVariable(dn-be-br-se-in-se);
+              height: prepareMediaVariable(dn-be-br-se-in-se);
 
               path {
-                stroke: ctm-var(dn-be-br-se-in-c1);
+                stroke: prepareMediaVariable(dn-be-br-se-in-c1);
               }
             }
           }
         }
         &[data-producttag="Limited"] {
           //background-color: #6a1b9a;
-          background-color: ctm-var(dn-be-ld-se-bd-cr);
-          border-width: ctm-var(dn-be-ld-se-br-wh);
-          border-color: ctm-var(dn-be-ld-se-br-cr);
-          border-style: ctm-var(dn-be-ld-se-br-se);
-          border-radius: ctm-var(dn-be-ld-se-br-rs);
-          box-shadow: ctm-var(dn-be-ld-se-sw-ae) ctm-var(dn-be-ld-se-sw-br)
-            ctm-var(dn-be-ld-se-sw-sd) ctm-var(dn-be-ld-se-sw-cr);
+          background-color: prepareMediaVariable(dn-be-ld-se-bd-cr);
+          border-width: prepareMediaVariable(dn-be-ld-se-br-wh);
+          border-color: prepareMediaVariable(dn-be-ld-se-br-cr);
+          border-style: prepareMediaVariable(dn-be-ld-se-br-se);
+          border-radius: prepareMediaVariable(dn-be-ld-se-br-rs);
+          box-shadow: prepareMediaVariable(dn-be-ld-se-sw-ae)
+            prepareMediaVariable(dn-be-ld-se-sw-br) prepareMediaVariable(dn-be-ld-se-sw-sd)
+            prepareMediaVariable(dn-be-ld-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
             svg {
-              width: ctm-var(dn-be-ld-se-in-se);
-              height: ctm-var(dn-be-ld-se-in-se);
+              width: prepareMediaVariable(dn-be-ld-se-in-se);
+              height: prepareMediaVariable(dn-be-ld-se-in-se);
 
               path {
-                stroke: ctm-var(dn-be-ld-se-in-c1);
+                stroke: prepareMediaVariable(dn-be-ld-se-in-c1);
               }
             }
           }
         }
         &[data-producttag="Exclusive"] {
           //background-color: #1976d2;
-          background-color: ctm-var(dn-be-ee-se-bd-cr);
-          border-width: ctm-var(dn-be-ee-se-br-wh);
-          border-color: ctm-var(dn-be-ee-se-br-cr);
-          border-style: ctm-var(dn-be-ee-se-br-se);
-          border-radius: ctm-var(dn-be-ee-se-br-rs);
-          box-shadow: ctm-var(dn-be-ee-se-sw-ae) ctm-var(dn-be-ee-se-sw-br)
-            ctm-var(dn-be-ee-se-sw-sd) ctm-var(dn-be-ee-se-sw-cr);
+          background-color: prepareMediaVariable(dn-be-ee-se-bd-cr);
+          border-width: prepareMediaVariable(dn-be-ee-se-br-wh);
+          border-color: prepareMediaVariable(dn-be-ee-se-br-cr);
+          border-style: prepareMediaVariable(dn-be-ee-se-br-se);
+          border-radius: prepareMediaVariable(dn-be-ee-se-br-rs);
+          box-shadow: prepareMediaVariable(dn-be-ee-se-sw-ae)
+            prepareMediaVariable(dn-be-ee-se-sw-br) prepareMediaVariable(dn-be-ee-se-sw-sd)
+            prepareMediaVariable(dn-be-ee-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
             svg {
-              width: ctm-var(dn-be-ee-se-in-se);
-              height: ctm-var(dn-be-ee-se-in-se);
+              width: prepareMediaVariable(dn-be-ee-se-in-se);
+              height: prepareMediaVariable(dn-be-ee-se-in-se);
 
               path {
-                stroke: ctm-var(dn-be-ee-se-in-c1);
+                stroke: prepareMediaVariable(dn-be-ee-se-in-c1);
               }
             }
           }
@@ -230,48 +232,48 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
         .product_tag {
           &[data-producttag="New"] {
-            font-family: ctm-var(dn-be-nw-se-ft-fy);
-            font-size: ctm-var(dn-be-nw-se-ft-se);
-            color: ctm-var(dn-be-nw-se-cr);
-            font-weight: ctm-var(dn-be-nw-se-ft-wt);
-            font-style: ctm-var(dn-be-nw-se-ft-se-ic);
-            text-decoration: ctm-var(dn-be-nw-se-ue);
-            text-align: ctm-var(dn-be-nw-se-tt-an);
-            letter-spacing: ctm-var(dn-be-nw-se-lr-sg);
-            line-height: ctm-var(dn-be-nw-se-le-ht);
+            font-family: prepareMediaVariable(dn-be-nw-se-ft-fy);
+            font-size: prepareMediaVariable(dn-be-nw-se-ft-se);
+            color: prepareMediaVariable(dn-be-nw-se-cr);
+            font-weight: prepareMediaVariable(dn-be-nw-se-ft-wt);
+            font-style: prepareMediaVariable(dn-be-nw-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(dn-be-nw-se-ue);
+            text-align: prepareMediaVariable(dn-be-nw-se-tt-an);
+            letter-spacing: prepareMediaVariable(dn-be-nw-se-lr-sg);
+            line-height: prepareMediaVariable(dn-be-nw-se-le-ht);
           }
           &[data-producttag="Bestseller"] {
-            font-family: ctm-var(dn-be-br-se-ft-fy);
-            font-size: ctm-var(dn-be-br-se-ft-se);
-            color: ctm-var(dn-be-br-se-cr);
-            font-weight: ctm-var(dn-be-br-se-ft-wt);
-            font-style: ctm-var(dn-be-br-se-ft-se-ic);
-            text-decoration: ctm-var(dn-be-br-se-ue);
-            text-align: ctm-var(dn-be-br-se-tt-an);
-            letter-spacing: ctm-var(dn-be-br-se-lr-sg);
-            line-height: ctm-var(dn-be-br-se-le-ht);
+            font-family: prepareMediaVariable(dn-be-br-se-ft-fy);
+            font-size: prepareMediaVariable(dn-be-br-se-ft-se);
+            color: prepareMediaVariable(dn-be-br-se-cr);
+            font-weight: prepareMediaVariable(dn-be-br-se-ft-wt);
+            font-style: prepareMediaVariable(dn-be-br-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(dn-be-br-se-ue);
+            text-align: prepareMediaVariable(dn-be-br-se-tt-an);
+            letter-spacing: prepareMediaVariable(dn-be-br-se-lr-sg);
+            line-height: prepareMediaVariable(dn-be-br-se-le-ht);
           }
           &[data-producttag="Limited"] {
-            font-family: ctm-var(dn-be-ld-se-ft-fy);
-            font-size: ctm-var(dn-be-ld-se-ft-se);
-            color: ctm-var(dn-be-ld-se-cr);
-            font-weight: ctm-var(dn-be-ld-se-ft-wt);
-            font-style: ctm-var(dn-be-ld-se-ft-se-ic);
-            text-decoration: ctm-var(dn-be-ld-se-ue);
-            text-align: ctm-var(dn-be-ld-se-tt-an);
-            letter-spacing: ctm-var(dn-be-ld-se-lr-sg);
-            line-height: ctm-var(dn-be-ld-se-le-ht);
+            font-family: prepareMediaVariable(dn-be-ld-se-ft-fy);
+            font-size: prepareMediaVariable(dn-be-ld-se-ft-se);
+            color: prepareMediaVariable(dn-be-ld-se-cr);
+            font-weight: prepareMediaVariable(dn-be-ld-se-ft-wt);
+            font-style: prepareMediaVariable(dn-be-ld-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(dn-be-ld-se-ue);
+            text-align: prepareMediaVariable(dn-be-ld-se-tt-an);
+            letter-spacing: prepareMediaVariable(dn-be-ld-se-lr-sg);
+            line-height: prepareMediaVariable(dn-be-ld-se-le-ht);
           }
           &[data-producttag="Exclusive"] {
-            font-family: ctm-var(dn-be-ee-se-ft-fy);
-            font-size: ctm-var(dn-be-ee-se-ft-se);
-            color: ctm-var(dn-be-ee-se-cr);
-            font-weight: ctm-var(dn-be-ee-se-ft-wt);
-            font-style: ctm-var(dn-be-ee-se-ft-se-ic);
-            text-decoration: ctm-var(dn-be-ee-se-ue);
-            text-align: ctm-var(dn-be-ee-se-tt-an);
-            letter-spacing: ctm-var(dn-be-ee-se-lr-sg);
-            line-height: ctm-var(dn-be-ee-se-le-ht);
+            font-family: prepareMediaVariable(dn-be-ee-se-ft-fy);
+            font-size: prepareMediaVariable(dn-be-ee-se-ft-se);
+            color: prepareMediaVariable(dn-be-ee-se-cr);
+            font-weight: prepareMediaVariable(dn-be-ee-se-ft-wt);
+            font-style: prepareMediaVariable(dn-be-ee-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(dn-be-ee-se-ue);
+            text-align: prepareMediaVariable(dn-be-ee-se-tt-an);
+            letter-spacing: prepareMediaVariable(dn-be-ee-se-lr-sg);
+            line-height: prepareMediaVariable(dn-be-ee-se-le-ht);
           }
         }
       }