@sc-360-v2/storefront-cms-library 0.2.99 → 0.2.100

package/dist/icon-list.scss

@@ -81,9 +81,9 @@ $pos: (
             --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
             --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
             --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
-            --_txt-ht-tl: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-tt-an)};
-            --_txt-ht-ls: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-lr-sg)};
-            --_txt-ht-lt: #{prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht)};
+            --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
+            --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
+            --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht)};
           }
 
           & > span {
@@ -105,6 +105,7 @@ $pos: (
           & > div {
             &.#{$textContaner} {
               display: var(--_d-flex);
+              flex-grow: 1;
               flex-direction: column;
               padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
               row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
@@ -145,21 +146,21 @@ $pos: (
                 font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
                 text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
                 font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
-                text-align: var(--_txt-ht-tl, prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an));
-                letter-spacing: var(--_txt-ht-ls, prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg));
-                line-height: var(--_txt-ht-lt, prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht));
+                text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
+                letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
+                line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
               }
 
               & > .#{$desc} {
-                font-family: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy), sans-serif;
-                font-size: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se);
-                color: prepareMediaVariable(--_ctm-dn-tt-dt-se-cr);
-                font-weight: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt);
-                text-decoration: prepareMediaVariable(--_ctm-dn-tt-dt-se-ue);
-                font-style: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic);
-                text-align: prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an);
-                letter-spacing: prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg);
-                line-height: prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht);
+                font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy), sans-serif;
+                font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
+                color: prepareMediaVariable(--_ctm-dn-dn-cr);
+                font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
+                text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
+                font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
+                text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
+                letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
+                line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
               }
               a {
                 color: inherit;

package/dist/item-stock.scss

@@ -1,5 +1,8 @@
 @use "sass:map";
 @use "sass:list";
+@function ctm-var($base) {
+  @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
+}
 
 [data-div-type="element"] {
   &[data-element-type="itemStock"] {
@@ -34,82 +37,41 @@
       .item__stock__heading {
         position: relative;
         .item__stock__text {
-          color: var(
-            --_ctm-mob-dn-im-sk-tt-cr,
-            var(--_ctm-tab-dn-im-sk-tt-cr, var(--_ctm-dn-im-sk-tt-cr))
-          );
-          font-family: var(
-              --_ctm-mob-dn-im-sk-tt-ft-fy,
-              var(--_ctm-tab-dn-im-sk-tt-ft-fy, var(--_ctm-dn-im-sk-tt-ft-fy))
-            ),
-            sans-serif;
-          font-size: var(
-            --_ctm-mob-dn-im-sk-tt-ft-se,
-            var(--_ctm-tab-dn-im-sk-tt-ft-se, var(--_ctm-dn-im-sk-tt-ft-se))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-im-sk-tt-ft-wt,
-            var(--_ctm-tab-dn-im-sk-tt-ft-wt, var(--_ctm-dn-im-sk-tt-ft-wt))
-          );
-          font-style: var(
-            --_ctm-mob-dn-im-sk-tt-ft-se-ic,
-            var(--_ctm-tab-dn-im-sk-tt-ft-se-ic, var(--_ctm-dn-im-sk-tt-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-im-sk-tt-tt-an,
-            var(--_ctm-tab-dn-im-sk-tt-tt-an, var(--_ctm-dn-im-sk-tt-tt-an))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-im-sk-tt-lr-sg,
-            var(--_ctm-tab-dn-im-sk-tt-lr-sg, var(--_ctm-dn-im-sk-tt-lr-sg))
-          );
-          line-height: var(
-            --_ctm-mob-dn-im-sk-tt-le-ht,
-            var(--_ctm-tab-dn-im-sk-tt-le-ht, var(--_ctm-dn-im-sk-tt-le-ht))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-im-sk-tt-ue,
-            var(--_ctm-tab-dn-im-sk-tt-ue, var(--_ctm-dn-im-sk-tt-ue))
-          );
-          background-color: var(
-            --_ctm-mob-dn-im-sk-tt-bd-cr,
-            var(--_ctm-tab-dn-im-sk-tt-bd-cr, var(--_ctm-dn-im-sk-tt-bd-cr))
-          );
-          border-color: var(
-            --_ctm-mob-dn-im-sk-tt-br-cr,
-            var(--_ctm-tab-dn-im-sk-tt-br-cr, var(--_ctm-dn-im-sk-tt-br-cr))
-          );
-          border-style: var(
-            --_ctm-mob-dn-im-sk-tt-br-se,
-            var(--_ctm-tab-dn-im-sk-tt-br-se, var(--_ctm-dn-im-sk-tt-br-se))
-          );
-          border-width: var(
-            --_ctm-mob-dn-im-sk-tt-br-wh,
-            var(--_ctm-tab-dn-im-sk-tt-br-wh, var(--_ctm-dn-im-sk-tt-br-wh))
-          );
-          border-radius: var(
-            --_ctm-mob-dn-im-sk-tt-br-rs,
-            var(--_ctm-tab-dn-im-sk-tt-br-rs, var(--_ctm-dn-im-sk-tt-br-rs))
-          );
-          box-shadow: var(
-            --_show-text-content-shadow,
-            var(
-                --_ctm-mob-dn-im-sk-tt-sw-ae,
-                var(--_ctm-tab-dn-im-sk-tt-sw-ae, var(--_ctm-dn-im-sk-tt-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-im-sk-tt-sw-br,
-                var(--_ctm-tab-dn-im-sk-tt-sw-br, var(--_ctm-dn-im-sk-tt-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-im-sk-tt-sw-sd,
-                var(--_ctm-tab-dn-im-sk-tt-sw-sd, var(--_ctm-dn-im-sk-tt-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-im-sk-tt-sw-cr,
-                var(--_ctm-tab-dn-im-sk-tt-sw-cr, var(--_ctm-dn-im-sk-tt-sw-cr))
-              )
-          );
+          font-family: ctm-var(dn-im-sk-tt-ft-fy);
+          font-size: ctm-var(dn-im-sk-tt-ft-se);
+          color: ctm-var(dn-im-sk-tt-cr);
+          font-weight: ctm-var(dn-im-sk-tt-ft-wt);
+          font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
+          text-decoration: ctm-var(dn-im-sk-tt-ue);
+          text-align: ctm-var(dn-im-sk-tt-tt-an);
+          letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
+          line-height: ctm-var(dn-im-sk-tt-le-ht);
+        }
+        .stock_message_conatainer {
+          display: flex;
+          padding: 2px 8px 2px 6px;
+          align-items: center;
+          gap: 4px;
+          mix-blend-mode: multiply;
+          background-color: ctm-var(dn-im-sk-tt-bd-cr);
+          border-width: ctm-var(dn-im-sk-tt-br-wh);
+          border-color: ctm-var(dn-im-sk-tt-br-cr);
+          border-style: ctm-var(dn-im-sk-tt-br-se);
+          border-radius: ctm-var(dn-im-sk-tt-br-rs);
+          box-shadow: ctm-var(dn-im-sk-tt-sw-ae) ctm-var(dn-im-sk-tt-sw-br)
+            ctm-var(dn-im-sk-tt-sw-sd) ctm-var(dn-im-sk-tt-sw-cr);
+
+          .stock_messages {
+            font-family: ctm-var(dn-im-sk-tt-ft-fy);
+            font-size: ctm-var(dn-im-sk-tt-ft-se);
+            color: ctm-var(dn-im-sk-tt-cr);
+            font-weight: ctm-var(dn-im-sk-tt-ft-wt);
+            font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
+            text-decoration: ctm-var(dn-im-sk-tt-ue);
+            text-align: ctm-var(dn-im-sk-tt-tt-an);
+            letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
+            line-height: ctm-var(dn-im-sk-tt-le-ht);
+          }
         }
       }
     }

package/dist/modal.scss

@@ -1,3 +1,4 @@
+//modalv1
 // Variables
 $modal_background_color: white;
 $backdrop_color: rgba(0, 0, 0, 0.2);
@@ -144,3 +145,322 @@ $active_btn_text_color: #fff;
     }
   }
 }
+
+//modalv2 css
+// Colors
+$white: var(--_white);
+$black: var(--base-black);
+$gray-100: #f9fafb;
+$gray-300: #e5e7eb;
+$gray-400: #ccc;
+$gray-600: #737373;
+$gray-700: #6b7280;
+$gray-800: #444;
+$gray-900: #111827;
+
+$primary: var(--_primary-400);
+$primary-hover: var(--_primary-500);
+$text-dark: #222;
+$text-medium: #374151;
+$text-light: #666;
+
+// Typography
+$font-base: "Segoe UI", sans-serif;
+$font-size-base: 14px;
+$font-size-sm: 12px;
+$font-size-md: 15px;
+$font-size-lg: 18px;
+
+// Spacing & Sizes
+$radius: 6px;
+$radius-lg: 8px;
+$input-height: 32px;
+$input-padding: 10px 12px;
+
+// Z-Index
+$z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
+$z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
+$z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
+$z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
+$z-index-min-cart: calc(
+  var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13
+); // Higher z-index for min cart
+
+// Shadows
+$shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
+
+.modalV2-main {
+  .modalV2-wrapper {
+    position: fixed;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    transition:
+      all 0.4s ease-in-out,
+      transform 0.4s ease-in-out;
+    background: $white;
+    border-radius: $radius-lg;
+    padding: 20px;
+    width: 850px;
+    font-family: $font-base;
+    box-shadow: $shadow-md;
+    z-index: $z-index-wrapper;
+    max-height: 70vh;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+
+    &.fullscreen {
+      transition:
+        all 0.5s ease-in-out,
+        transform 0.5s ease-in-out;
+      top: 50%;
+      left: 50%;
+      width: 95vw;
+      height: 95vh;
+      border-radius: $radius-lg;
+      transform: translate(-50%, -50%);
+      padding: 24px 32px;
+      box-shadow: none;
+      z-index: $z-index-modal;
+      display: flex;
+      flex-direction: column;
+      max-height: 100vh;
+
+      .product-list {
+        flex: 1;
+        overflow-y: auto;
+        margin-top: 24px;
+      }
+
+      .footer-bar {
+        border-top: 1px solid $gray-300;
+        padding-top: 16px;
+        margin-top: 24px;
+      }
+    }
+
+    .top-bar {
+      position: sticky;
+      top: 0;
+      background: $white;
+      z-index: 1;
+      padding-bottom: 12px;
+      .title-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .left-col {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+        }
+
+        .title {
+          font-size: $font-size-lg;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .count {
+            font-weight: 700;
+            color: $gray-600;
+            background-color: #f2f4f7;
+            border-radius: 50%;
+            font-size: $font-size-sm;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+
+        .actions span {
+          margin-left: 14px;
+          cursor: pointer;
+          font-size: 16px;
+          color: $text-light;
+          transition: color 0.2s;
+
+          &:hover {
+            color: $black;
+          }
+        }
+      }
+
+      .input-group {
+        display: flex;
+        gap: 12px;
+
+        .qty-input {
+          padding: $input-padding;
+          border: 1px solid $gray-400;
+          border-radius: $radius;
+          font-size: $font-size-base;
+          transition: border 0.2s;
+          width: 120px;
+
+          &:focus {
+            border-color: $primary;
+            outline: none;
+          }
+        }
+
+        .or-text {
+          align-self: center;
+          font-weight: 600;
+          color: $gray-800;
+          font-size: $font-size-base;
+        }
+
+        .add-btn {
+          background-color: $primary;
+          color: $white;
+          padding: 10px 16px;
+          border-radius: $radius;
+          font-weight: 600;
+          font-size: $font-size-base;
+          cursor: pointer;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: $primary-hover;
+          }
+        }
+      }
+    }
+
+    .footer-bar {
+      position: sticky;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      padding-top: 16px;
+      border-top: 1px solid $gray-300;
+      margin-top: 24px;
+      font-size: $font-size-base;
+
+      .summary span {
+        margin-right: 18px;
+        font-weight: 500;
+        color: $text-medium;
+      }
+
+      .footer-actions {
+        display: flex;
+        gap: 10px;
+
+        .cancel-btn {
+          border-radius: $radius;
+          padding: 10px 14px;
+          font-weight: 500;
+          font-size: $font-size-base;
+          color: #333;
+          cursor: pointer;
+          transition: background 0.2s;
+
+          &:hover {
+            background: $gray-300;
+          }
+        }
+
+        .cart-btn {
+          background: $primary;
+          color: $white;
+          border-radius: $radius;
+          padding: 10px 20px;
+          font-weight: 600;
+          font-size: $font-size-base;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          cursor: pointer;
+          transition: background 0.2s;
+
+          &:hover {
+            background: $primary-hover;
+          }
+        }
+      }
+    }
+  }
+
+  .modalV2-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: $z-index-backdrop;
+  }
+
+  .modalV2-min {
+    position: fixed;
+    transition:
+      all 0.4s ease-in-out,
+      transform 0.4s ease-in-out;
+    right: 20px;
+    bottom: 20px;
+    padding: 0; /* Remove padding from the main min container */
+    border-radius: $radius;
+    box-shadow: $shadow-md;
+    z-index: $z-index-minimized;
+    display: none;
+    flex-direction: row; /* Align items in a row */
+    align-items: center;
+    gap: 10px; /* Adjust gap between elements */
+    font-size: $font-size-base;
+    background-color: transparent; /* Make the main container transparent */
+
+    .min-toolbar {
+      background-color: $white;
+      display: flex;
+      align-items: center; /* Align items vertically in the toolbar */
+      padding: 12px 16px; /* Add padding to the toolbar */
+      border-radius: $radius 0 0 $radius; /* Rounded left corners */
+      gap: 16px;
+    }
+
+    &.active {
+      display: flex;
+    }
+
+    .cart-btn {
+      background: $primary;
+      color: $white;
+      border: none; /* Remove border */
+      border-radius: 0 $radius $radius 0; /* Rounded right corners */
+      padding: 12px 16px;
+      font-weight: 600;
+      font-size: $font-size-sm;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+      z-index: $z-index-min-cart;
+
+      &:hover {
+        background: $primary-hover;
+      }
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+
+      span {
+        cursor: pointer;
+        font-size: 16px;
+        color: $text-light;
+        transition: color 0.2s;
+
+        &:hover {
+          color: $black;
+        }
+      }
+    }
+  }
+}

package/dist/payment-methods.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "sass:list";
-
+@function ctm-var($base) {
+  @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
+}
 [data-div-type="element"] {
   &[data-element-type="paymentMethods"] {
     // width: var(--_lt-wh);
@@ -34,6 +36,13 @@
       display: flex;
       flex-direction: column;
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      background-color: ctm-var(dn-pt-md-wt-bd-cr);
+      border-width: ctm-var(dn-pt-md-wt-br-wh);
+      border-color: ctm-var(dn-pt-md-wt-br-cr);
+      border-style: ctm-var(dn-pt-md-wt-br-se);
+      border-radius: ctm-var(dn-pt-md-wt-br-rs);
+      box-shadow: ctm-var(dn-pt-md-wt-sw-ae) ctm-var(dn-pt-md-wt-sw-br) ctm-var(dn-pt-md-wt-sw-sd)
+        ctm-var(dn-pt-md-wt-sw-cr);
       .title-content {
         display: flex;
         flex-direction: column;
@@ -41,10 +50,28 @@
           font-size: 24px;
           margin-bottom: 10px;
           color: #000;
+          font-family: ctm-var(dn-pt-md-te-ft-fy);
+          font-size: ctm-var(dn-pt-md-te-ft-se);
+          color: ctm-var(dn-pt-md-te-cr);
+          font-weight: ctm-var(dn-pt-md-te-ft-wt);
+          font-style: ctm-var(dn-pt-md-te-ft-se-ic);
+          text-decoration: ctm-var(dn-pt-md-te-ue);
+          text-align: ctm-var(dn-pt-md-te-tt-an);
+          letter-spacing: ctm-var(dn-pt-md-te-lr-sg);
+          line-height: ctm-var(dn-pt-md-te-le-ht);
         }
         .description {
           font-size: 16px;
           color: #000;
+          font-family: ctm-var(dn-pt-md-dn-ft-fy);
+          font-size: ctm-var(dn-pt-md-dn-ft-se);
+          color: ctm-var(dn-pt-md-dn-cr);
+          font-weight: ctm-var(dn-pt-md-dn-ft-wt);
+          font-style: ctm-var(dn-pt-md-dn-ft-se-ic);
+          text-decoration: ctm-var(dn-pt-md-dn-ue);
+          text-align: ctm-var(dn-pt-md-dn-tt-an);
+          letter-spacing: ctm-var(dn-pt-md-dn-lr-sg);
+          line-height: ctm-var(dn-pt-md-dn-le-ht);
         }
       }
       .payment__methods__container {
@@ -56,6 +83,13 @@
           --_ctm-mob-lt-im-ct-at,
           var(--_ctm-tab-lt-im-ct-at, var(--_ctm-lt-im-ct-at))
         );
+        background-color: ctm-var(dn-pt-md-cr-dn-bd-cr);
+        border-width: ctm-var(dn-pt-md-cr-dn-br-wh);
+        border-color: ctm-var(dn-pt-md-cr-dn-br-cr);
+        border-style: ctm-var(dn-pt-md-cr-dn-br-se);
+        border-radius: ctm-var(dn-pt-md-cr-dn-br-rs);
+        box-shadow: ctm-var(dn-pt-md-cr-dn-sw-ae) ctm-var(dn-pt-md-cr-dn-sw-br)
+          ctm-var(dn-pt-md-cr-dn-sw-sd) ctm-var(dn-pt-md-cr-dn-sw-cr);
 
         .horizontal {
           display: flex;
@@ -71,6 +105,15 @@
           }
           .item {
             padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+            font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
+            font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
+            color: ctm-var(dn-pt-md-cr-dn-cr);
+            font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
+            font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
+            text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
+            text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
+            letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
+            line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
             img {
               width: 50px;
               height: 30px;
@@ -91,6 +134,15 @@
           }
           .item {
             padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+            font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
+            font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
+            color: ctm-var(dn-pt-md-cr-dn-cr);
+            font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
+            font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
+            text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
+            text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
+            letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
+            line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
             img {
               width: 50px;
               height: 30px;
@@ -140,6 +192,15 @@
                   var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
                 );
                 border: 0;
+                font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
+                font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
+                color: ctm-var(dn-pt-md-cr-dn-cr);
+                font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
+                font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
+                text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
+                text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
+                letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
+                line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
               }
             }
           }
@@ -158,6 +219,15 @@
                   --_ctm-mob-lt-ct-at,
                   var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
                 );
+                font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
+                font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
+                color: ctm-var(dn-pt-md-cr-dn-cr);
+                font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
+                font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
+                text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
+                text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
+                letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
+                line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
               }
             }
           }