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

package/dist/bundleDetails.scss

@@ -97,6 +97,684 @@ $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%;
@@ -630,813 +1308,5 @@ $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;
-        }
-      }
-    }
   }
 }