@use "./functions.scss" as *;
// Colors
$gray-400: #ccc;
$gray-800: #444;

$primary: var(--_primary-400);
$primary-hover: var(--_primary-500);
$white: var(--_white);
$text-color: #667085;

// Typography
$font-size-base: 14px;

// Spacing & Sizes
$radius: 6px;
$input-padding: 10px 12px;

// .quick-order-main Styles
.quick-order-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;

  .input-group {
    // display: flex;
    display: grid;
    grid-template-columns: 44vw 44vw 100px;
    gap: 12px;
    height: fit-content;
    align-items: center;
    padding: 12px;
    border-bottom: 0.5px solid var(--Gray-200, #eaecf0);
    flex-shrink: 0;
    margin: 0 auto;

    // .quick-order-product-dropdown-section {
    //   width: 320px;
    //   height: 40px;
    //   // border: 0.5px solid #d0d5dd;
    //   border-radius: 4px;
    //   .dropdown-input-section {
    //     border-radius: 4px;
    //     border: 0.5px solid var(--Gray-300, #d0d5dd);
    //     display: flex;
    //     width: 320px;
    //     padding: 8px 12px;
    //     justify-content: space-between;
    //     align-items: center;
    //     input {
    //       color: $text-color;
    //       font-size: 16px;
    //       font-weight: 400;
    //       line-height: 24px; /* 150% */
    //     }
    //   }
    //   .dropdown-input-section {
    //     padding: 0px 12px;

    //     .dropdown-menu {
    //       top: 40px;

    //       .dropdown_menu_ul {

    //         .dropdown-opt {
    //           height: auto;
    //           .dropdown-item {
    //             max-height: none;

    //             .item-image {
    //               width: 42px;
    //               height: 42px;
    //             }

    //             .item-name {
    //               font-size: 16px;
    //               line-height: 24px;
    //               color: #344054;
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }

    .qty-input {
      padding: $input-padding;
      border: 1px solid $gray-400;
      border-radius: $radius;
      font-size: $font-size-base;
      transition: border 0.2s;
      width: 120px;

      &:focus {
        border-color: $primary;
        outline: none;
      }
    }

    .or-text {
      color: var(--Gray-600, #475467);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }
    .msd {
      width: 100%;
    }

    .input-group-right-col {
      display: flex;
      gap: 16px;
      width: 100%;
    }
    .add-btn {
      // background-color: $primary;
      // color: $white;
      padding: 10px 16px;
      height: 40px;
      gap: 6px;
      // border-radius: 4px;
      // font-weight: 600;
      // font-size: 14px;
      // cursor: pointer;
      // transition: background-color 0.2s;
      // display: flex;
      // gap: 4px;
      // line-height: 20px;
      // justify-content: center;
      svg path {
        stroke: var(--_base-white);
      }
      &.disabled {
        opacity: 0.4;
        pointer-events: none;
      }
      .spinner {
        // margin-top: -3px;
        display: inline-block;
      }

      // .add-icon {
      //   width: 20px;
      //   height: 20px;
      //   display: flex;
      //   align-items: center;
      //   justify-content: center;

      //   svg {
      //     width: 16px;
      //     height: 16px;
      //     path {
      //       stroke: #fff;
      //     }
      //   }
      // }
      // &:hover {
      //   background-color: $primary-hover;
      // }
    }
  }
  .cart_products_wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-inline: 24px;
    .cart_item_wrapper {
      padding-bottom: 24px;

      .cart_product_responsive_wrapper {
        .cart_product_top_section_wrapper {
          .cart_product_info_wrapper {
            display: flex;
            align-items: start;
            justify-content: space-between;
            // flex-direction: column;
            gap: 16px;
            .product_details_wrapper {
              display: flex;
              gap: 16px;
              padding-block: 4px;
              a {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6px;
                overflow: hidden;
              }
            }
            .product_qty_price_wrapper {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              align-self: start;
              padding-block-start: 3px;

              .product_qty_wrapper {
                display: flex;
                // width: 124px;
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
                width: 125px;

                .product_qty_container {
                  display: flex;
                  align-items: flex-start;
                  align-self: stretch;
                  border-radius: 4px;
                  border: 0.5px solid var(--_thm-cs-be-se-3);
                  background: #fff;
                  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
                  &:focus-within {
                    box-shadow: 0 0 0 3px var(--_gray-100);
                  }

                  .product_qty_label {
                    display: flex;
                    padding: 8px 12px;
                    align-items: center;
                    border-radius: 8px 0px 0px 8px;
                    height: 40px;
                    p {
                      color: var(--_thm-ty-p1-tt-cr);
                      font-size: var(--_thm-ty-p1-ft-se);
                      font-weight: var(--_thm-ty-p1-bd);
                      // line-height: 24px;
                      line-height: var(--_thm-ty-p1-le-ht);
                      white-space: nowrap;
                    }
                  }
                  .product_qty_input_container {
                    height: 40px;
                    display: flex;
                    position: relative;
                    width: 75px;
                    border-radius: 0px 4px 4px 0px;
                    background: #fff;
                    border-left: 1px solid var(--_thm-cs-be-se-3);
                    padding: 8px 12px;
                    .svg_icon {
                      position: absolute;
                      top: 8px;
                      right: 0px;
                      g {
                        rect {
                          fill: var(--_gray-500);
                          width: 10px;
                          height: 10px;
                        }
                      }
                    }
                  }
                  .product_qty_number {
                    // display: flex;
                    // padding: 8px 12px;
                    align-items: center;
                    color: var(--_thm-ty-p2-tt-cr);
                    font-size: var(--_thm-ty-p1-ft-se);
                    font-weight: var(--_thm-ty-p1-bd);
                    line-height: var(--_thm-ty-p1-le-ht);
                    // gap: 8px;
                    // flex: 1 0 0;
                    // align-self: stretch;
                    // border-radius: 0px 4px 4px 0px;
                    // background: #fff;
                    // border-left: 1px solid var(--_thm-cs-be-se-3);
                    // max-width: 80px;
                    text-align: center;
                    width: 75%;
                    &::-webkit-outer-spin-button,
                    &::-webkit-inner-spin-button {
                      -webkit-appearance: none;
                      margin: 0;
                    }
                  }
                }
              }

              .product_price {
                // color: var(--_gray-900);
                // text-align: right;
                // font-size: 20px;
                // font-weight: 700;
                // line-height: 30px;
                // white-space: nowrap;
                // min-width: 80px;
                white-space: nowrap;
                color: var(
                  --_ctm-mob-dn-pt-pe-ss-cr,
                  var(--_ctm-tab-dn-pt-pe-ss-cr, var(--_ctm-dn-pt-pe-ss-cr))
                );
                font-family: var(
                  --_sf-hr-ff,
                  var(
                    --_ctm-mob-dn-pt-pe-ss-ft-fy,
                    var(--_ctm-tab-dn-pt-pe-ss-ft-fy, var(--_ctm-dn-pt-pe-ss-ft-fy))
                  )
                );
                text-transform: var(
                  --_sf-hr-tt-tm,
                  var(
                    --_ctm-mob-dn-pt-pe-ss-tt-tm,
                    var(--_ctm-tab-dn-pt-pe-ss-tt-tm, var(--_ctm-dn-pt-pe-ss-tt-tm))
                  )
                );
                word-wrap: var(
                  --_sf-hr-wd-wp,
                  var(
                    --_ctm-mob-dn-pt-pe-ss-wd-wp,
                    var(--_ctm-tab-dn-pt-pe-ss-wd-wp, var(--_ctm-dn-pt-pe-ss-wd-wp))
                  )
                );
                word-break: var(
                  --_sf-hr-wd-bk,
                  var(
                    --_ctm-mob-dn-pt-pe-ss-wd-bk,
                    var(--_ctm-tab-dn-pt-pe-ss-wd-bk, var(--_ctm-dn-pt-pe-ss-wd-bk))
                  )
                );
                font-size: var(
                  --_ctm-mob-dn-pt-pe-ss-ft-se,
                  var(--_ctm-tab-dn-pt-pe-ss-ft-se, var(--_ctm-dn-pt-pe-ss-ft-se))
                );
                font-weight: var(
                  --_ctm-mob-dn-pt-pe-ss-ft-wt,
                  var(--_ctm-tab-dn-pt-pe-ss-ft-wt, var(--_ctm-dn-pt-pe-ss-ft-wt))
                );
                font-style: var(
                  --_ctm-mob-dn-pt-pe-ss-ft-se-ic,
                  var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic))
                );
                text-align: right;
                letter-spacing: var(
                  --_ctm-mob-dn-pt-pe-ss-lr-sg,
                  var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg))
                );
                line-height: var(
                  --_ctm-mob-dn-pt-pe-ss-le-ht,
                  var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht))
                );
                text-decoration: var(
                  --_ctm-mob-dn-pt-pe-ss-ue,
                  var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
                );
                min-width: 80px;
              }
            }
            .product_customization_container {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-top: 16px;
              border-top: 1px solid var(--_thm-cs-be-se-3);
              .product_customization_left_container {
                display: flex;
                align-items: center;
                gap: 16px;
                min-height: 28px;
                .wishlist_icon {
                  cursor: pointer;
                  svg {
                    padding: 4px;
                    border-radius: 4px;
                    width: var(
                      --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                      var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                    );
                    height: var(
                      --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                      var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                    );
                    path {
                      // stroke: var(
                      //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
                      //   var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
                      // );
  // Overrides the stroke-width presentation attribute baked into the icon markup.
  stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-wt-se-wh, 1.25);
                      stroke: var(--_thm-cs-be-se-1);
                    }
                  }
                  &:hover {
                    svg {
                      background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
                      width: var(
                        --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                        var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                      );
                      height: var(
                        --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
                        var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
                      );
                      path {
                        // stroke: var(
                        //   --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
                        //   var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
                        // );
                        stroke: var(--_thm-cs-at-py);
                      }
                    }
                  }
                }
                .svg_icon {
                  display: flex;
                  // svg path {
                  //   stroke: var(--_primary-400);
                  // }
                }

                .customization_button {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 4px;
                  white-space: nowrap;
                  // color: var(
                  //   --_ctm-mob-dn-pt-as-ss-cr,
                  //   var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
                  // );
                  color: var(--_thm-cs-tt-ls-as);
                  font-family: var(
                    --_sf-hr-ff,
                    var(
                      --_ctm-mob-dn-pt-as-ss-ft-fy,
                      var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
                    )
                  );
                  text-transform: var(
                    --_sf-hr-tt-tm,
                    var(
                      --_ctm-mob-dn-pt-as-ss-tt-tm,
                      var(--_ctm-tab-dn-pt-as-ss-tt-tm, var(--_ctm-dn-pt-as-ss-tt-tm))
                    )
                  );
                  word-wrap: var(
                    --_sf-hr-wd-wp,
                    var(
                      --_ctm-mob-dn-pt-as-ss-wd-wp,
                      var(--_ctm-tab-dn-pt-as-ss-wd-wp, var(--_ctm-dn-pt-as-ss-wd-wp))
                    )
                  );
                  word-break: var(
                    --_sf-hr-wd-bk,
                    var(
                      --_ctm-mob-dn-pt-as-ss-wd-bk,
                      var(--_ctm-tab-dn-pt-as-ss-wd-bk, var(--_ctm-dn-pt-as-ss-wd-bk))
                    )
                  );
                  &.flex__overflow {
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }
                  font-size: var(
                    --_ctm-mob-dn-pt-as-ss-ft-se,
                    var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
                  );
                  font-weight: var(
                    --_ctm-mob-dn-pt-as-ss-ft-wt,
                    var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
                  );
                  font-style: var(
                    --_ctm-mob-dn-pt-as-ss-ft-se-ic,
                    var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
                  );
                  text-align: var(
                    --_ctm-mob-dn-pt-as-ss-tt-an,
                    var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
                  );
                  letter-spacing: var(
                    --_ctm-mob-dn-pt-as-ss-lr-sg,
                    var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
                  );
                  line-height: var(
                    --_ctm-mob-dn-pt-as-ss-le-ht,
                    var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
                  );
                  text-decoration: var(
                    --_ctm-mob-dn-pt-as-ss-ue,
                    var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
                  );
                  .attr_val_info_detail {
                    b {
                      margin-right: 4px;
                    }
                  }
                  .svg_icon {
                    display: flex;
                    transition: all 400ms linear;
                    svg {
                      path {
                        // stroke: var(
                        //   --_ctm-mob-dn-pt-as-ss-cr,
                        //   var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
                        // );
                        stroke: var(--_thm-cs-tt-ls-as);
                      }
                      width: 18px;
                      height: 18px;
                      // margin-top: 2px;
                      transition: transform 400ms linear;
                    }
                  }
                }
                .attributes_validation_info_sec {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 4px;
                  white-space: nowrap;
                  b {
                    margin-right: 4px;
                  }
                }
                .svg_icon svg {
                  vertical-align: middle;
                }
                .svg_icon.down svg {
                  transform: rotate(180deg);
                  transition: transform 400ms linear;
                  //  width: 20px;
                  // height: 20px;
                }
                .customizationInfo_button {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 8px;
                  white-space: nowrap;
                  color: var(
                    --_ctm-mob-dn-pt-rd-io-cr,
                    var(--_ctm-tab-dn-pt-rd-io-cr, var(--_ctm-dn-pt-rd-io-cr))
                  );
                  font-family: var(
                    --_sf-hr-ff,
                    var(
                      --_ctm-mob-dn-pt-rd-io-ft-fy,
                      var(--_ctm-tab-dn-pt-rd-io-ft-fy, var(--_ctm-dn-pt-rd-io-ft-fy))
                    )
                  );
                  text-transform: var(
                    --_sf-hr-tt-tm,
                    var(
                      --_ctm-mob-dn-pt-rd-io-tt-tm,
                      var(--_ctm-tab-dn-pt-rd-io-tt-tm, var(--_ctm-dn-pt-rd-io-tt-tm))
                    )
                  );
                  word-wrap: var(
                    --_sf-hr-wd-wp,
                    var(
                      --_ctm-mob-dn-pt-rd-io-wd-wp,
                      var(--_ctm-tab-dn-pt-rd-io-wd-wp, var(--_ctm-dn-pt-rd-io-wd-wp))
                    )
                  );
                  word-break: var(
                    --_sf-hr-wd-bk,
                    var(
                      --_ctm-mob-dn-pt-rd-io-wd-bk,
                      var(--_ctm-tab-dn-pt-rd-io-wd-bk, var(--_ctm-dn-pt-rd-io-wd-bk))
                    )
                  );
                  &.flex__overflow {
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }
                  font-size: var(
                    --_ctm-mob-dn-pt-rd-io-ft-se,
                    var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se))
                  );
                  font-weight: var(
                    --_ctm-mob-dn-pt-rd-io-ft-wt,
                    var(--_ctm-tab-dn-pt-rd-io-ft-wt, var(--_ctm-dn-pt-rd-io-ft-wt))
                  );
                  font-style: var(
                    --_ctm-mob-dn-pt-rd-io-ft-se-ic,
                    var(--_ctm-tab-dn-pt-rd-io-ft-se-ic, var(--_ctm-dn-pt-rd-io-ft-se-ic))
                  );
                  text-align: var(
                    --_ctm-mob-dn-pt-rd-io-tt-an,
                    var(--_ctm-tab-dn-pt-rd-io-tt-an, var(--_ctm-dn-pt-rd-io-tt-an))
                  );
                  letter-spacing: var(
                    --_ctm-mob-dn-pt-rd-io-lr-sg,
                    var(--_ctm-tab-dn-pt-rd-io-lr-sg, var(--_ctm-dn-pt-rd-io-lr-sg))
                  );
                  line-height: var(
                    --_ctm-mob-dn-pt-rd-io-le-ht,
                    var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht))
                  );
                  text-decoration: var(
                    --_ctm-mob-dn-pt-qy-ss-ue,
                    var(--_ctm-tab-dn-pt-qy-ss-ue, var(--_ctm-dn-pt-qy-ss-ue))
                  );
                }
              }
            }
          }
        }
      }
      &:not(:last-child) {
        border-bottom: 0.5px solid var(--_gray-300);
      }
      &:not(:first-child) {
        margin-top: 12px !important;
      }
      .product_price {
        margin-top: 10px;
      }
      .product_info_container {
        .product_title {
          font-weight: 600;
          text-decoration: none;
          color: var(--_gray-900);
        }
        .product_code,
        .product_options {
          color: var(--_thm-cs-at-sy);
        }
      }

      .currency_span {
        font-weight: 600;
      }
    }
    .product_qty_price_wrapper {
      // gap: 12px !important;
      gap: 16px;
      margin-left: auto;
      .product_qty_wrapper {
        width: 120px;
      }
      .dropdown-input-section {
        height: 42px;
        .product_title {
          color: var(--_gray-900);
          font-weight: 600;
        }
        .text_ellipsis {
          color: var(--_gray-600);
        }
      }
    }

    .product_actions_wrapper {
      padding-block: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      min-width: 100px;
      margin-top: 4px;
      & > a,
      span {
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 4px;
      }
      & > * {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      button {
        display: flex;
      }
      & > a,
      & > span {
        border-radius: 4px;
        padding: 4px;
      }
      .edit_icon {
        cursor: pointer;
        svg {
          width: var(
            --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
            var(--_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se))
          );
          height: var(
            --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
            var(--_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se, var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se))
          );
          path {
            stroke: var(--_thm-cs-be-se-1);
          }
        }
        &:hover {
          svg {
            width: var(
              --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
              var(
                --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
                var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
              )
            );
            height: var(
              --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
              var(
                --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
                var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
              )
            );
            path {
              stroke: var(--_thm-cs-at-py);
            }
          }
        }
      }
      .wishlist_icon {
        cursor: pointer;
        svg {
          width: var(
            --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
            var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
          );
          height: var(
            --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
            var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
          );
          path {
            stroke: var(--_thm-cs-be-se-1);
          }
        }
        &:hover {
          svg {
            width: var(
              --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
              var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
            );
            height: var(
              --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
              var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
            );
            path {
              stroke: var(--_thm-cs-at-py);
            }
          }
        }
      }

      .delete_cart_icon {
        cursor: pointer;

        svg {
          width: var(
            --_ctm-mob-dn-pt-an-pt-an-de-in-se,
            var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
          );
          height: var(
            --_ctm-mob-dn-pt-an-pt-an-de-in-se,
            var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
          );
          path {
            stroke: var(
              --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
              var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
            );
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-pt-an-pt-an-de-se-wh, 1.25);
          }
        }
        &:hover {
          background-color: var(--_error-50);
          svg {
            width: var(
              --_ctm-mob-dn-pt-an-pt-an-de-in-se,
              var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
            );
            height: var(
              --_ctm-mob-dn-pt-an-pt-an-de-in-se,
              var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
            );
            path {
              stroke: var(
                --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
                var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
              );
            }
          }
        }
      }
      .svg_icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .product_action_button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
      }
      a {
        width: 33%;
        display: flex;
        justify-content: center;
        border-radius: 4px;
        padding: 4px !important;
        &:hover {
          background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
          svg {
            path {
              stroke: var(--_thm-cs-at-py);
            }
          }
        }
      }
      button {
        display: flex;
        justify-content: center;
        border-radius: 4px;
        padding: 8px 16px !important;
      }
      span:has(.cart-dropdown-container) {
        width: 100%;
        display: flex;
        justify-content: center;
        border-radius: 4px;
        button {
          width: 100%;
          padding: 0 !important;
          span {
            display: flex;
            align-items: center;
            border-radius: 4px;
          }
        }
        &:hover {
          background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
          span {
            svg {
              path {
                stroke: var(--_thm-cs-at-py);
              }
            }
          }
        }
      }
      .line_divider {
        height: 12px;
        background: var(--_thm-cs-be-se-3);
        width: 1px;
      }
      .primary_link {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(
          --_sf-ft-clr,
          var(
            --_ctm-mob-ty-bs-dt-se-tt-cr,
            var(--_ctm-tab-ty-bs-dt-se-tt-cr, var(--_thm-ty-bs-dt-se-tt-cr, inherit))
          )
        ) !important;
        span {
          svg {
            path {
              stroke: var(
                --_sf-ft-clr,
                var(
                  --_ctm-mob-ty-bs-dt-se-tt-cr,
                  var(--_ctm-tab-ty-bs-dt-se-tt-cr, var(--_thm-ty-bs-dt-se-tt-cr, inherit))
                )
              );
            }
          }
        }
      }
      .destructive {
        color: var(--_gray-900);
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          svg {
            path {
              stroke: var(--_gray-600);
            }
          }
        }
        &:hover {
          color: var(--_error-500);
          background-color: var(--_error-50);
          span {
            svg {
              path {
                stroke: var(--_error-500);
              }
            }
          }
        }
      }
    }

    .emptyData {
      color: $text-color;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
    .remove-btn {
      color: var(--_error-500);
      padding: 8px 16px;
      border-radius: 4px;
      &:hover {
        background: var(--_error-50);
      }
    }
  }
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}