@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$overflowSelector: ".flex__overflow";
// --_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';

@mixin NAVIGATION_STYLES($type: 1) {
  $TYPE: "cy";
  @if ($type == 2) {
    $TYPE: "pt";
  }
  $size: var(
    --_sf-icn-size,
    #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-se, 16px)}
  );
  $clr: var(
    --_sf-icn-clr,
    #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-c1, #000)}
  );
  $perc: 1.75;
  display: var(--_d-flex);
  align-items: center;
  justify-content: center;
  width: calc(#{$size} * #{$perc});
  height: calc(#{$size} * #{$perc});
  background: var(
    --_sf-icn-bg,
    #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)}
  );
  border-radius: var(
    --_sf-icn-brs,
    #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)}
  );
  // Border is only drawn when the "Show Border" toggle is on. The renderer emits
  // data-show-border="false" when the toggle is off; an absent/"true" value keeps
  // the border (so existing arrows that don't set the attribute are unaffected).
  &:not([data-show-border="false"]) {
    border-color: var(
      --_sf-icn-br,
      #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)}
    );
    border-width: var(
      --_sf-icn-bw,
      #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)}
    );
    border-style: var(
      --_sf-icn-bs,
      #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)}
    );
  }
  // Hide the arrow glyph when the "Show Icon" toggle is off.
  &[data-show-icon="false"] > span {
    display: none;
  }
  &:disabled {
    opacity: 0.65;
    cursor: no-drop;
  }

  &:hover {
    --_sf-icn-size: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-se)};
    --_sf-icn-clr: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-c1)};
    --_sf-icn-bg: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-bd-cr)};
    --_sf-icn-br: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-cr)};
    --_sf-icn-bw: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-wh)};
    --_sf-icn-bs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-se)};
    --_sf-icn-brs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-rs)};
  }
  & > span {
    display: var(--_d-flex);

    svg {
      width: #{$size};
      height: #{$size};

      path {
        stroke: #{$clr};
      }
    }
  }
}
[data-div-type="element"] {
  &[data-element-type="bundle"] {
    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;

    // width: var(--_sf-con-nw-wh);--_ctm-ele-nw-wh-vl
    // width: var(
    //   --_sf-mob-el-wh-st-mx,
    //   var(
    //     --_sf-tab-el-wh-st-mx,
    //     var(
    //       --_sf-el-wh-st-mx,
    //       calc(
    //         1% *
    //           var(
    //             --_ctm-mob-bun-ele-nw-wh-vl,
    //             var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
    //           )
    //       )
    //     )
    //   )
    // );
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
      )
    );
    // min-height: var();
    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));

    // &[data-view-state="full"] {
    //   height: auto;
    // }
    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));

    // --_aspect-ratio: calc(
    //   1 *
    //     (
    //       var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
    //         var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
    //     )
    // );
    // &[data-view-state="full"] {
    //   & > .wrapper {
    //     & > div {
    //       height: 100%;
    //     }
    //   }
    // }

    // height: auto;

    // margin: var(
    //   --_ctm-mob-bun-lt-mn,
    //   var(
    //     --_ctm-tab-bun-lt-mn,
    //     var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
    //   )
    // );

    // &:not(:has(#{$resizerId}#{$resizeActive})) {
    //   min-height: 100px !important;
    // }

    & > .wrapper {
      width: 100%;
      // height: 100%;
    }
    .embla {
      width: 100%;
      // height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: var(--_ctm-lt-ow-ss);

      .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))
                        ) -
                        1
                    ) *
                    var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
                ) /
                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(
                  var(
                      --_ctm-mob-dn-pn-as-aw-se,
                      var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
                    ) +
                    10px
                )
            );
          }

          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
            height: calc(
              100% - calc(
                  var(
                      --_ctm-mob-dn-pn-le-le-ht,
                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
                    ) +
                    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%;
          }
        }
      }
      &: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))
                      ) -
                      1
                  ) *
                  var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
              ) /
              var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
          );
        }
      }

      &[data-display-style="Column"] {
        // overflow: unset;

        .embla__viewport {
          .embla__container {
            display: flex;
            .embla__slide {
              width: unset;
              height: 100%;
              aspect-ratio: 1.3 / 2;
            }
          }
        }
      }

      .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(192, 192, 192);
              }
            }
          }
        }
        .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(192, 192, 192);
              }
            }
          }
        }
        .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: var(
                --_ctm-mob-dn-pn-as-aw-cr,
                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
              );
            }
          }
        }

        .left-button,
        .right-button {
          @include NAVIGATION_STYLES(2);
        }
      }

      &[data-control-type="Side"] {
        .embla__viewport {
          width: calc(100% - 120px);
          margin-inline: auto;
        }
        .left-button {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 2;

          @include NAVIGATION_STYLES(1);
        }
        .right-button {
          position: absolute;
          z-index: 2;
          right: 0;
          top: 50%;
          transform: translateY(-50%);

          @include NAVIGATION_STYLES(1);
        }

        // :is(.left-button, .right-button) {
        //   @include NAVIGATION_STYLES(1);
        // }
      }

      &[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: prepareMediaVariable(--_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%;
          }
        }
      }
    }
    .bundle__element__container {
      // height: 100%;
      background-color: var(
        --_ctm-mob-dn-wt-se-bd-cr,
        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
      );

      border-color: var(
        --_ctm-mob-dn-wt-se-br-cr,
        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
      );

      border-style: var(
        --_ctm-mob-dn-wt-se-br-se,
        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
      );

      border-width: var(
        --_ctm-mob-dn-wt-se-br-wh,
        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
      );

      border-radius: var(
        --_ctm-mob-dn-wt-se-br-rs,
        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
      );

      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
      );

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      display: flex;
      flex-direction: column;
      // height: 100%;

      .bundle__tabs {
        width: 100%;
        background-color: var(
          --_ctm-mob-dn-be-ts-wt-se-bd-cr,
          var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr))
        );
        // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
        display: flex;
        flex-direction: column;
        --_sf-gp: var(
          --_ctm-mob-lt-im-sg,
          var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
        );
        --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
        row-gap: var(--_sf-gp);
        width: 100%;
        // height: 100%;
        // Border only drawn when the widget's "Show Border" toggle is on. The
        // renderer emits data-show-border="true"/"" on the .bundle__tabs container.
        &[data-show-border="true"] {
          border-color: var(
            --_ctm-mob-dn-be-ts-wt-se-br-cr,
            var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr))
          );
          border-style: var(
            --_ctm-mob-dn-be-ts-wt-se-br-se,
            var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se))
          );
          border-width: var(
            --_ctm-mob-dn-be-ts-wt-se-br-wh,
            var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh))
          );
        }
        border-radius: var(
          --_ctm-mob-dn-be-ts-wt-se-br-rs,
          var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs))
        );
        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-be-ts-wt-se-sw-ae,
              var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae))
            )
            var(
              --_ctm-mob-dn-be-ts-wt-se-sw-br,
              var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br))
            )
            var(
              --_ctm-mob-dn-be-ts-wt-se-sw-sd,
              var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-be-ts-wt-se-sw-cr,
              var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr))
            )
        );
        .profile__button {
          &[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-hr-bd-cr: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-br-se,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs))
            );
            --_sf-hr-at: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-at,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at))
            );
            --_sf-hr-in-ad-tt-sg: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
              var(
                --_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
                var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg)
              )
            );

            // for shadow
            --_sf-hr-sw-ae: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae))
            );
            --_sf-hr-sw-br: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br))
            );
            --_sf-hr-sw-hr: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr))
            );
            --_sf-hr-sw-cr: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr))
            );

            // for font

            --_sf-hr-cr: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr))
            );
            --_sf-hr-ft-fy: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy))
            );
            --_sf-hr-tt-tm: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-tm,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-tm))
            );
            --_sf-hr-wd-wp: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-wp,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-wp))
            );
            --_sf-hr-wd-bk: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-bk,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-bk))
            );
            --_sf-hr-ft-se: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se))
            );
            --_sf-hr-ft-wt: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt))
            );
            --_sf-hr-ft-se-ic: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic,
              var(
                --_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic,
                var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic)
              )
            );
            --_sf-hr-tt-an: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an))
            );
            --_sf-hr-lr-sg: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg))
            );
            --_sf-hr-le-ht: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht))
            );

            --_sf-hr-in-se: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
            );
            --_sf-hr-in-se: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
            );
            --_sf-hr-in-c1: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1))
            );
            --_sf-hr-ue: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-ue,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue))
            );

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-pg,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-se-wh,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh))
            );

            &[data-hover-show-shadow="false"] {
              --_hover-show-shadow: none;
            }
            &[data-hover-show-icon="false"] {
              --_hover-show-icon: none;
            }
          }

          background-color: var(
            --_sf-hr-bd-cr,
            prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
          );

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
          gap: var(
            --_sf-hr-in-ad-tt-sg,
            prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
          );

          border-radius: var(
            --_sf-hr-br-rs,
            prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
          );

          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));

          &[data-show-border="true"] {
            border-color: var(
              --_sf-hr-br-cr,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
            );

            border-style: var(
              --_sf-hr-br-se,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
            );

            border-width: var(
              --_sf-hr-br-wh,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
            );
          }

          // text styles

          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm));
          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp));
          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk));
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }

          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));

          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));

          font-style: var(
            --_sf-hr-ft-se-ic,
            prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
          );

          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));

          letter-spacing: var(
            --_sf-hr-lr-sg,
            prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
          );

          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));

          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

          [data-element-style="Text"] {
            display: inline-block;
            width: 100%;
          }

          &[data-is-selected="true"] {
            --_sf-sd-bd-cr: var(
              --_ctm-mob-dn-me-sd-se-bd-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr))
            );
            --_sf-sd-br-cr: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr))
            );
            --_sf-sd-br-se: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se))
            );
            --_sf-sd-br-wh: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh))
            );
            --_sf-sd-br-rs: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs))
            );
            --_sf-sd-at: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-at,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at))
            );
            --_sf-sd-in-ad-tt-sg: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
              var(
                --_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
                var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)
              )
            );

            // for shadow
            --_sf-sd-sw-ae: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae))
            );
            --_sf-sd-sw-br: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br))
            );
            --_sf-sd-sw-hr: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr))
            );
            --_sf-sd-sw-cr: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr))
            );

            // for font

            --_sf-sd-cr: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr))
            );
            --_sf-sd-ft-fy: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy))
            );
            --_sf-sd-tt-tm: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-tm,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-tm))
            );
            --_sf-sd-wd-wp: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-wp,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-wp))
            );
            --_sf-sd-wd-bk: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-bk,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-bk))
            );
            --_sf-sd-ft-se: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se))
            );
            --_sf-sd-ft-wt: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt))
            );
            --_sf-sd-ft-se-ic: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
              var(
                --_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
                var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)
              )
            );
            --_sf-sd-tt-an: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an))
            );
            --_sf-sd-lr-sg: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg))
            );
            --_sf-sd-le-ht: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht))
            );

            --_sf-sd-in-se: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
            );
            --_sf-sd-in-se: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
            );
            --_sf-sd-in-c1: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1))
            );
            --_sf-sd-ue: var(
              --_ctm-mob-dn-be-ts-be-tb-hr-ue,
              var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue))
            );

            // for pading and width
            --_sf-sd-pg: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg))
            );
            --_sf-sd-wh: var(
              --_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
              var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh))
            );

            &[data-hover-show-shadow="false"] {
              --_hover-show-shadow: none;
            }
            &[data-hover-show-icon="false"] {
              --_hover-show-icon: none;
            }

            background-color: var(
              --_sf-sd-bd-cr,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
            );

            padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
            display: flex;
            flex-direction: var(--_sf-fd-bn);
            align-items: center;

            justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
            gap: var(
              --_sf-sd-in-ad-tt-sg,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
            );

            border-radius: var(
              --_sf-sd-br-rs,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
            );

            box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
              var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
              var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
              var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));

            &[data-show-border="true"] {
              border-color: var(
                --_sf-sd-br-cr,
                prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
              );

              border-style: var(
                --_sf-sd-br-se,
                prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
              );

              border-width: var(
                --_sf-sd-br-wh,
                prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
              );
            }

            // text styles

            color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));

            font-family: var(
              --_sf-sd-ft-fy,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)
            );
            text-transform: var(
              --_sf-sd-tt-tm,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm)
            );
            word-wrap: var(
              --_sf-sd-wd-wp,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp)
            );
            word-break: var(
              --_sf-sd-wd-bk,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk)
            );
            &.flex__overflow {
              white-space: normal;
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }

            font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));

            font-weight: var(
              --_sf-sd-ft-wt,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt)
            );

            font-style: var(
              --_sf-sd-ft-se-ic,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
            );

            text-align: var(
              --_sf-sd-tt-an,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an)
            );

            letter-spacing: var(
              --_sf-sd-lr-sg,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
            );

            line-height: var(
              --_sf-sd-le-ht,
              prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht)
            );

            text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

            [data-element-style="Text"] {
              display: inline-block;
              width: 100%;
            }
          }
        }
        .embla {
          height: auto;
          .embla__viewport {
            .embla__container {
              display: flex;
              gap: prepareMediaVariable(--_ctm-dn-be-ts-wt-se-im-gp);
              .embla__slide {
                width: unset;
              }
            }
          }
        }
      }
      .category__tabs {
        width: 100%;
        background-color: var(
          --_ctm-mob-dn-cy-ts-wt-se-bd-cr,
          var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr))
        );
        // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
        display: flex;
        flex-direction: column;
        --_sf-gp: var(
          --_ctm-mob-lt-im-sg,
          var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
        );
        --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
        row-gap: var(--_sf-gp);
        width: 100%;
        // height: 100%;
        // Border only drawn when the widget's "Show Border" toggle is on. The
        // renderer emits data-show-border="true"/"" on the .category__tabs container.
        &[data-show-border="true"] {
          border-color: var(
            --_ctm-mob-dn-cy-ts-wt-se-br-cr,
            var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr))
          );
          border-style: var(
            --_ctm-mob-dn-cy-ts-wt-se-br-se,
            var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se))
          );
          border-width: var(
            --_ctm-mob-dn-cy-ts-wt-se-br-wh,
            var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh))
          );
        }
        border-radius: var(
          --_ctm-mob-dn-cy-ts-wt-se-br-rs,
          var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs))
        );
        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-cy-ts-wt-se-sw-ae,
              var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae))
            )
            var(
              --_ctm-mob-dn-cy-ts-wt-se-sw-br,
              var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br))
            )
            var(
              --_ctm-mob-dn-cy-ts-wt-se-sw-sd,
              var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-cy-ts-wt-se-sw-cr,
              var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr))
            )
        );
        .profile__button {
          &[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-hr-bd-cr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs))
            );
            --_sf-hr-at: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-at,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at))
            );
            --_sf-hr-in-ad-tt-sg: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
              var(
                --_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
                var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg)
              )
            );

            // for shadow
            --_sf-hr-sw-ae: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae))
            );
            --_sf-hr-sw-br: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br))
            );
            --_sf-hr-sw-hr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr))
            );
            --_sf-hr-sw-cr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr))
            );

            // for font

            --_sf-hr-cr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr))
            );
            --_sf-hr-ft-fy: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy))
            );
            --_sf-hr-tt-tm: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-tm,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-tm))
            );
            --_sf-hr-wd-wp: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-wp,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-wp))
            );
            --_sf-hr-wd-bk: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-bk,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-bk))
            );
            --_sf-hr-ft-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se))
            );
            --_sf-hr-ft-wt: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt))
            );
            --_sf-hr-ft-se-ic: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
              var(
                --_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
                var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic)
              )
            );
            --_sf-hr-tt-an: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an))
            );
            --_sf-hr-lr-sg: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg))
            );
            --_sf-hr-le-ht: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht))
            );

            --_sf-hr-in-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
            );
            --_sf-hr-in-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
            );
            --_sf-hr-in-c1: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1))
            );
            --_sf-hr-ue: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue))
            );

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh))
            );

            &[data-hover-show-shadow="false"] {
              --_hover-show-shadow: none;
            }
            &[data-hover-show-icon="false"] {
              --_hover-show-icon: none;
            }
          }

          background-color: var(
            --_sf-hr-bd-cr,
            prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
          );

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
          gap: var(
            --_sf-hr-in-ad-tt-sg,
            prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
          );

          border-radius: var(
            --_sf-hr-br-rs,
            prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
          );

          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));

          &[data-show-border="true"] {
            border-color: var(
              --_sf-hr-br-cr,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
            );

            border-style: var(
              --_sf-hr-br-se,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
            );

            border-width: var(
              --_sf-hr-br-wh,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
            );
          }

          // text styles

          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm));
          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp));
          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk));
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }

          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));

          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));

          font-style: var(
            --_sf-hr-ft-se-ic,
            prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
          );

          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));

          letter-spacing: var(
            --_sf-hr-lr-sg,
            prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
          );

          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));

          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

          [data-element-style="Text"] {
            display: inline-block;
            width: 100%;
          }

          &[data-is-selected="true"] {
            --_sf-sd-bd-cr: var(
              --_ctm-mob-dn-me-sd-se-bd-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr))
            );
            --_sf-sd-br-cr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr))
            );
            --_sf-sd-br-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se))
            );
            --_sf-sd-br-wh: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh))
            );
            --_sf-sd-br-rs: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs))
            );
            --_sf-sd-at: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at))
            );
            --_sf-sd-in-ad-tt-sg: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
              var(
                --_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
                var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)
              )
            );

            // for shadow
            --_sf-sd-sw-ae: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae))
            );
            --_sf-sd-sw-br: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br))
            );
            --_sf-sd-sw-hr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr))
            );
            --_sf-sd-sw-cr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr))
            );

            // for font

            --_sf-sd-cr: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr))
            );
            --_sf-sd-ft-fy: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy))
            );
            --_sf-sd-tt-tm: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-tm,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-tm))
            );
            --_sf-sd-wd-wp: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-wp,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-wp))
            );
            --_sf-sd-wd-bk: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-bk,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-bk))
            );
            --_sf-sd-ft-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se))
            );
            --_sf-sd-ft-wt: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt))
            );
            --_sf-sd-ft-se-ic: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
              var(
                --_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
                var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)
              )
            );
            --_sf-sd-tt-an: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an))
            );
            --_sf-sd-lr-sg: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg))
            );
            --_sf-sd-le-ht: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht))
            );

            --_sf-sd-in-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
            );
            --_sf-sd-in-se: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
            );
            --_sf-sd-in-c1: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1))
            );
            --_sf-sd-ue: var(
              --_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
              var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue))
            );

            // for pading and width
            --_sf-sd-pg: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg))
            );
            --_sf-sd-wh: var(
              --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
              var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh))
            );

            &[data-hover-show-shadow="false"] {
              --_hover-show-shadow: none;
            }
            &[data-hover-show-icon="false"] {
              --_hover-show-icon: none;
            }

            background-color: var(
              --_sf-sd-bd-cr,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
            );

            padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
            display: flex;
            flex-direction: var(--_sf-fd-bn);
            align-items: center;

            justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
            gap: var(
              --_sf-sd-in-ad-tt-sg,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
            );

            border-radius: var(
              --_sf-sd-br-rs,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
            );

            box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
              var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
              var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
              var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));

            &[data-show-border="true"] {
              border-color: var(
                --_sf-sd-br-cr,
                prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
              );

              border-style: var(
                --_sf-sd-br-se,
                prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
              );

              border-width: var(
                --_sf-sd-br-wh,
                prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
              );
            }

            // text styles

            color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));

            font-family: var(
              --_sf-sd-ft-fy,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)
            );
            text-transform: var(
              --_sf-sd-tt-tm,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm)
            );
            word-wrap: var(
              --_sf-sd-wd-wp,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp)
            );
            word-break: var(
              --_sf-sd-wd-bk,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk)
            );
            &.flex__overflow {
              white-space: normal;
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }

            font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));

            font-weight: var(
              --_sf-sd-ft-wt,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt)
            );

            font-style: var(
              --_sf-sd-ft-se-ic,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
            );

            text-align: var(
              --_sf-sd-tt-an,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an)
            );

            letter-spacing: var(
              --_sf-sd-lr-sg,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
            );

            line-height: var(
              --_sf-sd-le-ht,
              prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht)
            );

            text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

            [data-element-style="Text"] {
              display: inline-block;
              width: 100%;
            }
          }
        }
        .embla {
          height: auto;
          .embla__viewport {
            .embla__container {
              display: flex;
              gap: prepareMediaVariable(--_ctm-dn-cy-ts-wt-se-im-gp);
              .embla__slide {
                width: unset;
              }
            }
          }
        }
      }
      .single__bundle_container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 100%;

        .bundle__header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .bundle__title {
            font-family: prepareMediaVariable(--_ctm-dn-hg-dn-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-hg-dn-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-hg-dn-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-hg-dn-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se);
            color: prepareMediaVariable(--_ctm-dn-hg-dn-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-hg-dn-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-hg-dn-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-hg-dn-ue);
            text-align: prepareMediaVariable(--_ctm-dn-hg-dn-tt-an);
            letter-spacing: vaprepareMediaVariabler(--_ctm-dn-hg-dn-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-hg-dn-le-ht);
            background-color: prepareMediaVariable(--_ctm-dn-hg-dn-bd-cr);
            border-width: prepareMediaVariable(--_ctm-dn-hg-dn-br-wh);
            border-color: prepareMediaVariable(--_ctm-dn-hg-dn-br-cr);
            border-style: prepareMediaVariable(--_ctm-dn-hg-dn-br-se);
            border-radius: prepareMediaVariable(--_ctm-dn-hg-dn-br-rs);
            box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae)
              prepareMediaVariable(--_ctm-dn-hg-dn-sw-br)
              prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd)
              prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
          }

          .bundle__description {
            font-family: prepareMediaVariable(--_ctm-dn-dn-dn-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-dn-dn-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-dn-dn-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-dn-dn-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se);
            color: prepareMediaVariable(--_ctm-dn-dn-dn-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-dn-dn-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-dn-dn-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-dn-dn-ue);
            text-align: prepareMediaVariable(--_ctm-dn-dn-dn-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-dn-dn-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-dn-dn-le-ht);
            background-color: prepareMediaVariable(--_ctm-dn-dn-dn-bd-cr);
            border-width: prepareMediaVariable(--_ctm-dn-dn-dn-br-wh);
            border-color: prepareMediaVariable(--_ctm-dn-dn-dn-br-cr);
            border-style: prepareMediaVariable(--_ctm-dn-dn-dn-br-se);
            border-radius: prepareMediaVariable(--_ctm-dn-dn-dn-br-rs);
            box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae)
              prepareMediaVariable(--_ctm-dn-dn-dn-sw-br)
              prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd)
              prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
          }
          .button__items {
            display: flex;
            align-items: center;
          }
          .btn__with__text[data-btn-name="bundleDetailPageButton"] {
            justify-content: center;
            &[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-hr-bd-cr: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)
                )
              );
              --_sf-hr-br-cr: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)
                )
              );
              --_sf-hr-br-se: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)
                )
              );
              --_sf-hr-br-wh: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)
                )
              );
              --_sf-hr-br-rs: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)
                )
              );
              --_sf-hr-at: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
                var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at))
              );
              --_sf-hr-gp: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
                var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp))
              );

              // for shadow
              --_sf-hr-sw-ae: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)
                )
              );
              --_sf-hr-sw-br: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)
                )
              );
              --_sf-hr-sw-hr: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)
                )
              );
              --_sf-hr-sw-cr: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)
                )
              );

              // for font

              --_sf-hr-cr: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
                var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr))
              );
              --_sf-hr-ft-fy: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)
                )
              );
              --_sf-hr-tt-tm: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-tm)
                )
              );
              --_sf-hr-wd-wp: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-wp)
                )
              );
              --_sf-hr-wd-bk: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-bk)
                )
              );
              --_sf-hr-ft-se: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)
                )
              );
              --_sf-hr-ft-wt: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)
                )
              );
              --_sf-hr-ft-se-ic: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)
                )
              );
              --_sf-hr-tt-an: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)
                )
              );
              --_sf-hr-lr-sg: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)
                )
              );
              --_sf-hr-le-ht: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)
                )
              );

              --_sf-hr-in-se: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
                )
              );
              --_sf-hr-in-se: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
                )
              );
              --_sf-hr-in-c1: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
                var(
                  --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
                  var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)
                )
              );
              --_sf-hr-ue: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
                var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue))
              );

              // for pading and width
              --_sf-hr-pg: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
                var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg))
              );
              --_sf-hr-wh: var(
                --_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
                var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh))
              );

              &[data-hover-show-shadow="false"] {
                --_hover-show-shadow: none;
              }
              &[data-hover-show-icon="false"] {
                --_hover-show-icon: none;
              }
            }
            background-color: var(
              --_sf-hr-bd-cr,
              prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr)
            );

            padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-pg));
            width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wh));
            display: flex;
            flex-direction: var(--_sf-fd-bn);
            align-items: center;

            justify-content: var(
              --_sf-hr-at,
              prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at)
            );
            gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-gp));

            border-radius: var(
              --_sf-hr-br-rs,
              prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs)
            );

            box-shadow: var(
                --_sf-hr-sw-ae,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)
              )
              var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br))
              var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd))
              var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));

            &[data-show-border="true"] {
              border-color: var(
                --_sf-hr-br-cr,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr)
              );

              border-style: var(
                --_sf-hr-br-se,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se)
              );

              border-width: var(
                --_sf-hr-br-wh,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh)
              );
            }

            .txt {
              display: flex;

              color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-cr));

              font-family: var(
                --_sf-hr-ft-fy,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy)
              );
              text-transform: var(
                --_sf-hr-tt-tm,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-tm)
              );
              word-wrap: var(
                --_sf-hr-wd-wp,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-wp)
              );
              word-break: var(
                --_sf-hr-wd-bk,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-bk)
              );
              &.flex__overflow {
                white-space: normal;
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }

              font-size: var(
                --_sf-hr-ft-se,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se)
              );

              font-weight: var(
                --_sf-hr-ft-wt,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt)
              );

              font-style: var(
                --_sf-hr-ft-se-ic,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic)
              );

              text-align: var(
                --_sf-hr-tt-an,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an)
              );

              letter-spacing: var(
                --_sf-hr-lr-sg,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg)
              );

              line-height: var(
                --_sf-hr-le-ht,
                prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht)
              );

              text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
            }

            .icon {
              display: var(--_hover-show-icon, var(--_show-icon, flex));
              svg {
                width: var(
                  --_sf-hr-in-se,
                  prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
                );
                height: var(
                  --_sf-hr-in-se,
                  prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
                );

                path {
                  stroke: var(
                    --_sf-hr-in-c1,
                    prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1)
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-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;
            }
          }
        }
        .divider {
          border: none;
          height: var(
            --_ctm-mob-dr-dr-wt,
            var(--_ctm-tab-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
          ); /* Set thickness */
          background-color: var(
            --_ctm-mob-dr-dr-cr,
            var(--_ctm-tab-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
          );
        }
        .single__bundle_slider {
          display: flex;
          flex-direction: column;
          gap: prepareMediaVariable(--_ctm-lt-im-gp);
          align-items: flex-start;
          flex: 1;
          min-height: 0;
          // height: 100%;
          // & > div {
          //   height: 100%;
          // }
          .embla__warper {
            // height: 80%;
            flex: 1;
            min-height: 0;
            width: 100%;
          }
          .items__warper {
            display: flex;
            gap: prepareMediaVariable(--_ctm-lt-im-sg);
            flex-wrap: wrap;
            // Without this it is a flex item with no width, so it shrinks to fit
            // its tiles — and the tiles are sized as a percentage of it. That
            // circularity made every tile resize whenever the number of tiles
            // changed, which is visible as soon as the list can be filtered.
            width: 100%;
            // align-items: center;
            --items-per-row: #{prepareMediaVariable(--_ctm-lt-is-pr-rw)};
            .bundle-image-container,
            .tiles-grid-view {
              flex: 0 0 calc((100% / var(--items-per-row)) - var(--_ctm-lt-im-sg));
              height: unset;
            }
          }
          .bundle-image-container {
            height: 100%;
            background-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-bd-cr);
            border-width: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-wh);
            border-style: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-se);
            border-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-cr);
            border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-rs);
            box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae)
              prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br)
              prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd)
              prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);

            .showcase-img {
              flex-grow: 1;
              // padding: 16px;
              align-items: center;
              justify-content: center;
              display: flex;
              // height: 100%;
              flex: 1;
              min-height: 100px;
              width: 100%;
              max-height: prepareMediaVariable(--_ctm-lt-ie-ht);
              img {
                max-width: 100%;
                // max-height: 100%;
                // height: 100%;
                width: 100%;
                // object-fit: fill;
                height: prepareMediaVariable(--_ctm-lt-ie-ht);
              }
            }
            .img-title {
              // padding: 12px;
              font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
              word-wrap: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-wp);
              word-break: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-bk);
              font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
              color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
              font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
              font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
              text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
              text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
              letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
              line-height: prepareMediaVariablear(--_ctm-dn-pt-ne-dn-le-ht);
              background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
              border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
              border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
              border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
              border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
              text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
              box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
                prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
                prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
                prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
              &#{$overflowSelector} {
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }
            }
          }
          .bundle__navigation_btn_wrapper {
            display: flex;
            width: 100%;
            justify-content: center;
          }
          .btn__with__text[data-btn-name="bundle_navigation_button"] {
            justify-content: center;
            &[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-hr-bd-cr: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr))
              );
              --_sf-hr-br-cr: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr))
              );
              --_sf-hr-br-se: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se))
              );
              --_sf-hr-br-wh: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh))
              );
              --_sf-hr-br-rs: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs))
              );
              --_sf-hr-at: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at))
              );
              --_sf-hr-gp: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp))
              );

              // for shadow
              --_sf-hr-sw-ae: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae))
              );
              --_sf-hr-sw-br: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br))
              );
              --_sf-hr-sw-hr: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr))
              );
              --_sf-hr-sw-cr: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr))
              );

              // for font

              --_sf-hr-cr: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr))
              );
              --_sf-hr-ft-fy: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy))
              );
              --_sf-hr-tt-tm: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-tm,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-tm, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-tm))
              );
              --_sf-hr-wd-wp: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-wp,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-wp, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-wp))
              );
              --_sf-hr-wd-bk: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-bk,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-bk, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-bk))
              );
              --_sf-hr-ft-se: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se))
              );
              --_sf-hr-ft-wt: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt))
              );
              --_sf-hr-ft-se-ic: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
                var(
                  --_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
                  var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)
                )
              );
              --_sf-hr-tt-an: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an))
              );
              --_sf-hr-lr-sg: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg))
              );
              --_sf-hr-le-ht: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht))
              );

              --_sf-hr-in-se: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
              );
              --_sf-hr-in-se: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
              );
              --_sf-hr-in-c1: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1))
              );
              --_sf-hr-ue: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue))
              );

              // for pading and width
              --_sf-hr-pg: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-pg,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg))
              );
              --_sf-hr-wh: var(
                --_ctm-mob-dn-be-nn-bn-dn-hr-wh,
                var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh))
              );

              &[data-hover-show-shadow="false"] {
                --_hover-show-shadow: none;
              }
              &[data-hover-show-icon="false"] {
                --_hover-show-icon: none;
              }
            }
            background-color: var(
              --_sf-hr-bd-cr,
              prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr)
            );

            padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-pg));
            width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wh));
            display: flex;
            flex-direction: var(--_sf-fd-bn);
            align-items: center;

            justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-at));
            gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-gp));

            border-radius: var(
              --_sf-hr-br-rs,
              prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs)
            );

            box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae))
              var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br))
              var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd))
              var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));

            &[data-show-border="true"] {
              border-color: var(
                --_sf-hr-br-cr,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr)
              );

              border-style: var(
                --_sf-hr-br-se,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se)
              );

              border-width: var(
                --_sf-hr-br-wh,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh)
              );
            }

            .txt {
              display: flex;

              color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-cr));

              font-family: var(
                --_sf-hr-ft-fy,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy)
              );
              text-transform: var(
                --_sf-hr-tt-tm,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-tm)
              );
              word-wrap: var(
                --_sf-hr-wd-wp,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-wp)
              );
              word-break: var(
                --_sf-hr-wd-bk,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-bk)
              );
              &.flex__overflow {
                white-space: normal;
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }

              font-size: var(
                --_sf-hr-ft-se,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se)
              );

              font-weight: var(
                --_sf-hr-ft-wt,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt)
              );

              font-style: var(
                --_sf-hr-ft-se-ic,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic)
              );

              text-align: var(
                --_sf-hr-tt-an,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an)
              );

              letter-spacing: var(
                --_sf-hr-lr-sg,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg)
              );

              line-height: var(
                --_sf-hr-le-ht,
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht)
              );

              text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
            }

            .icon {
              display: var(--_hover-show-icon, var(--_show-icon, flex));
              svg {
                width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
                height: var(
                  --_sf-hr-in-se,
                  prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se)
                );

                path {
                  stroke: var(
                    --_sf-hr-in-c1,
                    prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1)
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-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;
            }
          }

          a {
            width: 100%;
            display: flex;
            align-items: center;

            .bundle_navigation_button {
              display: flex;
              width: 100%;
              padding: 16px 24px;
              justify-content: center;
              align-items: center;
              gap: 12px;
              align-self: stretch;
              font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
              text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
              word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
              word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
              &.flex__overflow {
                white-space: normal;
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }
              font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
              color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
              font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
              font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
              text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
              text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
              letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
              line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
              background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
              border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
              border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
              border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
              border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
              box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
                prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);

              .icon {
                svg {
                  width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                  height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                  path {
                    stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
                    // Overrides the stroke-width presentation attribute baked into the icon markup.
                    stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                  }
                }
              }
            }
          }
        }

        .tiles-grid-view {
          display: flex;
          flex-wrap: wrap;
          gap: prepareMediaVariable(--_ctm-lt-im-sg);
          width: 100%;
          height: 100%;

          // Set only where the whole card selects the bundle — a master-detail
          // layout such as Buy For. Ordinary bundle listings keep the default
          // cursor, where only the button inside the card is clickable.
          &[data-selectable="true"] {
            cursor: pointer;
          }

          .tiles-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: prepareMediaVariable(--_ctm-lt-im-sg);
            width: 100%;
            height: 100%;

            .tile {
              // width: 350px !important;
              width: 100%;
              height: 100%;
              overflow: hidden;
              padding: 16px;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: prepareMediaVariable(--_ctm-lt-im-gp);
              justify-content: space-between;
              background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
              // Border only drawn when the tile card's "Show Border" toggle is on.
              &[data-show-border="true"] {
                border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
                border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
                border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
              }
              border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
              box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae)
                prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br)
                prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd)
                prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);

              .tile-content {
                display: flex;
                flex-direction: column;
                gap: prepareMediaVariable(--_ctm-lt-ig-tt-sg);
                align-items: flex-start;
                height: 100%;
                width: 100%;
                .tile_bundle_name {
                  display: flex;
                  align-items: flex-start;
                  justify-content: flex-start;
                  width: 100%;
                  // overflow: hidden;
                  // text-overflow: ellipsis;
                  // white-space: nowrap;
                  font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
                  text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
                  word-wrap: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-wp);
                  word-break: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-bk);
                  &.flex__overflow {
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }
                  font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
                  color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
                  font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
                  font-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se-ic);
                  text-decoration: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ue);
                  text-align: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-an);
                  letter-spacing: prepareMediaVariable(--_ctm-dn-pt-ne-dn-lr-sg);
                  line-height: prepareMediaVariable(--_ctm-dn-pt-ne-dn-le-ht);
                  background-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-bd-cr);
                  border-width: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-wh);
                  border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
                  border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
                  border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
                  box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
                    prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
                    prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
                    prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);

                  &#{$overflowSelector} {
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }
                }

                // Category name + slider arrows of a category bundle. Tiles in the
                // same row whose bundle has no category render this row empty, so
                // every tile's image grid starts at the same height instead of
                // riding up under the bundle name.
                .tile_category_row {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 100%;

                  // An empty name still has to occupy its line box.
                  .tile_category_name:empty::before {
                    content: "\00a0";
                  }

                  // Rows next to a category slider also reserve the arrow button
                  // box — same sizing NAVIGATION_STYLES gives those buttons.
                  &[data-reserve-nav-height="true"] {
                    min-height: calc(
                      var(
                          --_sf-icn-size,
                          #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se, 16px)}
                        ) *
                        1.75
                    );
                  }
                }

                .brand-tile {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: -webkit-fill-available;

                  img {
                    width: 100%;
                    height: 100%;
                    // object-fit: fill;
                  }
                }

                .product-tile {
                  // `--_sf-tile-columns` / `--_sf-tile-rows` are set inline by
                  // TilesGridView from the Tile Columns / Tile Rows layout
                  // settings — the same numbers it uses to decide how many image
                  // cells to mount, so the template never holds cells the
                  // renderer did not fill. The 2x2 fallback covers elements
                  // rendered before those settings existed.
                  display: grid;
                  flex: 1 1 auto;
                  row-gap: prepareMediaVariable(--_ctm-lt-te-rw-gp);
                  column-gap: prepareMediaVariable(--_ctm-lt-te-cn-gp);
                  // padding: 10px;
                  box-sizing: border-box;
                  width: 100%;
                  grid-template-columns: repeat(var(--_sf-tile-columns, 2), 1fr);
                  grid-template-rows: repeat(var(--_sf-tile-rows, 2), 1fr);

                  // One image height per row.
                  height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * var(--_sf-tile-rows, 2));

                  // A bundle with no products at all shows a single placeholder
                  // image, which keeps the whole grid area to itself.
                  &.images-0 .product-image-wrapper {
                    grid-column: 1 / -1;
                    grid-row: 1 / -1;
                  }

                  &.animate-flip {
                    // Padding cells hold no image, so they sit the animation out.
                    .product-image-wrapper:not(.empty-image-slot) {
                      animation: flip 0.6s ease-in-out;
                    }

                    @keyframes flip {
                      0% {
                        transform: rotateY(0deg);
                      }
                      100% {
                        transform: rotateY(180deg);
                      }
                    }
                  }

                  .product-image-wrapper {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
                    // Border only drawn when the tile card image's "Show Border" toggle is on.
                    &[data-show-border="true"] {
                      border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
                      border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
                      border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
                    }
                    border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
                    box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae)
                      prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br)
                      prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd)
                      prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);

                    img {
                      // max-height: 135px;
                      height: 100%;
                      width: 100%;
                      // object-fit: fill;
                    }
                  }
                }
              }

              .bundle_navigation_button {
                width: 100%;
                display: flex;
                padding: 16px 24px;
                justify-content: center;
                align-items: center;
                gap: 12px;
                align-self: stretch;
                font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
                &.flex__overflow {
                  white-space: normal;
                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                }
                font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
                color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
                font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
                font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
                text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
                text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
                letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
                line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
                background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
                border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
                border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
                border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
                border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
                box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
                  prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
                  prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
                  prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);

                .icon {
                  svg {
                    width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                    height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                    path {
                      stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
                      // Overrides the stroke-width presentation attribute baked into the icon markup.
                      stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                    }
                  }
                }
              }

              a {
                display: flex;
                align-items: center;
                width: 100%;

                .bundle_navigation_button {
                  width: 100%;
                  display: flex;
                  padding: 16px 24px;
                  justify-content: center;
                  align-items: center;
                  gap: 12px;
                  align-self: stretch;
                  text-transform: uppercase;
                  font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
                  word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
                  word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
                  &.flex__overflow {
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }
                  font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
                  color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
                  font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
                  font-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
                  text-decoration: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ue);
                  text-align: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-an);
                  letter-spacing: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-lr-sg);
                  line-height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-le-ht);
                  background-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-bd-cr);
                  border-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-wh);
                  border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
                  border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
                  border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
                  box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
                    prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
                    prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
                    prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);

                  .icon {
                    svg {
                      width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                      height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
                      path {
                        stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
                        // Overrides the stroke-width presentation attribute baked into the icon markup.
                        stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-se-wh, 1.25);
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .embla__container {
          gap: prepareMediaVariable(--_ctm-lt-im-sg);
        }
      }
      .arrow-navigation-categories {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 4px;

        & > button {
          // display: var(--_d-flex);
          // align-items: center;
          // justify-content: center;

          @include NAVIGATION_STYLES();
        }
      }
    }
  }
}