/* Карточка коментаря */
.comm-card{
 background:#fff;
 border:1px solid #e5e7eb;
 border-radius:12px;
 box-shadow:0 6px 20px rgba(0,0,0,.06);
 padding:14px;
 margin:16px 0;
}

/* Шапка: аватар + мета */
.comm-card__head{ display:flex; gap:12px; align-items:flex-start; }
.comm-card__avatar{ flex:0 0 48px; }
.comm-card__avatar img{ width:48px; height:48px; border-radius:50%; object-fit:cover; display:block; border:1px solid #e5e7eb; }
.svg-icon{ width:20px; height:20px; display:inline-block; vertical-align:-3px; fill:currentColor; }
.svg-user{ width:48px; height:48px; color:#9ca3af; }

.comm-card__meta{ flex:1 1 0; min-width:0; display:flex; justify-content:space-between; gap:10px; }
.comm-card__line{ font-size:14px; color:#111827; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.comm-num{ color:#6b7280; text-decoration:none; }
.comm-user{ font-weight:600; color:#111827; text-decoration:none; }
.comm-user:hover{ text-decoration:underline; }
.comm-dot{ color:#9ca3af; }
.comm-time{ color:#6b7280; }
.comm-ref a{ color:#2563eb; }

/* Рейтинг + модерація */
.comm-card__rate{ display:flex; align-items:center; gap:8px; }
.rate-btn{ width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; background:#fafafa; }
.rate-btn:hover{ background:#f3f4f6; }
.rate-good{ color:#16a34a; }
.rate-bad{ color:#dc2626; }
.rate-val{ min-width:20px; text-align:center; font-weight:600; color:#374151; }
.comm-moder{ margin-left:6px; }

/* Тіло */
.comm-card__body{ margin-top:10px; }
.comm-message{ line-height:1.5; color:#111827; }
.comm-message img{ max-width:100%; height:auto; }
.comm-answer{ margin-top:8px; padding:8px 10px; background:#f9fafb; border:1px solid #eef2f7; border-radius:8px; }
.comm-actions{ margin-top:8px; }
.comm-reply{ color:#2563eb; text-decoration:none; }
.comm-reply:hover{ text-decoration:underline; }

/* Щоб SVG-іконки не «роздувались» */
.u-rate-btn .svg-icon,
.comm-card__rate .svg-icon{ width:18px; height:18px; }

/* Мобільна адаптація */
@media (max-width:720px){
 .comm-card__avatar{ flex-basis:40px; }
 .comm-card__avatar img, .svg-user{ width:40px; height:40px; }
 .comm-card__meta{ flex-direction:column; align-items:flex-start; gap:6px; }
}