/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap");

/* ///////////////////////////////////////// */
/* container */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1540px !important;
    padding: 0 !important;
  }
}

@media (max-width: 576px) {
  .no-padding-container {
    padding: 0 !important;
  }
}

/* //////////////////////////////////////// */

@media (max-width: 576px) {
  .addition-title {
    flex-direction: column !important;
    align-items: start !important;
  }
}
/* //////////////////////////// */
/* product styles */

.product-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: clamp(0px, 1.3020833333333335vw, 25px);

  .product-details {
    display: flex;
    width: 100%;
    border: 1px solid #f1f1f2;
    box-shadow: 0px 3px 4px 0px #00000008;
    border-radius: 12px;
    gap: clamp(12px, 2.03125vw, 39px);
    padding: clamp(0px, 1.4583333333333333vw, 28px)
      clamp(0px, 1.6666666666666667vw, 32px);

    .product-image {
      display: flex;
      flex-direction: column;
      width: calc(50% - clamp(12px, 2.03125vw, 39px));

      .images {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: clamp(5px, 1.09375vw, 21px)
          clamp(5px, 1.1979166666666667vw, 23px);
        border: 1px solid #f1f1f2;
        box-shadow: 0px 3px 4px 0px #00000008;
        border-radius: 12px;

        .big-img {
          width: 100%;
          overflow: hidden;

          img {
            width: 100%;
            border-radius: 12px;
          }
        }

        .small-imgs {
          overflow: auto;
          width: 100%;

          .small-images {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(7px, 0.6770833333333334vw, 13px);
            width: fit-content;

            .small-img {
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 12px;
              overflow: hidden;
              width: calc((100% - (3 * clamp(0px, 0.625vw, 12px))) / 4);
              cursor: pointer;
              height: fit-content;
              margin: 0;
              min-width: clamp(100px, 7.8125vw, 150px);

              img {
                width: 100%;
                border-radius: 12px;
              }
            }
          }
        }

        .small-imgs {
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        .small-imgs::-webkit-scrollbar {
          display: none;
        }
      }

      .keys {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: clamp(0px, 0.5729166666666666vw, 11px);
        gap: clamp(0px, 1.0416666666666665vw, 20px);
        direction: ltr;

        .code {
          font-family: Alexandria;
          font-size: clamp(8px, 0.8333333333333334vw, 16px);
          font-weight: 300;
          line-height: clamp(8px, 0.9895833333333333vw, 19px);
          color: #000;
        }

        .tags {
          display: flex;
          align-items: center;
          justify-content: start;
          gap: clamp(3px, 0.5208333333333333vw, 10px);

          span {
            font-family: Alexandria;
            font-size: clamp(8px, 0.8333333333333334vw, 16px);
            font-weight: 300;
            line-height: clamp(8px, 0.9895833333333333vw, 19px);
            color: #000;
          }

          .tags-content {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: clamp(3px, 0.5208333333333333vw, 10px);

            span {
              font-family: Alexandria;
              font-size: clamp(8px, 0.8333333333333334vw, 16px);
              font-weight: 300;
              line-height: clamp(8px, 0.9895833333333333vw, 19px);
              color: #000;
              background-color: #8c9ec51a;
              border-radius: 8px;
              padding: clamp(3px, 0.26041666666666663vw, 5px)
                clamp(5px, 0.5208333333333333vw, 10px);
            }
          }
        }
      }
    }

    .product-info-sec {
      display: flex;
      flex-direction: column;
      width: 50%;
      margin-top: clamp(10px, 1.09375vw, 21px);

      .product-info {
        display: flex;
        width: 100%;
        align-items: start;
        justify-content: space-between;

        .info {
          display: flex;
          flex-direction: column;
          align-items: start;
          justify-content: start;
          gap: clamp(5px, 0.5729166666666666vw, 11px);

          .catigory {
            display: flex;
            align-items: center;
            justify-content: start;
            font-family: Alexandria;
            font-size: clamp(10px, 0.8333333333333334vw, 16px);
            font-weight: 300;
            line-height: clamp(12px, 0.9895833333333333vw, 19px);
            color: #8c9ec5;
            gap: 10px;

            span:nth-child(1) {
              a {
                color: #8c9ec5 !important;
              }
            }

            span:nth-child(3) {
              a {
                color: #a5b2cd !important;
                font-family: Alexandria;
                font-size: clamp(8px, 0.7291666666666666vw, 14px);
                font-weight: 300;
                line-height: clamp(9px, 0.8854166666666666vw, 17px);
              }
            }
          }

          .pro-title {
            font-family: Alexandria;
            font-size: clamp(16px, 1.1458333333333333vw, 22px);
            font-weight: 500;
            line-height: clamp(19px, 1.3541666666666667vw, 26px);
            color: #000;
          }
        }

        .stars {
          display: flex;
          align-items: center;
          justify-content: end;
          flex-wrap: nowrap;
          gap: clamp(5px, 0.5729166666666666vw, 11px);

          span {
            font-family: Alexandria;
            font-size: clamp(10px, 0.8333333333333334vw, 16px);
            font-weight: 400;
            line-height: 18px;
            color: #1b1b1b99;
          }

          svg {
            width: clamp(12px, 1.1979166666666667vw, 23px);
            height: clamp(10px, 1.0416666666666665vw, 20px);
          }
        }
      }

      .product-price {
        display: flex;
        align-items: start;
        justify-content: space-between;
        margin-top: clamp(14px, 1.6145833333333335vw, 31px);

        .price {
          display: flex;
          align-items: start;
          justify-content: start;
          gap: clamp(5px, 0.5208333333333333vw, 10px);

          span:nth-child(1) {
            font-family: Alexandria;
            font-size: clamp(14px, 1.4583333333333333vw, 28px);
            font-weight: 700;
            line-height: 24px;
            color: #425a8b;
          }
          span:nth-child(2) {
            font-family: Alexandria;
            font-size: clamp(10px, 1.25vw, 24px);
            font-weight: 400;
            line-height: 24px;
            color: #8c9ec5;
            text-decoration: line-through;
          }
        }

        .save {
          display: flex;
          align-items: center;
          justify-content: end;
          gap: clamp(6px, 0.78125vw, 15px);

          span {
            font-family: Alexandria;
            font-size: clamp(10px, 0.7291666666666666vw, 14px);
            font-weight: 700;
            line-height: clamp(16px, 1.1458333333333333vw, 22px);
            letter-spacing: 0.20000000298023224px;
            color: #ff1212;
          }

          .saveIcon {
            width: clamp(27px, 2.4479166666666665vw, 47px);
            height: clamp(27px, 2.4479166666666665vw, 47px);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;

            .circle-text {
              font-family: Alexandria;
              font-size: clamp(5px, 0.46875vw, 9px);
              font-weight: 400;
              line-height: clamp(5px, 0.46875vw, 9px);
              letter-spacing: 0.20000000298023224px;
              fill: #ff1212;
            }
          }
        }
      }

      .product-count {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: clamp(0px, 1.7708333333333333vw, 34px);

        .count-name {
          font-family: Alexandria;
          font-size: clamp(8px, 0.7291666666666666vw, 14px);
          font-weight: 700;
          line-height: 20px;
          color: #3c3c3c;
        }

        .count-buttons {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f5f5f5;
          padding: clamp(3px, 0.4166666666666667vw, 8px)
            clamp(3px, 0.5208333333333333vw, 10px);
          border-radius: 12px;

          * {
            border: none;
            outline: none;
          }

          .plus,
          .minus {
            width: clamp(40px, 2.3958333333333335vw, 46px);
            height: 31px;
            border-radius: 8px;
          }

          .plus {
            background: #fd9636;
          }

          .minus {
            background: #ffffff;
          }

          input[type="number"]::-webkit-inner-spin-button,
          input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
          }

          input {
            background: transparent;
            width: 50px;
            font-family: Helvetica Neue;
            font-size: 20px;
            font-weight: 700;
            line-height: 24px;
            color: #3c3c3c;
            padding: 0 10px 0 20px;
          }
        }
      }

      .product-desctiption {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: clamp(15px, 1.6145833333333335vw, 31px);
        .display-text-short {
          
          p {
            line-height: 1.8;
          }
        }
        span {
          font-family: Alexandria;
          font-size: clamp(10px, 0.7291666666666666vw, 14px);
          font-weight: 700;
          line-height: clamp(18px, 1.0416666666666665vw, 20px);
          color: #3c3c3c;
        }

        div {
          display: flex;
          flex-direction: column;

          .product-description-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-family: Alexandria;
            font-size: clamp(10px, 0.625vw, 12px);
            font-weight: 400;
            line-height: 20px;
            color: #000;
          }

          .product-description-text.hideText {
            line-clamp: 3;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }

          span {
            font-family: Alexandria;
            font-size: clamp(10px, 0.625vw, 12px);
            font-weight: 500;
            line-height: 20px;
            color: #000;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }

      .product-installment-banner {
        width: 100%;
        display: flex;
        margin-top: clamp(10px, 1.6145833333333335vw, 31px);
        align-items: center;
        justify-content: center;

        .banner-wrapper {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
          }
        }
      }

      .line {
        width: 100%;
        border-top: 1px solid #f1f1f2;
        margin-top: clamp(0px, 1.3541666666666667vw, 26px);
      }

      .product-buttons {
        width: 100%;
        display: flex;
        margin-top: clamp(11px, 0.8854166666666666vw, 17px);
        gap: clamp(10px, 0.78125vw, 15px);

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          button {
            border: none;
            outline: none;
            width: 100%;
            border-radius: 12px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .whatsappBtn {
          width: 24.7093023%;

          button {
            background: #00e510;
            gap: clamp(9px, 0.78125vw, 15px);
            font-family: Alexandria;
            font-family: Alexandria;
            font-size: clamp(10px, 0.625vw, 12px);
            font-weight: 600;
            line-height: clamp(12px, 0.7291666666666666vw, 14px);
            color: #fff;
          }
        }

        .addToCartBtn {
          width: 50.436046511627%;

          button {
            gap: clamp(5px, 0.9895833333333333vw, 19px);
            background-color: #fd9636;
            font-family: Alexandria;
            font-size: clamp(12px, 0.7291666666666666vw, 14px);
            font-weight: 600;
            line-height: clamp(14px, 0.8854166666666666vw, 17px);
            color: #fff;
          }
        }

        .compareBtn,
        .favoritBtn {
          width: 9.011627906%;
          border: 2px solid #fd9636;
          border-radius: 12px;
          svg {
            cursor: pointer;
          }

          a.favorited {
            svg {
              path {
                fill: #fd9636 !important;
              }
            }
          }
          a.favorited:hover {
            svg {
              path {
                fill: #fff !important;
              }
            }
          }
        }
      }

      .product-del {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-family: Alexandria;
        font-size: clamp(8px, 0.7291666666666666vw, 14px);
        font-weight: 700;
        line-height: 18px;
        color: #425a8b;
        margin-top: clamp(1px, 0.8333333333333334vw, 16px);
      }

      /* to change order in mobile  */
      @media (max-width: 768px) {
        .product-info {
          order: 1;
        }

        .product-price {
          order: 2;
        }

        .product-count {
          order: 3;
        }

        .product-desctiption {
          order: 8;
        }

        .product-installment-banner {
          order: 4;
        }

        .line {
          order: 7;
        }

        .product-buttons {
          order: 5;
        }

        .product-del {
          order: 6;
        }
      }
    }
  }

  .product-panners {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.0416666666666665vw, 20px);
    margin-top: clamp(12px, 1.5625vw, 30px);

    .sm-ban {
      width: 36.8%;

      img {
        width: 100%;
      }
    }

    .big-ban {
      width: 61.9333%;

      img {
        width: 100%;
      }
    }
  }

  .product-information {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(5px, 1.0416666666666665vw, 20px);
    margin-top: clamp(12px, 1.5625vw, 30px);

    .information-title {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: start;
      color: #000;
      font-family: Alexandria;
      font-size: clamp(10px, 0.7291666666666666vw, 14px);
      font-weight: 500;
      line-height: 18px;
      padding: 7px clamp(5px, 1.0416666666666665vw, 20px);
      border-inline-start: 1px solid #fd9636;
    }

    .information-table {
      width: 100%;
    }
  }

  .product-information {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(5px, 1.0416666666666665vw, 20px);
    margin-top: clamp(12px, 1.5625vw, 30px);

    .information-title {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: start;
      gap: clamp(10px, 1.09375vw, 21px);
      border-inline-start: 1px solid #fd9636;

      .title {
        color: #000;
        font-family: Alexandria;
        font-size: clamp(10px, 0.7291666666666666vw, 14px);
        font-weight: 500;
        line-height: 18px;
        padding: 7px clamp(5px, 1.0416666666666665vw, 20px);
      }

      .stars {
        display: flex;
        align-items: center;
        justify-content: end;
        flex-wrap: nowrap;
        gap: clamp(5px, 0.5729166666666666vw, 11px);

        span {
          font-family: Alexandria;
          font-size: clamp(10px, 0.8333333333333334vw, 16px);
          font-weight: 400;
          line-height: 18px;
          color: #1b1b1b99;
        }

        svg {
          width: clamp(12px, 1.1979166666666667vw, 23px);
          height: clamp(10px, 1.0416666666666665vw, 20px);
        }
      }
    }

    .line {
      width: 90%;
      margin: 0 auto;
      border-top: 1px solid #f1f1f2;
    }

    .ratings {
      display: flex;
      align-items: start;
      justify-content: start;
      flex-direction: column;
      gap: clamp(9px, 1.0416666666666665vw, 20px);
      width: 100%;

      .rating {
        display: flex;
        align-items: start;
        justify-content: start;
        gap: clamp(13px, 1.7187500000000002vw, 33px);

        .stars {
          display: flex;
          align-items: center;
          justify-content: end;
          flex-wrap: nowrap;
          gap: clamp(5px, 0.5729166666666666vw, 11px);

          svg {
            width: clamp(12px, 1.1979166666666667vw, 23px);
            height: clamp(10px, 1.0416666666666665vw, 20px);
          }
        }

        span {
          font-family: Alexandria;
          font-size: clamp(10px, 0.8333333333333334vw, 16px);
          font-weight: 400;
          line-height: 18px;
          color: #1b1b1b99;
        }

        .ratePercent {
          width: clamp(142px, 20.572916666666664vw, 395px);
          height: clamp(5px, 0.625vw, 12px);
          border-radius: 2px;
          background: #d9d9d9;

          div {
            background: #fd9636;
            border-radius: 2px;
            height: 100%;
          }
        }
      }
    }
  }
}

