/**
 * QSuli Color Swatches
 * Przełącznik kolorów na stronie produktu
 */
.color-options {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 36px !important;
}

.color-options a.color-swatch {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(0, 0, 0, 0.25) !important;
  box-sizing: content-box !important;
}

.color-options a.color-swatch.active {
  border-color: #111 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111 !important;
}

/* Kadence Query Card – siatka produktów */
.kb-query-item .color-options {
  margin: 8px 0 6px !important;
  min-height: 28px !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.kb-query-item .color-options a.color-swatch {
  width: 22px !important;
  height: 22px !important;
}

.kb-query-item .color-swatch-more {
  font-size: 12px !important;
  line-height: 22px !important;
  color: #555 !important;
  white-space: nowrap !important;
}

/* Query Card – mobile: kropki mniejsze niż desktop (22px → 16px) */
@media (max-width: 767px) {
  .kb-query-item .color-options {
    margin: 6px 0 4px !important;
    min-height: 20px !important;
    gap: 6px !important;
  }

  .kb-query-item .color-options a.color-swatch {
    width: 16px !important;
    height: 16px !important;
    border-width: 1.5px !important;
  }

  .kb-query-item .color-options a.color-swatch.active {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #111 !important;
  }

  .kb-query-item .color-swatch-more {
    font-size: 11px !important;
    line-height: 16px !important;
  }
}