@sc-360-v2/storefront-cms-library 0.5.69 → 0.5.71

package/dist/badge.scss

@@ -1,408 +1,408 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-[data-div-type="element"] {
-  &[data-element-type="badge"] {
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    min-width: 100px;
-    &.vtl {
-      min-height: 100px !important;
-      min-width: 30px;
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-      width: auto;
-      .badge__wrapper {
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: fit-content;
-
-        .status_badge {
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          width: 26px;
-          padding: 0px 24px 24px;
-          &[data-styletag="style1"] {
-            border-radius: 12px;
-            font-weight: bold;
-            white-space: nowrap;
-            border: 2px solid #fff;
-            text-transform: uppercase;
-          }
-          &[data-styletag="style2"] {
-            text-transform: uppercase;
-            //clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
-          }
-
-          &[data-styletag="style3"] {
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
-          }
-          &[data-styletag="style4"] {
-            clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
-          }
-          &[data-styletag="style5"] {
-            clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
-          }
-
-          .product_tag {
-            //writing-mode: vertical-rl;
-            //transform: rotate(180deg); // top-to-bottom vertical text
-          }
-
-          .icon {
-            margin-bottom: 4px;
-          }
-        }
-      }
-    }
-    &.hrz {
-      min-height: 30px !important;
-      min-width: 100px !important;
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-      .badge__wrapper {
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-
-        .status_badge {
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-          padding: 8px 12px;
-          &[data-styletag="style1"] {
-            border-radius: 12px;
-            font-weight: bold;
-            white-space: nowrap;
-            border: 2px solid #fff;
-            text-transform: uppercase;
-          }
-          &[data-styletag="style2"] {
-            text-transform: uppercase;
-            white-space: nowrap;
-            clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
-          }
-
-          &[data-styletag="style3"] {
-            clip-path: polygon(20% 0, 100% 0, 90% 50%, 100% 100%, 20% 100%);
-          }
-
-          &[data-styletag="style4"] {
-            clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
-          }
-          &[data-styletag="style5"] {
-            clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
-          }
-
-          .product_tag {
-            white-space: nowrap;
-            text-align: center;
-          }
-
-          .icon {
-            margin-right: 6px;
-          }
-        }
-      }
-    }
-    & > div {
-      &.wrapper {
-        //width: 100%;
-        height: 100%;
-      }
-    }
-    .badge__wrapper {
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-      justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ct-dt-se-at));
-      gap: prepareMediaVariable(--_ctm-lt-im-gp);
-      // width: 100%;
-      // height: 100%;
-
-      .status_badge {
-        display: flex;
-        align-items: center;
-        gap: prepareMediaVariable(--_ctm-lt-sg-bn-is);
-        width: 100%;
-        height: 100%;
-        mix-blend-mode: multiply;
-
-        // &[data-styletag="style7"] {
-        //   clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
-        //   display: flex;
-        //   justify-content: space-evenly;
-        //   align-items: center;
-        // }
-        // &[data-styletag="style6"] {
-        //   clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
-        //   line-height: 1.3;
-        // }
-
-        &[data-producttag="New"] {
-          background-color: prepareMediaVariable(--_ctm-dn-be-nw-se-bd-cr);
-          border-width: prepareMediaVariable(--_ctm-dn-be-nw-se-br-wh);
-          border-color: prepareMediaVariable(--_ctm-dn-be-nw-se-br-cr);
-          border-style: prepareMediaVariable(--_ctm-dn-be-nw-se-br-se);
-          border-radius: prepareMediaVariable(--_ctm-dn-be-nw-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-nw-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-cr);
-          .icon {
-            display: var(--_hover-show-icon, var(--_show-icon, flex));
-            svg {
-              width: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
-              height: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
-              path {
-                stroke: prepareMediaVariable(--_ctm-dn-be-nw-se-in-c1);
-                // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(--_ctm-dn-be-nw-se-se-wh, 1.25);
-              }
-            }
-          }
-        }
-        &[data-producttag="Bestseller"] {
-          //background-color: #f57c00;
-          background-color: prepareMediaVariable(--_ctm-dn-be-br-se-bd-cr);
-          border-width: prepareMediaVariable(--_ctm-dn-be-br-se-br-wh);
-          border-color: prepareMediaVariable(--_ctm-dn-be-br-se-br-cr);
-          border-style: prepareMediaVariable(--_ctm-dn-be-br-se-br-se);
-          border-radius: prepareMediaVariable(--_ctm-dn-be-br-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-br-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-br-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-br-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-br-se-sw-cr);
-          .icon {
-            display: var(--_hover-show-icon, var(--_show-icon, flex));
-            svg {
-              width: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
-              height: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
-
-              path {
-                stroke: prepareMediaVariable(--_ctm-dn-be-br-se-in-c1);
-                // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(--_ctm-dn-be-br-se-se-wh, 1.25);
-              }
-            }
-          }
-        }
-        &[data-producttag="Limited"] {
-          //background-color: #6a1b9a;
-          background-color: prepareMediaVariable(--_ctm-dn-be-ld-se-bd-cr);
-          border-width: prepareMediaVariable(--_ctm-dn-be-ld-se-br-wh);
-          border-color: prepareMediaVariable(--_ctm-dn-be-ld-se-br-cr);
-          border-style: prepareMediaVariable(--_ctm-dn-be-ld-se-br-se);
-          border-radius: prepareMediaVariable(--_ctm-dn-be-ld-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-ld-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-cr);
-          .icon {
-            display: var(--_hover-show-icon, var(--_show-icon, flex));
-            svg {
-              width: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
-              height: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
-
-              path {
-                stroke: prepareMediaVariable(--_ctm-dn-be-ld-se-in-c1);
-                // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(--_ctm-dn-be-ld-se-se-wh, 1.25);
-              }
-            }
-          }
-        }
-        &[data-producttag="Exclusive"] {
-          //background-color: #1976d2;
-          background-color: prepareMediaVariable(--_ctm-dn-be-ee-se-bd-cr);
-          border-width: prepareMediaVariable(--_ctm-dn-be-ee-se-br-wh);
-          border-color: prepareMediaVariable(--_ctm-dn-be-ee-se-br-cr);
-          border-style: prepareMediaVariable(--_ctm-dn-be-ee-se-br-se);
-          border-radius: prepareMediaVariable(--_ctm-dn-be-ee-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-ee-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-cr);
-          .icon {
-            display: var(--_hover-show-icon, var(--_show-icon, flex));
-            svg {
-              width: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
-              height: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
-
-              path {
-                stroke: prepareMediaVariable(--_ctm-dn-be-ee-se-in-c1);
-                // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(--_ctm-dn-be-ee-se-se-wh, 1.25);
-              }
-            }
-          }
-        }
-
-        .product_tag {
-          &[data-producttag="New"] {
-            font-family: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-fy);
-            text-transform: prepareMediaVariable(--_ctm-dn-be-nw-se-tt-tm);
-            word-wrap: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-wp);
-            word-break: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-bk);
-            font-size: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-se);
-            color: prepareMediaVariable(--_ctm-dn-be-nw-se-cr);
-            font-weight: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-se-ic);
-            text-decoration: prepareMediaVariable(--_ctm-dn-be-nw-se-ue);
-            text-align: prepareMediaVariable(--_ctm-dn-be-nw-se-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-be-nw-se-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-be-nw-se-le-ht);
-          }
-          &[data-producttag="Bestseller"] {
-            font-family: prepareMediaVariable(--_ctm-dn-be-br-se-ft-fy);
-            text-transform: prepareMediaVariable(--_ctm-dn-be-br-se-tt-tm);
-            word-wrap: prepareMediaVariable(--_ctm-dn-be-br-se-wd-wp);
-            word-break: prepareMediaVariable(--_ctm-dn-be-br-se-wd-bk);
-            font-size: prepareMediaVariable(--_ctm-dn-be-br-se-ft-se);
-            color: prepareMediaVariable(--_ctm-dn-be-br-se-cr);
-            font-weight: prepareMediaVariable(--_ctm-dn-be-br-se-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-be-br-se-ft-se-ic);
-            text-decoration: prepareMediaVariable(--_ctm-dn-be-br-se-ue);
-            text-align: prepareMediaVariable(--_ctm-dn-be-br-se-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-be-br-se-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-be-br-se-le-ht);
-          }
-          &[data-producttag="Limited"] {
-            font-family: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-fy);
-            text-transform: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-tm);
-            word-wrap: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-wp);
-            word-break: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-bk);
-            font-size: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-se);
-            color: prepareMediaVariable(--_ctm-dn-be-ld-se-cr);
-            font-weight: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-se-ic);
-            text-decoration: prepareMediaVariable(--_ctm-dn-be-ld-se-ue);
-            text-align: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-be-ld-se-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-be-ld-se-le-ht);
-          }
-          &[data-producttag="Exclusive"] {
-            font-family: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-fy);
-            text-transform: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-tm);
-            word-wrap: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-wp);
-            word-break: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-bk);
-            font-size: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-se);
-            color: prepareMediaVariable(--_ctm-dn-be-ee-se-cr);
-            font-weight: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-se-ic);
-            text-decoration: prepareMediaVariable(--_ctm-dn-be-ee-se-ue);
-            text-align: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-be-ee-se-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-be-ee-se-le-ht);
-          }
-        }
-      }
-      .badge_vertical_pill {
-        background-color: #4caf50;
-        color: #fff;
-        padding: 10px 8px;
-        border-radius: 12px;
-        font-weight: bold;
-        writing-mode: vertical-rl;
-        text-align: center;
-        font-size: 16px;
-        white-space: nowrap;
-        border: 2px solid #fff;
-      }
-      .badge_big_sale {
-        background-color: #ffa726;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        font-weight: bold;
-        font-size: 14px;
-        text-transform: uppercase;
-        padding: 6px 12px;
-        white-space: nowrap;
-        clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
-        gap: 8px;
-
-        .left {
-          font-size: 16px;
-        }
-
-        .right {
-          font-size: 12px;
-          font-weight: normal;
-        }
-      }
-      .badge_bogo {
-        background-color: #d5a373;
-        color: #fff;
-        padding: 6px 16px;
-        clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
-        font-weight: bold;
-        font-size: 14px;
-        display: inline-block;
-        text-transform: uppercase;
-        white-space: nowrap;
-        border: 2px dashed #fff;
-      }
-      .badgerightarrow {
-        background-color: #c49b6c;
-        color: white;
-        padding: 6px 12px;
-        clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
-        font-weight: bold;
-        font-size: 14px;
-      }
-      .badgebigsale {
-        background-color: #ff9800;
-        color: white;
-        padding: 6px 14px;
-        clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-weight: bold;
-
-        .label {
-          font-size: 16px;
-        }
-
-        .offer {
-          font-size: 12px;
-        }
-      }
-      .badge_verticalpill {
-        writing-mode: vertical-rl;
-        text-align: center;
-        background-color: #4caf50;
-        color: white;
-        padding: 12px 4px;
-        border-radius: 10px;
-        font-weight: bold;
-        font-size: 14px;
-      }
-      .badge_tail_down {
-        background-color: #8bc34a;
-        color: white;
-        padding: 10px 8px;
-        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
-        text-align: center;
-        font-weight: bold;
-        font-size: 14px;
-        line-height: 1.3;
-      }
-      .badge_ribbon {
-        background-color: #d2b48c;
-        color: white;
-        font-weight: bold;
-        font-size: 14px;
-        padding: 6px 12px;
-        clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
-        transform: rotate(-5deg);
-        text-align: center;
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="badge"] {
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    min-width: 100px;
+    &.vtl {
+      min-height: 100px !important;
+      min-width: 30px;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+      width: auto;
+      .badge__wrapper {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: fit-content;
+
+        .status_badge {
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          width: 26px;
+          padding: 0px 24px 24px;
+          &[data-styletag="style1"] {
+            border-radius: 12px;
+            font-weight: bold;
+            white-space: nowrap;
+            border: 2px solid #fff;
+            text-transform: uppercase;
+          }
+          &[data-styletag="style2"] {
+            text-transform: uppercase;
+            //clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
+          }
+
+          &[data-styletag="style3"] {
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
+          }
+          &[data-styletag="style4"] {
+            clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
+          }
+          &[data-styletag="style5"] {
+            clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
+          }
+
+          .product_tag {
+            //writing-mode: vertical-rl;
+            //transform: rotate(180deg); // top-to-bottom vertical text
+          }
+
+          .icon {
+            margin-bottom: 4px;
+          }
+        }
+      }
+    }
+    &.hrz {
+      min-height: 30px !important;
+      min-width: 100px !important;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+      .badge__wrapper {
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .status_badge {
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          padding: 8px 12px;
+          &[data-styletag="style1"] {
+            border-radius: 12px;
+            font-weight: bold;
+            white-space: nowrap;
+            border: 2px solid #fff;
+            text-transform: uppercase;
+          }
+          &[data-styletag="style2"] {
+            text-transform: uppercase;
+            white-space: nowrap;
+            clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
+          }
+
+          &[data-styletag="style3"] {
+            clip-path: polygon(20% 0, 100% 0, 90% 50%, 100% 100%, 20% 100%);
+          }
+
+          &[data-styletag="style4"] {
+            clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
+          }
+          &[data-styletag="style5"] {
+            clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
+          }
+
+          .product_tag {
+            white-space: nowrap;
+            text-align: center;
+          }
+
+          .icon {
+            margin-right: 6px;
+          }
+        }
+      }
+    }
+    & > div {
+      &.wrapper {
+        //width: 100%;
+        height: 100%;
+      }
+    }
+    .badge__wrapper {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ct-dt-se-at));
+      gap: prepareMediaVariable(--_ctm-lt-im-gp);
+      // width: 100%;
+      // height: 100%;
+
+      .status_badge {
+        display: flex;
+        align-items: center;
+        gap: prepareMediaVariable(--_ctm-lt-sg-bn-is);
+        width: 100%;
+        height: 100%;
+        mix-blend-mode: multiply;
+
+        // &[data-styletag="style7"] {
+        //   clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
+        //   display: flex;
+        //   justify-content: space-evenly;
+        //   align-items: center;
+        // }
+        // &[data-styletag="style6"] {
+        //   clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
+        //   line-height: 1.3;
+        // }
+
+        &[data-producttag="New"] {
+          background-color: prepareMediaVariable(--_ctm-dn-be-nw-se-bd-cr);
+          border-width: prepareMediaVariable(--_ctm-dn-be-nw-se-br-wh);
+          border-color: prepareMediaVariable(--_ctm-dn-be-nw-se-br-cr);
+          border-style: prepareMediaVariable(--_ctm-dn-be-nw-se-br-se);
+          border-radius: prepareMediaVariable(--_ctm-dn-be-nw-se-br-rs);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-nw-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-cr);
+          .icon {
+            display: var(--_hover-show-icon, var(--_show-icon, flex));
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
+              height: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
+              path {
+                stroke: prepareMediaVariable(--_ctm-dn-be-nw-se-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-be-nw-se-se-wh, 1.25);
+              }
+            }
+          }
+        }
+        &[data-producttag="Bestseller"] {
+          //background-color: #f57c00;
+          background-color: prepareMediaVariable(--_ctm-dn-be-br-se-bd-cr);
+          border-width: prepareMediaVariable(--_ctm-dn-be-br-se-br-wh);
+          border-color: prepareMediaVariable(--_ctm-dn-be-br-se-br-cr);
+          border-style: prepareMediaVariable(--_ctm-dn-be-br-se-br-se);
+          border-radius: prepareMediaVariable(--_ctm-dn-be-br-se-br-rs);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-br-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-br-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-br-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-br-se-sw-cr);
+          .icon {
+            display: var(--_hover-show-icon, var(--_show-icon, flex));
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
+              height: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
+
+              path {
+                stroke: prepareMediaVariable(--_ctm-dn-be-br-se-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-be-br-se-se-wh, 1.25);
+              }
+            }
+          }
+        }
+        &[data-producttag="Limited"] {
+          //background-color: #6a1b9a;
+          background-color: prepareMediaVariable(--_ctm-dn-be-ld-se-bd-cr);
+          border-width: prepareMediaVariable(--_ctm-dn-be-ld-se-br-wh);
+          border-color: prepareMediaVariable(--_ctm-dn-be-ld-se-br-cr);
+          border-style: prepareMediaVariable(--_ctm-dn-be-ld-se-br-se);
+          border-radius: prepareMediaVariable(--_ctm-dn-be-ld-se-br-rs);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-ld-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-cr);
+          .icon {
+            display: var(--_hover-show-icon, var(--_show-icon, flex));
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
+              height: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
+
+              path {
+                stroke: prepareMediaVariable(--_ctm-dn-be-ld-se-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-be-ld-se-se-wh, 1.25);
+              }
+            }
+          }
+        }
+        &[data-producttag="Exclusive"] {
+          //background-color: #1976d2;
+          background-color: prepareMediaVariable(--_ctm-dn-be-ee-se-bd-cr);
+          border-width: prepareMediaVariable(--_ctm-dn-be-ee-se-br-wh);
+          border-color: prepareMediaVariable(--_ctm-dn-be-ee-se-br-cr);
+          border-style: prepareMediaVariable(--_ctm-dn-be-ee-se-br-se);
+          border-radius: prepareMediaVariable(--_ctm-dn-be-ee-se-br-rs);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-ee-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-cr);
+          .icon {
+            display: var(--_hover-show-icon, var(--_show-icon, flex));
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
+              height: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
+
+              path {
+                stroke: prepareMediaVariable(--_ctm-dn-be-ee-se-in-c1);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-be-ee-se-se-wh, 1.25);
+              }
+            }
+          }
+        }
+
+        .product_tag {
+          &[data-producttag="New"] {
+            font-family: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-nw-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-bk);
+            font-size: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-se);
+            color: prepareMediaVariable(--_ctm-dn-be-nw-se-cr);
+            font-weight: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(--_ctm-dn-be-nw-se-ue);
+            text-align: prepareMediaVariable(--_ctm-dn-be-nw-se-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-be-nw-se-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-be-nw-se-le-ht);
+          }
+          &[data-producttag="Bestseller"] {
+            font-family: prepareMediaVariable(--_ctm-dn-be-br-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-br-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-br-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-br-se-wd-bk);
+            font-size: prepareMediaVariable(--_ctm-dn-be-br-se-ft-se);
+            color: prepareMediaVariable(--_ctm-dn-be-br-se-cr);
+            font-weight: prepareMediaVariable(--_ctm-dn-be-br-se-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-be-br-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(--_ctm-dn-be-br-se-ue);
+            text-align: prepareMediaVariable(--_ctm-dn-be-br-se-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-be-br-se-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-be-br-se-le-ht);
+          }
+          &[data-producttag="Limited"] {
+            font-family: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-bk);
+            font-size: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-se);
+            color: prepareMediaVariable(--_ctm-dn-be-ld-se-cr);
+            font-weight: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(--_ctm-dn-be-ld-se-ue);
+            text-align: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-be-ld-se-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-be-ld-se-le-ht);
+          }
+          &[data-producttag="Exclusive"] {
+            font-family: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-bk);
+            font-size: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-se);
+            color: prepareMediaVariable(--_ctm-dn-be-ee-se-cr);
+            font-weight: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-se-ic);
+            text-decoration: prepareMediaVariable(--_ctm-dn-be-ee-se-ue);
+            text-align: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-be-ee-se-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-be-ee-se-le-ht);
+          }
+        }
+      }
+      .badge_vertical_pill {
+        background-color: #4caf50;
+        color: #fff;
+        padding: 10px 8px;
+        border-radius: 12px;
+        font-weight: bold;
+        writing-mode: vertical-rl;
+        text-align: center;
+        font-size: 16px;
+        white-space: nowrap;
+        border: 2px solid #fff;
+      }
+      .badge_big_sale {
+        background-color: #ffa726;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        font-size: 14px;
+        text-transform: uppercase;
+        padding: 6px 12px;
+        white-space: nowrap;
+        clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
+        gap: 8px;
+
+        .left {
+          font-size: 16px;
+        }
+
+        .right {
+          font-size: 12px;
+          font-weight: normal;
+        }
+      }
+      .badge_bogo {
+        background-color: #d5a373;
+        color: #fff;
+        padding: 6px 16px;
+        clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
+        font-weight: bold;
+        font-size: 14px;
+        display: inline-block;
+        text-transform: uppercase;
+        white-space: nowrap;
+        border: 2px dashed #fff;
+      }
+      .badgerightarrow {
+        background-color: #c49b6c;
+        color: white;
+        padding: 6px 12px;
+        clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
+        font-weight: bold;
+        font-size: 14px;
+      }
+      .badgebigsale {
+        background-color: #ff9800;
+        color: white;
+        padding: 6px 14px;
+        clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: bold;
+
+        .label {
+          font-size: 16px;
+        }
+
+        .offer {
+          font-size: 12px;
+        }
+      }
+      .badge_verticalpill {
+        writing-mode: vertical-rl;
+        text-align: center;
+        background-color: #4caf50;
+        color: white;
+        padding: 12px 4px;
+        border-radius: 10px;
+        font-weight: bold;
+        font-size: 14px;
+      }
+      .badge_tail_down {
+        background-color: #8bc34a;
+        color: white;
+        padding: 10px 8px;
+        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
+        text-align: center;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 1.3;
+      }
+      .badge_ribbon {
+        background-color: #d2b48c;
+        color: white;
+        font-weight: bold;
+        font-size: 14px;
+        padding: 6px 12px;
+        clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
+        transform: rotate(-5deg);
+        text-align: center;
+      }
+    }
+  }
+}