:root {
  --Text-Accent: #5C7A57;
  --Text-Primary: #333;
}

.section {
  margin-top: 120px;

  @media(max-width: 992px) {
    margin-top: 80px;
  }

  @media(max-width: 600px) {
    margin-top: 60px;
  }
}

.main-button {
  border-radius: 8px;
  background-color: #3E534D;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-family: 'Evolventa';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 132%;
  letter-spacing: -0.36px;
  transition: color 0.3s ease-in, background-color 0.3s ease-in;

  &:hover {
    color: #fff;
    background-color: #3e534dd9;
  }

  @media(max-width: 600px) {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 132%;
    letter-spacing: -0.32px;
  }
}


.section__title {
  color: var(--Text-Accent);
  font-family: "Savoye LET";
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 80%;

  @media(max-width: 992px) {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
  }

  @media(max-width: 600px) {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
  }
}

.section__subtitle {
  color: var(--Text-Primary);
  font-family: 'Evolventa';
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%;
  letter-spacing: -0.64px;

  @media(max-width: 992px) {
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 124%;
    letter-spacing: -0.64px;
  }

  @media(max-width: 600px) {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 124%;
    letter-spacing: -0.48px;
  }
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 27px;
  padding-top: 12px;
  padding-bottom: 12px;

  & div {
    display: flex;
    align-items: center;
    gap: 8px;

    &:last-child {
      pointer-events: none;

      & svg {
        display: none;
      }
    }
  }

  & span {
    color: #595959;
    font-family: 'Evolventa';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 124%;
    letter-spacing: -0.28px;
  }
}

.products__section {
  margin-top: 31px;
}

.products-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  @media(max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media(max-width: 600px) {
    grid-template-columns: repeat(1, 1fr);
  }

  & .product-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 459px;
    width: 100%;
    padding: 16px 16px 32px 16px;
    border-radius: 12px;
    background-color: #F9F9F9;
    cursor: pointer;
    position: relative;
    justify-content: space-between;

    @media(max-width: 1024px) {
      max-width: 100%;
    }

    & .product-item__head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      & .product-item__cat {
        color: var(--Text-Accent);
        font-family: 'Evolventa';
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: -0.36px;
        border-radius: 16px;
        background: rgba(92, 122, 87, 0.24);
        backdrop-filter: blur(4px);
        padding: 8px 12px;
      }

      & .product-item__stock {
        border-radius: 16px;
        background: rgba(92, 122, 87, 0.24);
        backdrop-filter: blur(4px);
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 8px;

        & svg {}

        & span {
          color: var(--Text-Accent);
          font-family: 'Evolventa';
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: -0.36px;
        }
      }
    }

    & .product-item__image {
      width: 100%;
      height: 327px;

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

    & .product-item__body {
      display: flex;
      flex-direction: column;
      gap: 16px;

      & .product-item__rating {
        display: flex;
        gap: 2px;
        align-items: center;

        & .product-item__rating__stars {
          display: flex;
          align-items: center;
          gap: 2px;

          & svg {}
        }

        & .product-item__rating-count {
          color: var(--Text-Primary);
          font-family: 'Evolventa';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: -0.28px;
        }
      }

      & .product-item__info {
        display: flex;
        flex-direction: column;
        gap: 16px;

        & .product-item__for {
          color: #595959;
          font-family: 'Evolventa';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 124%;
          letter-spacing: -0.28px;
          margin-bottom: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -moz-box;
          -moz-box-orient: vertical;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          line-clamp: 1;
          box-orient: vertical;
        }

        & .product-item__name {
          color: var(--Text-Primary);
          font-family: Evolventa;
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: 124%;
          letter-spacing: -0.48px;
          transition: color .3s ease-in;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -moz-box;
          -moz-box-orient: vertical;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          line-clamp: 1;
          box-orient: vertical;

          &:hover {
            color: #5C7A57;
          }
        }


      }

      & .product-item__bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        & .product-item__price {
          color: var(--Text-Primary);
          font-family: Evolventa;
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: 124%;
          letter-spacing: -0.48px;
        }

        & .product-item__points {
          display: flex;
          align-items: center;
          gap: 4px;

          & .product-item__points-icon {
            & img {}
          }

          & span {
            color: var(--Text-Primary);
            font-family: Evolventa;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 132%;
            letter-spacing: -0.32px;
          }
        }
      }
    }

    & .produvt-item__adv {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      position: relative;

      & .produvt-item__adv-title {
        color: #000;
        text-align: center;
        font-family: 'Evolventa';
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 124%;
        letter-spacing: -0.48px;
      }
    }

    &:has(.produvt-item__adv) {
      background-color: transparent;
    }
  }


  & .dec-p {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 2rem;
    max-width: 30%;
  }
}



.consult-bot__phone {
  max-width: 248px;
  width: 100%;
  height: 518px;
  border-radius: 38.37px;
  background: #282828;
  overflow: hidden;
  box-shadow: 0px 30.308px 63.587px 0px rgba(99, 120, 84, 0.09), 0px 12.662px 26.565px 0px rgba(99, 120, 84, 0.06), 0px 6.77px 14.203px 0px rgba(99, 120, 84, 0.05), 0px 3.795px 7.962px 0px rgba(99, 120, 84, 0.05), 0px 2.016px 4.229px 0px rgba(99, 120, 84, 0.04), 0px 0.839px 1.76px 0px rgba(99, 120, 84, 0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;

  @media(max-width: 600px) {
    max-width: 177px;
    height: 371px;
  }

  & .consult-bot__preview {
    max-width: 232px;
    width: 100%;
    max-height: 502px;
    height: 100%;
    border-radius: 30.377px;
    overflow: hidden;

    @media(max-width: 600px) {
      height: 356px;
      max-width: 166px;
    }

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

  & .consult-phone__dynamic {
    border-radius: 23.703px;
    background: #000;
    width: 67px;
    height: 20px;
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    margin: 0 auto;

    @media(max-width: 600px) {
      width: 48px;
      height: 14px;
    }
  }

}

ul li {
  &:before {
    display: none;
  } 
}

@font-face {
  font-family: "Evolventa";
  src:
    local("Evolventa"),
    url("../fonts/Evolventa-Regular.otf") format("opentype"),
}

@font-face {
  font-family: "Savoye LET";
  src:
    local("Savoye LET"),
    url("../fonts/savoyeletplain.ttf") format("opentype"),
}