/* swiper  */
.vitrin-box {
  .cat-name {
    color: #979797;
    font-size: 0.8rem;
  }

  .decprtionproduct {
    p {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  width: 1rem;
}

.offer {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .vitrin-container {
    min-height: 272px !important;
  }
}

.tab-label {
  font-weight: normal;
}

.tab-label .active {
  font-weight: 700;
}

.swiperVitrinTitle {
  .item {
    border-radius: 1.84rem;
    border: 0.1rem solid var(--text-dark-2);
    padding: 0.61rem 1.23rem;
    background-color: rgba(68, 68, 68, 0);

    &.active {
      background-color: var(--primary-main);
      /* یا هر رنگی که بخوای */
      border-radius: 1.84rem;
      border: 0.1rem solid rgba(68, 68, 68, 0);
      padding: 0.61rem 1.23rem;
      color: var(--text-light-4);
    }
  }

  display: flex;
  column-gap: 0.625rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 1rem;
}

.swiperVitrinTitle::-webkit-scrollbar {
  height: 6px;
}

.swiperVitrinTitle::-webkit-scrollbar-track {
  background: transparent;
}

.swiperVitrinTitle::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

.swiperVitrinTitle::-webkit-scrollbar-button {
  display: none;
  /* حذف فلش‌ها */
  width: 0;
  height: 0;
}

/* Firefox */
.swiperVitrinTitle {
  scrollbar-color: #888 transparent;
  scrollbar-width: thin;
}

.vitrin-container {
  background-color: var(--White);
  border-radius: 10px;
  border: 0.1rem solid var(--text-light-4);
  box-shadow: 0px 0px 1px 0px rgba(40, 41, 61, 0.04),
    0px 2px 4px 0px rgba(96, 97, 112, 0.15);

  svg {
    width: 1rem;
    height: 1rem;
  }

  .img-box {
    margin-bottom: 0.8rem;
    aspect-ratio: 2/1.5;
    overflow: hidden;

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

.backgroundVitrin {
  background-color: var(--text-light-3);
}

.itemVitrinProduct {
  .sec-title-row {
    .btn {
      background-color: var(--text-light-0);
      border-radius: 1.84rem;
      padding: 0.5rem 1rem;
      color: var(--text-light-4);
    }
  }

 
}

.SwiperVitrinTop {
  .swiper-slide {
    height: unset;
  }
}

.tabContent {
  .tab-content {
    padding: 0 2rem;
    display: none;

    &.active {
      display: block;
    }

    .slider-nav {
      padding: 0;
    }
  }
}

@media (max-width: 480px) {
  .ItSection {
    .sec-title-row {
      .title {
        white-space: nowrap;
        font-size: 0.9rem;
        font-weight: bold;
      }

      .btn {
        white-space: nowrap;
      }
    }
  }

}