.hj-comments {
  max-width: 980px;
  margin: 56px auto;
  padding: 28px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid #c0392b;
  border-radius: 4px;
  color: #f5f5f0;
}

.hj-comments-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hj-comments-sub {
  color: rgba(245, 245, 240, 0.6);
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.hj-comments-form {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.hj-comments-name,
.hj-comments-email,
.hj-comments-text {
  width: 100%;
  background: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: #f5f5f0;
  padding: 10px 12px;
  font-family: 'Lato', sans-serif;
}

.hj-comments-text {
  min-height: 104px;
  resize: vertical;
  line-height: 1.5;
}

.hj-comments-submit {
  justify-self: start;
  background: #c0392b;
  border: none;
  color: #fff;
  border-radius: 3px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hj-comments-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.hj-comments-status {
  min-height: 20px;
  color: rgba(245, 245, 240, 0.7);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.hj-comments-list {
  display: grid;
  gap: 10px;
}

.hj-comment-item {
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 12px;
}

.hj-comment-meta {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  color: rgba(245, 245, 240, 0.5);
  margin-bottom: 6px;
}

.hj-comment-name {
  color: #d4af37;
  font-weight: 700;
}

.hj-comment-text {
  color: rgba(245, 245, 240, 0.88);
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 700px) {
  .hj-comments {
    margin: 34px 14px;
    padding: 18px;
  }
}