@sc-360-v2/storefront-cms-library 0.3.0 → 0.3.2

package/dist/bundleDetails.scss

@@ -97,684 +97,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         // grid-template-rows: max(var(--_ctm-bun-lt-ht), auto) !important;
       }
     }
-    .bundle__details__element__container {
-      .template_1 {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-          sans-serif;
-        color: #374151;
-        padding: 24px 16px;
-        max-width: 1200px;
-        margin: 0 auto;
-
-        @media (min-width: 768px) {
-          padding: 32px;
-        }
-        .container {
-          display: flex;
-          flex-direction: column;
-
-          @media (min-width: 768px) {
-            flex-direction: row;
-            gap: 40px;
-          }
-        }
-
-        .gallerySection {
-          flex: 1;
-          margin-bottom: 24px;
-
-          @media (min-width: 768px) {
-            flex: 0 0 50%;
-            margin-bottom: 0;
-          }
-        }
-
-        .infoSection {
-          flex: 1;
-        }
-
-        .optionsSection {
-          display: flex;
-          flex-direction: column;
-          gap: 24px;
-          margin-top: 24px;
-        }
-
-        .actionSection {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-          margin-top: 24px;
-
-          @media (min-width: 576px) {
-            flex-direction: row;
-            align-items: flex-start;
-          }
-        }
-
-        .selectButton {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background-color: #2563eb;
-          color: white;
-          font-weight: 600;
-          font-size: 14px;
-          letter-spacing: 0.5px;
-          height: 48px;
-          border-radius: 6px;
-          padding: 0 24px;
-          border: none;
-          cursor: pointer;
-          transition:
-            background-color 0.2s ease-in-out,
-            transform 0.1s ease-in-out;
-          flex: 1;
-
-          @media (min-width: 576px) {
-            flex: 0 0 auto;
-            min-width: 120px;
-          }
-
-          &:hover {
-            background-color: #1d4ed8;
-          }
-
-          &:active {
-            transform: scale(0.98);
-          }
-
-          &:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px #dbeafe;
-          }
-        }
-
-        .selectIcon {
-          display: flex;
-          align-items: center;
-          margin-right: 8px;
-        }
-      }
-      .sizeSelector {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-
-        .label {
-          font-size: 14px;
-          font-weight: 600;
-          color: #1f2937;
-        }
-
-        .sizeChartButton {
-          font-size: 13px;
-          font-weight: 500;
-          color: #2563eb;
-          background: none;
-          border: none;
-          padding: 0;
-          cursor: pointer;
-          text-decoration: underline;
-          transition: color 0.2s ease-in-out;
-
-          &:hover {
-            color: #1d4ed8;
-          }
-
-          &:focus {
-            outline: none;
-            color: #1d4ed8;
-          }
-        }
-
-        .options {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 8px;
-        }
-
-        .sizeOption {
-          min-width: 44px;
-          padding: 8px 12px;
-          border: 1px solid #e5e7eb;
-          border-radius: 6px;
-          background-color: transparent;
-          font-size: 14px;
-          font-weight: 500;
-          color: #374151;
-          cursor: pointer;
-          transition: all 0.2s ease-in-out;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &:hover {
-            background-color: #f3f4f6;
-          }
-
-          &.selected {
-            border-color: #2563eb;
-            background-color: #dbeafe;
-            color: #1d4ed8;
-          }
-
-          &:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px #dbeafe;
-          }
-        }
-      }
-      .quantitySelector {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        flex: 1;
-
-        @media (min-width: 576px) {
-          flex-direction: row;
-          align-items: center;
-          flex-wrap: wrap;
-        }
-
-        .label {
-          font-size: 14px;
-          font-weight: 600;
-          color: #1f2937;
-
-          @media (min-width: 576px) {
-            flex: 0 0 auto;
-            margin-right: 12px;
-          }
-        }
-
-        .controls {
-          display: flex;
-          align-items: center;
-          height: 40px;
-
-          @media (min-width: 576px) {
-            flex: 0 0 auto;
-          }
-        }
-
-        .input {
-          width: 60px;
-          height: 100%;
-          border: 1px solid #e5e7eb;
-          border-left: none;
-          border-right: none;
-          text-align: center;
-          font-size: 14px;
-          font-weight: 500;
-          color: #1f2937;
-          padding: 0 8px;
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .decreaseButton,
-        .increaseButton {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 36px;
-          height: 100%;
-          background-color: #f9fafb;
-          border: 1px solid #e5e7eb;
-          cursor: pointer;
-          color: #1f2937;
-          transition: background-color 0.2s ease-in-out;
-
-          &:hover {
-            background-color: #f3f4f6;
-          }
-
-          &:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px #dbeafe;
-            z-index: 1;
-          }
-
-          &:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-        }
-
-        .decreaseButton {
-          border-radius: 6px 0 0 6px;
-        }
-
-        .increaseButton {
-          border-radius: 0 6px 6px 0;
-        }
-
-        .priceContainer {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-
-          @media (min-width: 576px) {
-            flex: 1;
-            justify-content: flex-end;
-          }
-        }
-
-        .priceLabel {
-          font-size: 14px;
-          font-weight: 600;
-          color: #1f2937;
-        }
-
-        .price {
-          font-size: 16px;
-          font-weight: 700;
-          color: #1f2937;
-        }
-      }
-      .productInfo {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-
-        .title {
-          font-size: 24px;
-          font-weight: 700;
-          line-height: 1.2;
-          color: #1f2937;
-          margin: 0;
-
-          @media (min-width: 768px) {
-            font-size: 28px;
-          }
-        }
-
-        .details {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          font-size: 14px;
-          color: #9ca3af;
-        }
-
-        .brand,
-        .itemNumber {
-          display: inline-block;
-        }
-
-        .brand {
-          font-weight: 500;
-        }
-
-        .rating {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          margin-top: 4px;
-        }
-
-        .stars {
-          display: flex;
-          align-items: center;
-        }
-
-        .star {
-          color: #f59e0b;
-          margin-right: 2px;
-
-          &.emptyStar {
-            color: #e5e7eb;
-          }
-        }
-
-        .reviewCount {
-          font-size: 14px;
-          color: #9ca3af;
-        }
-
-        .price {
-          font-size: 24px;
-          font-weight: 700;
-          color: #1f2937;
-          margin-top: 8px;
-        }
-      }
-      .gallery {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-
-        .mainImage {
-          position: relative;
-          overflow: hidden;
-          border-radius: 8px;
-          background-color: #f9fafb;
-          aspect-ratio: 1 / 1;
-
-          &::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;
-        }
-      }
-      .fitSelector {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-
-        .label {
-          font-size: 14px;
-          font-weight: 600;
-          color: #1f2937;
-        }
-
-        .options {
-          display: flex;
-          gap: 8px;
-
-          @media (max-width: 480px) {
-            flex-wrap: wrap;
-          }
-        }
-
-        .fitOption {
-          padding: 8px 16px;
-          border: 1px solid #e5e7eb;
-          border-radius: 6px;
-          background-color: transparent;
-          font-size: 14px;
-          font-weight: 500;
-          color: #374151;
-          cursor: pointer;
-          transition: all 0.2s ease-in-out;
-
-          &:hover {
-            background-color: #f3f4f6;
-          }
-
-          &.selected {
-            border-color: #2563eb;
-            background-color: #dbeafe;
-            color: #1d4ed8;
-          }
-
-          &:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px #dbeafe;
-          }
-        }
-      }
-      .customizationSection {
-        border-top: 1px solid #e5e7eb;
-        border-bottom: 1px solid #e5e7eb;
-        padding: 16px 0;
-
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          width: 100%;
-          background: none;
-          border: none;
-          padding: 0;
-          cursor: pointer;
-          text-align: left;
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .title {
-          font-size: 14px;
-          font-weight: 600;
-          color: #1f2937;
-        }
-
-        .expandIcon {
-          color: #9ca3af;
-          transition: transform 0.3s ease;
-        }
-
-        .content {
-          margin-top: 16px;
-          animation: fadeIn 0.3s ease-in-out;
-        }
-
-        @keyframes fadeIn {
-          from {
-            opacity: 0;
-            transform: translateY(-8px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-
-        .description {
-          font-size: 14px;
-          line-height: 1.5;
-          color: #374151;
-          margin-bottom: 16px;
-        }
-
-        .checkboxContainer {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          color: #374151;
-          cursor: pointer;
-          user-select: none;
-          position: relative;
-          padding-left: 28px;
-        }
-
-        .checkbox {
-          position: absolute;
-          opacity: 0;
-          height: 0;
-          width: 0;
-
-          &:checked ~ .checkmark {
-            background-color: #2563eb;
-            border-color: #2563eb;
-
-            &::after {
-              display: block;
-            }
-          }
-
-          &:focus ~ .checkmark {
-            box-shadow: 0 0 0 2px #dbeafe;
-          }
-        }
-
-        .checkmark {
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: 18px;
-          width: 18px;
-          background-color: white;
-          border: 1px solid #e5e7eb;
-          border-radius: 3px;
-          transition: all 0.2s ease-in-out;
-
-          &::after {
-            content: "";
-            position: absolute;
-            display: none;
-            left: 6px;
-            top: 2px;
-            width: 4px;
-            height: 9px;
-            border: solid white;
-            border-width: 0 2px 2px 0;
-            transform: rotate(45deg);
-          }
-        }
-
-        .customizationOptions {
-          margin-top: 16px;
-          padding-top: 16px;
-          border-top: 1px dashed #f3f4f6;
-          animation: fadeIn 0.3s ease-in-out;
-        }
-
-        .inputLabel {
-          display: flex;
-          flex-direction: column;
-          gap: 6px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #1f2937;
-        }
-
-        .textInput {
-          padding: 10px 12px;
-          border: 1px solid #e5e7eb;
-          border-radius: 6px;
-          font-size: 14px;
-          transition:
-            border-color 0.2s ease-in-out,
-            box-shadow 0.2s ease-in-out;
-
-          &:hover {
-            border-color: #d1d5db;
-          }
-
-          &:focus {
-            outline: none;
-            border-color: #2563eb;
-            box-shadow: 0 0 0 3px #dbeafe;
-          }
-        }
-
-        .hint {
-          font-size: 12px;
-          color: #9ca3af;
-          font-weight: 400;
-        }
-      }
-      .colorSelector {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-
-        .label {
-          font-size: 14px;
-          font-weight: 600;
-          color: #1f2937;
-        }
-
-        .swatches {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 8px;
-        }
-
-        .colorSwatch {
-          width: 32px;
-          height: 32px;
-          border-radius: 50%;
-          border: 2px solid #e5e7eb;
-          cursor: pointer;
-          padding: 0;
-          transition:
-            transform 0.2s ease,
-            border-color 0.2s ease;
-          position: relative;
-
-          &:hover {
-            transform: scale(1.1);
-          }
-
-          &.selected {
-            border-color: #2563eb;
-
-            &::after {
-              content: "";
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              width: 12px;
-              height: 12px;
-              border-radius: 50%;
-              background-color: white;
-              box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-            }
-          }
-
-          &:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px #dbeafe;
-          }
-        }
-      }
-    }
 
     .embla {
       width: 100%;
@@ -1308,5 +630,813 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
+
+    .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_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_qty {
+                width: 205px;
+                border: 1px solid #d0d5dd !important;
+                border-radius: 2px !important;
+                outline: none;
+                padding: 8px 12px !important;
+              }
+
+              .add_to_cart_price {
+                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);
+              }
+            }
+          }
+        }
+
+        .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);
+
+          &: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: center;
+            width: 100%;
+
+            .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;
+        }
+      }
+    }
   }
 }