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

package/dist/request-for-quotes.scss

@@ -1,841 +1,841 @@
-@use "sass:map";
-@use "sass:list";
-@import "./functions.scss";
-$defaultValues: (
-  --_flex-box: getListOfResponsive(flex, block),
-  --_flex-direction: getListOfResponsive(row, column, column),
-  --_width-400: getListOfResponsive(350px, 100%, 100%),
-  --_gap: getListOfResponsive(32px, 48px, 32px),
-);
-
-[data-div-type="element"] {
-  &[data-element-type="requestForQuote"] {
-    margin: 0;
-    // Reads the percentage the right resize handle writes, same as My Templates and
-    // My Wishlist. Without it the handle drags a value nothing consumes.
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
-      )
-    );
-
-    & > .wrapper {
-      // Layout > Padding. The element declares it but nothing read it back — the rule
-      // below was commented out and named a variable (`--_lt-pg`) that never existed.
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    }
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: 50%;
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    // width: var(
-    //   --_sf-el-wh-st-mx,
-    //   calc(
-    //     1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
-    //   )
-    // );
-    // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
-    // height: var(--_ctm-lt-ht);
-    // height: ;
-    // height: auto;
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    // --_aspect-ratio: calc(
-    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    // );
-
-    // &[data-element-sub-child="true"] {
-    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
-    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    // }
-
-    .quotes_wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-
-      .quotes_header {
-        width: 100%;
-        display: flex;
-
-        justify-content: space-between;
-        align-items: center;
-        .back_to_cart {
-          color: var(--_thm-cs-tt-ls-as);
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-      .quotes_body {
-        @include prepareMediaQueries($defaultValues);
-        display: flex;
-        // display: var(--_flex-box, block);
-        // align-items: center;
-        flex-direction: var(--_flex-direction);
-        gap: var(--_gap);
-        justify-content: space-between;
-        .empty_template {
-          height: auto;
-        }
-        @media (max-width: 1024px) {
-          .empty_template {
-            margin-block: 24px;
-          }
-        }
-      }
-
-      .quote-items {
-        flex: 2;
-        .quote-item {
-          // padding: 32px 0;
-          display: flex;
-          gap: 24px;
-          &:not(:last-child) {
-            border-bottom: 1px dotted var(--_thm-cs-be-se-3);
-          }
-          &:not(:last-child) {
-            padding-bottom: 16px;
-          }
-          &:not(:first-child) {
-            padding-top: 16px;
-          }
-
-          .quote-item__image {
-            width: 120px;
-            height: 120px;
-            object-fit: cover;
-            border-radius: 4px;
-            background-color: #f0f0f0;
-          }
-
-          .quote-item__details {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            .quote-item__header {
-              margin-bottom: 16px;
-              padding-bottom: 16px;
-              display: flex;
-              border-bottom: 1px dotted var(--_thm-cs-be-se-3);
-              flex-direction: column;
-              gap: 8px;
-
-              .quote-item__title {
-                // font-size: 16px;
-                font-weight: 600;
-                // color: #111;
-              }
-
-              .quote-item__meta {
-                display: flex;
-                gap: 8px;
-                // font-size: 14px;
-                font-weight: 400;
-                // color: var(--_gray-500);
-                span {
-                  &:first-child {
-                    padding-right: 8px;
-                    border-right: 1px solid var(var(--_primary-300));
-                  }
-                }
-              }
-            }
-
-            .quote-item__row {
-              display: flex;
-              gap: 16px;
-              align-items: flex-start;
-
-              .field {
-                display: flex;
-                flex-direction: column;
-                font-size: 14px;
-                &.price_column {
-                  padding-right: 24px;
-                }
-
-                label {
-                  margin-bottom: 6px;
-                  font-weight: 500;
-                  // font-size: 14px;
-                  // color: #333;
-                }
-
-                .value {
-                  // font-weight: 600;
-                  // font-size: 16px;
-                  // // color: #111;
-                  font-weight: 600;
-                  font-size: 16px;
-                  height: 39px;
-                  display: flex;
-                  align-items: center;
-                  span {
-                    display: inline-flex;
-                    justify-content: flex-start;
-                  }
-                }
-
-                input {
-                  height: 40px;
-                  padding: 8px 12px;
-                  font-size: 14px;
-                  border: 1px solid var(--_thm-cs-be-se-3);
-                  border-radius: 4px;
-                  outline: none;
-                  width: 130px;
-                  transition:
-                    background-color 0.2s,
-                    color 0.2s,
-                    border-color 0.2s,
-                    box-shadow 0.2s;
-
-                  &:focus {
-                    outline: 2px solid var(--_gray-100);
-                    border: 1px solid var(--_gray-300);
-                  }
-                }
-
-                .input-with-prefix {
-                  display: flex;
-                  align-items: center;
-                  gap: 4px;
-                  border: 1px solid var(--_thm-cs-be-se-3);
-                  border-radius: 4px;
-                  overflow: hidden;
-                  width: 130px;
-                  height: 40px;
-                  transition:
-                    background-color 0.2s,
-                    color 0.2s,
-                    border-color 0.2s,
-                    box-shadow 0.2s;
-                  &:focus-within {
-                    outline: 2px solid var(--_gray-100);
-                    border: 1px solid var(--_gray-300);
-                  }
-
-                  span {
-                    padding: 0 8px;
-                    font-size: 15px;
-                    color: var(--_gray-500);
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  }
-
-                  input {
-                    border: none;
-                    width: 100%;
-                    height: 100%;
-                    padding-left: 6px;
-                    &:focus {
-                      box-shadow: none;
-                      outline: none;
-                    }
-                  }
-                }
-              }
-            }
-            .quote-item__totals {
-              display: flex;
-              flex-direction: column;
-              gap: 16px;
-              text-align: right;
-              margin-left: auto;
-              min-width: 180px;
-
-              .quote-total {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-
-                > div {
-                  display: flex;
-                  justify-content: flex-end;
-                  align-items: baseline;
-                  gap: 4px;
-
-                  .label {
-                    // font-size: 14px;
-                    // color: #444;
-                  }
-
-                  .amount {
-                    font-size: 18px;
-                    font-weight: 700;
-                    // color: #111;
-                  }
-                }
-
-                small {
-                  font-size: 13px;
-                  // color: #888;
-                  margin-top: 4px;
-                  text-align: right;
-                  display: flex;
-                  justify-content: end;
-                }
-
-                &.discounted {
-                  .label {
-                    color: #039855;
-                  }
-
-                  .amount {
-                    color: #039855;
-                  }
-                }
-              }
-            }
-
-            @media (min-width: 767px) and (max-width: 1023px) {
-              .quote-item__row {
-                flex-wrap: wrap;
-                .field {
-                  &.price_column {
-                    width: 100%;
-                  }
-                }
-              }
-            }
-            @media (max-width: 767px) {
-              .quote-item__row {
-                flex-wrap: wrap;
-              }
-              .quote-item__totals {
-                margin-left: 0;
-                .quote-total {
-                  > div {
-                    display: inline-flex;
-                    justify-content: flex-start;
-                  }
-                  small {
-                    display: inline-flex;
-                    justify-content: flex-start;
-                    span {
-                      display: inline-flex;
-                      justify-content: flex-start;
-                    }
-                  }
-                }
-              }
-            }
-          }
-          @media (max-width: 767px) {
-            .quote-item__details {
-              .quote-item__header {
-                .quote-item__meta {
-                  flex-direction: column;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .quote-summary {
-        background: var(--_base-white);
-        border: 1px solid var(--_thm-cs-be-se-3);
-        border-radius: 4px;
-        // width: 400px;
-        width: var(--_width-400);
-        overflow: hidden;
-        height: fit-content;
-        position: sticky;
-        top: 10px;
-
-        &__row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 12px 0;
-          border-bottom: 1px dotted var(--_thm-cs-be-se-3);
-
-          .label {
-            font-size: 14px;
-            font-weight: 400;
-            // color: #666;
-          }
-
-          .value {
-            // font-size: 14px;
-            font-weight: 500;
-            // color: #333;
-
-            &.highlight {
-              font-size: 14px;
-              font-weight: 500;
-              // color: #000;
-            }
-          }
-
-          &--quoted {
-            margin-bottom: 20px;
-          }
-          .label-quote {
-            // font-size: 14px;
-            font-weight: 400;
-            // font-weight: 600;
-          }
-        }
-
-        &__notes {
-          width: 100%;
-          height: 100px;
-          padding: 12px;
-          border: 1px solid var(--_thm-cs-be-se-3);
-          border-radius: 4px;
-          resize: none;
-          font-size: 14px;
-          font-family: inherit;
-          margin-bottom: 20px;
-          box-sizing: border-box;
-          margin-top: 6px;
-          transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s;
-
-          &::placeholder {
-            color: #999;
-          }
-
-          &:focus {
-            outline: 2px solid var(--_gray-100);
-            border: 1px solid var(--_gray-300);
-          }
-        }
-
-        &__button {
-          width: 100%;
-          padding: 12px;
-          // background-color: var(--_primary-400);
-          // color: var(--_base-white);
-          // font-size: 16px;
-          // font-weight: 600;
-          // border: none;
-          // border-radius: 4px;
-          // cursor: pointer;
-          transition: background-color 0.2s ease;
-
-          &:hover {
-            // background-color: var(--_primary-500);
-          }
-        }
-        & > h3 {
-          // font-size: 16px;
-          font-weight: 700;
-          // color: var(--_gray-900);
-          background-color: #f5f5f5;
-          padding: 12px;
-          border-bottom: 1px solid var(--_thm-cs-be-se-3);
-        }
-        .quote-summary-body {
-          padding: 0px 16px 16px 16px;
-        }
-      }
-    }
-
-    .quotes_address_section {
-      .address_card {
-        background: var(--_base-white);
-        border: 1px solid var(--_thm-cs-be-se-3);
-        border-radius: 4px;
-        // width: 400px;
-        width: var(--_width-400);
-        overflow: hidden;
-        height: fit-content;
-        top: 10px;
-        margin-bottom: 24px;
-
-        & > h3 {
-          // font-size: 16px;
-          font-weight: 700;
-          background-color: #f5f5f5;
-          padding: 12px;
-          border-bottom: 1px solid var(--_thm-cs-be-se-3);
-        }
-
-        &_body {
-          padding: 16px;
-          max-height: calc(100vh - 420px);
-          overflow-y: auto;
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
-        &_row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding-bottom: 12px;
-          border-bottom: 1px dashed var(--_thm-cs-be-se-3);
-        }
-
-        &_text {
-          // font-size: 16px;
-          font-weight: 700;
-          // width: 273px;
-          // height: 22px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: inline-block;
-          // margin-top: 4px;
-        }
-
-        &_select {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          font-size: 14px;
-          // color: var(--_primary-400);
-          color: var(--_thm-cs-tt-ls-as);
-          text-decoration: none;
-          font-weight: 400;
-          background: none;
-          border: none;
-          cursor: pointer;
-          span {
-            display: flex;
-          }
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-        // &_divider {
-        //   border: none;
-        //   border-top: 1px dashed var(--_gray-300);
-        //   margin: 16px 0;
-        // }
-
-        &_footer {
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          gap: 16px;
-        }
-
-        &_shipping,
-        &_quoted {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-
-        &_label {
-          font-size: 14px;
-          // color: var(--_gray-700);
-          font-weight: 500;
-          margin-bottom: 6px;
-        }
-
-        &_value {
-          font-size: 20px;
-          font-weight: 700;
-          // color: var(--_gray-900);
-          height: 40px;
-          display: flex;
-          align-items: center;
-        }
-
-        &_input_box {
-          display: flex;
-          // align-items: center;
-          border: 1px solid var(--_thm-cs-be-se-3);
-          border-radius: 6px;
-          padding: 8px 12px;
-          width: 128px;
-          height: 40px;
-        }
-
-        &_currency {
-          margin-right: 6px;
-          font-weight: 600;
-          color: var(--_gray-700);
-          display: flex;
-        }
-
-        &_input {
-          border: none;
-          outline: none;
-          font-size: 16px;
-          font-weight: 400;
-          color: var(--_gray-900);
-          width: 100%;
-          background: transparent;
-        }
-
-        // --- Extra styles for address list ---
-        &_list_item {
-          display: flex;
-          flex-direction: column;
-          // align-items: flex-start;
-          gap: 6px;
-          padding-bottom: 16px;
-          &:first-child {
-            padding-top: 0px;
-          }
-          &:not(:last-child) {
-            border-bottom: 1px dashed var(--_thm-cs-be-se-3);
-            margin-bottom: 16px;
-          }
-
-          .address_card_row {
-            width: 100%;
-            margin-bottom: 0px;
-          }
-        }
-        .contact_details {
-          gap: 6px;
-          display: flex;
-          flex-direction: column;
-          padding-bottom: 24px;
-          margin-top: 12px;
-          .contact_title {
-            display: flex;
-            gap: 12px;
-            font-weight: 600;
-            font-size: 14px;
-            cursor: pointer;
-            .toggle_dropdown {
-              display: inline-block;
-              transition: transform 0.3s ease;
-              svg {
-                width: 18px;
-                height: 18px;
-              }
-              &.open {
-                transform: rotate(180deg);
-              }
-            }
-          }
-          .secondary_val {
-            font-weight: 500;
-          }
-        }
-
-        &_address {
-          font-size: 14px;
-          // color: var(--_gray-500);
-          font-weight: 400;
-          line-height: 20px;
-          padding-bottom: 12x;
-        }
-        &_details {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          // color: var(--_gray-900);
-          font-size: 14px;
-          cursor: pointer;
-          .toggle_arrow {
-            display: flex;
-            transition: transform 0.3s ease;
-            &.open {
-              transform: rotate(180deg);
-            }
-          }
-          &.no_caret {
-            caret-color: transparent; /* hides the blinking cursor */
-            pointer-events: none; /* prevents clicking/focus */
-          }
-        }
-
-        &_contact_container {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          cursor: pointer;
-        }
-        &_contact {
-          font-size: 14px;
-          font-weight: 600;
-          color: var(--_gray-900);
-        }
-        &_shipping_details {
-          padding-bottom: 16px;
-          margin-bottom: 16px;
-          border-bottom: 1px dashed var(--_thm-cs-be-se-3);
-          // padding: 16px;
-          // margin-top: 10px;
-
-          .no_shipping_methods {
-            background: var(--_gray-100);
-            border-radius: 4px;
-            padding: 16px;
-            text-align: center;
-            min-height: 100px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            span {
-              font-size: 16px;
-              font-weight: 600;
-              color: var(--_gray-700);
-            }
-          }
-        }
-
-        &_shipping_heading {
-          font-size: 14px;
-          font-weight: 600;
-          // color: var(--_gray-900);
-          background: #f5f5f5;
-          padding: 6px;
-          border-radius: 4px;
-          margin-bottom: 12px;
-          padding-left: 12px;
-        }
-
-        &_shipping_group {
-          margin-bottom: 16px;
-          gap: 6px;
-          display: flex;
-          flex-direction: column;
-        }
-
-        &_shipping_subheading {
-          font-size: 14px;
-          font-weight: 700;
-          // color: var(--_gray-900);
-          // margin-bottom: 2px;
-        }
-
-        &_shipping_option {
-          display: flex;
-          align-items: center;
-          // justify-content: space-between;
-          // padding: 10px 8px;
-          border-radius: 6px;
-          cursor: pointer;
-          font-size: 14px;
-          // color: var(--_gray-700);
-          // margin-bottom: 8px;
-          transition: background 0.2s ease;
-
-          input[type="radio"] {
-            accent-color: var(--_primary-400);
-            margin-right: 12px;
-            width: fit-content;
-          }
-
-          &:hover {
-            // background: var(--_gray-100);
-          }
-        }
-
-        &_shipping_label {
-          // flex: 1;
-          // margin-left: 6px;
-          font-weight: 400;
-          font-size: 14px;
-          // color: var(--_gray-500);
-        }
-
-        &_shipping_price {
-          font-weight: 600;
-          // color: var(--_gray-900);
-          font-size: 14px;
-        }
-        &_shipping_selected_method {
-          display: flex;
-          justify-content: space-between;
-          gap: 48px;
-        }
-        &_shipping_title {
-          font-size: 14px;
-          font-weight: 600;
-        }
-
-        &_shipping_confirm {
-          padding: 12px;
-        }
-        &_shipping_method {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-        }
-        .confirm_button {
-          padding: 12px 24px;
-          border-radius: 4px;
-          font-weight: 600;
-          background-color: var(--_thm-py-bs-dt-se-bd-cr);
-          color: var(--_thm-py-bs-dt-se-tt-cr);
-          margin-block: 4px 4px;
-          &:hover {
-            background-color: var(--_thm-py-bs-hr-se-bd-cr);
-            color: var(--_thm-py-bs-hr-se-tt-cr);
-          }
-        }
-      }
-      .cpn__checkmark__icon {
-        display: flex;
-        svg path {
-          // stroke: var(--_thm-cs-tt-ls-as);
-        }
-      }
-    }
-
-    width: 100%;
-
-    & > .wrapper {
-      // width: 100%;
-      // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    // .accordion-element {
-    //   background-color: var(
-    //     --_ctm-mob-dn-fq-wt-bd-cr,
-    //     var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
-    //   );
-    //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    //   display: flex;
-    //   flex-direction: column;
-    //   --_sf-gp: var(
-    //     --_ctm-mob-lt-im-sg,
-    //     var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
-    //   );
-    //   --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-    //   row-gap: var(--_sf-gp);
-    //   width: 100%;
-    //   // height: 100%;
-    //   border-color: var(
-    //     --_ctm-mob-dn-fq-wt-br-cr,
-    //     var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
-    //   );
-    //   border-style: var(
-    //     --_ctm-mob-dn-fq-wt-br-se,
-    //     var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
-    //   );
-    //   border-width: var(
-    //     --_ctm-mob-dn-fq-wt-br-wh,
-    //     var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
-    //   );
-    //   border-radius: var(
-    //     --_ctm-mob-dn-fq-wt-br-rs,
-    //     var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
-    //   );
-    //   box-shadow: var(
-    //     --_show-shadow,
-    //     var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
-    //       var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
-    //       var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
-    //       var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
-    //   );
-    // }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@import "./functions.scss";
+$defaultValues: (
+  --_flex-box: getListOfResponsive(flex, block),
+  --_flex-direction: getListOfResponsive(row, column, column),
+  --_width-400: getListOfResponsive(350px, 100%, 100%),
+  --_gap: getListOfResponsive(32px, 48px, 32px),
+);
+
+[data-div-type="element"] {
+  &[data-element-type="requestForQuote"] {
+    margin: 0;
+    // Reads the percentage the right resize handle writes, same as My Templates and
+    // My Wishlist. Without it the handle drags a value nothing consumes.
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
+
+    & > .wrapper {
+      // Layout > Padding. The element declares it but nothing read it back — the rule
+      // below was commented out and named a variable (`--_lt-pg`) that never existed.
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    }
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // width: 50%;
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // width: var(
+    //   --_sf-el-wh-st-mx,
+    //   calc(
+    //     1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+    //   )
+    // );
+    // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
+    // height: var(--_ctm-lt-ht);
+    // height: ;
+    // height: auto;
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
+
+    // &[data-element-sub-child="true"] {
+    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
+    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // }
+
+    .quotes_wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+
+      .quotes_header {
+        width: 100%;
+        display: flex;
+
+        justify-content: space-between;
+        align-items: center;
+        .back_to_cart {
+          color: var(--_thm-cs-tt-ls-as);
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+      .quotes_body {
+        @include prepareMediaQueries($defaultValues);
+        display: flex;
+        // display: var(--_flex-box, block);
+        // align-items: center;
+        flex-direction: var(--_flex-direction);
+        gap: var(--_gap);
+        justify-content: space-between;
+        .empty_template {
+          height: auto;
+        }
+        @media (max-width: 1024px) {
+          .empty_template {
+            margin-block: 24px;
+          }
+        }
+      }
+
+      .quote-items {
+        flex: 2;
+        .quote-item {
+          // padding: 32px 0;
+          display: flex;
+          gap: 24px;
+          &:not(:last-child) {
+            border-bottom: 1px dotted var(--_thm-cs-be-se-3);
+          }
+          &:not(:last-child) {
+            padding-bottom: 16px;
+          }
+          &:not(:first-child) {
+            padding-top: 16px;
+          }
+
+          .quote-item__image {
+            width: 120px;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 4px;
+            background-color: #f0f0f0;
+          }
+
+          .quote-item__details {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            .quote-item__header {
+              margin-bottom: 16px;
+              padding-bottom: 16px;
+              display: flex;
+              border-bottom: 1px dotted var(--_thm-cs-be-se-3);
+              flex-direction: column;
+              gap: 8px;
+
+              .quote-item__title {
+                // font-size: 16px;
+                font-weight: 600;
+                // color: #111;
+              }
+
+              .quote-item__meta {
+                display: flex;
+                gap: 8px;
+                // font-size: 14px;
+                font-weight: 400;
+                // color: var(--_gray-500);
+                span {
+                  &:first-child {
+                    padding-right: 8px;
+                    border-right: 1px solid var(var(--_primary-300));
+                  }
+                }
+              }
+            }
+
+            .quote-item__row {
+              display: flex;
+              gap: 16px;
+              align-items: flex-start;
+
+              .field {
+                display: flex;
+                flex-direction: column;
+                font-size: 14px;
+                &.price_column {
+                  padding-right: 24px;
+                }
+
+                label {
+                  margin-bottom: 6px;
+                  font-weight: 500;
+                  // font-size: 14px;
+                  // color: #333;
+                }
+
+                .value {
+                  // font-weight: 600;
+                  // font-size: 16px;
+                  // // color: #111;
+                  font-weight: 600;
+                  font-size: 16px;
+                  height: 39px;
+                  display: flex;
+                  align-items: center;
+                  span {
+                    display: inline-flex;
+                    justify-content: flex-start;
+                  }
+                }
+
+                input {
+                  height: 40px;
+                  padding: 8px 12px;
+                  font-size: 14px;
+                  border: 1px solid var(--_thm-cs-be-se-3);
+                  border-radius: 4px;
+                  outline: none;
+                  width: 130px;
+                  transition:
+                    background-color 0.2s,
+                    color 0.2s,
+                    border-color 0.2s,
+                    box-shadow 0.2s;
+
+                  &:focus {
+                    outline: 2px solid var(--_gray-100);
+                    border: 1px solid var(--_gray-300);
+                  }
+                }
+
+                .input-with-prefix {
+                  display: flex;
+                  align-items: center;
+                  gap: 4px;
+                  border: 1px solid var(--_thm-cs-be-se-3);
+                  border-radius: 4px;
+                  overflow: hidden;
+                  width: 130px;
+                  height: 40px;
+                  transition:
+                    background-color 0.2s,
+                    color 0.2s,
+                    border-color 0.2s,
+                    box-shadow 0.2s;
+                  &:focus-within {
+                    outline: 2px solid var(--_gray-100);
+                    border: 1px solid var(--_gray-300);
+                  }
+
+                  span {
+                    padding: 0 8px;
+                    font-size: 15px;
+                    color: var(--_gray-500);
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  }
+
+                  input {
+                    border: none;
+                    width: 100%;
+                    height: 100%;
+                    padding-left: 6px;
+                    &:focus {
+                      box-shadow: none;
+                      outline: none;
+                    }
+                  }
+                }
+              }
+            }
+            .quote-item__totals {
+              display: flex;
+              flex-direction: column;
+              gap: 16px;
+              text-align: right;
+              margin-left: auto;
+              min-width: 180px;
+
+              .quote-total {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+
+                > div {
+                  display: flex;
+                  justify-content: flex-end;
+                  align-items: baseline;
+                  gap: 4px;
+
+                  .label {
+                    // font-size: 14px;
+                    // color: #444;
+                  }
+
+                  .amount {
+                    font-size: 18px;
+                    font-weight: 700;
+                    // color: #111;
+                  }
+                }
+
+                small {
+                  font-size: 13px;
+                  // color: #888;
+                  margin-top: 4px;
+                  text-align: right;
+                  display: flex;
+                  justify-content: end;
+                }
+
+                &.discounted {
+                  .label {
+                    color: #039855;
+                  }
+
+                  .amount {
+                    color: #039855;
+                  }
+                }
+              }
+            }
+
+            @media (min-width: 767px) and (max-width: 1023px) {
+              .quote-item__row {
+                flex-wrap: wrap;
+                .field {
+                  &.price_column {
+                    width: 100%;
+                  }
+                }
+              }
+            }
+            @media (max-width: 767px) {
+              .quote-item__row {
+                flex-wrap: wrap;
+              }
+              .quote-item__totals {
+                margin-left: 0;
+                .quote-total {
+                  > div {
+                    display: inline-flex;
+                    justify-content: flex-start;
+                  }
+                  small {
+                    display: inline-flex;
+                    justify-content: flex-start;
+                    span {
+                      display: inline-flex;
+                      justify-content: flex-start;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          @media (max-width: 767px) {
+            .quote-item__details {
+              .quote-item__header {
+                .quote-item__meta {
+                  flex-direction: column;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .quote-summary {
+        background: var(--_base-white);
+        border: 1px solid var(--_thm-cs-be-se-3);
+        border-radius: 4px;
+        // width: 400px;
+        width: var(--_width-400);
+        overflow: hidden;
+        height: fit-content;
+        position: sticky;
+        top: 10px;
+
+        &__row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 12px 0;
+          border-bottom: 1px dotted var(--_thm-cs-be-se-3);
+
+          .label {
+            font-size: 14px;
+            font-weight: 400;
+            // color: #666;
+          }
+
+          .value {
+            // font-size: 14px;
+            font-weight: 500;
+            // color: #333;
+
+            &.highlight {
+              font-size: 14px;
+              font-weight: 500;
+              // color: #000;
+            }
+          }
+
+          &--quoted {
+            margin-bottom: 20px;
+          }
+          .label-quote {
+            // font-size: 14px;
+            font-weight: 400;
+            // font-weight: 600;
+          }
+        }
+
+        &__notes {
+          width: 100%;
+          height: 100px;
+          padding: 12px;
+          border: 1px solid var(--_thm-cs-be-se-3);
+          border-radius: 4px;
+          resize: none;
+          font-size: 14px;
+          font-family: inherit;
+          margin-bottom: 20px;
+          box-sizing: border-box;
+          margin-top: 6px;
+          transition:
+            background-color 0.2s,
+            color 0.2s,
+            border-color 0.2s,
+            box-shadow 0.2s;
+
+          &::placeholder {
+            color: #999;
+          }
+
+          &:focus {
+            outline: 2px solid var(--_gray-100);
+            border: 1px solid var(--_gray-300);
+          }
+        }
+
+        &__button {
+          width: 100%;
+          padding: 12px;
+          // background-color: var(--_primary-400);
+          // color: var(--_base-white);
+          // font-size: 16px;
+          // font-weight: 600;
+          // border: none;
+          // border-radius: 4px;
+          // cursor: pointer;
+          transition: background-color 0.2s ease;
+
+          &:hover {
+            // background-color: var(--_primary-500);
+          }
+        }
+        & > h3 {
+          // font-size: 16px;
+          font-weight: 700;
+          // color: var(--_gray-900);
+          background-color: #f5f5f5;
+          padding: 12px;
+          border-bottom: 1px solid var(--_thm-cs-be-se-3);
+        }
+        .quote-summary-body {
+          padding: 0px 16px 16px 16px;
+        }
+      }
+    }
+
+    .quotes_address_section {
+      .address_card {
+        background: var(--_base-white);
+        border: 1px solid var(--_thm-cs-be-se-3);
+        border-radius: 4px;
+        // width: 400px;
+        width: var(--_width-400);
+        overflow: hidden;
+        height: fit-content;
+        top: 10px;
+        margin-bottom: 24px;
+
+        & > h3 {
+          // font-size: 16px;
+          font-weight: 700;
+          background-color: #f5f5f5;
+          padding: 12px;
+          border-bottom: 1px solid var(--_thm-cs-be-se-3);
+        }
+
+        &_body {
+          padding: 16px;
+          max-height: calc(100vh - 420px);
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        &_row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-bottom: 12px;
+          border-bottom: 1px dashed var(--_thm-cs-be-se-3);
+        }
+
+        &_text {
+          // font-size: 16px;
+          font-weight: 700;
+          // width: 273px;
+          // height: 22px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: inline-block;
+          // margin-top: 4px;
+        }
+
+        &_select {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 14px;
+          // color: var(--_primary-400);
+          color: var(--_thm-cs-tt-ls-as);
+          text-decoration: none;
+          font-weight: 400;
+          background: none;
+          border: none;
+          cursor: pointer;
+          span {
+            display: flex;
+          }
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+        // &_divider {
+        //   border: none;
+        //   border-top: 1px dashed var(--_gray-300);
+        //   margin: 16px 0;
+        // }
+
+        &_footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          gap: 16px;
+        }
+
+        &_shipping,
+        &_quoted {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        &_label {
+          font-size: 14px;
+          // color: var(--_gray-700);
+          font-weight: 500;
+          margin-bottom: 6px;
+        }
+
+        &_value {
+          font-size: 20px;
+          font-weight: 700;
+          // color: var(--_gray-900);
+          height: 40px;
+          display: flex;
+          align-items: center;
+        }
+
+        &_input_box {
+          display: flex;
+          // align-items: center;
+          border: 1px solid var(--_thm-cs-be-se-3);
+          border-radius: 6px;
+          padding: 8px 12px;
+          width: 128px;
+          height: 40px;
+        }
+
+        &_currency {
+          margin-right: 6px;
+          font-weight: 600;
+          color: var(--_gray-700);
+          display: flex;
+        }
+
+        &_input {
+          border: none;
+          outline: none;
+          font-size: 16px;
+          font-weight: 400;
+          color: var(--_gray-900);
+          width: 100%;
+          background: transparent;
+        }
+
+        // --- Extra styles for address list ---
+        &_list_item {
+          display: flex;
+          flex-direction: column;
+          // align-items: flex-start;
+          gap: 6px;
+          padding-bottom: 16px;
+          &:first-child {
+            padding-top: 0px;
+          }
+          &:not(:last-child) {
+            border-bottom: 1px dashed var(--_thm-cs-be-se-3);
+            margin-bottom: 16px;
+          }
+
+          .address_card_row {
+            width: 100%;
+            margin-bottom: 0px;
+          }
+        }
+        .contact_details {
+          gap: 6px;
+          display: flex;
+          flex-direction: column;
+          padding-bottom: 24px;
+          margin-top: 12px;
+          .contact_title {
+            display: flex;
+            gap: 12px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            .toggle_dropdown {
+              display: inline-block;
+              transition: transform 0.3s ease;
+              svg {
+                width: 18px;
+                height: 18px;
+              }
+              &.open {
+                transform: rotate(180deg);
+              }
+            }
+          }
+          .secondary_val {
+            font-weight: 500;
+          }
+        }
+
+        &_address {
+          font-size: 14px;
+          // color: var(--_gray-500);
+          font-weight: 400;
+          line-height: 20px;
+          padding-bottom: 12x;
+        }
+        &_details {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          // color: var(--_gray-900);
+          font-size: 14px;
+          cursor: pointer;
+          .toggle_arrow {
+            display: flex;
+            transition: transform 0.3s ease;
+            &.open {
+              transform: rotate(180deg);
+            }
+          }
+          &.no_caret {
+            caret-color: transparent; /* hides the blinking cursor */
+            pointer-events: none; /* prevents clicking/focus */
+          }
+        }
+
+        &_contact_container {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          cursor: pointer;
+        }
+        &_contact {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--_gray-900);
+        }
+        &_shipping_details {
+          padding-bottom: 16px;
+          margin-bottom: 16px;
+          border-bottom: 1px dashed var(--_thm-cs-be-se-3);
+          // padding: 16px;
+          // margin-top: 10px;
+
+          .no_shipping_methods {
+            background: var(--_gray-100);
+            border-radius: 4px;
+            padding: 16px;
+            text-align: center;
+            min-height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            span {
+              font-size: 16px;
+              font-weight: 600;
+              color: var(--_gray-700);
+            }
+          }
+        }
+
+        &_shipping_heading {
+          font-size: 14px;
+          font-weight: 600;
+          // color: var(--_gray-900);
+          background: #f5f5f5;
+          padding: 6px;
+          border-radius: 4px;
+          margin-bottom: 12px;
+          padding-left: 12px;
+        }
+
+        &_shipping_group {
+          margin-bottom: 16px;
+          gap: 6px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        &_shipping_subheading {
+          font-size: 14px;
+          font-weight: 700;
+          // color: var(--_gray-900);
+          // margin-bottom: 2px;
+        }
+
+        &_shipping_option {
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          // padding: 10px 8px;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 14px;
+          // color: var(--_gray-700);
+          // margin-bottom: 8px;
+          transition: background 0.2s ease;
+
+          input[type="radio"] {
+            accent-color: var(--_primary-400);
+            margin-right: 12px;
+            width: fit-content;
+          }
+
+          &:hover {
+            // background: var(--_gray-100);
+          }
+        }
+
+        &_shipping_label {
+          // flex: 1;
+          // margin-left: 6px;
+          font-weight: 400;
+          font-size: 14px;
+          // color: var(--_gray-500);
+        }
+
+        &_shipping_price {
+          font-weight: 600;
+          // color: var(--_gray-900);
+          font-size: 14px;
+        }
+        &_shipping_selected_method {
+          display: flex;
+          justify-content: space-between;
+          gap: 48px;
+        }
+        &_shipping_title {
+          font-size: 14px;
+          font-weight: 600;
+        }
+
+        &_shipping_confirm {
+          padding: 12px;
+        }
+        &_shipping_method {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        .confirm_button {
+          padding: 12px 24px;
+          border-radius: 4px;
+          font-weight: 600;
+          background-color: var(--_thm-py-bs-dt-se-bd-cr);
+          color: var(--_thm-py-bs-dt-se-tt-cr);
+          margin-block: 4px 4px;
+          &:hover {
+            background-color: var(--_thm-py-bs-hr-se-bd-cr);
+            color: var(--_thm-py-bs-hr-se-tt-cr);
+          }
+        }
+      }
+      .cpn__checkmark__icon {
+        display: flex;
+        svg path {
+          // stroke: var(--_thm-cs-tt-ls-as);
+        }
+      }
+    }
+
+    width: 100%;
+
+    & > .wrapper {
+      // width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    // .accordion-element {
+    //   background-color: var(
+    //     --_ctm-mob-dn-fq-wt-bd-cr,
+    //     var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
+    //   );
+    //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    //   display: flex;
+    //   flex-direction: column;
+    //   --_sf-gp: var(
+    //     --_ctm-mob-lt-im-sg,
+    //     var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
+    //   );
+    //   --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+    //   row-gap: var(--_sf-gp);
+    //   width: 100%;
+    //   // height: 100%;
+    //   border-color: var(
+    //     --_ctm-mob-dn-fq-wt-br-cr,
+    //     var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
+    //   );
+    //   border-style: var(
+    //     --_ctm-mob-dn-fq-wt-br-se,
+    //     var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
+    //   );
+    //   border-width: var(
+    //     --_ctm-mob-dn-fq-wt-br-wh,
+    //     var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
+    //   );
+    //   border-radius: var(
+    //     --_ctm-mob-dn-fq-wt-br-rs,
+    //     var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
+    //   );
+    //   box-shadow: var(
+    //     --_show-shadow,
+    //     var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
+    //       var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
+    //       var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
+    //       var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
+    //   );
+    // }
+  }
+}