/* ===== Favorite Style: Bigger color swatches (product page) ===== */

/* контейнер (щоб не "гуляли" відступи) */
.side-bar__colors {
  display: flex;
  align-items: center;
  gap: 10px; /* інтервал між кольорами */
}

/* зовнішнє коло */
.side-bar__colors .big-circle {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;
  border: 2px solid rgba(0,0,0,0) !important;
  box-sizing: border-box !important;
}

/* внутрішнє коло (сам колір) */
.side-bar__colors .small-circle {
  width: 22px !important;
  height: 22px !important;
  display: block !important;

  border-radius: 50% !important;
  background: var(--tooltip-color) !important;
}

/* активний колір (обводка сильніша) */
.side-bar__colors .tabs__triggers-item.active .big-circle,
.side-bar__colors .tabs__triggers-item._active .big-circle {
  border-color: rgba(0,0,0,0.7) !important;
}

/* hover */
.side-bar__colors .tabs__triggers-item:hover .big-circle {
  border-color: rgba(0,0,0,0.55) !important;
}

/* мобільний трохи менше, щоб не ламало верстку */
@media (max-width: 480px) {
  .side-bar__colors { gap: 12px; }
  .side-bar__colors .big-circle { width: 26px !important; height: 26px !important; }
  .side-bar__colors .small-circle { width: 18px !important; height: 18px !important; }
}