.description-wrapper {
    position: relative;
  }
  
  .category-description {
    max-height: 400px; /* Limit height for collapsed state */
    overflow: hidden;
    transition: max-height 0.3s ease; /* Smooth transition for height changes */
    position: relative;
  }
  
  .description-wrapper.expanded .category-description {
    /* A large value to ensure full expansion */
    max-height: 100000px; 
  }
  
  button.toggle-content {
    display: flex;
    margin:auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    background-color: #000; /* Your theme's accent color */
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 10px;
    border: 2px solid #000;
    width: 175px;
  }
  
  button.toggle-content:hover {
    background-color: #fb6727;
    color: #fff;
    border-color: #fb6727;
  }
  
  .button-text {
    font-size: 14px;
    font-weight: 500;
  }
  
  .chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin: 0 6px 6px 0;
  }
  
  .description-wrapper.expanded .chevron {
    transform: rotate(-135deg); /* Rotate the chevron for "collapse" */
    margin: 0 6px 0 0;
  }
  
  /*fade effect when content is collapsed*/
.category-description {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

.description-wrapper.expanded .category-description {
  -webkit-mask-image: none; /* Remove fade when expanded */
  mask-image: none;
}