@media (max-width: 992px) {
  .product-wrapper {
    .product-details {
      flex-direction: column;

      .product-image,
      .product-info-sec {
        width: 100%;
      }

      .product-info-sec {
        .product-info {
          flex-direction: column;

          .info,
          .stars {
            width: 100% !important;
          }

          .stars {
            flex-direction: row;
            justify-content: start;
            margin-top: 14px;
          }
        }

        .product-count {
          .count-name {
            display: none;
          }
        }
      }

      .product-buttons {
        flex-wrap: wrap;

        .whatsappBtn {
          width: 100% !important;
          order: 4;
        }

        .addToCartBtn {
          width: 48% !important;
        }

        .compareBtn,
        .favoritBtn {
          width: 23% !important;
        }
      }
    }

    .product-panners {
      flex-direction: column;

      div {
        width: 100% !important;

        img {
          width: 100% !important;
        }
      }
    }
  }
}

@media (max-width: 450px) {
  .product-wrapper {
    .product-details {
      .product-buttons {
      
        .addToCartBtn {
          width: calc(
            100% - (90px + (clamp(10px, 0.78125vw, 15px) * 2))
          ) !important;
        }
        .compareBtn,
        .favoritBtn {
          width: 45px !important;
        }
      }
    }
  }
}

/* /////////////////////////////// */
/* flash sales */
.flash-sales-wrapper {
  box-shadow: 0px 3px 4px 0px #00000008;
  border: 1px solid #f1f1f2;
  border-radius: 20px;
  margin-top: 25px;
  overflow: hidden;
  padding: 0 16px;

  .sec-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    h2 {
      a {
        font-family: Alexandria;
        font-size: clamp(14px, 1.875vw, 36px);
        font-weight: 600;
        line-height: 48px;
        letter-spacing: 0.04em;
        color: #000;
        margin: 8px 0 10px 0;
        text-align: start;
        display: block;
        text-decoration: none;
      }
    }

    h2:hover {
      a {
        color: #fd9636;
      }
    }

    .flash-navigation {
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 8px;

      a {
        font-family: Alexandria;
        font-size: clamp(8px, 0.7291666666666666vw, 14px);
        font-weight: 600;
        line-height: clamp(10px, 1.0416666666666665vw, 20px);
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 50px;
        padding: clamp(5px, 0.625vw, 12px) clamp(9px, 1.25vw, 24px);
        color: #000;
        margin-inline-end: 12px;
      }

      .flash-sales-slider-3-next,
      .flash-sales-slider-3-prev {
        width: clamp(28px, 2.3958333333333335vw, 46px);
        height: clamp(28px, 2.3958333333333335vw, 46px);
        background-color: #f5f5f5;
        border-radius: 50%;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
          width: clamp(8px, 1.25vw, 24px);
          height: clamp(8px, 1.25vw, 24px);

          path {
            stroke-width: 2;
          }
        }
      }

      .flash-sales-slider-3-next:hover,
      .flash-sales-slider-3-prev:hover,
      a:hover {
        color: #fff;
        background-color: #fd9636;

        svg {
          path {
            stroke: #fff;
          }
        }
      }
    }
  }

  .flash-sales-slider-3 {
    overflow: hidden;
    margin-bottom: 17px;

    .swiper-wrapper {
      .swiper-slide {
        border: 1px solid #f1f1f2;
        box-shadow: 0px 3px 4px 0px #00000008;
        border-radius: 12px;
        max-width: 256px !important;
        padding: clamp(5px, 0.364583vw, 7px);
        position: relative;
        overflow: hidden;

        .flash-save-offer {
          position: absolute;
          top: 0;
          right: 0;
          width: clamp(45px, 3.177083333333333vw, 61px);
          height: clamp(43px, 3.0729166666666665vw, 59px);
          border-radius: 2px 0px 2px 16px;
          display: flex;
          align-items: center;
          justify-content: start;
          flex-direction: column;
          background-color: #fd9636;
          z-index: 10;
          padding: 5px;

          span:nth-child(1) {
            font-family: "Alexandria", system-ui;
            font-size: clamp(10px, 0.625vw, 12px);
            font-weight: 600;
            line-height: clamp(14px, 1.25vw, 24px);
            color: #fff;
          }

          span:nth-child(2) {
            font-family: "Alexandria", system-ui;
            font-size: clamp(12px, 0.9375vw, 18px);
            font-weight: 600;
            line-height: clamp(14px, 1.25vw, 24px);
            color: #fff;
          }
        }

        .flash-new-offer {
          position: absolute;
          top: 0;
          right: 0;
          width: 68px;
          height: 27px;
          border-radius: 2px 0px 2px 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          background-color: #ff1212;
          z-index: 10;
          color: #fff;
          font-family: Alexandria;
          font-size: 12px;
          font-weight: 600;
          line-height: 12px;
        }

        .slide-container {
          display: flex;
          flex-direction: column;
          align-items: start;
          justify-content: start;

          .flash-pro-img {
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            position: relative;

            .heartIconLink {
              position: absolute;
              left: 20px;
              top: 20px;
              cursor: pointer;

              .heart {
                fill: none;
                stroke: #fd9636;
              }

              .filled {
                fill: #fd9636;
                stroke: #fd9636;
              }
            }

            a:has(img) {
              width: 100%;

              img {
                width: 100%;
                border-radius: 12px;
              }
            }
          }
          .flash-pro-info {
            display: flex;
            flex-direction: column;
            width: 100%;
            align-items: start;
            justify-content: start;

            a {
              font-family: "Alexandria", system-ui;
              font-size: clamp(8px, 0.52083vw, 10px);
              font-weight: 700;
              line-height: clamp(10px, 1.0416vw, 20px);
              text-align: start;
              color: #425a8b;
            }

            .cat-stars {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;

              a {
                font-family: "Alexandria", system-ui;
                font-size: clamp(6px, 0.46875vw, 9px);
                font-weight: 400;
                line-height: 18px;
                text-align: right;
                color: #8c9ec5;
              }

              .stars {
                font-size: clamp(6px, 0.46875vw, 9px);
                svg {
                  width: clamp(8px, 0.625vw, 12px);
                  height: clamp(8px, 0.625vw, 12px);
                }
              }
            }
          }

          .flash-pro-price {
            display: flex;
            width: 100%;
            align-items: end;
            justify-content: start;
            margin-top: clamp(10px, 0.78125vw, 15px);

            span {
              font-family: Alexandria;
              font-size: clamp(7px, 0.625vw, 11px);
              font-weight: 600;
              line-height: 9.75px;
              color: #8c9ec5;

              span {
                font-family: Alexandria;
                font-size: clamp(8px, 0.7291666666666666vw, 13px);
                font-weight: 400;
                line-height: 12.19px;
                text-decoration: line-through;
                color: #a49c9c !important;
              }
            }

            p {
              font-family: Alexandria;
              font-size: clamp(12px, 1.3020833333333335vw, 25px);
              font-weight: 500;
              line-height: 30.48px;
              text-align: start;
              color: #000;

              sup {
                vertical-align: super;
                font-family: Alexandria;
                font-size: clamp(6px, 0.4166666666666667vw, 8px);
                font-weight: 500;
                line-height: 9.75px;
                color: #8c9ec5;
                padding-inline-start: 3px;
              }

              span {
                font-family: Alexandria;
                font-size: clamp(8px, 0.625vw, 12px);
                font-weight: 600;
                line-height: 9.75px;
                color: #8c9ec5;
              }
            }
          }

          .flsh-pro-buttons {
            display: flex;
            width: 100%;
            margin: 12px 0 7px 0;
            align-items: center;
            justify-content: center;
            gap: 5px;

            button {
              width: 142px;
              height: 42px;
              border-radius: clamp(8px, 0.625vw, 12px);
              border: none;
              outline: none;
              background-color: #fd9636;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 10px;
              color: #fff;
              font-family: "Alexandria", system-ui;
              font-size: 12px;
              font-weight: 600;
              line-height: 14.63px;
            }

            a {
              width: 42px;
              height: 42px;
              border: 1px solid #fd9636;
              border-radius: clamp(8px, 0.625vw, 12px);
              display: flex;
              align-items: center;
              justify-content: center;
            }

            a:hover {
              background-color: #fd9636;
              color: #fff;

              svg {
                path {
                  fill: #fff !important;
                }
              }
            }
          }

          .flash-pro-delivery {
            width: 100%;
            text-align: center;
            font-family: "Alexandria", system-ui;
            font-size: clamp(6px, 0.7166666666666667vw, 9px);
            font-weight: 700;
            line-height: clamp(5px, 0.9375vw, 18px);
          }
        }
      }

      .swiper-slide:hover {
        border-color: #fd9636;
      }
    }
  }
}

