@use "sass:math";

body {
  @apply bg-white;
}

:root {
  --f-size: 85%;
  --f-min-size: 240px;
  --f-max-size: 320px;
}
.filters {
  @apply invisible opacity-0 fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 transition-all duration-500 backdrop-blur-sm backdrop-filter cursor-pointer;

  &__wraper {
    @apply h-screen flex flex-col bg-white cursor-default transition duration-300;
    width: clamp(var(--f-min-size), var(--f-size), var(--f-max-size));
    transform: translateX(-320px);
    .simplebar-mask {
      @apply md:-mx-2.5 md:-mt-2.5;
    }
  }

  &__header {
    @apply p-4 md:py-3 flex;
    padding-bottom: 0;

    .title {
      @apply flex-1 pr-2 font-bold text-lg leading-normal;
    }

    .close {
      @apply cursor-pointer hover:opacity-100;

      .icon {
        @apply w-6 h-6 block;
      }
    }
  }

  &__body {
    height: calc(100vh - 56px);
  }

  &.show {
    @apply visible opacity-100;
    .filters__wraper {
      transform: translateX(0);
    }
  }

  &__list {
    @apply mb-2.5;
  }

  @screen md {
    @apply static opacity-100 transition-none bg-transparent visible backdrop-filter-none;

    &__header {
      @apply hidden;
    }

    &__wraper {
      @apply transition-none transform-none w-full h-auto bg-transparent;
    }

    &__body {
      @apply h-auto;
    }
  }

  .filter {
    @apply block bg-white;
    overflow: inherit;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);

    &__header {
      @apply z-10 relative flex items-center px-4 py-3.25 md:py-3 cursor-pointer hover:bg-opacity-75 transition-all duration-200 bg-washedWhite;
      //border-radius: 15px;

      .title {
        @apply flex-1 text-sm font-medium pr-5 truncate leading-normal;
        font-size: 20px;
      }

      .icon {
        @apply block w-5 h-5 transition-all duration-200;
      }
    }

    &__body {
      @apply invisible opacity-0 h-0 transition-all duration-200 max-h-48;

      .simplebar-track {
        @apply right-5;
      }
      .form {
        @apply px-5 md:px-7.5;
        //@apply py-3 px-5 md:px-7.5 py-5;
        &.price-form-filter {
          @apply pt-5 pb-2.5 md:py-5;
        }
        &--check {
          padding-top: 7px;
          padding-bottom: 7px;
          padding-right: 10px;
          color: #2b2a2a;
        }
      }
    }

    &.open {
      @apply pb-5;
      .filter__body {
        @apply visible opacity-100 h-auto transition-all duration-200 mt-2.5 md:mt-5 mb-0 pb-0;
      }
      .filter__header {
        border-radius: 15px 15px 0 0;
      }
      .filter__header .icon {
        @apply transform rotate-180;
      }
    }
  }
}

.product-cart {
  @apply overflow-hidden bg-white select-none;
  box-shadow: 0px 0px 10px 2px rgba(112, 112, 112, 0.15);
  border-radius: 15px;
  &__header {
    @apply relative;

    .image {
      @apply block relative z-0 bg-white hover:bg-black rounded-t-2xl overflow-hidden;
      padding-top: math.div(285, 310) * 100%;

      img {
        @apply block object-cover object-center absolute inset-0 w-full h-full transition-all duration-500 ease-in-out origin-center;
      }

      &:hover img {
        @apply opacity-75 transform scale-110;
      }
    }

    .fav {
      @apply block absolute right-spacer sm:right-4 top-spacer sm:top-4 z-10 rounded-full bg-white bg-opacity-70 hover:bg-primary text-black hover:bg-opacity-70 hover:text-white p-2;
      width: 50px;
      height: 50px;
      &.active {
        @apply bg-primary bg-opacity-70 text-white;
      }

      .icon {
        @apply block sm:right-5 sm:top-5;
        margin-left: 5px;
        margin-top: 5px;
        width: 24px;
        height: 24px;
      }
    }

    .sale {
      @apply block absolute left-spacer sm:left-5 top-5 z-10 rounded-full bg-primary text-white px-3 text-sm;
      padding: 5px 16px;
      height: 30px;
      width: 64px;

      .icon {
        @apply block w-5 h-5;
      }
    }
  }
  &__title {
    @apply pt-spacer pb-5 px-4 text-base sm:text-lg font-semi;

    a {
      @apply block text-black hover:text-primary h-16 sm:h-10 overflow-hidden leading-5;
    }
  }
  &__footer {
    @apply flex items-center pb-5 px-4;
  }

  &__price {
    @apply flex-1;

    .old-price {
      @apply text-xs text-grayDark line-through;
    }

    .price {
      @apply text-base text-black font-bold;
    }
  }
  &__button {
    a {
      @apply block rounded-full bg-white text-primary  border border-primary hover:bg-primary hover:text-white p-2;

      .icon {
        @apply block w-5 h-5;
      }
    }
  }
}

