.wishlist-toggle .icon-heart.added {
    color: red; /* Change color to red when added */
}


/* Update your CSS to include the modal context */
.product-size .dimension-box,
.modal .dimension-box {
    padding: 8px 16px;
    border: 2px solid #ddd;
    cursor: pointer;
    font-size: 13px;
    border-radius: 6px;
    /* ... rest of your styles ... */
}

.dimension-box.active {
    background: #4A3B32;
    color: #fff;
    border-color: #4A3B32;
}

.dimension-box.active, .option-swatch-box.active {
    background: #4A3B32 !important;
    color: #fff !important;
    border-color: #4A3B32 !important;
}



/* Scoped styles: These will ONLY affect your category section */
.category-section .category-btn {
  background: transparent !important;
  border: 1px solid #C6E5E0 !important;
  color: #C6E5E0 !important;
  border-radius: 12px;
  padding: 0.6rem 2rem;
  font-family: 'Lancelot', serif;
  font-size: 1.2rem;
  font-weight: 300;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

/* Hover - Matches your requested style */
.category-section .category-btn:hover {
  background: #E47C44 !important;
  border-color: #E47C44 !important;
  color: #fff !important;
}

/* Active/Selected - No conflict with Bootstrap .active */
.category-section .category-btn.active,
.category-section .category-btn.selected {
  background: #E47C44 !important;
  border-color: #E47C44 !important;
  color: #fff !important;
}