@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

package/dist/kits.scss

@@ -1,305 +1,305 @@
-@use "sass:map";
-@use "sass:list";
-@use "./repeater-embla-controls.scss" as *;
-@use "./functions.scss" as *;
-$dataShowShadow: "[data-sw-sw='true']";
-$dataShowBorder: "[data-sw-br='true']";
-
-[data-div-type="element"] {
-  &[data-element-type="kits"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl, 100)}));
-
-    &[data-cms-element-resizer="true"] {
-      --_sf-img-dwdth: 100%;
-    }
-
-    --_sf-ic-sz-nn: #{prepareMediaVariable(--_ctm-lt-aw-in-se, 40px)};
-    --_sf-ed-vl-sz: #{prepareMediaVariable(--_ctm-lt-dt-se, 10px)};
-    --_sf-sl-ct-ic-dt-at-cl: #{prepareMediaVariable(--_ctm-lt-cl-ae-cr)};
-
-    & > .wrapper {
-      min-height: prepareMediaVariable(--_ctm-lt-mn-ht, 0px);
-      background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
-      border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
-      &#{$dataShowBorder} {
-        border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
-        border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
-        border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
-      }
-      &#{$dataShowShadow} {
-        box-shadow: #{prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)}
-          #{prepareMediaVariable(--_ctm-dn-wt-se-sw-br)}
-          #{prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)}
-          #{prepareMediaVariable(--_ctm-dn-wt-se-sw-cr)};
-      }
-
-      padding: prepareMediaVariable(--_ctm-lt-pg);
-
-      @for $i from 1 through 3 {
-        &:is([data-control-type="#{$i}"]) {
-          @if ($i == 3) {
-            overflow-y: visible;
-          }
-          @include CMSRepeaterEmblaControlStyles($i);
-        }
-      }
-
-      .btn__with__text {
-        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-bd-cr));
-
-        padding: prepareMediaVariable(--_ctm-lt-bn-pg);
-        display: flex;
-        flex-direction: var(--_sf-fd-bn);
-        align-items: center;
-
-        justify-content: prepareMediaVariable(--_ctm-lt-at);
-        gap: prepareMediaVariable(--_ctm-lt-gp);
-
-        width: prepareMediaVariable(--_ctm-lt-bn-wh, 100%);
-        height: prepareMediaVariable(--_ctm-lt-bn-ht, 50px);
-
-        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-rs));
-
-        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-ae))
-          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-br))
-          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-sd))
-          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-cr));
-
-        &[data-show-border="true"] {
-          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-cr));
-
-          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-se));
-
-          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-wh));
-        }
-
-        &[data-show-shadow="false"] {
-          --_show-shadow: none;
-        }
-        &[data-icon-position="left"] {
-          --_sf-fd-bn: row;
-        }
-        &[data-icon-position="right"] {
-          --_sf-fd-bn: row-reverse;
-        }
-        &[data-icon-position="center"] {
-          --_sf-fd-bn: row;
-        }
-
-        &:hover {
-          --_sf-vw-hr-kt-pg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-pg)};
-          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-bd-cr)};
-          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-cr)};
-          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-se)};
-          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-wh)};
-          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-rs)};
-
-          // for shadow
-          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-ae)};
-          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-br)};
-
-          --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-cr)};
-
-          // for font
-
-          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-cr)};
-          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-fy)};
-          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se)};
-          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-wt)};
-          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se-ic)};
-          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-an)};
-          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-lr-sg)};
-          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-le-ht)};
-
-          --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-tm)};
-          --_sf-hr-wd-wp: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-wp)};
-          --_sf-hr-wd-bk: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-bk)};
-
-          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-se)};
-
-          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ue)};
-
-          &[data-hover-show-shadow="false"] {
-            --_hover-show-shadow: none;
-          }
-          &[data-hover-show-icon="false"] {
-            --_hover-show-icon: none;
-          }
-        }
-        &[data-show-icon="false"] {
-          --_show-icon: none;
-        }
-        &[data-element-style="Icon"] {
-          &[data-icon-position="left"] {
-            --_sf-jc: start;
-          }
-          &[data-icon-position="right"] {
-            --_sf-jc: end;
-          }
-          &[data-icon-position="center"] {
-            --_sf-jc: center;
-          }
-        }
-
-        .txt {
-          display: flex;
-
-          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-cr));
-
-          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-fy));
-          &.flex__overflow {
-            white-space: normal;
-            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-          }
-
-          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se));
-
-          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-wt));
-
-          font-style: var(
-            --_sf-hr-ft-se-ic,
-            prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se-ic)
-          );
-
-          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-an));
-
-          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-lr-sg));
-
-          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-le-ht));
-
-          text-transform: var(
-            --_sf-hr-txt-tr,
-            prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-tm, normal)
-          );
-          word-break: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-wd-bk));
-          word-wrap: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
-
-          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ue));
-          // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
-        }
-
-        .icon {
-          display: var(--_hover-show-icon, var(--_show-icon, flex));
-          svg {
-            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));
-            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));
-
-            path {
-              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-c1));
-              // Overrides the stroke-width presentation attribute baked into the icon markup.
-              stroke-width: prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-se-wh, 1.25);
-            }
-          }
-        }
-        [data-element-style="Text"] {
-          display: inline-block;
-          width: 100%;
-        }
-
-        .icon--hover {
-          // position: absolute;
-          // inset: 0;
-          // opacity: 0;
-          display: none;
-          transition: opacity 0.2s ease;
-        }
-
-        &:hover .icon--hover {
-          // opacity: 1;
-          display: flex;
-        }
-
-        &:hover .icon--default {
-          // opacity: 0;
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-/**
- * Kits element layout styles.
- * NOTE: temporary location — move into the actual stylesheet path later.
- *
- * Both display types (slider + grid) are built on embla carousel.
- *  - Slider view: each embla slide = one product card. `--kit-spv` controls how
- *    many cards are visible per view, `--kit-gap` the gap between them.
- *  - Grid view: each embla slide = a page of items laid out in a CSS grid.
- *    `--kit-cols` controls the columns per row, items per page is chunked in JS
- *    (`itemsPerSlide`), so after N items a new embla slide begins.
- */
-
-$kit-gap: #{prepareMediaVariable(--_ctm-lt-se-gp, 16px)};
-$grid-gap: #{prepareMediaVariable(--_ctm-lt-im-gp, 16px)};
-$kit-spv: #{prepareMediaVariable(--_ctm-lt-ss-pr-vw, 3)};
-$kit-cols: #{prepareMediaVariable(--_ctm-lt-gd-cs, 2)};
-
-.kit__v2 {
-  // embla viewport
-  &.embla {
-    overflow: hidden;
-    width: 100%;
-  }
-
-  .embla__container {
-    display: flex;
-    gap: $kit-gap;
-  }
-
-  .embla__slide {
-    min-width: 0; // allow flex items to shrink below content size
-    width: 100%;
-  }
-
-  // ---- Product card (shared by slider + grid) ----
-  &__card,
-  &__grid-item {
-    display: flex;
-    flex-direction: column;
-  }
-
-  // wrapper the ResizeObserver measures (its width == the card/grid-item width)
-  &__img-wrap {
-    width: 100%;
-    line-height: 0;
-  }
-
-  &__img {
-    display: block;
-    width: 100%;
-    height: prepareMediaVariable(--_ctm-lt-ie-ht, 100px);
-    object-fit: cover;
-  }
-
-  &__title {
-    display: block;
-    margin-top: 8px;
-  }
-}
-
-// ---- Slider view: N cards per view ----
-.kit--slider {
-  .embla__slide {
-    // width of one card accounting for the gaps between the visible cards
-    flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
-  }
-}
-
-.embla__slide.kit__slide--grid {
-  flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
-}
-
-// ---- Grid view: one page (grid) per embla slide ----
-.kit--grid {
-  .embla__slide--grid {
-    flex: 0 0 100%; // one page fills the viewport
-  }
-
-  .kit__grid {
-    display: grid;
-    grid-template-columns: repeat(#{$kit-cols}, minmax(0, 1fr));
-    gap: $grid-gap;
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./repeater-embla-controls.scss" as *;
+@use "./functions.scss" as *;
+$dataShowShadow: "[data-sw-sw='true']";
+$dataShowBorder: "[data-sw-br='true']";
+
+[data-div-type="element"] {
+  &[data-element-type="kits"] {
+    width: var(--_sf-el-wh-st-mx, calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl, 100)}));
+
+    &[data-cms-element-resizer="true"] {
+      --_sf-img-dwdth: 100%;
+    }
+
+    --_sf-ic-sz-nn: #{prepareMediaVariable(--_ctm-lt-aw-in-se, 40px)};
+    --_sf-ed-vl-sz: #{prepareMediaVariable(--_ctm-lt-dt-se, 10px)};
+    --_sf-sl-ct-ic-dt-at-cl: #{prepareMediaVariable(--_ctm-lt-cl-ae-cr)};
+
+    & > .wrapper {
+      min-height: prepareMediaVariable(--_ctm-lt-mn-ht, 0px);
+      background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
+      border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
+      &#{$dataShowBorder} {
+        border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
+        border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
+      }
+      &#{$dataShowShadow} {
+        box-shadow: #{prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)}
+          #{prepareMediaVariable(--_ctm-dn-wt-se-sw-br)}
+          #{prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)}
+          #{prepareMediaVariable(--_ctm-dn-wt-se-sw-cr)};
+      }
+
+      padding: prepareMediaVariable(--_ctm-lt-pg);
+
+      @for $i from 1 through 3 {
+        &:is([data-control-type="#{$i}"]) {
+          @if ($i == 3) {
+            overflow-y: visible;
+          }
+          @include CMSRepeaterEmblaControlStyles($i);
+        }
+      }
+
+      .btn__with__text {
+        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-bd-cr));
+
+        padding: prepareMediaVariable(--_ctm-lt-bn-pg);
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: prepareMediaVariable(--_ctm-lt-at);
+        gap: prepareMediaVariable(--_ctm-lt-gp);
+
+        width: prepareMediaVariable(--_ctm-lt-bn-wh, 100%);
+        height: prepareMediaVariable(--_ctm-lt-bn-ht, 50px);
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-cr));
+
+          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-se));
+
+          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-wh));
+        }
+
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-vw-hr-kt-pg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-pg)};
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-rs)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-br)};
+
+          --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-cr)};
+
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-le-ht)};
+
+          --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-tm)};
+          --_sf-hr-wd-wp: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-wp)};
+          --_sf-hr-wd-bk: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-bk)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-se)};
+
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ue)};
+
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+        &[data-show-icon="false"] {
+          --_show-icon: none;
+        }
+        &[data-element-style="Icon"] {
+          &[data-icon-position="left"] {
+            --_sf-jc: start;
+          }
+          &[data-icon-position="right"] {
+            --_sf-jc: end;
+          }
+          &[data-icon-position="center"] {
+            --_sf-jc: center;
+          }
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-cr));
+
+          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-fy));
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-wt));
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se-ic)
+          );
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-an));
+
+          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-lr-sg));
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-le-ht));
+
+          text-transform: var(
+            --_sf-hr-txt-tr,
+            prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-tm, normal)
+          );
+          word-break: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-wd-bk));
+          word-wrap: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ue));
+          // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-c1));
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-se-wh, 1.25);
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+
+        .icon--hover {
+          // position: absolute;
+          // inset: 0;
+          // opacity: 0;
+          display: none;
+          transition: opacity 0.2s ease;
+        }
+
+        &:hover .icon--hover {
+          // opacity: 1;
+          display: flex;
+        }
+
+        &:hover .icon--default {
+          // opacity: 0;
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Kits element layout styles.
+ * NOTE: temporary location — move into the actual stylesheet path later.
+ *
+ * Both display types (slider + grid) are built on embla carousel.
+ *  - Slider view: each embla slide = one product card. `--kit-spv` controls how
+ *    many cards are visible per view, `--kit-gap` the gap between them.
+ *  - Grid view: each embla slide = a page of items laid out in a CSS grid.
+ *    `--kit-cols` controls the columns per row, items per page is chunked in JS
+ *    (`itemsPerSlide`), so after N items a new embla slide begins.
+ */
+
+$kit-gap: #{prepareMediaVariable(--_ctm-lt-se-gp, 16px)};
+$grid-gap: #{prepareMediaVariable(--_ctm-lt-im-gp, 16px)};
+$kit-spv: #{prepareMediaVariable(--_ctm-lt-ss-pr-vw, 3)};
+$kit-cols: #{prepareMediaVariable(--_ctm-lt-gd-cs, 2)};
+
+.kit__v2 {
+  // embla viewport
+  &.embla {
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .embla__container {
+    display: flex;
+    gap: $kit-gap;
+  }
+
+  .embla__slide {
+    min-width: 0; // allow flex items to shrink below content size
+    width: 100%;
+  }
+
+  // ---- Product card (shared by slider + grid) ----
+  &__card,
+  &__grid-item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // wrapper the ResizeObserver measures (its width == the card/grid-item width)
+  &__img-wrap {
+    width: 100%;
+    line-height: 0;
+  }
+
+  &__img {
+    display: block;
+    width: 100%;
+    height: prepareMediaVariable(--_ctm-lt-ie-ht, 100px);
+    object-fit: cover;
+  }
+
+  &__title {
+    display: block;
+    margin-top: 8px;
+  }
+}
+
+// ---- Slider view: N cards per view ----
+.kit--slider {
+  .embla__slide {
+    // width of one card accounting for the gaps between the visible cards
+    flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
+  }
+}
+
+.embla__slide.kit__slide--grid {
+  flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
+}
+
+// ---- Grid view: one page (grid) per embla slide ----
+.kit--grid {
+  .embla__slide--grid {
+    flex: 0 0 100%; // one page fills the viewport
+  }
+
+  .kit__grid {
+    display: grid;
+    grid-template-columns: repeat(#{$kit-cols}, minmax(0, 1fr));
+    gap: $grid-gap;
+  }
+}