@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.28

package/dist/bundleDetails copy.scss

@@ -0,0 +1,1431 @@
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="bundleDetails"] {
+    // width: var(--_sf-con-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)))
+      )
+    );
+
+    height: auto;
+
+    margin: var(
+      --_ctm-mob-lt-mn,
+      var(
+        --_ctm-tab-lt-mn,
+        var(--_ctm-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
+      )
+    );
+
+    background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+    background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
+    background-attachment: var(--_ctm-mob-dn-bd-at, var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at)));
+    background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
+    background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
+    background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
+    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
+    border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+
+    border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+
+    border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+
+    border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+    box-shadow: var(
+      --_show-shadow,
+      var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+    );
+
+    // &:not(:has(#{$resizerId}#{$resizeActive})) {
+    //   min-height: 100px !important;
+    // }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        // grid-template-rows: max(var(--_ctm-lt-ht), auto) !important;
+      }
+    }
+
+    .embla {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      // overflow: hidden;
+
+      .embla__viewport {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+
+        .embla__container {
+          width: 100%;
+          height: 100%;
+          display: grid;
+          grid-template-rows: 100%;
+
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+            calc(
+              100% /
+                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
+            )
+          );
+
+          grid-auto-flow: column;
+          gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+            height: calc(
+              100% - calc(
+                  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)))
+          );
+        }
+      }
+
+      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+          }
+
+          .embla__container {
+            overflow: unset;
+            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+
+            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+            grid-template-rows: unset;
+
+            grid-auto-flow: row;
+
+            &[data-overflow-hidden="true"] {
+              overflow: hidden;
+            }
+          }
+        }
+      }
+
+      &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
+        .embla__viewport {
+          .embla__container {
+            grid-template-rows: repeat(
+              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
+              calc(
+                100% /
+                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
+              )
+            );
+          }
+        }
+      }
+
+      &[data-display-style="Rows"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
+
+          .embla__container {
+            overflow: hidden;
+            height: var(--_ctm-height);
+            // min-height: var(--_ctm-height);
+
+            grid-template-columns: repeat(
+              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+              1fr
+            );
+            grid-template-rows: unset;
+            grid-auto-flow: row;
+          }
+        }
+      }
+
+      &[data-display-style="Column"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          .embla__container {
+            display: flex;
+            .embla__slide {
+              width: unset;
+              height: 100%;
+              aspect-ratio: 1 / 2;
+            }
+          }
+        }
+      }
+      &[data-display-style="Masonry"] {
+        // overflow: unset;
+
+        .embla__viewport {
+          overflow: hidden;
+          height: 80%;
+          flex-grow: 1;
+
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
+
+          .embla__container {
+            overflow: unset;
+            display: block;
+
+            column-count: var(
+              --_ctm-mob-lt-is-pr-rw,
+              var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
+            );
+            gap: unset;
+
+            column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+            height: auto;
+
+            .embla__slide {
+              margin-bottom: var(
+                --_ctm-mob-lt-im-gp,
+                var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
+              );
+              height: unset;
+
+              .gallery__slide {
+                height: unset;
+              }
+            }
+          }
+        }
+      }
+
+      .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))
+              );
+            }
+          }
+        }
+      }
+
+      &[data-control-type="Side"] {
+        .embla__viewport {
+          width: calc(100% - 120px);
+          margin-inline: auto;
+        }
+        .left-button {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+        .right-button {
+          position: absolute;
+
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      &[data-thumbnail-placement="top"] {
+        flex-direction: column-reverse;
+      }
+      &[data-thumbnail-placement="bottom"] {
+        flex-direction: column;
+      }
+      &[data-thumbnail-placement="left"] {
+        flex-direction: row-reverse;
+
+        .embla__thumbs {
+          width: var(--_ctm-lt-tl-se);
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      &[data-thumbnail-placement="right"] {
+        flex-direction: row;
+        .embla__thumbs {
+          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+          height: 100%;
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
+      }
+      .embla__dots {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
+        gap: 6px;
+        margin-top: 16px;
+
+        &[data-control-type="Bottom-Overflow"] {
+          position: absolute;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 75%;
+        }
+        .embla__dot {
+          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-or-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
+          );
+
+          touch-action: manipulation;
+          display: inline-flex;
+          text-decoration: none;
+          cursor: pointer;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          // width: 0.6rem;
+          // height: 0.6rem;
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+        }
+        .embla__dot:after {
+          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+          width: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+          height: var(
+            --_ctm-mob-dn-pn-ds-dt-se,
+            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+          );
+
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          content: "";
+        }
+        .embla__dot--selected:after {
+          box-shadow: inset 0 0 0 1px var(--text-body);
+          background-color: var(
+            --_ctm-mob-dn-pn-ds-ct-dt-cr,
+            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
+          );
+        }
+        &[data-slider-control="Pagination Line"] {
+          .embla__dot {
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-or-le-cr,
+              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
+            );
+            border-radius: 6px;
+          }
+
+          .embla__dot--selected:after {
+            box-shadow: inset 0 0 0 1px var(--text-body);
+            border-radius: 6px;
+            width: var(
+              --_ctm-mob-dn-pn-le-le-wh,
+              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-le-le-ht,
+              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+            );
+            background-color: var(
+              --_ctm-mob-dn-pn-le-ct-le-cr,
+              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
+            );
+          }
+        }
+      }
+
+      .embla__thumbs {
+        width: 100%;
+        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
+        overflow: hidden;
+        // margin: 10px;
+        padding: 10px;
+
+        .embla__thumbs__viewport {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+        .embla__thumbs__container {
+          display: flex;
+          flex-direction: row;
+          margin-left: calc(var(--thumbs-slide-spacing) * -1);
+          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
+
+          width: 100%;
+          // justify-content: center;
+          // height: 200px;
+
+          .embla__thumbs__slide {
+            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
+            & img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .bundle__details__element__container {
+      width: 100%;
+    }
+
+    .bundle_details_heading_wrapper {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      padding: 24px 96px;
+      border-bottom: 1px solid #d0d5dd;
+      gap: 16px;
+
+      .bundle_details_heading_text_wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        width: 100%;
+        flex: 1 0 0;
+
+        .bundle_name {
+          background-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-bd-cr);
+          border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
+          border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
+          border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
+          border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
+          color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
+          font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
+          font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
+          font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
+          font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
+          line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
+          letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
+          box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
+            var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
+            var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
+          text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
+          text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
+        }
+
+        .bundle_description {
+          background-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-bd-cr);
+          border-color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-cr);
+          border-radius: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-rs);
+          border-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-se);
+          border-width: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-br-wh);
+          color: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-cr);
+          font-family: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-fy);
+          font-size: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se);
+          font-style: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-se-ic);
+          font-weight: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ft-wt);
+          line-height: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-le-ht);
+          letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-lr-sg);
+          box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-ae)
+            var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-sd)
+            var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-sw-cr);
+          text-align: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-tt-an);
+          text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-dn-dn-ue);
+        }
+      }
+
+      .category_card_wrapper {
+        display: flex;
+        padding: 16px;
+        gap: 12px;
+        background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-bd-cr);
+        border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-cr);
+        border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-rs);
+        border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-se);
+        border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-wh);
+        box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-ae)
+          var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-br)
+          var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-sd)
+          var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-cr);
+
+        &:hover {
+          background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-bd-cr);
+          border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-cr);
+          border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-rs);
+          border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-se);
+          border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-wh);
+          box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-ae)
+            var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-br)
+            var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-sd)
+            var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-cr);
+        }
+
+        &.active {
+          background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-bd-cr);
+          border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-cr);
+          border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-rs);
+          border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-se);
+          border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-wh);
+          box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-ae)
+            var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-br)
+            var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-sd)
+            var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-cr);
+        }
+
+        .category_image {
+          width: 48px;
+          height: 72px;
+        }
+
+        .category_card_info_wrapper {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          width: fit-content;
+          white-space: nowrap;
+
+          .category_card_category_name {
+            background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-bd-cr);
+            color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-cr);
+            font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-fy);
+            font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se);
+            font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se-ic);
+            font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-wt);
+            line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-le-ht);
+            letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-lr-sg);
+            text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-an);
+            text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ue);
+          }
+
+          .category_card_product_count {
+            background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
+            color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
+            font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
+            font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
+            font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
+            font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
+            line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
+            letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
+            text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
+            text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
+          }
+
+          .category_card_product_select_count {
+            background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
+            color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
+            font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
+            font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
+            font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
+            font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
+            line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
+            letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
+            text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
+            text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
+          }
+        }
+      }
+    }
+
+    .bundle_details_product_list_wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 36px 96px;
+      width: 100%;
+
+      .add_to_cart_wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 16px;
+        width: 100%;
+        background-color: #f5f5f5;
+
+        .add_to_cart_heading {
+          border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
+          border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
+          border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
+          border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
+          color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
+          font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
+          font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
+          font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
+          font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
+          line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
+          letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
+          box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
+            var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
+            var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
+          text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
+          text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
+        }
+
+        .add_to_cart_estimator_wrapper {
+          display: flex;
+          gap: 48px;
+          justify-content: space-between;
+          width: 100%;
+
+          .add_to_cart_estimate_wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+
+            .add_to_cart_qty {
+              width: 205px;
+              border: 1px solid #d0d5dd !important;
+              border-radius: 2px !important;
+              outline: none;
+              padding: 8px 12px !important;
+              background-color: #f9fafb;
+            }
+
+            .add_to_cart_price {
+              background-color: transparent;
+              color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
+              font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
+              font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
+              font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
+              font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
+              line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
+              letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
+              text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
+              text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
+            }
+
+            .add_to_cart_estimate_label {
+              font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
+              line-height: 150%;
+              font-size: 16px;
+              color: #000000;
+            }
+          }
+        }
+
+        .add_to_cart_btn {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 10px 16px;
+          transition: all 0.3s ease;
+          background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr);
+          border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr);
+          border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs);
+          border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se);
+          border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh);
+          color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr);
+          font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy);
+          font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se);
+          font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic);
+          font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt);
+          line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht);
+          letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg);
+          box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae)
+            var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br)
+            var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd)
+            var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr);
+          text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an);
+          text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue);
+
+          &:disabled {
+            cursor: not-allowed;
+          }
+
+          &:hover {
+            background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr);
+            border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr);
+            border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs);
+            border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se);
+            border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh);
+            color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr);
+            font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy);
+            font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se);
+            font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic);
+            font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt);
+            line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht);
+            letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg);
+            box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)
+              var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)
+              var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)
+              var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr);
+            text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an);
+            text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue);
+          }
+
+          &.selected {
+            background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-bd-cr);
+            border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-cr);
+            border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-rs);
+            border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-se);
+            border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-wh);
+            color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-cr);
+            font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-fy);
+            font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se);
+            font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se-ic);
+            font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-wt);
+            line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-le-ht);
+            letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-lr-sg);
+            box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-ae)
+              var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-br)
+              var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-sd)
+              var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-cr);
+            text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-an);
+            text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ue);
+
+            .icon {
+              color: white;
+            }
+          }
+        }
+      }
+
+      .bundle_details_product_wrapper {
+        display: flex;
+        gap: 48px;
+        width: 100%;
+
+        &.vertical_wrapper {
+          flex-direction: row;
+
+          .product_card_scroll_wrapper {
+            min-width: 400px;
+            max-width: 400px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+
+            .category_bundle_product_card {
+              width: 100%;
+              display: flex;
+              padding: 16px;
+              gap: 16px;
+              background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-bd-cr);
+              border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-cr);
+              border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-rs);
+              border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-se);
+              border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-wh);
+              box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-ae)
+                var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-br)
+                var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-sd)
+                var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-cr);
+
+              &:hover {
+                background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-bd-cr);
+                border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-cr);
+                border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-rs);
+                border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-se);
+                border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-wh);
+                box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-ae)
+                  var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-br)
+                  var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-sd)
+                  var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-cr);
+              }
+
+              &.active {
+                background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr);
+                border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr);
+                border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-rs);
+                border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-se);
+                border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-wh);
+                box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-ae)
+                  var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-br)
+                  var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-sd)
+                  var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-cr);
+
+                .category_bundle_product_card_product_name {
+                  font-weight: bolder;
+                }
+              }
+
+              .category_bundle_product_card_select {
+                width: auto;
+              }
+
+              .category_bundle_product_card_img {
+                width: 80px;
+                height: auto;
+              }
+
+              .category_bundle_product_card_info {
+                display: flex;
+                flex-direction: column;
+                gap: 24px;
+
+                .category_bundle_product_card_info_wrapper {
+                  display: flex;
+                  flex-direction: column;
+                  gap: 6px;
+
+                  .category_bundle_product_card_product_name {
+                    background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-bd-cr);
+                    color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-cr);
+                    font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-fy);
+                    font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se);
+                    font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se-ic);
+                    font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-wt);
+                    line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-le-ht);
+                    letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-lr-sg);
+                    text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-an);
+                    text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ue);
+                  }
+
+                  .category_bundle_product_card_brand_name {
+                    background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
+                    color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
+                    font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
+                    font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
+                    font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
+                    font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
+                    line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
+                    letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
+                    text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
+                    text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
+                  }
+
+                  .category_bundle_product_card_item_name {
+                    background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
+                    color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
+                    font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
+                    font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
+                    font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
+                    font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
+                    line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
+                    letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
+                    text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
+                    text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
+                  }
+                }
+
+                .category_bundle_product_card_product_price {
+                  background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-bd-cr);
+                  color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr);
+                  font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy);
+                  font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se);
+                  font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic);
+                  font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt);
+                  line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht);
+                  letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg);
+                  text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an);
+                  text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue);
+                }
+              }
+            }
+          }
+        }
+
+        .gallery {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+
+          .mainImage {
+            position: relative;
+            overflow: visible;
+            border-radius: 8px;
+            background-color: #f9fafb;
+            aspect-ratio: 1 / 1;
+            width: 360px;
+
+            &::before {
+              content: "";
+              display: block;
+              padding-top: 100%;
+            }
+          }
+
+          .image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.3s ease-in-out;
+
+            &:hover {
+              transform: scale(1.05);
+            }
+          }
+
+          .thumbnails {
+            display: flex;
+            gap: 8px;
+          }
+
+          .thumbnailButton {
+            width: 80px;
+            height: 80px;
+            padding: 0;
+            border: 2px solid transparent;
+            border-radius: 6px;
+            overflow: hidden;
+            cursor: pointer;
+            background: none;
+            transition: border-color 0.2s ease-in-out;
+
+            &:hover {
+              border-color: #dbeafe;
+            }
+
+            &.active {
+              border-color: #2563eb;
+            }
+
+            &:focus {
+              outline: none;
+              border-color: #2563eb;
+              box-shadow: 0 0 0 2px #dbeafe;
+            }
+          }
+
+          .thumbnailImage {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+
+        .bundle_detail_product_information {
+          display: flex;
+          flex-direction: column;
+          flex: 1 0 0;
+          width: 100%;
+          gap: 24px;
+
+          .bundle_detail_product_image_slide_wrapper {
+            display: flex;
+            max-width: 40rem;
+            gap: 16px;
+            overflow-x: scroll;
+
+            .bundle_detail_product_image_slide {
+              width: 148px;
+              height: 248px;
+            }
+          }
+
+          .bundle_detail_product_heading_wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            width: 100%;
+
+            .bundle_detail_product_name {
+              background-color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-bd-cr);
+              color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-cr);
+              font-family: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-fy);
+              font-size: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se);
+              font-style: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se-ic);
+              font-weight: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-wt);
+              line-height: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-le-ht);
+              letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-lr-sg);
+              text-align: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-an);
+              text-decoration: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ue);
+              width: 100%;
+            }
+
+            .bundle_detail_product_info {
+              background-color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-bd-cr);
+              color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-cr);
+              font-family: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-fy);
+              font-size: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se);
+              font-style: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se-ic);
+              font-weight: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-wt);
+              line-height: var(--_ctm-dn-pt-pl-dn-pt-io-dn-le-ht);
+              letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-io-dn-lr-sg);
+              text-align: var(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-an);
+              text-decoration: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ue);
+              width: 100%;
+            }
+          }
+
+          .bundle_detail_product_price {
+            background-color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-bd-cr);
+            color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
+            font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
+            font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
+            font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
+            font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
+            line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
+            letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
+            text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
+            text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
+            width: 100%;
+          }
+
+          .standard_wrapper {
+            //   Select Colors
+            .select__colors {
+              font-size: 16px;
+              color: var(--_gray-500);
+              display: flex;
+              flex-direction: column;
+              gap: 8px;
+              padding: 12px;
+
+              .title {
+                margin-bottom: 4px;
+                color: #000000;
+                font-size: 16px;
+              }
+
+              .select__group {
+                display: flex;
+                flex-direction: row;
+                gap: 8px;
+
+                .item {
+                  background-color: #ffffff;
+
+                  &.selected_item {
+                    width: fit-content;
+                    border: 1px solid #000000;
+                  }
+                  .select__group__item {
+                    transition: width 0.3s ease;
+                    width: 30px;
+                    height: 30px;
+                    border: 1px solid #d0d5dd;
+                    cursor: pointer;
+                    overflow: hidden;
+
+                    &.selected {
+                      width: 45px;
+                      border: 1px solid #000;
+                    }
+
+                    &.disabled {
+                      cursor: not-allowed;
+                      opacity: 0.4;
+                    }
+                    .product-select-image {
+                      width: 40px;
+                      height: 40px;
+                      object-fit: contain;
+                    }
+                  }
+                }
+              }
+            }
+            // Select Fit and Size
+            .select__fit {
+              font-size: 16px;
+              color: var(--_gray-500);
+              display: flex;
+              flex-direction: column;
+              gap: 8px;
+
+              padding: 12px;
+
+              .title {
+                margin-bottom: 4px;
+                color: #000000;
+                font-size: 16px;
+                line-height: 150%;
+              }
+              .select__group {
+                display: flex;
+                gap: 8px;
+                flex-wrap: wrap;
+                margin-bottom: 10px;
+                flex-direction: row;
+                gap: 8px;
+
+                .select__group__item {
+                  transition: color 0.3s ease;
+                  padding: 5px 12px;
+                  border-radius: 6px;
+                  border: 1px solid var(--_gray-200);
+                  font-size: 16px;
+                  font-weight: 600;
+                  cursor: pointer;
+                  border: 1px solid #d0d5dd;
+                  color: #000000;
+                  font-size: 16px;
+                  line-height: 150%;
+
+                  &.child {
+                    border: 0;
+                    border-radius: 0;
+                    border-bottom: 2px solid var(--_gray-200);
+                  }
+                  &.selected {
+                    border: 1px solid var(--_primary-200);
+                    background-color: var(--_primary-25);
+                    color: var(--_primary-400);
+
+                    border: 1pxsolid #000000;
+                    color: #000000;
+                    font-weight: bold;
+                  }
+
+                  &.selected__child {
+                    border: 0px;
+                    border-bottom: 2px solid var(--_primary-400);
+                  }
+                  &.disabled {
+                    cursor: not-allowed;
+                    opacity: 0.4;
+                    position: relative;
+                    overflow: hidden;
+                    &::after {
+                      content: "";
+                      width: 172%;
+                      height: 1px;
+                      position: absolute;
+                      background: #f00;
+                      left: -14px;
+                      transform: rotate(48deg);
+                      /* -webkit-transform: rotate(48deg); */
+                      -moz-transform: rotate(48deg);
+                      top: 14px;
+                      box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
+                    }
+                    &::before {
+                      content: "";
+                      width: 164%;
+                      height: 1px;
+                      position: absolute;
+                      background: #f00;
+                      left: -14px;
+                      transform: rotate(-48deg);
+                      -webkit-transform: rotate(-48deg);
+                      -moz-transform: rotate(-48deg);
+                      top: 14px;
+                      box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          .bundle_detail_product_qty_select {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            width: 100%;
+
+            .add_to_cart_qty_wrapper {
+              display: flex;
+              flex-direction: column;
+              gap: 6px;
+
+              .add_to_cart_qty {
+                width: 205px;
+                border: 1px solid #d0d5dd !important;
+                border-radius: 2px !important;
+                outline: none;
+                padding: 8px 12px !important;
+                background-color: #f9fafb;
+              }
+
+              small {
+                color: red;
+              }
+            }
+
+            .select-button {
+              display: flex;
+              align-items: center;
+              padding: 10px 16px;
+              transition: all 0.3s ease;
+              background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr);
+              border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr);
+              border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs);
+              border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se);
+              border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh);
+              color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr);
+              font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy);
+              font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se);
+              font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic);
+              font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt);
+              line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht);
+              letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg);
+              box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
+                var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)
+                var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)
+                var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr);
+              text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an);
+              text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue);
+
+              &:hover {
+                background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr);
+                border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr);
+                border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs);
+                border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se);
+                border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh);
+                color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr);
+                font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy);
+                font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se);
+                font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic);
+                font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt);
+                line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht);
+                letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg);
+                box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)
+                  var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)
+                  var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)
+                  var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr);
+                text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an);
+                text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue);
+              }
+
+              .icon {
+                margin-right: 8px;
+                color: #003366;
+              }
+
+              &.selected {
+                background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr);
+                border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr);
+                border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs);
+                border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se);
+                border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh);
+                color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr);
+                font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy);
+                font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se);
+                font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic);
+                font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt);
+                line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht);
+                letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg);
+                box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae)
+                  var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br)
+                  var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd)
+                  var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr);
+                text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an);
+                text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue);
+
+                .icon {
+                  color: white;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      hr {
+        &:last-child {
+          display: none;
+        }
+      }
+    }
+  }
+}