@media (max-width: 576px) {
  .flash-sales-wrapper {
    padding: 0;
    padding-inline-start: 18px;
    border-radius: 0;
    margin-top: 12px;

    .sec-title {
      h2 {
        margin: 0;
      }

      .flash-navigation {
        a {
          font-weight: 400;
          color: #254aa5;
          text-decoration: underline;
          margin-inline-end: 18px;
        }

        .flash-sales-slider-3-next,
        .flash-sales-slider-3-prev {
          display: none;
        }
      }
    }

    .flash-sales-slider-3 {
      overflow: visible;

      .swiper-wrapper {
        .swiper-slide {
          .flash-save-offer {
            width: 45px;
            height: 36px;

            span:nth-child(1) {
              font-size: 8px;
              line-height: 14px;
              text-align: start;
            }

            span:nth-child(2) {
              font-size: 10px;
              line-height: 14px;
              text-align: start;
            }
          }

          .flash-new-offer {
            width: 46px;
            height: 16px;
            font-family: Alexandria;
            font-size: 8px;
            font-weight: 600;
            line-height: 8px;
          }

          .slide-container {
            .flash-pro-img {
              .heartIconLink {
                left: 8px;
                top: 8px;
              }
              a {
                top: 5px;
                left: 10px;

                svg {
                  width: 14px;
                  height: 12px;
                }
              }
            }

            .flash-pro-price {
              flex-direction: row;
              gap: 2px;

              div {
                gap: 2px;

                span:nth-child(2) {
                  font-size: 6px;
                  line-height: 10px;
                  width: 22px;
                  height: 10px;
                }
              }
            }

            .flsh-pro-buttons {
              margin: 10px 0 5px 0;
              button {
                width: 100px;
                height: 28px;
                font-family: Alexandria;
                font-size: 6px;
                font-weight: 600;
                line-height: 7.31px;
                gap: 5px;

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

              a {
                width: 28px;
                height: 28px;

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

              a:nth-child(3) {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

/* rtl changes */
.rtl {
  .tags,
  .code {
    direction: rtl;
  }
}

/* /////////////////////// */
/* dark mode */
body.dark {
  /* product styles */
  .product-wrapper {
    .product-details {
      border: 1px solid var(--dark-mode-white);
      background: var(--dark-mode-second);
      .product-image {
        .images {
          border: 1px solid var(--dark-mode-white);
        }

        .keys {
          .code {
            color: #fff;
          }

          .tags {
            span {
              color: #fff;
            }
            .tags-content {
              span {
                color: #fff;
              }
            }
          }
        }
      }

      .product-info-sec {
        .product-info {
          .info {
            .catigory {
              span:nth-child(1) {
                a {
                  color: #fff !important;
                }
              }

              span:nth-child(3) {
                a {
                  color: #ffffffaf !important;
                }
              }
            }

            .pro-title {
              color: #fff;
            }
          }

          .stars {
            svg {
              path[fill-opacity="0.1"] {
                fill-opacity: 1;
                fill: #d9d9d980;
              }
            }
          }
        }

        .product-price {
          .price {
            span:nth-child(1) {
              color: #fff;
            }
            span:nth-child(2) {
              color: #ffffffaf;
            }
          }

          .save {
            .saveIcon {
              circle:first-of-type {
                fill: transparent;
                stroke: var(--dark-mode-white-second);
              }
              .circle-text {
                fill: #fff;
              }
            }
          }
        }

        .product-count {
          .count-name {
            color: #fff;
          }

          .count-buttons {
            background: var(--dark-mode-second);
            border: 1px solid var(--dark-mode-white);
            input {
              color: var(--main);
            }
          }
        }

        .product-desctiption {
          span {
            color: #f1f1f2;
          }

          .display-text-short {
            color: #fff;
            p {
              color: #fff !important;
              line-height: 1.8;
              a {
                color: #fd9636 !important;
              }
            }
          }

          div {
            a {
              color: #fd9636 !important;
            }
          }
        }
        .line {
          border-top: 1px solid var(--dark-mode-white);
        }

        .product-del {
          color: #fff;
        }
      }
    }

    .product-information {
      .information-title {
        color: #fff;
      }

      .information-table {
        background: var(--dark-mode-second);
        border-radius: 8px;

        .table-responsive {
          .table.table-striped {
            tbody {
              tr {
                td {
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }

    .product-information {
      .information-title {
        .title {
          color: #fff;
        }

        .stars {
          span {
            color: var(--dark-mode-white-second);
          }
          svg {
            path[fill-opacity="0.1"] {
              fill-opacity: 1;
              fill: #d9d9d980;
            }
          }
        }
      }

      .line {
        border-top: 1px solid var(--dark-mode-white);
      }

      .ratings {
        .rating {
          .stars {
            svg {
              path[fill-opacity="0.1"] {
                fill-opacity: 1;
                fill: #d9d9d980;
              }
            }
          }

          span {
            color: var(--dark-mode-white-second);
          }
        }
      }
    }
  }

  /* flash sales */
  .flash-sales-wrapper {
    border: 1px solid var(--dark-mode-white-second);
    background: var(--dark-mode-second);
    .sec-title {
      h2 {
        a {
          color: #fff;
        }
      }

      .flash-navigation {
        a {
          background-color: var(--dark-mode-white);
          color: #fff;
        }

        .flash-sales-slider-3-next,
        .flash-sales-slider-3-prev {
          background-color: var(--dark-mode-white);
          color: #fff;

          svg {
            path {
              stroke: #fff;
            }
          }
        }
      }
    }

    .flash-sales-slider-3 {
      .swiper-wrapper {
        .swiper-slide {
          border: 1px solid var(--dark-mode-white);
          background-color: var(--main-dark);

          .slide-container {
            .flash-pro-info {
              a {
                color: #fff;
              }

              .cat-stars {
                a {
                  color: #a9a9a9;
                }

                .stars {
                  svg {
                    path[fill-opacity="0.1"] {
                      fill-opacity: 1;
                      fill: #d9d9d980;
                    }
                  }
                }
              }
            }

            .flash-pro-price {
              span {
                span {
                  color: #a9a9a9 !important;
                }
              }

              p {
                color: #fff;

                sup {
                  color: #a9a9a9;
                }
              }
            }

            .flsh-pro-buttons {
              a {
                background-color: var(--dark-mode-second);
              }
            }

            .flash-pro-delivery {
              color: #fff;
            }
          }
        }

        .swiper-slide:hover {
          border-color: #fd9636;
        }
      }
    }
  }
}