:root {
  --main-black: #171717;
  --font-family: "Manrope", sans-serif;
}

/* .woocommerce-cart-form__cart-item.cart_item {
  width: 100%;
  transition: opacity 0.3s ease-out, grid-template-rows 0.3s ease-out;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;

  .cart-mini-anim-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    min-height: 0px;

    .cart-mini-main {
      display: flex;
      flex-direction: row;
      gap: 0 16px;
      width: 100%;

      .product-thumbnail {
        width: 136px;
        height: 67px;
        border-radius: 1000px;
        overflow: hidden;
        border: 1px solid #ececec;

        a,
        img {
          width: inherit;
          height: inherit;
        }
        img {
          object-fit: cover;
        }
      }

      .wrap-cart-mini-info {
        display: flex;
        flex-direction: column;
        gap: 8px 0;
        width: -webkit-fill-available;
        flex-shrink: 2;

        .product-name a {
          font-family: "Manrope", sans-serif;
          font-weight: 500;
          font-size: 14px;
          line-height: 140%;
          letter-spacing: -0.01em;
          color: #171717;
        }

        .wrap-cart-mini-change {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .cart-mini-change {
            display: flex;
            flex-direction: row;
            gap: 0 21px;

            .product-price {
              display: flex;

              span {
                font-family: "Manrope", sans-serif;
                font-weight: 700;
                font-size: 16px;
                line-height: 120%;
                letter-spacing: -0.01em;
                text-align: right;
                color: #171717;
              }
            }

            .mini-cart-quantity {
              display: flex;
              flex-direction: row;
              justify-content: center;
              gap: 0 8px;
              align-items: center;
              height: fit-content;

              .qty-value {
                font-family: "Manrope", sans-serif;
                font-weight: 700;
                font-size: 14px;
                line-height: 140%;
                letter-spacing: -0.01em;
                color: #171717;
              }

              .qty-plus,
              .qty-minus {
                width: 16px;
                height: 16px;
                cursor: pointer;
                transition: opacity 0.3s ease-out;

                svg {
                  display: flex;
                  width: inherit !important;
                  height: inherit !important;
                }
              }
            }
          }

          .cart-mini-managemt {
            display: flex;
            flex-direction: row;
            gap: 0 4px;

            svg rect {
              transition: fill 0.2s ease-out;
            }

            .product-wishlist,
            .product-remove {
              width: 32px;
              height: 32px;
              cursor: pointer;
              display: flex;
            }
            .product-wishlist {
              svg {
                transition: opacity 0.2s ease-out;
                path {
                  fill: rgba(0, 0, 0, 0);
                  transition: stroke 0.2s ease-out, fill 0.2s ease-out;
                }
              }
            }
          }
        }
      }
    }
  }
} */

