.active-thumbnail {
    border: 3px solid #0d6efd !important;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0d6efd;
}

.thumbnail-img {
    transition: all 0.2s ease;
}

.thumbnail-img:hover {
    transform: scale(1.05);
}

.smooth-collapse {
    transition: height 0.5s ease !important;
  }
  
  .smooth-collapse.collapsing {
    overflow: hidden;
    transition: height 0.5s ease !important;
  }
  
  .smooth-collapse.collapse.show {
    transition: height 0.5s ease !important;
  }

  .stock-flag {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-1px);
    z-index: 1;
}

.stock-flag span {
    display: inline-block;
    background-color: #000;
    color: white;
    padding: 5px 15px;
    position: relative;
    font-size: 0.85rem;
}

.stock-flag span:after {
    content: "";
    position: absolute;
    right: -10px;
    top: 0;
    border-top: 14px solid #000;
    border-right: 10px solid transparent;
    border-bottom: 14px solid #000;
}

.stock-flag:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    border-left: 10px solid transparent;
    border-top: 10px solid #000;
    filter: brightness(0.6);
}

@media (min-width: 992px) {
    .sticky-top-lg {
        position: sticky;
        top: 20px;
        z-index: 1020;
    }
}

@media (max-width: 991.98px) {
    .sticky-top-lg {
        position: static;
    }
}