.category-page {
  @apply m-0 py-5;
  padding-bottom: 40px;

  .clear-filters {
    //@apply md:px-spacer;
    @apply mb-6.5;
  }
  .current-filters {
    &__list {
      @apply overflow-y-auto mb-4;
    }
    ul {
      @apply flex pb-2.5 space-x-2.5;

      li {
        @apply flex-none pt-0;
      }

      .filter-item {
        @apply flex items-center text-xs leading-4 py-2 px-3 rounded-full select-none bg-pink bg-opacity-50 border border-pink;
        border-radius: 30px;
        padding: 9.5px 14px;
        .delete {
          padding-left: 5px;
        }


        .icon {
          width: 15px;
          height: 15px;
          margin-right: 2px;
        }

        .title {
          @apply font-bold whitespace-nowrap flex-none;
          font-size: 16px;
          line-height: 24px;
        }

        .value {
          @apply px-1 flex-1 truncate;
          font-size: 14px;
          padding-left: 5px;
          //padding-right: 20px;
        }

        a {
          @apply hover:opacity-50;
        }
      }
    }
  }

  &__controls {
    @apply flex items-center mb-5 select-none;

    .icon {
      @apply w-5 h-5;
    }

    button {
      @apply text-xs sm:text-xl font-bold;

      &:hover {
        @apply text-primary;
      }
    }

    .control-left {
      @apply flex-1 px-spacer;
      padding-left: 0;

      h3 {
        @apply hidden md:block text-xl font-bold;

        span,
        small {
          @apply inline-block leading-none align-middle;
        }

        small {
          @apply rounded-full text-xs text-center w-5 h-5 border border-pink pt-0.5 ml-3;
          height: 22px;
          width: 22px;
          margin-top: 5px;
          font-weight: normal;
          font-size: 14px;
          margin-left: 10px;
        }
      }

      button {
        @apply block md:hidden;
      }
    }
    .control-right {
      @apply flex-none px-spacer;
      padding-right: 0;

      button .icon {
        @apply transform transition-transform duration-200;
      }

      .dropmenu__nav {
        @apply top-full -right-spacer w-auto shadow-md mt-3;

        li {
          @apply py-1;
        }

        a {
          @apply block whitespace-nowrap rounded-full bg-white p-3 text-center text-sm font-normal;

          &:hover,
          &.active {
            @apply bg-pinkLight;
          }
        }
      }
    }
  }
}
.favorites-page {
  @apply m-0;
  padding-top: 0px;
  padding-bottom: 40px;
  .rowfix {
    @apply text-center md:text-left;
  }
}
.form.form-check {
  padding-left: 20px !important;
}


.check-box-title {
  font-size: 18px;
  font-weight: 600;
}

//.category-page .clear-filters {
//  padding-left: 10px;
//  padding-right: 10px;
//}
.category-filter-box {
  //padding-right: 10px;
}



.product-info-description {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 30px;
}

.btn.btn--primary.bottom-cart {
  padding: 6.5px;
}
.old-price.bottom-old-price {
  font-weight: 500 !important;
  font-size: 12px !important;
  padding-top: 0px !important;
}
.price.product-newprice.bottom-new-price {
  font-weight: 500 !important;
  font-size: 24px !important;
}
.product__bottom,
.product__bottom.inview {
  transition: all 0.8s;
}

.category-page__controls .control-left button {
  display: flex;
}

.cantity-filters {
  margin-left: 10px;
  font-weight: normal;
  font-size: 14px;
  border-radius: 50%;
  margin-right: 10px;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #eaa699;
    left: 0;
    top: 3px;
  }
}

// .category-page__controls .icon {
//   margin-top: 6px;
// }
.col.xs-6.sm-4.md-6.lg-4.mb-5.category-img-blockF{
  //width: 100% !important;
}
.category-page {
  padding-top: 30px;
}

.owl-item{
  //margin: 0 20px;
  @apply cursor-pointer;
}

.category-container{
  max-width: 1320px;
  margin: 0 auto;
}

.product-cart__title a {
  height: 50px;
  line-height: 25px;
}

.btn.btn--primary.make-comand.popup-thanks{
  padding-left: 30px;
  padding-right: 30px;
  height: 45px;
}

.dropmenu__nav:hover{
  visibility: visible;
  opacity: 1;
  z-index: 20;
}
.dropmenu__nav{
  z-index: 20;
}


.modal__header .close {
  opacity: 1 !important;
}
.dropmenu__toggle span{
  color: #000000 ;
  transition: all .3s;
  height: 20px;
}
.dropmenu__toggle > svg.icon{
  @apply text-black transition-all duration-300;
  transform: rotate(-180deg);
}
.active-dropmenu span{
  @apply transition-all duration-300 text-primary;
}

.dropmenu__toggle.active-dropmenu > svg.icon{
  @apply transition-all duration-300 text-primary;
  transform: rotate(180deg);
}

nav.dropmenu__nav.active-dropmenu-nav{
  visibility: visible;
  opacity: 1;
  transition: all .3s;
}

nav.dropmenu__nav{
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

.row.category-row{
  //display: grid;
  //grid-template-columns: 1fr 1fr 1fr;
  //grid-column-gap: 20px;
}
.form--input.counter.bottom{
  position: relative;
}
// .btn.btn-minus.bottom{
//   top: 3px;
//   right: 107px !important;
// }

// .btn.btn-plus.bottom{
//   right: 9px;

// }

.product__bottom .product__cart__price,
.product__bottom .product__cart__count{
  flex: none !important;
}
.product__bottom .product__cart__count {
  margin-left: auto;
}

.category-page__controls .cantity-filters .icon {
  margin-top: 5px;
}

.title.contact-media{
  font-weight: 600;
}

.text-page .section__text {
  margin-bottom: 30px;
  color: #2b2a2a;
}