.woocommerce-cart-form__cart-item.new {
  width: 100%;
  transition: opacity 0.3s ease-out, grid-template-rows 0.3s ease-out;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;

  .cart-mini-anim-wrap {
    gap: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    min-height: 0px;
  }

  .first-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .wrap-img {
      width: 162px;
      height: 80px;
      border: 1px solid #ececec;
      border-radius: 1000px;
      cursor: pointer;
      overflow: hidden;

      a {
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .management {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: fit-content;
      align-items: end;

      .wish_or_del {
        display: flex;
        flex-direction: row;
        gap: 4px;

        .product-wishlist,
        .product-remove {
          width: 32px;
          height: 32px;
          cursor: pointer;
          display: flex;

          svg {
            width: 100%;
            height: 100%;
            transition: opacity 0.2s ease-out;

            rect,
            path {
              transition: fill 0.2s ease-out, stroke 0.2s ease-out;
            }
          }

          &.active {
            svg {
              rect {
                fill: #ff2f2f;
              }
              path {
                stroke: #fff;
                fill: #fff;
              }
            }
          }
        }

        .product-wishlist {
          @media (hover: hover) {
            &:hover {
              svg {
                opacity: 0.8;
              }
            }
          }
        }

        .product-remove {
          @media (hover: hover) {
            &:hover {
              svg {
                rect {
                  fill: #e2e2e2;
                }
              }
            }
          }
        }
      }

      .mini-cart-quantity {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: fit-content;

        .qty-value {
          font-family: var(--manrope);
          font-weight: 700;
          font-size: 14px;
          line-height: 140%;
          letter-spacing: -0.01em;
          color: var(--main-black);
        }

        .qty-minus,
        .qty-plus {
          display: flex;
          width: 18px;
          height: 18px;
          cursor: pointer;
          transition: opacity 0.3s ease-out;

          svg {
            width: 100%;
            height: 100%;
          }

          &.disable {
            opacity: 0.4;
            pointer-events: none;
          }
        }
      }
    }
  }

  .two_block {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;

    .name {
      display: flex;
      flex-direction: column;
      gap: 4px;

      .wrap-name {
        display: flex;
        flex-direction: row;
        gap: 16px;

        p {
          font-family: var(--font-family);
          font-weight: 500;
          font-size: 16px;
          line-height: 140%;
          letter-spacing: -0.01em;
          color: var(--main-black);
          flex-grow: 1;

          a {
            color: #8e00ff !important;
          }
        }

        .wrap_price {
          display: flex;
          flex-direction: row;
          width: fit-content;
          flex-wrap: nowrap;
          gap: 8px;
          align-items: center;
          flex-shrink: 0;
          height: fit-content;

          .main_price {
            font-family: var(--font-family);
            font-weight: 700;
            font-size: 16px;
            line-height: 140%;
            letter-spacing: -0.01em;
            color: var(--main-black);
          }

          .old_price {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 14px;
            line-height: 100%;
            color: #262626;
            position: relative;
            opacity: 0.4;

            &::before {
              content: "";
              position: absolute;
              z-index: 1;
              pointer-events: none;
              background-color: #262626;
              width: 100%;
              height: 2px;
              inset: 0;
              margin: auto;
            }
          }

          &:has(.old_price) .main_price {
            color: #8e00ff;
          }
        }

        &.name_recipe {
          .wrap-name {
            p {
              flex-grow: 0;
            }
          }
        }
      }

      .edit {
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: -0.01em;
        text-decoration: underline;
        text-decoration-skip-ink: none;
        color: var(--main-black);
        cursor: pointer;
        width: fit-content;
        transition: opacity 0.3s ease-out;
        text-underline-offset: 1px;

        @media (hover: hover) {
          &:hover {
            opacity: 0.6;
          }
        }
      }
    }

    .btn_add {
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      width: fit-content;
      border-radius: 1000px;
      padding: 8px 8px 8px 6px;
      cursor: pointer;
      background-color: #f3f3f3;

      svg {
        width: 16px;
        height: 16px;
      }

      p {
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 14px;
        line-height: 140%;
        letter-spacing: -0.01em;
        color: var(--main-black);
      }
    }
  }

  .line {
    width: 100%;
    display: flex;
    height: 1px;
    background-color: var(--main-black);
    opacity: 0.1;
    margin-bottom: 16px;
  }
}

@media (max-width: 1024px) {
  .woocommerce-cart-form__cart-item.new {
    .cart-mini-anim-wrap {
      gap: 16px;
      gap: 20px 0;
    }

    .first-block {
      .wrap-img {
        width: 162px;
        height: 80px;
      }

      .management {
        .wish_or_del {
          gap: 4px;

          .product-wishlist,
          .product-remove {
            width: 32px;
            height: 32px;
          }
        }

        .mini-cart-quantity {
          gap: 8px;

          .qty-value {
            font-size: 14px;
          }

          .qty-minus,
          .qty-plus {
            width: 18px;
            height: 18px;
          }
        }
      }
    }

    .two_block {
      gap: 16px;

      .name {
        gap: 4px;

        .wrap-name {
          gap: 16px;

          p {
            font-size: 16px;
          }

          .wrap_price {
            gap: 8px;

            .main_price {
              font-size: 16px;
            }

            .old_price {
              font-size: 14px;

              &::before {
                height: 2px;
              }
            }
          }
        }

        .edit {
          font-size: 16px;
        }
      }

      .btn_add {
        gap: 4px;
        padding: 8px 8px 8px 6px;

        svg {
          width: 16px;
          height: 16px;
        }

        p {
          font-size: 14px;
        }
      }
    }

    .line {
      margin-bottom: 16px;
    }
  }
}

@media (max-width: 560px) {
  .woocommerce-cart-form__cart-item.new {
    .cart-mini-anim-wrap {
      gap: 16px;
      gap: 20px 0;
    }

    .first-block {
      .wrap-img {
        width: 162px;
        height: 80px;
      }

      .management {
        .wish_or_del {
          gap: 4px;

          .product-wishlist,
          .product-remove {
            width: 32px;
            height: 32px;
          }
        }

        .mini-cart-quantity {
          gap: 8px;

          .qty-value {
            font-size: 14px;
          }

          .qty-minus,
          .qty-plus {
            width: 18px;
            height: 18px;
          }
        }
      }
    }

    .two_block {
      gap: 16px;

      .name {
        gap: 4px;

        .wrap-name {
          gap: 16px;

          p {
            font-size: 16px;
          }

          .wrap_price {
            gap: 8px;

            .main_price {
              font-size: 16px;
            }

            .old_price {
              font-size: 14px;

              &::before {
                height: 2px;
              }
            }
          }
        }

        .edit {
          font-size: 16px;
        }
      }

      .btn_add {
        gap: 4px;
        padding: 8px 8px 8px 6px;

        svg {
          width: 16px;
          height: 16px;
        }

        p {
          font-size: 14px;
        }
      }
    }

    .line {
      margin-bottom: 16px;
    }
  }
}